Navigation

The Navigation-tab is where you manage your 'Navigation points'.

Introduced in June 2022, Custom HTTP Endpoints can be managed from this Navigation-tab.

Navigation points are basically menu options that are available in the various menus that are available in a WEM application. A navigation point navigates towards a specific flowchart or URL. This is defined when you create a navigation point.

Every WEM application comes with three different visible menu-groups and one invisible group. The location and styling of the visible menu-groups is defined by the Design Template selected on the portal.

• Main menu - this is the main menu bar that you usually find at the top of your application (or at a different position defined by the Design Template).

• User menu - this menu is also on the top menu bar, but at the far right: here you find all navigation points (menu options) that can be made available when a user has logged in (a typical use for this group). But this group can also be used just to show specific menu items at the top-right of the page (or where the Design Template places this group).

• Footer menu - which is actually a secondary menu that can be positioned at the bottom of the page but also at the left (based on the location defined by the Design Template).

Navigation Structure from Basic Authentication Project

Besides the menus that are mentioned above, there is also a group called Invisible. This is a special one: all navigation points that are part of Invisible are points that will not be visible in a manu on the page, but may provide specific URLs (hostname of portal + path to specific flow). These URLs can be used to directly access a specific flowchart in the WEM application from the outside (bypassing the standard home-starting point). For example by providing a link in an email message. A specific often-used example is the Reset Password option: you create a URL that is very specific, you can't access the functionality via the application directly, but through the URL you could access the password reset functionality of the application (for example via link in email). This feature can be seen in the Quick Starter Project Basic Authentication v2020, in MyWEM.

Navigation Points

A navigation point navigates directly to a flowchart or a hyperlink. Usually, a navigation point is used as a menu item in a menu. When you click on a menu you get access to the list of navigation points. When you right-click on a navigation point, you get a menu to manage the navigation point:

New navigation point

To create a new navigation point, click on the menu or navigation point where you want to create a navigation point. When you create a new navigation point, some properties have to be defined:

Property	Description
Name	The (internal) name of the navigation point.
Display text	(optional) This is the text that is used for a menu item (navigation point) in your application. If this property is left empty, the Name property is used to display the label of the menu item.
Icon	(optional) It is possible to have menu items that also include an icon. Here you can specify the icon.
Visible when	This property is required. You can restrict access to a navigation point by specifying an expression in this property. If this expression evaluates to false, the navigation point is not visible and its flowchart not accessible by its URL path. This is often used to give access based on a specific user role or set of user roles. But any other reason can be used to prevent access, as long as you can specify it in the expression editor. For security reasons, this field is required: you have to consciously set the Visible When expression! Plainly setting the expression to true makes the item always available - so you can use that if you are sure that this item does not need specific rules to be available - just as long as this choice is consciously made.
Action	Deeplink: The navigation point navigates towards a flowchart that will be executed after click on menu item. This flow should be a stand-alone flow ending in an Interaction Node or link to a flowchart that provides an Interaction Node following every possible path. Important: The deeplink navigation item gets its own path by which it can be directly used to access the application by (users/browsers/applications). Therefore, any Deeplink Navigation Item can act as starting point for your application. Important: There is a BIG difference in how it works with the Session, if you use the (old legacy) POST method, or the new GET method. With the old POST method, you would always keep the session going and transient fieldvalues would stay available after navigation. With the new GET method, normal transient field values are NOT kept and transferred with a navigation action! For this, you need to use transient fields in the new technical Session Folder (also known as Shared Session). Subroutine: This can be used to call flowcharts as a subroutine, to return to the same point from where this navigation item was clicked. The flowchart to be executed must end with an End Node, so that when flow reaches the End Node it can return to the point from where the Subroutine was started. Hyperlink: Allows you specify a URL you want this navigation point to use. This is usually an external URL pointing to another webpage. None: No action will be executed and this option allows you to create deeper level menu items (submenu). None creates a placeholder in the application menu that can expand and collapse to show/hide submenu items. After creation of this item, you can create new navigation points as sub-items in this item, that will be available if this item is clicked to expand the sub-menu.
Flowchart	Only available when the Action is Deeplink or Subroutine. You use this field to select the flowchart the navigation point will execute.
Hyperlink	Only available when the Action is Hyperlink. This field is used to specify the hyperlink the navigation point will take you to.
URL Path	Only available when the Action is Deeplink or None. The specified path is added to the base hostname of the portal and can be used to get direct access to this navigation point through your browser.
Open hyperlink in	When you use a hyperlink as a navigation point, you can specify what should happen when the hyperlink is opened: Open in a new window, open in the current window, open in the current frame or open in the parent frame.

Visible When? Hierarchical parents of a navigation points override the visible when expression of its children. When a parent is not visible to the user its children will also not be visible and its direct link will not allow access either.

Properties, Move, Delete, Find usages

Most Navigation menu-bar options are pretty straightforward:

• Move allows you to move a navigation point to another menu;

• Delete deletes the navigation point;

• Find usages show you where a navigation point is used within the current project.

• Rename Your navigation point, this is updated project wide.

Edit query parameters

Query parameters are parameters that are used in URLs. Let's look at this example URL (that does not specifically work):

http://queryapp.live.wem.io/queryparam?uid=admin&action=resetpw

This URL points to the navigation point "queryparam" and contains two parameters: uid and action. Both have values associated with the specific parameter. The flowchart associated with the navigation point "queryparam" gets direct access to these variables and their values through the data-field-mapping you define.

Adding a query parameter to a flowchart can be done in the associated navigation items create/edit overlay. The query string parameter section has a add and delete button allowing you add parameters or remove the selected parameter. Each parameter consists of a name and a field where the values is mapped to.

Click [Add] to create a new query parameter. You then map the parameter to a data field in one of two ways:

• Drag and drop a text field from the project tree onto the parameter.

• Click the database icon to open the data field selector overlay and pick a field there.

The name of the parameter is set automatically, using the name of the selected data field as its default. You can overwrite this with any name you like; it does not have to match the field.

Parameter names are sanitised before they are written to the URL, so characters that are not safe in a URL are removed or replaced. To make sure the name you enter is the name that ends up in the URL, use URL-safe characters only: A–Z, a–z, 0–9, and the characters -, _, . and ~. See percent-encoding for more about which characters are safe.

You can also define Query string Parameters on the Project level, in Project Configuration - Query string, to make them available to any and all URL paths. When these parameters have been used on any URL to access the portal, the mapped data fields will have the provided values and are available to your flows.

Navigation and Session

There is a BIG difference in how Navigation works with Session (fields and their values) based on the Navigation Action Type. This type can be set on Project Level, using the Legacy Features.

The Legacy way uses POST-requests, which kept and transferred the session information via that form-post over to the flow behind the navigation item. But this was before we evolved to new techniques.

The NEW and default way for navigation of Deeplink-type items uses GET-requests. This way, the current flow STOPS and a new request is made to the server. This approach must be combined with the use of Session fields in the specific (technical) Session Folder.

This has following consequences:

• Transient fields that are outside of the Session Folder, are no longer considered session fields and are NOT transferred over to flows accessed via Deeplink Navigation (in the GET-navigation approach).

• Any Deeplink Navigation Item can be considered as a potential starting point into your application, with empty transient field values AND access to fields and values in the Session Folder if set in a previous session within the same browser - until session timeout has passed.