LogoLogo
WEM ModelerWEM ReferenceTutorialsMyWEM
  • WEM Platform Documentation
  • Getting Started
    • Introducing WEM
    • Create WEM Account
    • WEM Login
    • MyWEM Portal
      • MyWEM Features
      • MyWEM Support
      • Allow Support Access
    • Partner Portal
  • WEM Modeler
    • Introducing the WEM Modeler
    • Modeler Start Page
    • Manage Projects & Workspaces
    • User Roles Scheme
    • Create a new Project
    • Modeler Application Overview
    • Project Settings
      • Project Configuration
      • Security Settings
      • Portal Settings
      • SMTP Settings
      • Mobile App Settings
    • Expression Editor
    • Flowcharts
      • User Interaction
      • End Node
      • Sub-flowchart
      • Navigation
      • Clear session
      • Decision
      • Assignment
      • List Action
      • Loop
      • Copy Data
      • Save and Discard
      • Import Data
      • Export Data
      • Invoke Webservice
      • HTTP Request
      • Execute Process
        • Different processes explained
        • Send Email
        • Change settings
        • Changing files
        • Generate File
      • Ping server
      • Authenticate
      • Comet Messages
      • OpenAI
      • Async Tasks
      • Note Node
    • Data Model
      • WEM Session Folder
    • Services and Integration
      • Webservices
      • Remote Data Sources
      • Authentication Providers
        • SAML 2.0
          • SAML App Registration in EntraID
        • OAuth 2.0
      • Comet - Real Time Messages
      • Certificates
    • Concepts and Concept Queries
      • Concepts
      • Concept Queries
      • Concept Relations
    • Navigation
      • HTTP Endpoints
      • Tasks
    • Files and Assets
      • Widget Libraries
      • Template Fragments
      • Files
      • Hyperlinks
    • Multilanguage Dictionary
    • Agentic AI
      • WEM AI Agent
      • AI Flowchart Nodes
      • AI User Interaction
    • WEM Preview
    • WEM Runtime
      • Publishing Process
      • Staging
      • Live
    • Debugging
  • Template Editor
    • Interaction Template Editor
      • Interaction Template Hotkeys
    • General and preview
    • Style
      • Heading Type
      • Paragraph Style
      • Text Styling
      • Alignment
      • Hyperlink
      • Tooltip
    • Layout
      • Adaptive columns
      • Div
      • Panel
      • Alert
      • Table
      • Image
      • Icon
      • Label
    • Interaction
      • Form
      • Validation
      • Required field
      • Button
      • Dropdown
      • Free form item
    • Miscellaneous
      • Tabbar
      • Google maps
      • Nested template
      • Script
      • Reference
      • Conditional
      • Data grid
      • Repeater
      • Rich text
      • Custom
    • WMT Tool
  • WEM Reference
    • WEM Expressions Reference
    • Functions
      • Aggregation
        • Average
        • Count
        • First
        • Last
        • Max
        • Min
        • Sum
      • Concepts
        • ConceptId
        • Description
        • FindConcepts
        • GetAncestors
        • GetChildren
        • GetDescendants
        • GetParent
        • Intersection
        • LocalName
        • Synonyms
        • ToConcept
        • Union
      • Date
        • Date
        • DateDiff
        • DateOnly
        • DatePart
        • DayOfWeek
        • FromUnixTimestamp
        • MoveDate
        • Now
        • TimeOfDay
        • Today
        • ToDuration
        • ToLocal
        • ToUnixTimestamp
        • ToUTC
        • UTCNow
        • UTCToday
      • Environment
        • ApplicationId
        • CountryCode
        • CountryName
        • Hostname
        • IpAddress
        • IsFirstRequest
        • IsHttps
        • IsPreview
        • IsStaging
        • IsLive
        • NodeTrail
        • PortalId
        • PortalName
        • ProjectId
        • ProjectName
        • ProjectVersion
        • Setting
        • UrlPath
      • Files
        • FileName
        • FileSize
        • FileUrl
        • MimeType
      • Lists
        • Distinct
        • IsNewRow
        • IsOnRow
        • List
        • NameOf
        • RowId
      • Math
        • Abs
        • Ceiling
        • Cos
        • Distance
        • Exp
        • Floor
        • Log
        • Log10
        • Pi
        • Pow
        • Random
        • Round
        • Sin
        • Sqrt
        • ToNumber
      • Security
        • AesDecrypt
        • AesEncrypt
        • AesIv
        • AesKey
        • CreateJsonWebTokenH256
        • HmacSha256
        • Md5
        • Password
        • PasswordStrength
        • Pbkdf2
        • Sha1
        • Sha256
        • Totp
      • Text
        • AsText
        • Base32ToText
        • Base64ToText
        • CompareFuzzy
        • Concat
        • Contains
        • FormatDate
        • FormatDuration
        • FormatNumber
        • Guid
        • HexToText
        • HtmlAttributeEncode
        • HtmlEncode
        • IndexOf
        • JavascriptEncode
        • JsonEncode
        • Length
        • Padl
        • Padr
        • RegExIsMatch
        • RegExMatches
        • RegExReplace
        • Replace
        • Split
        • StringPart
        • SubString
        • ToBase32
        • ToBase64
        • ToBase64Url
        • ToHex
        • ToLower
        • ToRichText
        • ToString
        • ToTitleCase
        • ToUpper
        • Trim
        • UrlDecode
        • UrlEncode
        • XmlAttributeEncode
        • XmlEncode
        • XPath
        • XPathList
        • XPathNumber
      • Validation
        • HasValue
        • IsEmpty
        • IsKnown
        • IsUnknown
        • IsValidBankaccount
        • IsValidBSN
        • IsValidBTW
        • IsValidEmailAddress
        • IsValidIBAN
        • IsValidPhonenumber
        • IsValidURL
      • Localization
        • AvailableLanguages
        • CurrentLanguage
        • CurrentTimezone
        • LanguageStrategy
        • Languages in WEM
    • Keywords
      • Contains
      • Concepts
        • Ancestor of
        • Child of
        • Concept
        • Descendant of
        • Overlaps
        • Range of
        • Parent of
        • Contains
      • Environment
        • ApplicationRoot
        • Platform
      • Lists
        • In
        • Of
        • Where
        • Contains
        • All
      • Logic
        • And
        • Not
        • Or
        • Choose
        • If Then Else
      • Mobile
        • BatteryLife
        • BuildVersion
        • ConnectivityTypes
        • DeviceId
        • DeviceName
        • IsDevelopmentBuild
        • IsDistributionBuild
      • Text
        • Contains
        • Ends with
        • NewLine
        • Starts with
    • Operators
      • Addition +
      • Division /
      • Equality =
      • Equality-strong ==
      • Greater-than >
      • Greater-than-or-equal >=
      • If-unknown ?
      • Inversion -
      • Less-than <
      • Less-than-or-equal <=
      • Logical-and &, and
      • Logical-not !, not
      • Logical-or |, or
      • Modulo %
      • Multiplication *
      • Power ^
      • Subtraction -
      • Unequality <>
    • Data Types
      • Text
      • Number
      • Yes / No (Boolean)
      • Date Time
      • Duration
      • File
      • Rich Text
      • Concept
      • Conceptset
      • Reference
    • SQL Compatibility
      • Functions
      • Keywords
      • Operators
    • Content Security Policy
    • WEMScript for Custom HTML
    • WEM Widgets
      • WEM Widget Structure
      • WEMScript for Widgets
      • Widget Editor
      • Content Placeholder
    • WMT
      • File Structure
      • Basic Functional Template
      • Styling
      • Font Icons
      • Reference
        • Breadcrumb
        • Button Bar Buttons
        • Common Scripts
        • Common Styles
        • Conditional
        • Content
        • CSP
        • CSP Nonce
        • Expression
        • Hidden Fields
        • Language Select
        • Navigation
        • Node ID
        • Node Name
        • Placeholder
        • Placeholder Conditional
        • Startup Scripts
        • Template Fragment
        • Uses
    • Regression Test Framework
      • WEM Test Script
  • Tutorials
    • Tutorials
      • Making a Change Log
      • Placeholders for end-users
    • First Application
      • Expand First Application
    • Video Tutorials
      • By Partners
      • Security
    • Building Widgets
      • Basics
        • 1. Introduction
        • 2. Hello, World!
        • 3. General
        • 4. Properties
        • 5. Events
        • 6. Styling
        • 7. View State
        • 8. Resources
        • 9. Placeholders
        • 10. Template Editor Script
        • 11. Global Scope
        • 12. Risks and Responsibilities
        • 13. Conclusion
      • In-depth
        • 1. Introduction
        • 2. Platform Availability
        • 3. Development Workflow
        • 4. Properties
        • 5. View state
          • 1. Runtime.viewState
          • 2. sessionStorage
          • 3. Summary
        • 6. Styling
        • 7. Events
          • 1. Navigation
          • 2. Row position
      • WEMscript
        • 1. Introduction
        • 2. Variables
        • 3. Properties
        • 4. OutputId()
        • 5. Register Input - Required
        • 6. Encoding
        • 7. Script Block - Introduction
        • 8. Types
          • 1. Boolean
          • 2. Concept
          • 3. ConceptSet
          • 4. Datetime
          • 5. Duration
          • 6. File
          • 7. Number
          • 8. Richtext
          • 9. Text
        • 9. Script Block - Global Scope
        • 10. Script Block - ES Modules
        • 11. CSS - attachShadow
      • Examples
  • Tips and Tricks
    • Tips and Tricks
      • Keyboard Shortcuts
      • Video's in WEM
      • Extracting text from File
    • Custom Hostnames
    • FAQ
    • Expressions
      • Order of Operators
    • Processes
      • Email Process
      • Tips for creating PDF's
      • ZIP Archive Process Node
    • Concepts
      • Concepts and Runtime
    • Working with data
      • The Power of the Calculated Field
      • Consuming your OData source with Excel 2016
      • Expose your data via OData
      • Using OData to transfer data between runtimes
      • WEM Storage Options
    • Integration
      • Integrating external systems
      • Json
      • Single Sign-on
      • Office365 Integration
    • Performance
      • Performance Tips
      • Performance Profiler
      • Template Performance Profiler
      • The Split Loop
    • Security
      • 2FA with TOTP
      • Blacklist or whitelist IP addresses
    • Widgets
      • Advanced Charts
        • Boxplot Chart
        • Brush Chart
        • Bubble Chart
        • Candlestick Chart
        • Card with Chart
        • Effect Scatter Chart
        • Heat Map
        • Line, Area and Bar Chart
        • Map-Bar Morph
        • Mix Time Line Chart
        • Nested Pie Chart
        • Polar Area Chart
        • Polar Bar Chart
        • Profit Chart
        • Radial Bar Chart
        • Radial Bar Gauge
        • Range Bar Chart
        • Rosetype Pie Chart
        • Sankey Energy Chart
        • Scatter Chart
        • Scatter-Aggregate-Bar Chart
        • Stacked Columns Chart
        • Stepline Chart
        • Treemap
      • Advanced Input
        • Color Picker
        • Conceptset Image Selector
        • Google maps locator
        • Multi select input button
        • MultiFile Upload
        • On/Off switch
        • Process Arrow Steps
        • Rate
        • Rating view
        • Single select input button
        • Slider
        • Tree
      • Template Actions
        • Follow exit
      • Global widgets
        • Agenda
        • Audio Player
        • Calendar
        • Draw Signature
        • Grid Widget
        • Image capture
        • Kanban Board
        • Path
        • Progress Bar
        • reCAPTCHA
        • Timeline
      • Document widgets
        • Json Viewer
        • PDF Viewer
    • Various
    • Go to MyWEM
Powered by GitBook
On this page
  • Navigation Points
  • Edit query parameters

Was this helpful?

Export as PDF
  1. WEM Modeler

Navigation

PreviousConcept RelationsNextHTTP Endpoints

Last updated 7 months ago

Was this helpful?

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 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 clicked on menu item. This action should be a stand-alone flow ending in an Interaction Node without an End Node (or a navigation node navigating to a different flow).

  • Subroutine: This can be used to call flowcharts as a subroutine, to return to the same point when this 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.

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. To make a parameter available to a navigation point, select the navigation point and click on Edit query parameters. You now get a form where you can manage the parameters for this navigation point:

You can now add or delete query parameters. When you Add a new parameters, you have to select the field to which this parameter should be mapped:

The WEM modeler automatically assigns a name to the parameter, but when you click on that name you can change it to your own preferred name (this is the name that is used in the URL). When you want to change the data field, simply click on Change data field.

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 .

You can also define Query string Parameters on the Project level, in , 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.

MyWEM
Navigation Structure from Basic Authentication Project
Project Configuration - Query string