Episerver

Exploring OPE with Angular and ReactOn-Page Edit ♥ Client-Side Rendering

Episerver Ascend

Stockholm, Sweden

2018-05-15

Episerver

John-Philip “JP” Johansson

Team Lead

CMS UI – we make the editor UI

jp.johansson@episerver.com

CMS UI team blog

http://world.episerver.com/blogs/?type=cmsblog

We want to blog more.

Encourage us.

Episerver

Short story

2013 – AngularJS site

2013 – AngularJS site

2013 – AngularJS site

Episerver

7 common scenarios

Time constraint: Solutions will swoosh by ☺

<div @Html.EditAttributes(m => m.Image)><img ng-src="{{$ctrl.image.url}}" /><em>{{$ctrl.image.text}}</em>

</div>

1. Using JS framework for rendering properties

Step 1/2: Owning the rendering

@Html.EditAttributes(m => m.Image)><img ng-src="{{$ctrl.image.url}}" /><em>{{$ctrl.image.text}}</em>

</div>

<div

Step 1/2: Owning the rendering

data-epi-property-name="image"><img ng-src="{{$ctrl.image.url}}" /><em>{{$ctrl.image.text}}</em>

</div>

<div Old

&

Optional

Step 1/2: Owning the rendering

data-epi-property-name="image">

<img ng-src="{{$ctrl.image.url}}" /><em>{{$ctrl.image.text}}</em>

</div>

data-epi-property-render="none"><div

New value

CMS UI 10.12.0

{"successful":true,"contentLink":"1317_1356","hasContentLinkChanged":false,"savedContentLink":"1317_1356","publishedContentLink":null,"properties":[

{"name":"image","value":"9","successful":true,"validationErrors":null,"committed":false

}],"validationErrors":[]

}

epi.subscribe("beta/contentSaved",

function(details) {console.log("Update!", details);

}

);

Step 2/2: Updating the client-side data

CMS UI 10.12.0

https://world.episerver.com/blogs/john-philip-johansson/dates/2017/10/taking-control-of-client-side-rendering-in-ope-beta/

2. Episerver renders additional HTML element in edit mode

<div>The property will be rendered here:@Html.PropertyFor(m => m.Text

</div>)

If this had been a <p> then the styling

would break even more

2. Episerver renders additional HTML element in edit mode

<div>The property will be rendered here:

new { CustomTag = "span"})

</div>

@Html.PropertyFor(m => m.Text

https://world.episerver.com/blogs/john-philip-johansson/dates/2018/4/designing-frontends-for-ope-without-wrapping-elements/

3. Client-side page switch breaks edit context

3. Client-side page switch breaks edit context

• Consider the users mental model of Pages and Blocks

• Routing in SPA’s

• Turn off in Edit mode

• Forward to Episerver

• Handles language, personalization, and more

Element not present on load

does not get editing context

4. Client-side DOM changes break on-page editing overlays

Missing blue outline

11.2.0: Publish messageepi.publish("beta/domUpdated");

11.4.0: Auto-detected

4. Client-side DOM changes break on-page editing overlays

Blue outline!

CMS UI 11.2.0

CMS UI 11.4.0

5. Preview content rendered outside of Episerver

5. Preview content rendered outside of Episerver

• IFrameComponent and update view on "beta/contentSaved“

• See lab 5:

https://github.com/seriema/ascend2018-lab-extend-ui

• Rendered in node.js

• Common for SEO

• Mobile apps and other targets

6. Resolve non-ASP.NET templates for content/property types

6. Resolve non-ASP.NET templates for content/property types

Under consideration. Meanwhile, some tips:

• Simple node server

• https://github.com/aspnet/JavaScriptServices

• ReactJS.NET

• Episerver TemplateDescriptor

• https://world.episerver.com/documentation/developer-guides/CMS/rendering/templatedescriptor-and-tags/

7. Content API for non-Episerver rendering

• A lot of freedom (too much?)

• Reinventing the wheel

7. Content API for non-Episerver rendering

JOS.ContentSerializer (formerly JOS.ContentJson)

• Community driven

• Sensible defaults, and customizable

• https://github.com/joseftw/JOS.ContentSerializer

JOS.ContentAPI

• Uses JOS.ContentSerializer

• Doesn’t require Find

• https://github.com/joseftw/JOS.Epi.ContentApi

7. Content API for non-Episerver rendering

EPiServer.ContentDeliveryApi 1.0.0 (beta)

• Doesn’t require Find everywhere

• http://nuget.episerver.com/package-

details/?packageId=EPiServer.ContentDeliveryApi

https://sdk.episerver.com/ContentDeliveryAPI/Index.html

Episerver

Demo

Episerver

Now what?

Sticky-View Mode

CMS UI 10.11.0

Sticky-View Mode

Avoid using internal and

obsolete CMS UI API’s

Lint your JavaScript

Online resources

• CMS Team blog posts on world.episerver.com/blogs

• CMS Developer guide on world.episerver.com/documentation

• GitHub

• github.com/episerver/AlloyReact

• github.com/episerver/AlloyAngularJS

• github.com/episerver/AlloyNoJS

• github.com/seriema/eslint-plugin-episerver-cms

• github.com/seriema/ascend2018-lab-extend-ui

We’re curious on your solutions

What are you or your editors experiencing with On Page Editing and

client-side frameworks? Let us know!

jp.johansson@episerver.com

Episerver

Questions?

Episerver

THANK YOU!