Header Container Layout
  • 19 Oct 2023
  • 3 Minutes to read
  • Dark
    Light

Header Container Layout

  • Dark
    Light

Article summary

Breaking Change for v8.13 & v8.14
In versions up to v8.12, when the Header is configured with "Initially Visible" set to False and "Is Collapsable" set to True, the control will load in a collapsed state for end users. However, starting from v8.13 to v8.14, if the control is set to be hidden, the entire container will not be visible to users. Additionally, any Form Controls contained within the Header container will also be hidden from end users. It's important to note that in v8.13 & v8.14, there is no capability to load the control body in a collapsed state.

Feature Addition in v8.15
Since the capability to load the container in a collapsed state for end users was not available in v8.13 & v8.14, it has been introduced in v8.15. This new feature includes the addition of a "Initially Collapsed" setting within the properties.

Overview

The Header Container Layout serves as a Form Control that empowers designers to incorporate additional Form controls or Form layouts inside it. It also provides the flexibility to collapse or expand, accompanied by its own title header. 

Designer users can drag and drop Form controls within the container, treating it as an independent Form Layout.

Advantages of using Header Container

AdvantagesDescription
Enhanced User ExperienceHeader Container Layouts improve user interaction by offering a structured and organized interface, making it easier for users to access information, making it easier for users to access information.
Space EfficiencyCollapsible sections save screen real estate, allowing users to expand and view only what's relevant at any given time. This works well on mobile devices.
Ease of MaintenanceDevelopers can manage and update content within collapsible sections more efficiently, enhancing the scalability of applications.

Business Use Cases

Example Use CasesDescription

Loan Application Form

Financial institutions often require customers to fill out extensive loan application forms. Using collapsible sections, applicants can easily navigate through sections like Personal Information, Financial History, Collateral Details, and Loan Terms.
Healthcare Patient Intake FormIn a medical clinic, patient intake forms can be extensive. These forms can be made more user-friendly by dividing them into sections such as Medical History, Insurance Information, and Emergency Contacts.

The following video demonstrates the core functionality of  Header Container, where the users click on the plus icon to expand the headers and the minus icon to collapse.

Related Information:

Following is an example lab article for reference,


Configuration

The Header Container Layout control is located in the Toolbox panel under the LAYOUTS category. In the Properties panel for the Header Container, users can find various customization options for the Header Container.

PropertiesDescription
TitleThis will be the Header's Title that will be visible to the end users.
BaseContentHeader Container is its own distinguished section of the Form or Page.

ContainerIt makes the Header Container transparent.

ChildShrink the title bar to make it appear secondary to the default BaseContent setting.

ChromelessIt makes the Header Container transparent and strips away the Header so the Container renders as it doesn't have any appearance-related properties.
Use Custom TitleToggles use a custom title format for the Header and prompts for which Folder this format is located when enabled.
Hide TitlebarAllows selection to hide/unhide the title by directly choosing those options or choosing according to the Portal settings.
Use Small TitlebarAllows selection to use a small title bar by directly choosing those options or choosing according to the Portal settings.
Is CollapsibleAllows selection for the Header to be collapsible by directly choosing those options or choosing according to the Portal settings. If selected "Yes," it populates another setting for "Initially Collapsed".
Initially CollapsedIf Marked True, this will make the Container load in a collapsed state for the end users.


Feature Changes

DescriptionVersionDateDeveloper Task
Removed the bug that allowed the users to load the control body in a collapsed state.8.13September 28, 2023
[DT-038111]
Added the ability to load the Header Container in an initially collapsed state.8.15October 12, 2023[DT-038448]

For further information on Forms, visit the Decisions Forum.

Was this article helpful?