Setting up inline editing

To enable inline editing of property values in the preview window html, tags must be annotated with a data attribute called "data-waf". The value of this attribute refers to the property the html element represents. 

As an example, let's say you are using the name property of a content in the title of the page. The following html code will enable inline editing of the contents name property:

<h1 waf-data="Name">My Content Name</h1>

The full format of the value for a content is:

([NodeId/Guid],[LCID],[Revision]).[PropertyName]

For inner content it is:

([NodeId/Guid],[LCID],[Revision]).[PropertyName].([ContentId]).[PropertyName]»

For inner contents of inner content it is:

([NodeId/Guid],[LCID],[Revision]).[PropertyName].([ContentId]).[PropertyName]([ContentId]).[PropertyName]

And similar for deeper inner content models.

[NodeId/Guid] is only necessary for contents that is not part of the page being viewed. ( ie, the url field match the contents address property )

[LCID],[Revision] is only necessary for pages with multiple languages and revisions.

In its simplest form only the property name is necessary:

<h1 data-waf=’Name’>Title</h1>

<div data-waf=’Ingress’>Ingresstext…</div>

<img data-waf=’IngressImage’ src=…>

As already mentioned, this requeries that the url is associated with a content and that the url match the contents address property.

If the content is not associated with the page, as often is the case, you must specify the content node or guid. A typical example would be a menu:

<a data-waf="(16041).Name" href="/test-article">Test Article</a></li><li class="active">

<a data-waf="(19).Name" href="/">Home</a></li><li>

<a data-waf="(62).Name" href="/destinations">Destinations</a></li><li>

<a data-waf="(122).Name" href="/lodgings">Lodgings</a></li><li>

Inner contents are done in this way: 

<img data-waf="(20).Paragraphs(18152).Pictures(18168).File" src=…class="picture-series-picture" />

You may add the attributes manually in the templates or use the built in API to generate them. The class is called "WAFAttribute"

The class offers several alternatives in generating the tags. We recommend using this API as it makes it easier. Finding the correct value of nested inner contents can be complicated.

Example:

sb.AppendLine("<div " + WAFAttribute.NameAndValue(SeriesPicture.PropertyIdDescription, pic) + ">" + HttpUtility.HtmlEncode(pic.Description) + "</div>");

Important note:  

It is very important the the contents of the whole HTML element match that of the property value. Inline editing will not work if the field for example contains a shortened version of the full property value.