Pages

The pages sub-section is defined in the layout section of the config file. Here you can set up the pages users of your tenant will see.

The pages configuration sub-section must contain an array of 0 or more pages.

A page configuration contains the following parameters:

Parameter	Description	Required
name	A name used internally to identify a page. This must be unique	Yes
path	The path on which the page will be displayed	No (Served on the root URL if not specified)
cssClasses	An array of CSS classes to append to the page's class list	No
navigation	A navigation configuration section.	Yes
components	A components configuration section.	Yes
authentication	A authentication object	No

Authentication

An authentication object contains the following parameters:

Parameter	Description	Required	Default value
required	Specifies whether the user must be authenticated to access this page	No	false

Navigation

A navigation configuration section controls how the specific page is represented in navigation.

It contains the following parameters:

Parameter	Description
name	The name that must be displayed for links to the page
display	Controls how the page is displayed in navigation. Valid values: 'none' - The page is not shown in navigation 'name' - The page is shown in navigation and the name parameter is used as the text
icon	The FontAwesome icon class used for displaying an icon next to the page navigation
ignoreHistory	Specifies whether the page should be added to the browser history when navigating to it. This is useful for pages that are not meant to be navigated to directly, but rather as a result of an event.

Components

The components sub-section is defined in the pages section of the config file. Here you can set up components that form part of the page. A component can either be pure HTML or a web component.

The components configuration sub-section must contain an array of 0 or more components and contains the following parameters:

Parameter	Description	Required
name	A name used internally to identify a component. This must be unique	Yes
html	The HTML that must be displayed	*If tag is not specified
tag	The HTML tag of the web component	*If html is not specified
url	The URL of the web component script	*If tag is specified
parameters	The attributes to set on the web component. This must be a JSON object.	*If tag is specified
cssClasses	An array of CSS classes to append to the component's class list	No
events	An array of events	No

Web Components

Web components provide reusable custom elements with encapsulated functionality. You can add any web component that conforms to the web component spec to your pages.

When adding a web component, you must specify:

• The tag name using the tag parameter
• The URL to the component's JavaScript file using the url parameter
• Any configuration via the parameters object

Example:

{
  "name": "data-table",
  "tag": "custom-data-table",
  "url": "https://cdn.example.com/components/data-table.js",
  "parameters": {
    "data-source": "api/users",
    "page-size": 10,
    "sortable": true
  }
}

Events

You can capture events emitted by web components to trigger navigation within your application. Any standard DOM event or custom event can be used as a navigation trigger.

The event configuration contains the following parameters:

Parameter	Description
event	The event name that will trigger the navigation (e.g., "click", "change", "custom-event")
path	An array of strings or function objects that is used to compose the new path for navigation. If it is a string, it will be used as a literal. If it is a function object, then the function will be evaluated and the return value of the function will be used in the path.

Example:

{
  "events": [
    {
      "event": "row-selected", 
      "path": ["/details/", {"fn": "return e.detail.id;"}]
    }
  ]
}

Function objects

Function objects let you dynamically generate portions of navigation paths based on event data. They contain:

Parameter	Description
fn	The function whose return value will be used in navigation. The event that triggered the evaluation will be passed in as the e variable. Example: "return e.detail.id;" will extract the ID property from the event's detail object.

Additional examples:

// Extract data from a complex event object
{"fn": "return e.detail.user.profile.id;"}

// Format and transform event data
{"fn": "return e.detail.type + '-' + e.detail.id.toLowerCase();"}

// Conditional path generation
{"fn": "return e.detail.isAdmin ? 'admin' : 'user';"}