Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
The Miscellaneous tab contains all other other widgets you can use in the Template Editor. Most commonly used are the data widgets such as Datagrid and Repeater. The Custom Widget contains all other available widgets that are not visible in the Toolbar.
Reusability has its inherent advantages
Create once and use in multiple places.
Template Editor looks less cluttered and therefore easily understandable, particularly in cases where you have conditionals for multiple tabs in a tabbar.
When there is a change, you only have to make the change once in one temaple fragment, thereby removing the risk of missing the changes elsewhere when not using template fragments.
It does not mean that you should use nested templates only for the purpose of reusability. You can use them even when there is no reusalibity, but just to declutter your Template Editor.
To implement nested templates, you need to have template fragments created.
Refer the page for Template fragments if you would like to familarise yourself with the topic.
Nested templates are nothing but templates within templates - that is, one or more template fragments added on to an interaction template.
if you know how to create template fragments, then creating nested templates is all about dragging and dropping them into the Template Editor.
Template - This refers to the Template Fragment choosen from the template fragments assets.
Visible when - This allows you to show/hide the Template Fragment based on certain conditions that you might want to set. However, the same result can also be achieved using Conditionals. And it is recommended to use Conditionals instead of this property, mainly because the condition is not hidden in the properties panel, but immediately visible to someone looking at the Template Editor. This improves readability.
Let's build upon the EMS use case from where we had left at in the page for 'Tabbar'. We had built an interaction template with a Tabbar consisting of two tabs and Datagrids inside Conditionals that should be displayed based on the tab clicked.
Let's try to replace the Datagrids with Template Fragements.
In the Project Resources pane on your modeler, click on the tab corresponding to 'Templates, widgets, files and hyperlinks'. Create Template Fragments for 'Clients' and 'Projects'. The steps for creating the Template Fragements are not detailed out here. Refer the page linked in the prerequisites for further details on this topic.
Let's remove the Datagrids from the Template Editor, so that we could use nested templates instead.
Then, in the Template Editor, click on the 'Nested template' icon and drag it to the canvas. This would prompt you to select a Template Fragment. Select one and add it to the canvas. Do the step for adding both the Template Fragments.
Alternately, you could just drag and drop the Template Fragment from the library on to the canvas.
4. You have now nested these two Template Fragments into the Template Editor.
With the Script widget you can add HTML code and other script code (like JavaScript) to the Template Editor.
Note: when you use the Script widget, it is possible to overwrite (intended or unintended) the Design Template settings.
Drag and drop the Script widget to the Template Editor and the box below appears.
Let's build upon the EMS use case from where we had left at in the page for 'Nested Templates'. We had built an interaction template with a Tabbar consisting of two tabs and Datagrids inside Conditionals that should be displayed based on the tab clicked. The 'Projects' tab at run-time was something like the below.
Let's say that we now have this requirement - the total number of projects should be shown below the table, in red font.
Open the 'Projects' Template Fragement.
Insert a Label below the Table, which would show a count of the number of projects.
Click and drag the 'Script' icon and place it above the Label.
Compose your Script and then click on 'Validate'.
Repeat steps 3 and 4 for closing the script, but below the Label.
Click on 'Save' in the Template Editor. When you preview, you will now see the Label in red below the Table.
The Reference is used to reference a row in your database.
Reference - This refers to the field that is used for the reference.
Visible when - This allows you to show/hide the Reference container based on certain conditions that you might want to set. However, the same result can also be achieved using Conditionals. And it is recommended to use Conditionals instead of this property, mainly because the condition is then not hidden in the properties panel, but immediately visible to someone looking at the Template Editor. This improves readability.
Let's build upon the EMS use case from where we had left at in the page for 'Nested template'. We had built an interaction template with a Tabbar consisting of two tabs and nested templates.
Now, the project has a new requirement to add a 3rd tab called 'Employees' that would show the list of employees. And against each employee, it should show the projects that he/she is assigned to, along with the client name of the project.
For this, we would need to build a new Template Fragment called 'Employees', add a 3rd value called 'Employees' to the Concept item that corresponds to the Tabbar, and then add this Template Fragment under a new Conditional in the Template Editor.
Below is the new 'Employees' Template Fragment. The third column has a Repeater to show the project id, project name and client name of the project in a Table.
As you see, each column in the Table inside the Repeater has to be prefixed with the reference variable [Employees.Employees.EmployeeProjects.RefProj] ->
. As requirements grow more complex, you will end up doing this for many more columns.
This can of course be simpified and we can get rid of using the above reference variable prefixed to each column. For that, we use the Reference widget.
In the last column, add a Repeater for 'Employee Projects' datalist.
Click on the 'Reference' icon and drag it to the canvas inside the Repeater. This would prompt you to select a reference field.
Alternately, drag and drop the reference variable on to the canvas, wherever needed.
Reference container is added.
3. Add a Table inside the widget and add fields from the 'Projects' table. This time, you do not have to prefix each field with [Employees.Employees.EmployeeProjects.RefProj] ->
, because it is already part of the umbrella Reference widget.
4. This produces the below screen at run-time.
You can find more information about the WEMScript in the specific pages. There is a page about the , and .
Refer the pages for and if you would like to familiarize yourself with the topics.
A Conditional is a control that you can use on your canvas to show information based on a condition that you specify in an expression.
How to implement Conditionals has been extensively covered as part of the illustration in the page for Tabbars.
Show when true – when the condition entered returns true, then this part is shown.
Show when false – when the condition entered returns false, then this part is shown.
Show when unknown – when the condition does not evaluate properly - perhaps because a field doesn’t contain data or for some other reason - then this part is shown.
This widget lets you display data from a list (database list / transient list) on to the user interaction screen, in a datagrid (that is, a table). The Datagrid displays a table where each row corresponds to a record in the specific list and each column corresponds to a field in the specific list.
Data source - This shows the list corresponding to the Datagrid that you want to display.
Filter - By default, the Datagrid shows all the records in the selected list. You could however show a filtered list, by selecting a pre-configured filter.
Filter expression - This is no different from the Filter property, except that you do not select a database filter like you did above, but write the filter expression in the expression editor directly. This could be useful when you are using a database filter using the above Filter property, where the specific filter is used in multiple other places, but you would like to add additional filter criteria that is needed only for the specific Datagrid. Filter expression can also be used without using the Filter property. If both of the properties are used, the expression in the Filter will be AND'ed with the Filter expression.
Enable paging - This is a toggle, which when enabled, will show x rows in one page, where x is the value configured in the Paging properties: Page size property; When disabled, all the rows in the list will be shown in one single page.
Exercise caution in toggling this property off. When the database size is huge, each time the page is refreshed, all the rows will be fetched in one go, which might not be desirable performance-wise. It is always recommended to use paging for user interaction screens.
If you are using a datagrid in a Template Editor that is intended to serve as the body of an email or a document, never enable paging. Unlike a user interaction screen, you cannot interact with a Data grid to page forward/back in a table in an email body or a document.
Paging properties: Page style - Paging properties are applicable only when Enable paging property is On. Page style property determines how the page scroller appears at the bottom of the datagrid. There are three options possible - With lables (default option), Compact, Hidden.
Paging properties: Page size - Paging properties are applicable only when Enable paging property is On. Page size property determines how many rows should be shown per page in the Datagrid. The default value is 20 rows.
Paging properties: Page field - Paging properties are applicable only when Enable paging property is On. Page field can be used to set the current page of the Datagrid from a numeric field in the data model.
Behavior: Default sort column - This property allows you to indicate which column should be sorted in the Datagrid, by default.
Note that you can only indicate which column you would like to be used to sort the Datagrid, and not how you want the column to be sorted - ascending or descending. You can indicate that within each column.
Behavior: On row click - This property can be used to indicate what should happen when you click on a row in the Datagrid. When a row is clicked, the specific record is selected from the list. With this property, you can customise what you would like to do with the selected record. There are five options possible:
Refresh screen - A possible application of this could be when the Datagrid shows only a limited set of columns from the list, but clicking a row should show more fields for the selected row, in the right side of the table.
Execute flowchart - A possible application of this could be to when the Datagrid shows only a limited set of columns from the list, but clicking a row should show more fields for the selected row, in an overlay.
Navigate to - can be used to navigate to a new page from the navigation menu.
Open hyperlink - can be used to configure one of the hyperlinks (from the Hyperlinks folder in the Project resources menu in the modeler) to be opened on clicking a row.
Download file
Do nothing (default)
Appearance: Highlight row when - This property can be used to highlight a row based on specific conditions that you can add in an expression.
Appearance: Alternating rows - This property can be used to change the table style to enable/disable rows shown in stripes.
Appearance: Show header - This property can be used to show/hide column headers.
Appearance: Bordered - This property can be used to show/hide borders.
Appearance: Condensed - This property can be used to add/not add padding between rows.
Appearance: Responsiveness - You can choose from one of the three options on how responsice the datagrid should be.
Stretch - This is the default responsiveness setting. This will try to fill the available space optimally, without showing scrollbars within the Datagrid. This is suitable when there are not too many columns in the Datagrid.
Scrollbar - This option inserts a horizontal scrollbar at the bottom of the table, if columns and content need more space than is available.
Column Break - This option should be used carefully. It tries to break rows and put columns on a next line if space is limited, which could yields unexpected and sub-optimal results.
Appearance: Grid width - This property can be used to set the width of the Datagrid, which is default 100% (using all available space of the parent container in which the Datagrid is placed).
After adding a Datagrid, you can still do many changes to it like inserting a column, deleting a column, or rearranging column positions.
To insert a column, drag the field from the data model into the datagrid at the desired position. You will see a green vertical line as shown below. You can let go now. The column will be inserted at that position.
To insert a column not from the data model, hover over the top right corder of a column border. The column borders will now turn blue, and you will see a '+' symbol. Clicking on the '+' will insert a blank column after this column. If you want to insert a blank column as the very first column, hover over the top left corder of the column border of the first column and then click on the '+'.
To delete a column, hover over some place close to the column border. The column borders will now turn blue. Click and then the column is selected. The selected column now is shown with amber borders. Press 'Delete' or 'Backspace' key on your keyboard to delete the column. You might have to press the keys twice to completely remove the column from the Datagrid.
To change the position of a column, hover over the column border and click, which turns the column border amber. You will also see three dots at the top centre of the column border. Hovering over that will show a right and a left arrow. Click on the appropriate arrow to move the column to the right or to the left.
We had already used Datagrids for showing the list of clients, list of projects and list of employees in many of the earlier pages in our EMS use case. Let us revist the 'Clients' Template Fragement that we had built in the earleir page for 'Nested template'.
This is what we had. Let's delete the Datagrid and add it again, going through the steps more in detail this time.
Let's assume you have a blank canvas (Template Editor).
In the Template Editor, click on the 'Datagrid' icon and drag it to the canvas. This would prompt you to select a list.
For our example, select the 'Clients' list from the tree and click on 'Ok.
Instead of steps 2 and 3, there is another way of adding a Datagrid to the Template Editor. Drag the list from the data model tree into the Template Editor. This will bring up an overlay from which you can choose to create a Data grid.
After steps 2 & 3 or step 4 (depending on how you inserted the Datagrid), you will be prompted to select the columns from the fields in the selected list. It is important to note that the columns appear in the order that you check them. But of course, the columns can be rearranged afterwards. Furthermore, it is always possible to add more columns to the Datagrid, or remove existing columns from the Datagrid, once you have inserted the Datagrid.
For our example, let us have the client name first and then the client id. So, check the fields in that order - client name, followed by client id. Then press 'Ok'.
You now have the Datagrid inserted in the Template Editor. Press 'Save' and see what happens at run-time, while previewing the project.
While a Datagrid can be used to present the data in a table row by row in a tabular view, a Repeater can be used to present the records in a list one below the other (vertically stacked, but different from Datagrids) or side-by-side (horizontally stacked) or stacked in a grid (not to be confused with a Datagrid) of x records per row.
So, Repeaters also, like Datagrids, let you display data from a list (database list / transient list) on to the user interaction screen. However, unlike Datagrids, Repeaters do not have an 'on click row' option. But you can always add a Button in a Repeater. When a Button is clicked, WEM will then know which record is being referred to.
All the properties except for Appearance are the same as explained in the previous page for Datagrid. Please refer there for more details on the common properties.
Appearance: Layout - This property determines how the cards are arranged in a page. You could arrange the cards one below another in a vertical grid, one beside another in a horizontal grid or in a grid of multiple rows and multiple columns per row.
Vertical - This is the default manner in which the cards are arranged one below another, as you see in step 6 of the Illustration. When the page size is specified, a page shows that many number of cards.
Horizontal - This allows you to stack the cards one beside another.
You can see that the cards are jammed close to one another and there are too many cards in a row. For the former, make sure that you arrange the contents within the Repeater properly so as to include some empty vertical spacing. For the latter, make sure that you adjust the Page size property accordingly.
Grid - This allows you to arrange the cards in a grid consisting of rows and configurable number of columns per row.
When you select this option, you get further options for selecting the Grid render direction and Number of columns per row.
Grid render direction = Left to right results in the cards being populated row 1 first and then row 2 and so on, whereas Grid render direction = Top to bottom results in the cards being populated column 1 first and then column 2 and so on.
Number of columns per view allows you to specify how many cards should be there in a row for diferent screen sizes.
The configuration in the above screenshot results in 4 cards per row, rendered left to right.
On the other hand, if the configuration was such that the rendering needs to be top to bottom, with 3 cards in a row, this is what happens...
In our EMS use case, we were showing the clients list in a Datagrid in the 'Clients' Template Fragment. Let's now try to use Repeaters here instead.
Let's assume you have a blank canvas (Template Editor) in the 'Clients' Template Fragment. Let's also assume that we have a company logo (image) stored in the 'Clients' datalist.
In the Template Editor, click on the 'Repeater' icon and drag it to the canvas. This would prompt you to select a list.
For our example, select the 'Clients' list from the tree and click on 'Ok.
Instead of steps 2 and 3, there is another way of adding a Repeater to the Template Editor. Drag the list from the data model tree into the Template Editor. This will bring up an overlay from which you can choose to create a Repeater.
As you can see, the Repeater is empty. You can now design thw way you would like the information to be displayed in the Repeater. Let's design a Table within a Div that shows the company logo on the left and client id and name on the left.
Press 'Save' and see what happens at run-time, while previewing the project. The clients list is now shown as cards.
This is one of the google maps widgets WEM supports. This widget shows a map centered on a certain coordinate with one or more marked locations.
With the Rich text widget you can add rich text to elements on your user interaction screen, for example in the title of a block panel.
Read the pages for and if you would like to familiarize yourself with the topics
Adding a Tabbar allows you to organize your user interaction screen and divide it into different screens (tabs). When the user clicks on a tab, the information relevant to that tab can be displayed.
To implement tabbar, you need to know about two things - Concept field (single select) and Conditionals.
Refer the pages for Concepts and Conditional if you would like to familiarize yourself with the topics.
Tabs are a graphical representation of a Concept field. Therefore, tabs require a Concept field (single select) to work with. Clicking on a tab in a Tabbar will select that specific Concept value. When you want to show the specific information corresponding to that tab, a Conditional widget is required that will contain an expression which relates to the tab concept. Therefore, for each tab that is used, a Conditional with the desired content in it (when condition is true) should be created.
Data field - This comes populated with the single-select session variable field that holds the information of the selected tab.
Filter tabs by - Here, you can write expressions that would show/hide certain tabs in certain scenarios. For example, you might want to hide a tab for a specific user role.
Default tab - As the name indicates, this is the tab that is open by default when you enter the screen. If this is not set, then it could happen that when you enter the page, the last tab that was clicked in the session is shown, which might not be desirable. Typically, you set the first tab as the default tab.
Behavior: On change flowchart - Here, you can select a flowchart that needs to be executed on clicking any tab.
Appearance: Tab label - By default, the local name in the Concepts are shown as the tab labels. You can add expressions to change the tab labels as per your requirement.
Appearance: Display mode - There are two ways in which tabs could be shown in the Tabbar - tabs or buttons.
Appearance: Justified - By default, the tabs are not justified and are left-aligned as you can see from the above screenshots. Turning on this toggle will justify the Tabbar to the width of the page as shown below.
Consider a use case for an Employees Management System (EMS) where employees are assigned to one or more projects and each project maps to a client. Let us try to build a page with a Tabbar that consists of two tabs - Clients and Projects.
1. First, you need to create a Concept item with two children, corresponding to the two tabs needed in the tabbar - Clients and Projects.
2. Then, you need a single-select session variable with the root concept pointing to to the above Concept item.
3. Then, in the Template Editor, click on the 'Tabbar' icon and drag it to the canvas. This would prompt you to select a concept field. Select the session variable from the previous step.
Alternately, you could just drag the single-select session variable on to the canvas and select 'Create tabbar' from the prompt.
4. The canvas now shows the Tabbar. Set the default tab to 'Clients' and leave the other settings as-is. For further details on the Tabbar properties, go back to the previous section in the page.
5. Now that you have added a tabbar to your page, the next step is to define what should be shown on the screen when you click on each tab on the Tabbar. This is done by adding Conditionals as shown below.
6. The last step is to add details that need to be shown under each Conditional. For our example, add the Datagrid of 'Clients' and 'Projects' under the respective Conditionals.
Refer the page for Data grid if you would like to familiarize yourself with the topic.
You could do it like this....
or like this...
It is recommended to use the second approach. This will make the Template Editor look less cluttered; otherwise, when there are more number of tabs you will end up creating so many nested levels of Conditionals.
7. There is one important thing that you could have missed. Let's find out by previewing what you have built. This is the screen that you will see on Preview.
As you see, the tab 'Clients' is selected (because it was assigned as the default tab in Step 4 above), but the Datagrid of clients that you want under this tab is not shown.
Now, when the 'Projects' tab is clicked, this is what you get. This is as expected.
When the 'Clients' tab is clicked, this is what you get. This is also as expected.
So, you see that explicitly clicking on the tabs shows the details that are expected for the tab. However, the details are not shown in a new session. This is because the single-select session variable from Step 2, [Authentication.Session.Tabs]
, does not yet have a value assigned in a new session. Basically, it will be UnknownConcept
. So, the condition in the first Conditional in Step 6, [Authentication.Session.Tabs] = 'Tabs'.'Clients'
, evaluates to False
(and so does the second Conditional). And nothing is shown on the screen.
Therefore, you need to amend the condition in the first Conditional to one of the below two, which effectively mean the same.
Refer the page for If-Unknown operator (?) if you would like to familiarize yourself with the operator.
It is possible to (dynamically) change the collection of items to display on the tabbar. This can be done by using the Filter tabs by- property of the tabbar. This filter works a little bit different than other filters where you can use any expression that results in a boolean. When filtering the tabbar the keyword concept
is used as a variable that corresponds with the concepts in the collection.
As a result of this the expression should look like this:
Example:
In this example, the 'IsLive' is a concept property that is used to disable certain concepts from the tabbar by setting the property to false.
You can make use of expressions to build the conceptset dynamically for the tabs.
With +{} you can add tabs to the collection
With -{} you can remove tabs from the collection
the {} surrounding concepts make a concept set
Besides literally using concepts, you can also use ontology queries or calculated conceptset-datafields, anything that results in a set of concepts that is valid for the type of single select being used.
Example:
This is a library of custom widgets created by WEM and by partners of WEM. This library grows continuously and has a lot of different widgets. When you drag the rocket to your template you get prompted to select the widget you want to add.
The first time you do this there are probably not many widgets listed, and you need add a library first. Select the 'Add more widgets here' link and select a library you want to add to your account. Take a look around here. There are a lot of different widgets and every one is for a different use-case.
There is also a place dedicated to managing . Some widgets specific explanation can be found in the folder.