In the Template fragments
folder you can add and edit template fragments for use in the template editor of interaction nodes. The template fragments editor is similar to the main template editor used in regular interaction nodes. To learn more about this template editor, go to the corresponding section.
One major difference between Template Fragments and the regular Templates for Interaction Nodes, is the use of buttons.
In Template Fragments, buttons cannot be used as "Follow button exit
", because Exits are linked to specific Interaction Nodes on the Flowchart Canvas, and only the main Template which is the Template Property of that Interaction Node, has access to the available exits and can use these exits in buttons on the page. Template Fragments can be part of many Templates and even other Fragments, so they can be linked to many nodes that each have their own specific exits.
In Template Fragments, you will typically use buttons that Refresh the page, Execute Flowcharts, Navigate to navigation items, Link to external addresses or a File in the Files library.
Templates Fragments are generally used for following reasons:
Re-usable Content: if certain page elements are used multiple times in the same or even in different interaction nodes, these elements can be added to a Template Fragment for easy re-use in different Templates (or other Fragments). Define once, use many times.
Keep large Interaction Page clean and well-organized: with a lot of elements on one page, that page can become cluttered in the Template Editor and not easy to understand, maintain or make changes at later stages. Using Template Fragments to hold certain coherent blocks of content can help to make the Page nice and tight, easy to oversee and make changes.
Help debug and find issues: if a large page is causing issues or fails to render at runtime, you can use Template Fragments to isolate (coherent) parts of the page and one-by-one add them to the page, or use conditionals to turn them on or off, until you find the specific element that is causing the issue.
You can create templates in the project Templates, Widgets, Files and Hyperlink tab of the resource pane through a right-clink on the Template fragments
folder. Then give the new template a name and start editing the template.
When you want to use the template in an interaction node, the template can be dragged and dropped from the resource pane onto the template editor. Or, you can use the Nested Template icon from the Editor Toolbar - this will open an overlay where you can select from the available collection of Tempalte Fragments.
A Fragment that is added to the template canvas will not be rendered with all its specific contents, but as a compact element like shown in the image below. If you want to open the template fragment, you can click the [-> icon in the right-corner of the Fragment Element, this opens the fragment in another window so you can edit its contents.
Any Template Fragment can be as small as just one element (or none), or contain many combined elements, even other Fragments. You can NOT nest a Template Fragment in itself (the Modeler Template Editor checks and blocks this situation).
It can be a very strong and useful feature in the management and creation of your pages.
To be able to create and manage widgets and widget libraries, you need Workspace-level rights (workspace power user, workspace admin or owner).
User Interaction screens are mostly made up of different widgets. These widgets can be made by WEM itself, by partners, by users or you could also create your own widgets. When a new widget is created, it is added to a widget library. This is where widgets are saved and managed.
Before you can add widgets to your interaction template, a widget library has to be added to your project. You can add and manage widget libraries in the 'Files and Assets' tab of the resource pane.
When you open the sub-menu of widget libraries you get the options shown above, in the right-hand side. Here you can open the widget editor to make your own widgets or add a library to your project. Find out more about the Widget Editor and how to make your own widgets.
You can add a library by selecting the add widget library option in the sub-menu. This will open a window with all the widget libraries you can add to your project. Here you can select a library to add and you can see all widgets that are in a library. If you want to add a specific widget, you first have to add the library to your project and select the widget in the template editor.
When you have a library selected the 'Ok' button turns green and you can add it to your project. Hereafter, when you want to add a widget to the interaction template editor you can use the widgets from the added libraries.
Every library has is their own category and function. There are also some libraries that don't show any widgets. These widgets are only shown when you have a supported type of project. For example, mobile app widgets can only be added when in a mobile project, the same for Charts 2.6 are for other types of projects.
Some widgets use API's to communicate with a service, because API's are sometimes updated or changed some widgets will not always work, especially social media API's.
How to add and use widgets and in a user interaction screen is explained on the #custom-widgets page.
When building applications you need to have the ability to store files in your applications. The WEM modeler has a place for that in the Templates, Widgets, Files and Hyperlinks tab of the resource pane (). Here you find a folder called Files.
There are no restriction on the type of file you want to add. When a file is added the modeler checks the extension and the first lines of the mimetype to verify how to handle the file.
There is a restriction on the file size of <30MB. If someone tries to upload a file larger than 30 MB, the load balancer will kill the connection and show a "413 Request Entity Too Large" message. When you want to use larger files it is recommended to use a 3rd party host like youtube or vimeo and use link or a widgets to present the files to the user.
Add a new file
Add a sub-folder
Rename a file
Delete
Find Usages
Help
When you add a new file a window will appear, where you can add the file and choose a location to store it. A storage location can be selected through selecting the folder icon in the files field. This will open another window to select the preferred folder. The image on the right is what it looks like when you have created a few folders. By default a file is stored in the Files folder on the same level as the created folders.
The next step would be to add the file, you can do this by dragging a file to the box with "click or drop file here" or you can click in the box to select a file from your system.
For most file-types the main use-case would be to give an option for users to download these files. This can be done through dragging your file to an interaction screen. This will create a button with a download that redirects to a download link. You can also use a file as a concept property, these files are saved inside the project and are first added to the files folder before you can add it as properties. For more information about concept properties, go to the documentation about this topic#properties.
When you create a button it behaves like other files and is a link to download the file. Creating an image will show the image in its original size on the interaction canvas. The properties of the image can be altered in the properties pane on the right.
Image files can also be used to make custom buttons. The button properties gives you the option to change how the button is displayed.
Selecting the image option will open a window with the files in your project. Here you can choose the image you want to display the button as.
To add a file you right click select theFiles folder or use the [...]
three-dot button. This will open the context menu for files with the supported actions. Here you can:
When you drag a picture file to the template editor you get an choice:
When you want to use hyperlinks in your application, you need to define them first. You can do that in the widget, templates, hyperlinks tab (second from right) on the left pane in the modeler. Hyperlinks in WEM are mostly used for directing the user to specific resources or websites outside of the application being build. Hyperlinks can be used in the template editor as buttons or links to allow the user to navigate to these websites via these interaction widgets. The modeler and WEM work differently with URL's and cannot be used to point to a specific location within your application.
Here you can manage all your hyperlinks. You can:
Add and delete hyperlinks;
View the all hyperlinks in this project;
Get a list of all locations where a link is used within your application with find usages;
Create/manage folders. This is used to group hyperlinks. If you have a large number of hyperlinks, you can group them in folders, to make it easier to manage all the available links.