London Dev Meetup Rescheduled! Due to unavoidable reasons, the event has been moved to 21st May. Speakers remain the same—any changes will be communicated. Seats are limited—register here to secure your spot!

John-Philip Johansson
Mar 13, 2018
  4022
(2 votes)

"domUpdated" is no longer needed (BETA) (CMS UI 11.4.0)

You can read more about how you enable Beta features in the documentation.

In CMS UI 11.2.0 we introduced the "beta/domUpdated" message that refreshes the On-Page Editing (OPE) overlays. Based on feedback we received at presentations and on Github, we are now watching the view for changes to DOM elements with the "data-epi-property-name" property. You no longer need to do this:

epi.publish("beta/domUpdated")

If the DOM changes so that there are new elements with data-epi-property-name, or existing elements change their value to another property name, then the overlays automatically gets updated.

Previous considerations

As mentioned in the previous post, there were two reasons to introduce a message instead of automatically refreshing:

1. UI becomes unresponsive as the spamming is ongoing
2. Memory usage increases

There was also a third reason:

3. Giving you control of when to refresh, as to minimize 1 and 2.

But reason 3. seems like it just lead to boilerplate code that many would rather avoid, and we had already made changes to minimize the impact of 1. and 2., so when we got the question "can't it just 'work'?" we decided to make this change. The overlays will update by themselves now.

Image after.gif

Benefits

The main benefit is that it's now easier for a partner to make great client-side rendered UI's that still work nicely in OPE. That also makes our communication around features like this easier, because you don't have to do anything. cool 

Code on Github

Please contribute to these repos to help each other with how to work with OPE and your favourite JavaScript framework!

The example in our React sample repo has been updated to remove the "beta/domUpdated" code: https://github.com/episerver/AlloyReact

Please contribute an example to the AngularJS repo: https://github.com/episerver/AlloyAngularJS

Mar 13, 2018

Comments

Please login to comment.
Latest blogs
Natural Language Q&A in Optimizely CMS Using Azure OpenAI and AI Search

In Part 2, we integrated Azure AI Search with Azure Personalizer to build a smarter, user-focused experience in Optimizely CMS. We used ServiceAPI ...

Naveed Ul-Haq | Apr 25, 2025 |

Identifying Spike Requests and Issues in Application Insights

Sometimes within the DXP we see specific Azure App Instances having request spikes causing performance degredation and we need to investigate. I fi...

Scott Reed | Apr 25, 2025

Optimizely Frontend Hosting Beta – Early Thoughts and Key Questions

Optimizely has opened the waitlist for its new Frontend Hosting capability. I’m part of the beta programme, but my invite isn’t due until May, whil...

Minesh Shah (Netcel) | Apr 23, 2025

Developer Meetup - London, 21st May 2025

The London Dev Meetup has been rescheduled for Wednesday, 21st May and will be Candyspace 's first Optimizely Developer Meetup, and the first one...

Gavin_M | Apr 22, 2025