Post on 22-May-2020
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!