Header Module

Estimated Reading Time:  2 minutes


A header is 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’ll create this in its own module, then connect it to your application.

It's important to note that Header module RBAC (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 you can connect it to your application. The best way to do this is to add your header module to the Library. By 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. From the Library menu in the bar at the top of the page, select Library Elements.
2. Click Create New.
3. In the Module Name field, enter a name for your module.

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

4. Select where you want to share the header. You can select individual workspaces or the whole environment.
5. Click Create.

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

  • Primary Field: All components.

  • Secondary Field: Button and Hidden components.

  • Display & Layout: Columns, Content, Field Group, HTML Element, and Panel components.

  • Data & Processing: Data Workflow, Decisions, Initializer, and Plug-In components.

Previewing a Header Module.

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

Also, to successfully preview your header module, you must preview it at the application level. Otherwise, you need to manipulate the browser URL to take into account 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. From the ellipsis (...) menu, select Settings.
3. From the Header Module drop-down, select your header module.

4. Click Save.

Disconnecting a Header Module

If you decide you don’t want a header in your application anymore, it’s simple to remove.

To remove a header module from an application:

1. Navigate to your workspace and locate your application.
2. From the ellipsis (…) menu, click Settings.
3. From the Header Module drop-down, click the X next to the header module’s name.

4. Click Save.

Best Practices

  • Set RBAC (role-based access control) for header modules to Anonymous. If RBAC is not set to anonymous, end-users can't view the header in your application.

TIP  To learn more about module-level RBAC, visit our Module-Level Role Based Access Control page.