Header Module

Estimated Reading Time:  2 minutes


A header module displays as the top section of a web page. You might add a logo, calls to action, navigational elements, search fields, or other features to the header. You create a header in its own module, then connect it to your application.

It's important to note that 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. (role-based access control) is defined by the RBAC of the embedded components.

What You’ll Learn

In this article, you'll learn how to create, preview, connect, and disconnect header modules to an application.

Creating a Library Element Header

You'll need to create a header module before connecting it to your application. The best way to do this is to add your header module to the Library. After adding your module to the library, you can share it throughout your applications and even the entire environment.

NOTE  If you plan to create a header, be mindful when naming components. Both the header and footer modules can't have components with the same Property ID. Otherwise, neither display in Express View. It's 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. Click Library Elements.
3. Click + Create New.
4. In the Module Name field, enter a name for your header module.

NOTE  To quickly find your header later, start your module name with Header. For example, Header: Acme Corp.

5. Click Create.

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

Previewing a Header Module

It's important to note that all modules that 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 something like the following: https://www.{your-environment}.io/app/{appPath}#/display/{moduleId}/{submissionId}/{moduleId}.

Connecting an Existing Header Module to Your 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 (···) menu.
3. Click 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.

Disconnecting a Header Module

If you decide you don’t 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 (···) menu.
3. Click 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.