$layout
Updated on Aug 28, 2025 13 minutes to readThe Layout plugin provides UI layout control helpers for navigation bar, app bar, command bar, primary menu, and action menus.
It exposes methods to show, hide, toggle, and manipulate various interface sections.
Navigation Bar
Allows you to switch between apps, access your profile, view notifications, and open menus.
.png)
| Method | Description |
|---|---|
| hide | Hides the navigation bar. |
| isHidden | Returns whether the navigation bar is hidden. |
| show | Shows the navigation bar. |
App Bar
Top bar showing the title of the current screen and providing access to form actions.
.png)
| Method | Description |
|---|---|
| hide | Hides the app bar. |
| isHidden | Returns whether the app bar is hidden. |
| show | Shows the app bar. |
Command Bar
Contains actions for the current screen, such as Save, Print, or Edit; can be customised via this plugin.
In the mobile interface, the action marked as default replaces the NavigationBar (highlighted in blue on the screenshot).
.png)
.png)
| Method | Description |
|---|---|
| addButton | Adds a button to the command bar. |
| addDropdown | Adds a dropdown to the command bar. |
| findActionById | Finds an action by ID. |
| getActions | Retrieves all actions. |
| hide | Hides the command bar. |
| insertButton | Inserts a button at the specified index. |
| insertDropdown | Inserts a dropdown at the specified index. |
| isHidden | Returns whether the command bar is hidden. |
| prependButton | Inserts a button at the beginning of the command bar. |
| prependDropdown | Inserts a dropdown at the beginning of the command bar. |
| runDefaultAction | Executes the default action. |
| show | Shows the command bar. |
Primary Menu
Main menu of the app for navigating key features.
.png)
| Method | Description |
|---|---|
| hide | Hides the primary menu. |
| isHidden | Returns whether the primary menu is hidden. |
| isMinimized | Returns whether the primary menu is minimized. |
| maximize | Maximizes the primary menu. |
| minimize | Minimizes the primary menu. |
| show | Shows the primary menu. |
Action1 Menu
Dropdown menu for quick access to selected metadata or frequently used actions.
.png)
| Method | Description |
|---|---|
| hide | Hides the Action1 menu. |
| isHidden | Returns whether the Action1 menu is hidden. |
| show | Shows the Action1 menu. |
Action2 Menu
Secondary dropdown menu for additional metadata or actions.
.png)
| Method | Description |
|---|---|
| hide | Hides the Action2 menu. |
| isHidden | Returns whether the Action2 menu is hidden. |
| show | Shows the Action2 menu. |
Methods Details
action1Menu.hide()
• Type
() => voidaction1Menu.isHidden()
• Type
() => booleanaction1Menu.show()
• Type
() => voidaction2Menu.hide()
• Type
() => voidaction2Menu.isHidden()
• Type
() => booleanaction2Menu.show()
• Type
() => voidappBar.hide()
• Type
() => voidappBar.isHidden()
• Type
() => booleanappBar.show()
• Type
() => voidcommandBar.addButton()
• Type
() => CommandBarButton• Details
Returns a CommandBarButton – a builder instance that can be used to configure and add a button to the end of the command bar.
• Example
// Create a button that opens a link in a new browser tab
const linkButton = E8App.$layout.commandBar.addButton()
.id('openLink') // Unique identifier
.label('Open Link in New Tab') // Button label
.icon('link') // Icon for the button
.variant('secondary') // Visual style
.url('https://every8.cloud') // URL to open
.target('_blank'); // Open in a new tab
// Create a button that runs JavaScript code when clicked
const button = E8App.$layout.commandBar.addButton()
.id('runJs') // Unique identifier
.label('Run JavaScript Code') // Button label
.icon('code') // Icon for the button
.variant('warning') // Visual style
.class('text-white') // Custom CSS class
.default(true) // Marked as the default action
.onClick(() => { // Action handler
console.log('Test click'); // Example code on button click
});commandBar.addDropdown()
• Type
() => CommandBarDropdown• Details
Returns a CommandBarDropdown – a builder instance that can be used to configure and add a dropdown menu to the end of the command bar.
• Example
// Create a dropdown menu in the CommandBar
const dropdown = E8App.$layout.commandBar.addDropdown()
.label('More Actions') // Dropdown label
.icon('three-dots-vertical') // Dropdown icon
.variant('secondary'); // Visual style
// Add a single button directly into the dropdown
dropdown.addButton()
.id('refreshPage')
.label('Refresh Page')
.icon('arrow-repeat')
.onClick(() => {
location.reload();
});
// Add a divider (visual separator between items)
dropdown.addDivider();
// Add a group with multiple related buttons
const group = dropdown.addGroup()
.label('Export Options') // Group label
.icon('download');
// Add buttons into the group
group.addButton()
.id('exportPdf')
.label('Export as PDF')
.icon('filetype-pdf')
.onClick(() => {
console.log('Exporting as PDF...');
});
group.addButton()
.id('exportCsv')
.label('Export as CSV')
.icon('filetype-csv')
.onClick(() => {
console.log('Exporting as CSV...');
});commandBar.findActionById()
• Type
(id: string) => CommandBarAction | nullcommandBar.getActions()
• Type
() => CommandBarAction[]• Details
Returns a Promise that resolves with an array of top-level CommandBarAction objects.
commandBar.hide()
• Type
() => voidcommandBar.insertButton()
• Type
(index: number) => CommandBarButton• Details
Expects an index that defines the position where the button should be inserted.
If a negative index is provided, the button is inserted from the end of the command bar.
Returns a CommandBarButton – a builder instance that can be used to configure and insert a button at the specified index.
commandBar.insertDropdown()
• Type
(index: number) => CommandBarDropdown• Details
Expects an index that defines the position where the dropdown should be inserted.
If a negative index is provided, the dropdown is inserted from the end of the command bar.
Returns a CommandBarDropdown – a builder instance that can be used to configure and insert a dropdown menu at the specified index.
commandBar.isHidden()
• Type
() => booleancommandBar.prependButton()
• Type
() => CommandBarButton• Details
Returns a CommandBarButton – a builder instance that can be used to configure and add a button to the beginning of the command bar.
commandBar.prependDropdown()
• Type
() => CommandBarDropdown• Details
Returns a CommandBarDropdown – a builder instance that can be used to configure and add a dropdown menu to the beginning of the command bar.
commandBar.runDefaultAction()
• Type
() => Promise<void>• Details
Invokes the default action of the command bar.
If the default item has an onClick handler, that function will be executed.
If the default item has a url and target, the method will navigate to the specified link instead.
commandBar.show()
• Type
() => voidnavigationBar.hide()
• Type
() => voidnavigationBar.isHidden()
• Type
() => booleannavigationBar.show()
• Type
() => voidprimaryMenu.hide()
• Type
() => voidprimaryMenu.isHidden()
• Type
() => booleanprimaryMenu.isMinimized()
• Type
() => booleanprimaryMenu.maximize()
• Type
(remember?: boolean) => void• Type
Expects an optional remember flag (default: false).
If true, the maximized state is saved and restored on the next session; if false, it only applies to the current session.
In the mobile interface, calling this method opens the primary menu.
Expands the primary menu to its maximized state.
primaryMenu.minimize()
• Type
(remember?: boolean) => void• Type
Expects an optional remember flag (default: false).
If true, the minimized state is saved and restored on the next session; if false, it only applies to the current session.
In the mobile interface, calling this method closes the primary menu.
Collapses the primary menu to its minimized state.
primaryMenu.hide()
• Type
() => void