John-Philip Johansson
Jan 29, 2019
  5130
(6 votes)

One OPE attribute to rule them all: data-epi-edit (CMS UI 11.16.0)

In CMS UI 11.16.0, we're making it easier for everyone doing client-side rendered websites to mark up their HTML.

Before 11.16.0

In a previous post, I explained how to make an element editable in On-Page Edit when rendered by a client-side framework (e.g. React, Angular, Vue, etc). It was necessary to add three attributes:

<span data-epi-property-name="YourProperty" data-epi-property-render="none" data-epi-property-edittype="floating">{your JS framework decides how the value is actually rendered}</span>

This is slightly verbose. Although you could wrap it in some helper method in your JavaScript framework of choice (like we did in the MusicFestival sample site), it would require less "magic" or less reading of our documentation if there was only one attribute for frontend developers to remember. That's why we're introducing data-epi-edit. It does not have any specific behavior to learn about. It's equivalent to setting the properties above, and setting any of those properties as well will simply be ignored.

With 11.16.0

It's now enough with one simple attribute:

<span data-epi-edit="YourProperty">{your JS framework decides how the value is actually rendered}</span>

One note

We recommend that you don't render any data-epi-* attributes in View mode, as to not give too many details about the internal workings of your site. That's what @Html.PropertyFor() and @Html.EditAttributes() do when using Razor views. When taking over the rendering on the client-side, this responsibility moves over as well. One way is to use the global epi.beta.isEditable property (CMS UI 11.11.0, see blog or documentation) to toggle the rendering off and on, as we've done in MusicFestival (see here and here).

Learn more

Documentation: https://world.episerver.com/documentation/developer-guides/CMS/editing/on-page-editing-with-client-side-rendering/

MusicFestival has been updated to use this in the Vue directive v-epi-edit: https://github.com/episerver/musicfestival-vue-template/blob/129be15ae4a/src/MusicFestival.Vue.Template/Assets/Scripts/directives/epiEdit.js

Jan 29, 2019

Comments

Valina Eckley
Valina Eckley Jan 29, 2019 07:59 PM

Nice!  Great work JP!

Jake Jones
Jake Jones Mar 6, 2019 04:16 PM

Finally had a chance to check this out and it worked flawlessly. Nice job!

Please login to comment.
Latest blogs
Prevent SQL error on CMS 12 minor version update

If using an early version of CMS 12, like 12.0, you will get an SQL error after upgrading to newer patch versions. The fix for this is minor locall...

Daniel Halse | Jun 8, 2023

Extended SelectionFactory

In one of my previous articles I described new Color Picker widget. Today I’d like to show another simple property. I prepared extended version of...

Grzegorz Wiecheć | Jun 7, 2023 | Syndicated blog

Unlock Creativity with Text Generation

Need fresh and innovative content ideas? The Epicweb.Optimizely.AIAssistant Addon has got you covered with its text generation feature. In this blo...

Luc Gosso (MVP) | Jun 6, 2023 | Syndicated blog

Breaking Language Barriers with Multilingual Text Translation

In today's globalized world, effective communication across languages is essential. The Epicweb.Optimizely.AIAssistant Addon makes language...

Luc Gosso (MVP) | Jun 6, 2023 | Syndicated blog

Optimizely Search & Navigation - Get autocomplete suggestions in right language

When you are using Optimizely Search & Navigation (Find) to help you generate autocomplete suggestions server side in a multi-language scenario it...

Allan Thraen | Jun 5, 2023 | Syndicated blog

Easy property inheritance in Optimizely CMS

Ever needed a way to inherit property values down through the page hierarchy in Optimizely CMS 12? Now there is an easy way to enable that.

Allan Thraen | Jun 5, 2023 | Syndicated blog