November Happy Hour will be moved to Thursday December 5th.

John-Philip Johansson
Feb 4, 2019
  4171
(3 votes)

Making Blocks editable in a Content Area without Razor

To get an editing overlay on On-Page Edit (OPE) for a content area is quite easy. It's like any other editable property: add the data-epi-edit="PropertyName" attribute (CMS UI 11.16.0, earlier versions require three attributes, see blog post). Depending on your markup you might have to put the attribute on a parent element, otherwise the overlays might get shifted due to styling.

Example from MusicFestival's LandingPage.vue:

<div v-epi-edit="'MainContentArea'">
	<ContentArea :model="model.mainContentArea"></ContentArea>
</div>

This enables the content area overlay, but not for the contents in it. You can still work with it using the content area menu that shows up when clicking the content area. It allows re-ordering, dragging and dropping content, and creating new blocks.

blobid0.png

If you want a nicer experience, similar to when using the @Html.PropertyFor() helper in Razor, then you just need to add the block id to each block as a HTML attribute: data-epi-block-id="TheContentLink".

Example from MusicFestival's ContentArea.vue:

<div :key="index" v-for="(block, index) in model" class="Grid-cell" :class="getDisplayOption(block.displayOption)">
	<BlockComponentSelector :data-epi-block-id="isEditable ? block.contentLink.id : null" :model="block"></BlockComponentSelector>
</div>

imagen31q.png

If you're using the ContentDeliveryAPI add-on then the block id is available on the block's contentLink.id. As you can see above, the blocks are rendered by a ContentArea Vue.js component by iterating over the blocks given by the page's model.mainContentArea. The block overlay is only used when rendered in a content area, so it's not necessary to always set it (which would have been the case if we added the id in BlockComponentSelector.vue instead).

One non-obvious detail might be the conditional to only render the data-epi-block-id when the variable isEditable is true. This is to avoid rendering the property in View mode. It's a good idea to avoid leaking details about your CMS or server to your site visitors. :)

Read more

Developer Guides:

MusicFestival has been updated: https://github.com/episerver/musicfestival-vue-template/blob/master/src/MusicFestival.Vue.Template/Assets/Scripts/components/ContentArea.vue

Feb 04, 2019

Comments

Please login to comment.
Latest blogs
Optimizely SaaS CMS + Coveo Search Page

Short on time but need a listing feature with filters, pagination, and sorting? Create a fully functional Coveo-powered search page driven by data...

Damian Smutek | Nov 21, 2024 | Syndicated blog

Optimizely SaaS CMS DAM Picker (Interim)

Simplify your Optimizely SaaS CMS workflow with the Interim DAM Picker Chrome extension. Seamlessly integrate your DAM system, streamlining asset...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Optimizely CMS Roadmap

Explore Optimizely CMS's latest roadmap, packed with developer-focused updates. From SaaS speed to Visual Builder enhancements, developer tooling...

Andy Blyth | Nov 21, 2024 | Syndicated blog

Set Default Culture in Optimizely CMS 12

Take control over culture-specific operations like date and time formatting.

Tomas Hensrud Gulla | Nov 15, 2024 | Syndicated blog

I'm running Optimizely CMS on .NET 9!

It works 🎉

Tomas Hensrud Gulla | Nov 12, 2024 | Syndicated blog

Recraft's image generation with AI-Assistant for Optimizely

Recraft V3 model is outperforming all other models in the image generation space and we are happy to share: Recraft's new model is now available fo...

Luc Gosso (MVP) | Nov 8, 2024 | Syndicated blog