Frontend development

Widget loaded event

Use the widgetLoaded serves as a hook to apply changes to a widget after the DOMContentLoaded event has already fired.

The event is fired on the following occasions:

  • In edit view - every time a widget is added or reloaded in the page, template, or form designer
  • On the frontend – whenever a personalized widget is being rendered

The event has a details property, which on its turn has two properties:

  • element – the HTML element of the widget
  • model – the widget model

The following sample demonstrates how to use the event:

JavaScript
(function () {
   let counter = 0;
   document.addEventListener('DOMContentLoaded', function () {
       enhanceWidgets(document, "Initial");
   });

   document.addEventListener('widgetLoaded', function (args) {
       if (args.detail.model.Name === "ScriptsTest") {
           enhanceWidgets(args.detail.element, `Update ${counter++}`);
       }
   });

   function enhanceWidgets(parentElement, text) {
       parentElement.querySelectorAll('.scriptTest').forEach(element => {
           element.innerText = text;
       });
   }
})();
Want to learn more?
Enhance your Sitefinity skills by enrolling in free training sessions. Become Sitefinity certified through Progress Education Community to strengthen your professional credentials.
New to Sitefinity?