Examples
Last updated
Was this helpful?
Last updated
Was this helpful?
On this page, you will find example widgets that are created as you follow the chapters. You can download the widgets and then import them into your own library to take a look. You can even use and modify them to your liking if you wish.
Please note that the widgets created in the widget chapters are being updated to comply with CSP (Content Security Policy) standards. They are also being modified to prevent any collisions in the global scope.
Below are the widgets that you will create as you follow the basics module.
A simple widget that demonstrates the use of the text property, HTML-encoded to output a name.
A widget that simulates a six-sided die. To ensure that this widget is CSP (Content Security Policy) compliant, it utilizes the startupscript to add a click listener to the "Roll Again" button, which refreshes the page.
This widget is similar to the Alert component in Bootstrap. You can expand or collapse the message by clicking on it, demonstrating how the WEM view state fields functions.
This widget functions similarly to Example 1, but it utilizes the WEM Runtime.viewState JavaScript API instead.
This message widget uses sessionStorage to store the view state and employs an ES module that utilizes Shadow DOM to prevent global scope collisions.
This widget demonstrates how to use the import() function to dynamically load script modules, preventing collisions in the global scope. It also utilizes the Shadow DOM to style the widget, further avoiding CSS conflicts.
This widget demonstrates how easy it is to implement placeholders and highlights their powerful capabilities. It also provides an example of how to create a Template Editor Script.
More coming soon.