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

"epi-edit" attribute for simple OPE markup

Fixed in

EPiServer.CMS.UI 11.16.0

(Or a related package)

Created

Dec 11, 2018

Updated

Jan 07, 2022

Area

CMS UI

State

Closed, Acceptance tests pass


Description

Provides a built in and simple HTML attribute to make elements editable in On-Page Edit:
data-epi-edit="YourProperty"

It should be easy for front-end developers to use, so it should "just work" - meaning it does not have any specific behavior to learn about. It's equivalent to setting these properties, and setting these properties to any other value will be ignored:

  • data-epi-property-name="YourProperty": This attribute marks an element for editing
  • data-epi-property-render="none": This attribute prevents the DOM from being modified directly when editing
  • data-epi-property-edittype="floating": This attribute creates a dialog for editing, and should be used for string types

As with any data-epi attributes, they should preferably not be rendered in View mode (when the visitor sees the site). One way to consistently render this attribute is to look at the global `epi.beta.isEditable` property.

Basic usage:

Before 11.16.0

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>

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>

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