Examples

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.

Basics

Below are the widgets that you will create as you follow the basics module.

Hello, You!

A simple widget that demonstrates the use of the text property, HTML-encoded to output a name.

1KB

Hello, You!.zip

archive

Open

Six-Sided Die

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.

967B

Six-Sided Die.zip

archive

Open

Message - Example 1

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.

2KB

Message - Example 1.zip

archive

Open

Message - Example 2

This widget functions similarly to Example 1, but it utilizes the WEM Runtime.viewState JavaScript API instead.

2KB

Message - Example 2.zip

archive

Open

Message - Example 3

This message widget uses sessionStorage to store the view state and employs an ES module that utilizes Shadow DOM to prevent global scope collisions.

3KB

Message - Example 3.zip

archive

Open

Tickle

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.

513KB

Tickle.zip

archive

Open

Information Card

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.

970B

Information Card.zip

archive

Open

Other Examples

More coming soon.