Widget Editor

This page is a brief introduction to the Widget Editor. The Widget Editor is a tool that helps you create custom widgets using WEMScript. You can think of it as a modeler for making your own special widgets that facilitates the creation, management, and enhancement of your widgets. This will talk about the different aspects of the widget editor, you can find a complete guide on how to make widgets in the building widgets tutorial.

Opening the widget editor

The widget editor can be opened using the context menu of the widget library folder or going to widgets.wem.io.

In the modeler when using left click on the widget library folder or the three dots next to it, the menu seen on the right will appear. Selecting the top option opens a new tab with the widget editor.

The landing page of the widget editor is where you manage custom widget libraries, these libraries are sets of custom widgets a workspace has access to. These widget libraries are managed on a workspace level and are only available in that workspace.

Overview of the Widget Editor Interface

Once you open a widget from the library, you'll be taken to the main editor interface. This environment is designed to help you structure your widget, write the necessary WEMScript, create properties, and manage features that belong to the widget package.

The interface divided into the key areas:

The left sidebar:

• Navigate workspaces and libraries

• Manage the widgets state - In development (available in preview) - Released - Deprecated (gives alert when in use, disabled for new use)

• Edit widgets content

• Create new widget (library)

• Import widgets to a library

• Import a library

• Download library

• Change icon

The Tabbar and lint

The tabbar always has these nine tabs, with each about a different part of the widget. The lint just below the tabs is reserved for tab specific actions.

• General

  • Download: Download a ZIP File of the current widget

  • Content Security Policy: Manage Content security policy items

• Script, Styles, Template editor Script

  • Save changes: Save changes made in the current tab

  • Validate: Validate the complete script.

• Other

  • Add new item

  • Remove items

  • Change order (properties): Change the order of properties, this order is used for the widgets property pane.

  • download (Resources): Download the selected resource

The workspaces

General

• Manage name: Change the Widget name.

• Platform availability: Select which platforms the widget is supported on 2. Platform Availability

• Content security policy settings: Manage access to trusted content sources Content Security Policy

Script

The script page works like the expression editor for the widgets WEMscript, more information about the WEMscript can be found here: WEMscript. Changes on this page are only saved when the save button is used. The validate function works similar as the validation in the expression editor. We advise reading the Building Widgets guide before creating your own widget.

Placeholders

Placeholders can be used to enable the use of content inside your widget, like Alerts, Panels or Conditionals. The content inside the placeholder can then be rendered in the application.

Properties

On this page you manage the properties of your widgets, these are the one you find on the right when a component in the template editor is selected. Each property in the list consists of a Name, Type, Remark and a default value. However it has its own properties depending on the selected settings, these are found in the Details pane.

View state

The view state is used to preserve visual states within a widget, such as scroll position, zoom level on a chart, or any other UI-specific state when the widget is redrawn.

In the image below, you can see a view state named collapsed, which uses a Boolean to track whether the widget should be rendered in a collapsed state.

When creating a new view state, simply provide a name and choose the data type that will store its value. View state names may only contain alphanumeric characters and underscores (_).

Events

Events refer to a unique set of WEMscript that can follow a button click, execute a flowchart, navigate to a navigation item, or refresh the screen and It is also possible to change the view state using events.

Events exist of a name added when an event is created and a script to be ran when an event is called. For example, this can be a DblClick event that runs a script retrieving the specific row that is clicked on. The event can also ignore the user input using the ignore user input toggle, this allows the event to overrule things like required input.

Resources

When we refer to a resource, we mean any type of file that will be embedded with the widget. This can include images, sounds, PDF documents, JavaScript, CSS, XML files, and more.

To create a resource, use the "New resource" button on the resource tab, after filling out the name a new record is added to the list. The file itself can then be added in the right detail pane using the browse button.

Styles

One way to style widgets is by using the Less editor under the Styles tab. Less is a CSS pre-processor that provides additional functionality on top of CSS. If you prefer not to write in Less, you can still write standard CSS without using any Less features.

If you do want to write in Less, you will also have access to built-in variables from Bootstrap 3, which can be very handy if you want to customize some of their components in a widget. You can find these variables in the right-side panel of the screen.

Template editor scripts

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.