Extension Header

28min
Component Availability
Added
CET 15.0 Major and above
﻿
Overview
Every component tab should have a fixed header that is positioned at the top of the extension library, independent of the scrollable area in the toolbox. The extension name, image, and any commonly accessed functions should go into the header.
There are two types of extension header, with the choice depending on whether inner tabs are used within the component tab.
An example extension header
﻿
Basic Header
Code Example
A helper class is provided to ease the creation of our standard library headers:
CM
BasicLibraryHeaderBuilder headerBuilder(icon("wall/libraryHeader"), $wallTab);

// optional buttons
headerBuilder.addButton(LibraryButton(icon("facelift2023/schemes"),
                                      tooltip=$wallSettingsSection,
					                  callback=f(Control _) {
					                      if (!autoCrashing) createPropsSchemesDialog(wallSchemeKey);
					                  }));
BasicLibraryHeaderBuilder headerBuilder(icon("wall/libraryHeader"), $wallTab);

// optional buttons
headerBuilder.addButton(LibraryButton(icon("facelift2023/schemes"),
                                      tooltip=$wallSettingsSection,
					                  callback=f(Control _) {
					                      if (!autoCrashing) createPropsSchemesDialog(wallSchemeKey);
					                  }));
﻿
This builder can then be passed to the library like so:
Standard Syntax
Library Syntax
CM
Library lib(..., headerBuilder=headerBuilder);
Library lib(..., headerBuilder=headerBuilder);
﻿
CM
library(.., headerBuilder=headerBuilder) {
    // limbs go here
}
library(.., headerBuilder=headerBuilder) {
    // limbs go here
}
﻿
Anatomy
﻿
A - Extension Header (mandatory)
Background colour: Neutral/White-100 (#FFFFFF)
Border colour: Border/Border 1 (#B3B3B3)
Width: 312px
Height: 48px
Border top weight: 1
Border bottom weight: 1

B - Extension Icon (optional)

C - Extension Title (mandatory)
Text colour: Neutral/Grey-86 (#242424)
Text style: Heading 4

D,E,F - Header Button (optional)
Max 3 in row

Note that the header buttons can be customized to your extension's needs. These icons are only used as an example.
Alternative anatomy
There is an alternative header style that can be chosen if a Scheme dropdown is required:
﻿
G - Scheme Dropdown (mandatory)

H - Header Button
Max 1 in row

Note that in this style, only one header button is allowed, as the rest of the space has been allocated to the dropdown.

﻿
Layout & Spacing
Default
﻿
﻿
﻿
Without extension icon
﻿
With schemes dropdown
﻿
Header buttons
Only 2 header buttons
﻿
Only 1 header button
﻿
No header button
﻿
Text Handling
Default
﻿
Without extension icon
﻿
With schemes dropdown
﻿
Header buttons
Only 2 header buttons
﻿
Only 1 header button
﻿
No header button
﻿
﻿
Header With Tabs
The basic header can be extended with tabs (which can be presented as a row of accented tabs or a dropdown).
Tabs are like compartments within a toolbox, each organizing different tools or features relevant to the extension, allowing users to easily switch between them without cluttering the entire extension tab bar.
There is a need to display multiple sub-tabs within a single toolbox tab.
As a way to better organize information into categories.
To avoid long toolboxes and scroll time.
Code Example
To utilize tabs, a specialized header builder, TabbedLibraryHeaderBuilder is used instead.
The useDropDownStyle parameter can be set to true to utilize Dropdown Tabs﻿   instead of Accent Tabs﻿. 
Additionally, in the event that the accent tab row was to exceed a width of 284px, the builder will automatically switch to the dropdown style instead.
CM
// Create a tabbed library header builder.
TabbedLibraryHeaderBuilder headerBuilder(icon("wall/libraryHeader"), 
                                         $wallTab,
                                         useDropDownStyle=false);
                                                
// Optional buttons.
headerBuilder.addButton(LibraryButton(icon("facelift2023/schemes"),
                                      tooltip=$wallSettingsSection,
					                  callback=f(Control _) {
					                      if (!autoCrashing) createPropsSchemesDialog(wallSchemeKey);
					                  }));
					                  
// Create a tabbed library header builder.
TabbedLibraryHeaderBuilder headerBuilder(icon("wall/libraryHeader"), 
                                         $wallTab,
                                         useDropDownStyle=false);
                                                
// Optional buttons.
headerBuilder.addButton(LibraryButton(icon("facelift2023/schemes"),
                                      tooltip=$wallSettingsSection,
					                  callback=f(Control _) {
					                      if (!autoCrashing) createPropsSchemesDialog(wallSchemeKey);
					                  }));
					                  
﻿
Now that we have our specialized header builder, we will demonstrate how to create individual tabs below.
Standard Syntax
Library Syntax
CM
// Create a root library limb.
LibraryLimb rootLibraryLimb(pkg, "root");

// Create your first tab with a tab limb.
TabLimb mainTab(rootLibraryLimb,
                pkg,
                "main"); 

// Append limbs that should be under your first tab, with the
// parent as main tab.
LibraryLimb mainTabFirstSection(mainTab, pkg, "mainFirst");
MessageLimb(mainTabFirstSection, 
            pkg, 
            key="exampleMsg", 
            msgType=messageType.info,
            label="First section message");
            
// To add additional tabs, repeat the same initialization process.
TabLimb secondTab(rootLibraryLimb,
                  pkg,
                  "secondary");
                  
// Append limbs that should be under your second tab, with the
// parent as second tab.
LibraryLimb secondTabFirstSection(secondTab, pkg, "secondFirst");
VoidCallbackLimb(secondTabFirstSection, ...);

// Assign the header builder like usual and there you go!
Library lib(..., headerBuilder=headerBuilder);
// Create a root library limb.
LibraryLimb rootLibraryLimb(pkg, "root");

// Create your first tab with a tab limb.
TabLimb mainTab(rootLibraryLimb,
                pkg,
                "main"); 

// Append limbs that should be under your first tab, with the
// parent as main tab.
LibraryLimb mainTabFirstSection(mainTab, pkg, "mainFirst");
MessageLimb(mainTabFirstSection, 
            pkg, 
            key="exampleMsg", 
            msgType=messageType.info,
            label="First section message");
            
// To add additional tabs, repeat the same initialization process.
TabLimb secondTab(rootLibraryLimb,
                  pkg,
                  "secondary");
                  
// Append limbs that should be under your second tab, with the
// parent as second tab.
LibraryLimb secondTabFirstSection(secondTab, pkg, "secondFirst");
VoidCallbackLimb(secondTabFirstSection, ...);

// Assign the header builder like usual and there you go!
Library lib(..., headerBuilder=headerBuilder);
﻿
CM
// Remember to assign a tabbed library header builder.
library(..., headerBuilder=headerBuilder) {
    // Create a root library limb.
    container LibraryLimb rootLibraryLimb("root") {
        // Create your first tab with a tab limb.
        container TabLimb mainTab("main") {
            // Append limbs that should be under your first tab.
		    container LibraryLimb mainTabFirstSection("mainFirst"){
		        limb MessageLimb message("exampleMsg",
		                                 msgType=messageType.info,
                                         label="First section message");
	        }
	    }
	
	    // To add additional tabs, repeat the same initialization process.
	    container TabLimb secondTab("secondary") {
	        // Append limbs that should be under your second tab.
		    container LibraryLimb secondTabFirstSection("secondFirst"){
		        limb VoidCallbackLimb button("btn", ...);
	        }   
	    }
    }
}
// There you go!
// Remember to assign a tabbed library header builder.
library(..., headerBuilder=headerBuilder) {
    // Create a root library limb.
    container LibraryLimb rootLibraryLimb("root") {
        // Create your first tab with a tab limb.
        container TabLimb mainTab("main") {
            // Append limbs that should be under your first tab.
		    container LibraryLimb mainTabFirstSection("mainFirst"){
		        limb MessageLimb message("exampleMsg",
		                                 msgType=messageType.info,
                                         label="First section message");
	        }
	    }
	
	    // To add additional tabs, repeat the same initialization process.
	    container TabLimb secondTab("secondary") {
	        // Append limbs that should be under your second tab.
		    container LibraryLimb secondTabFirstSection("secondFirst"){
		        limb VoidCallbackLimb button("btn", ...);
	        }   
	    }
    }
}
// There you go!
﻿
Anatomy
Tabs
﻿
A - Accent Tabs
This accent tab row cannot exceed a width of 284px, and is affected by both the number of tabs and the width of each tab. If this width is exceeded, then the dropdown presentation will be used instead (see below).
Dropdown
﻿
B - Dropdown Tabs
The usage of this presentation is encouraged when tab names are long, and will be forced when the width of the accent tab row exceeds 284px.
Layout & Spacing
Tabs
﻿
﻿
Dropdown
﻿
﻿
Text Handling
All margins are the same as with the basic header with no tabs, with only the height being changed. Note that the height of the header is differs slightly depending on whether a accent tabs or dropdown presentation are used.
Tabs
﻿
Dropdown
﻿
﻿
Updated 14 Oct 2024
Content Layout of a Component Tab
Product Button
Extension Header

Overview

Basic Header

Code Example

Anatomy

Alternative anatomy

Layout & Spacing

Default

Without extension icon

With schemes dropdown

Header buttons

Text Handling

Default

Without extension icon

With schemes dropdown

Header buttons

Header With Tabs

When to use?

Code Example

Anatomy

Tabs

Dropdown

Layout & Spacing

Tabs

Dropdown

Text Handling

Tabs

Dropdown
