Header Module

Overview

A header module displays at the top of an application in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. In a header module, you might display a logo, insert a CTA Call To Action (CTA) is a piece of content designed to persuade an end-user to perform a specific act. An example of a common CTA is a "Buy Now" button., navigational elements, search fields, or other features. Headers exist in a separate module, which you connect to your application in the App Details settings.

Header module RBAC RBAC (Role-Based Access Control) is a method to control system access for authorized users. The role in RBAC refers to the levels of access employees have to a network. is defined by the RBAC of the embedded components.

Creating a Header Module

Headers are FE front-end modules assigned to the Header Module drop-down in Application settings.

To create and assign a header module at the Application level:

1. Navigate to your application.
2. Click + Create New.
3. Select Module.
4. In the Module Name field, enter a name for your header module. The Module-Path field autopopulates.

To make it easier to locate your header later, begin your module name with Header. For example, Header: Acme Corp.

5. From the Module Type drop-down select FE Front-End.

Header Modules are a front-end element, an application might experience unintended consequences when setting the Module Type to API API or  O  Other.

6. Click Create.

From here, open the module and customize your header. Here are the following supported components:

Avoid naming components with common values. Header and footer modules cannot have components with the same Property ID. Otherwise, neither display in Express View. It's a best practice to differentiate components with a descriptive name—for example, dwHeaderOutput.

Connecting a Header Module to an Application

Now that you have a header module, connect it to your application.

To connect a header at the Application level:

1. Navigate to the application that contains your header module.
2. At the top of the page, click ··· (options).
3. Select Settings.
4. From the Header Module drop-down, enter or select the header module.

A static image displaying the App Details modal, the Header Module drop-down is selected, and an existing header module is highlighted.

5. Click Save & Close.

Previewing a Header Module

It's important to note that all modules you plan to have navigate to using your header module must exist in the same application. Otherwise, you'll receive a 403 error.

To preview the header module at the Application level:

1. Navigate to the application that contains your header module.
2. At the top of the page, click ··· (options).
3. Select Preview. The application displays on a new page with the header module present at the top.

A static image displaying the Application page, the options button and Preview buttons are highlighted.

To successfully preview your header module, you must preview it at the Application level. Otherwise, you must manipulate the browser URL to consider any redirects. The URL looks like the following: https://www.{your-environment}.io/app/{appPath}#/display/{{moduleId}}/{{submissionId}}/{{moduleId}}.

Disconnecting a Header Module

If you decide you do not want a header in your application anymore, you can remove it.

To disconnect a header at the Application level:

1. Navigate to the application that contains your header module.
2. At the top of the page, click ··· (options).
3. Select Settings.
4. From the Header Module drop-down, click the X next to the Header Module’s name.

A static image displaying the App Details modal. The Header Module field displays a X button to disconnect an existing header module.

5. Click Save & Close.

Disconnecting a header module does not delete it.

Overview

A header module displays at the top of an application in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. In a header module, you might display a logo, insert a CTA Call To Action (CTA) is a piece of content designed to persuade an end-user to perform a specific act. An example of a common CTA is a "Buy Now" button., navigational elements, search fields, or other features. Headers exist in a separate module, which you connect to your application in the App Details settings.

Header module RBAC RBAC (Role-Based Access Control) is a method to control system access for authorized users. The role in RBAC refers to the levels of access employees have to a network. is defined by the RBAC of the embedded components.

Creating a Header Module

You'll need to create a header module before connecting it to your application. The best way to achieve this task is to add your header module to the Library. After adding your module to the Library, you can share it with all other applications in your environment.

If you plan to create a header, be mindful when naming components. Both the header and footer modules cannot have components with the same Property ID. Otherwise, neither display in Express View. It's a best practice to differentiate components with a descriptive name—for example, dwHeaderOutput.

1. At the top right of the Unqork Designer Platform, click the Library ▾ drop-down.
2. Select Library Elements.
3. Click + Create New.
4. In the Module Name field, enter a name for your header module.

To make it easier to locate your header later, begin your module name with Header. For example, Header: Acme Corp.

5. Click Create.

From here, open the module and customize your header. Here are the following supported components:

Connecting a Header Module to an Application

Now that you have a header, connect it to your application.

To connect a header module to your application:

1. Navigate to your workspace and locate your application tile.
2. Click the ellipsis (···) button.
3. Select Settings Icon Settings.
4. From the Header Module drop-down, enter or select a header module.

A static image displaying the App Details modal, the Header Module drop-down is selected, and an existing header module is highlighted.

5. Click Save.

Previewing a Header Module

It's important to note that all modules you plan to have navigate to using your header module must exist in the same application. Otherwise, you'll receive a 403 error. The following image shows you how to preview a module at the application level:

To successfully preview your header module, you must preview it at the Application level. Otherwise, you must manipulate the browser URL to consider any redirects. The URL looks like the following: https://www.{your-environment}.io/app/{appPath}#/display/{moduleId}/{submissionId}/{moduleId}.

Disconnecting a Header Module

If you decide you do not want a header in your application anymore, you can remove it.

To remove a header module from an application:

1. Navigate to your workspace and locate your application.
2. Click the ellipsis (···) button.
3. Select Settings Icon Settings.
4. From the Header Module drop-down, click the X next to the Header Module’s name.

A static image displaying the App Details modal. The Header Module field displays a X button to disconnect an existing header module.

5. Click Save.

Resources