Interaction Template Editor
The powerful Page Builder in WEM
Last updated
The powerful Page Builder in WEM
Last updated
Interaction nodes are the bridge between modeling you application in the WEM modeler, and the user interaction you want to achieve in your app. When you want edit an interaction node, double click on the node, and you will be taken to the Interaction Template Editor. This is where you design the user interfaces of your website. The different components you add to this page make up this interface and allow you to show your content. In WEM, these components are called Widgets. Widgets are created by WEM and WEM Partners. However, you can create your own widgets as well with the Widget editor. More on that in the WEM Reference documentation. The template editor has tree important parts: the Toolbar, the Canvas and a Properties pane.
Here are some useful Interaction Template Hotkeys.
The Toolbar is where you find everything you need to create an interactive front-end webpage. The Toolbar is divided into categories, which are: General, Preview size, Style, Layout, Interaction and Miscellaneous. These categories contain various buttons or functionalities which will be described in more detail per separate category. Generally speaking, the Preview size and Style categories help you to style your user interface - mainly its text fields - and the Layout, Interaction and Miscellaneous are used to interact with the user. Layout specifically contains components to design you user interface. The Interaction category is used to create options for users to interact with the application database. And lastly, the Miscellaneous tab contains tools to present information, also with the ability to add custom Widgets.
Below the toolbar you will find the canvas. This is the representation of your page where you add all the different components you find in the toolbar. To add something to your canvas you drag it from the toolbar to the right place on the canvas. While holding a component you will a green, red or no line to appear, this is to guide you in the placement of that component. A green line shows you where the component will be placed when you release it. A red line means this component is not suitable for that location, this can be because the component is incompatible with another component or it doesn't fit. The canvas always has a button ribbon on the bottom, here you can only have buttons and the ribbon will only be shown on the client side if it holds a button. You can do this by dropping a button, Flowchart, hyperlink, navigation item, or a file element into the ribbon as buttons.
On the right, next to the canvas, you find the properties pane. This is a place reserved for property settings of the selected components or widgets. Almost all components have different properties and will be further explained on their respective category pages. Some of the recurring properties are divided in properties categories. Paging properties give you control of the widgets behavior when showing a lot of rows or entries. Behavioral properties are, for example, what to do on a action such as a "click on a row", which column to sort on or if a panel should be expandable. The appearance of different widgets can be changed in the appearance properties section. Here you can, for example, change color context, change display properties, and add and remove headers. Things like buttons have a toot-tip category, the tool-tip text appears when hovering your mouse pointer over a button without clicking it. In conclusion, the Properties pane really allows you to customize you user interface to your own preferences.
The show as overlay is a property of your interaction node, and shows up in the property pane when the editor is opened or when the canvas is selected. This setting changes the interaction node from a full page to an overlay.
Show close button - The overlay gets a close button on the top right of the canvas. This gives users a way to close the overlay and return to the main page without saving changes.
Overlay size - This lets you change the size of the overlay.
Overlay title - This is title of your overlay, this can be text or an expression.
Overlay Icon - Lets you add an icon to the top left of your overlay.
The element path is something you find at the bottom of the editor. With the element path you can keep track of where you are within your widgets. Here you see the path to a button that nested inside a table. This is useful to keep an overview and to easily navigate between the different levels.
Unwanted components can be removed from the template by deleting them from the canvas. First select the component you want to remove and use backspace or the delete key to remove the component. You can use the element path to select the right component or to make sure you have the right component selected. The delete action can also be undone with ctrl-z or the undo button.
