10. Template Editor Script

Do you have some spare time to enhance your widget by adding some JavaScript? While this is not mandatory for a functional widget, it can elevate the professionalism of your widget and, in some cases, improve the user experience (UX) in the Template Editor by providing visual feedback to users.

Please note that this code runs only within the Template Editor in the Modeler, not on a page in a previewed or published WEM runtime portal.

Updating the Information Card Widget

Let's update our "Information Card" widget with a Template Editor script.

1. Select the "Template Editor Script" tab.

2. Copy and paste the following code:

3. Don't forget to save your changes!

const placeholderElement = utility.createPlaceholderElement(placeholders.Contents.name);

const cardElement = utility.createElement("div");
cardElement.style.backgroundColor = "#d1ecf1";
cardElement.style.border = "1px solid #aadce5";
cardElement.style.borderRadius = "4px";
cardElement.style.padding = "8px";
cardElement.append(placeholderElement);

return cardElement;

This code should be quite familiar to JavaScript veterans. Notice that we use utility.createElement instead of document.createElement to create our HTMLElement. This is because we provide only a subset of the JavaScript API, just enough to create a preview. We will discuss this in more detail in later chapters.

If you still have the template open where this widget was placed, you should already see the changes from the default appearance to our custom preview. If not, please open the template to view the updated design.