Command Bar
Updated on Aug 7, 2023 3 minutes to readTo utilize the methods offered by this plugin, you should call them through the E8App.$commandBar object.
Add button
Syntax:
E8App.$commandBar.addButton()
Description:
Adds a button to the command bar of a form.
Returned value:
Object of the CommandBarButton class.
E8App.$commandBar.addButton()
Insert button
Syntax:
E8App.$commandBar.insertButton(<index>)
Description:
Adds a button to the command bar of a form at a specific index.
Parameters:
<index> - required
Type: Number
Defines a position where a button should be added.
Returned value:
Object of the CommandBarButton class.
E8App.$commandBar.insertButton(5)
Prepend button
Syntax:
E8App.$commandBar.prependButton()
Description:
Inserts a button at the beginning of the command bar elements.
Returned value:
Object of the CommandBarButton class.
E8App.$commandBar.prependButton()
Add dropdown
Syntax:
E8App.$commandBar.addDropdown()
Description:
Adds a dropdown to the command bar of a form.
Returned value:
Object of the CommandBarDropdown class.
E8App.$commandBar.addDropdown()
Insert dropdown
Syntax:
E8App.$commandBar.insertDropdown(<index>)
Description:
Adds a dropdown to the command bar of a form at a specific index.
Parameters:
<index> - required
Type: Number
Defines a position where a dropdown should be added.
Returned value:
Object of the CommandBarDropdown class.
E8App.$commandBar.insertDropdown(6)
Prepend dropdown
Syntax:
E8App.$commandBar.prependDropdown()
Description:
Inserts a dropdown at the beginning of the command bar elements.
Returned value:
Object of the CommandBarDropdown class.
E8App.$commandBar.prependDropdown()
Get actions
Syntax:
E8App.$commandBar.getActions()
Description:
Gets an array of command bar object(s).
Returned value:
Type: Array of objects.
The promise resolves to an array of command bar objects representing the response to the request.
E8App.$commandBar.getActions()
Delete action
Syntax:
E8App.$commandBar.deleteAction(<index>)
Description:
Deletes a command bar object.
Parameters:
<index> - required
Type: Number
An index of an obect to be deleted.
Returned value:
Type: Object.
E8App.$commandBar.deleteAction(3);
Hide command bar
Syntax:
E8App.$commandBar.hide()
Description:
Hides the command bar on the form.
E8App.$commandBar.hide()
Show command bar
Syntax:
E8App.$commandBar.show()
Description:
Makes the command bar on the form visible.
E8App.$commandBar.show()
Run default action
Syntax:
E8App.$commandBar.runDefaultAction()
Description:
Runs a callback function associated to the default action element of the command bar.
E8App.$commandBar.runDefaultAction()
Command bar button modifiers
Icon
Syntax:
E8App.$commandBar.addButton().icon(<icon>)
Description:
Adds an icon on a button.
Parameters:
<icon> - required
Type: String
Name of an icon.
E8App.$commandBar.addButton().icon('plus');
Label
Syntax:
E8App.$commandBar.addButton().label(<label>)
Description:
Adds a label on a button.
Parameters:
<label> - required
Type: String
Label content.
E8App.$commandBar.addButton().label('Create');
Variant
Syntax:
E8App.$commandBar.addButton().variant(<variant>)
Description:
Defines a button style.
Parameters:
<variant> - required.
Type: String
Dropdown style. Supported styles: 'Primary', 'Secondary', 'Success', 'Danger', 'Warning', 'Info', 'Light', 'Dark'.
E8App.$commandBar.addButton().variant('Danger');
Default
Syntax:
E8App.$commandBar.addButton().default(<value>)
Description:
Defines a button as a default action of the command bar.
Parameters:
<value> - required.
Type: Boolean
Status.
E8App.$commandBar.addButton().default(true);
Hide label on extra small screen
Syntax:
E8App.$commandBar.addButton().hideLabelOnXs(<value>)
Description:
Hides a button label on XS breakpoint.
Parameters:
<value> - required.
Type: Boolean
True - label hidden, False - label visible on XS breakpoint.
E8App.$commandBar.addButton().hideLabelOnXs(true);
Command bar dropdown modifiers
Icon
Syntax:
E8App.$commandBar.addDropdown().icon(<icon>)
Description:
Adds an icon on a dropdown.
Parameters:
<icon> - required
Type: String
Name of an icon.
E8App.$commandBar.addDropdown().icon('arrow-left');
Label
Syntax:
E8App.$commandBar.addDropdown().label(<label>)
Description:
Adds a label on a dropdown.
Parameters:
<label> - required
Type: String
Label content.
E8App.$commandBar.addDropdown().label('my dropdown');
Variant
Syntax:
E8App.$commandBar.addDropdown().variant(<variant>)
Description:
Defines a dropdown style.
Parameters:
<variant> - required.
Type: String
Dropdown style. Supported styles: 'Primary', 'Secondary', 'Success', 'Danger', 'Warning', 'Info', 'Light', 'Dark'.
E8App.$commandBar.addDropdown().variant('Secondary');
Hide label on extra small screen
Syntax:
E8App.$commandBar.addDropdown().hideLabelOnXs(<value>)
Description:
Hides a dropdown label on XS breakpoint.
Parameters:
<value> - required.
Type: Boolean
True - label hidden, False - label visible on XS breakpoint.
E8App.$commandBar.addDropdown().hideLabelOnXs(true);