Overview
This example explains how to add additional buttons to a new section in the sidebar nav layout. We will create a custom view and then append the view component to the sidebar-nav layout metadata. The additional button will merely show an alert, and a flyout menu with a link to the Accounts module but can be expanded to do much more.
Steps To Complete
This tutorial requires the following steps, which are explained in the sections below:
- Extend the language files to include the new labels
- Creating the Custom View
- Appending the View to Layout Metadata
- Adding a Secondary Action
Extending the Language files to Include New Labels
We'll want to add a couple new labels for our new sidebar-nav-item. To do, create the following file: ./custom/Extension/application/Ext/Language/en_us.greetingNavItem.php. Now add the following contents to the file:
<?php // Create the "Hello" label $app_strings['LBL_HELLO'] = 'Hello!'; // Create the "Greetings" header $app_strings['LBL_GREETINGS'] = 'Greetings';
Creating the Custom View with a Primary Action
To add a new sidebar-nav-item-group and sidebar-nav-item, you will first need to create the custom view that will contain your button and logic. To create the custom view create a folder in ./custom/clients/base/views with the name of your view, such as ./custom/clients/base/views/greeting-nav-item/. Once your folder is in place, you can create the three primary files that make up your view:
greeting-nav-item.hbs- Contains the handlebar template for your viewgreeting-nav-item.js- Contains the JavaScript controller logicgreeting-nav-item.php- Contains the metadata your view might use. For this example, we simply use the metadata to define whether the greeting will auto close or not.
./custom/clients/base/views/greeting-nav-item/greeting-nav-item.hbs:
{{!
Define HTML for our new button. We will mimic the style of other buttons
in the sidebar-nav so we remain consistent.
}}
{{#if appIsSynced}}
<button class="sidebar-nav-item-btn w-full bg-transparent absolute p-0 text-base text-initial"
rel="tooltip"
data-placement="{{tooltipPlacement}}"
title="{{str label module}}"
>
<span class="collapsed block ml-0 px-5.5 py-2" rel="tooltip" data-placement="{{tooltipPlacement}}" title="{{str label module}}">
<i class="{{buildIcon icon}} text-white"></i>
</span>
<span class="expanded ellipsis_inline ml-0 px-5.5 py-2 text-white" rel="tooltip" data-placement="{{tooltipPlacement}}" title="{{str label module}}">
<i class="{{buildIcon icon}} text-white"></i>
<span class="text-sm pl-4.5">{{str label module}}</span>
</span>
</button>
{{/if}}./custom/clients/base/views/greeting-nav-item/greeting-nav-item.js:
({
extendsFrom: 'SidebarNavItemView',
primaryActionOnClick: function(){
app.alert.show('greeting-alert', {
level: 'info',
messages: 'Hello '+app.user.get('full_name')+'!',
autoClose: this.meta.autoClose || false
});
},
})
./custom/clients/base/views/greeting-nav-item/greeting-nav-item.php:
<?php
$viewdefs['base']['view']['greeting-nav-item'] = array(
'autoClose' => true
);
Appending the View to Layout Metadata
Once the view is created, you simply need to add the view to the sidebar-nav Layout metadata. The sidebar-nav Layout is located in ./clients/base/layouts/sidebar-nav/, so appending the view to this layout can be done via the Extension Framework. Create a file in ./custom/Extension/application/Ext/clients/base/layouts/sidebar-nav/ and the Extension Framework will append the metadata to the Sidebar-Nav Layout.
Next, we’ll want to create the view: ./custom/Extension/application/Ext/clients/base/layouts/sidebar-nav/greeting-nav-item.php
<?php
$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
'view' => [
'name' => 'footer-greet-button',
'type' => 'footer-greet-button',
'icon' => 'sicon-bell-lg',
'label' => 'LBL_HELLO’,
],
];
Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and nav-item in the bottom of the sidebar-nav bar layout.
Adding a Secondary Action
With the introduction of the sidebar-nav-item component, we’re now introducing secondary actions. These appear by way of a kebab menu when hovering on the sidebar-nav-item container to which they are added. It can be configured similar to a Primary Action.
In this example, we’ll add a secondary action to our footer-greet-button view. It will trigger a flyout menu that has a link to the Accounts module.
First, we'll need to add the markup to render the kebab icon in ./custom/clients/base/views/greeting-nav-item/greeting-nav-item.hbs. The new template will look as such:
{{#if appIsSynced}}
<button class="sidebar-nav-item-btn w-full bg-transparent absolute p-0 text-base text-initial"
rel="tooltip"
data-placement="{{tooltipPlacement}}"
title="{{str label module}}"
>
<span class="collapsed block ml-0 px-5.5 py-2" rel="tooltip" data-placement="{{tooltipPlacement}}" title="{{str label module}}">
<i class="{{buildIcon icon}} text-white"></i>
</span>
<span class="expanded ellipsis_inline ml-0 px-5.5 py-2 text-white" rel="tooltip" data-placement="{{tooltipPlacement}}" title="{{str label module}}">
<i class="{{buildIcon icon}} text-white"></i>
<span class="text-sm pl-4.5">{{str label module}}</span>
</span>
</button>
<button class="sidebar-nav-item-kebab bg-transparent absolute p-0 h-full">
<i class="{{buildIcon 'sicon-kebab'}} text-white"></i>
</button>
{{/if}}
Now we can define the components that will be used in the flyout menus via metadata in ./custom/Extension/application/Ext/clients/base/layouts/sidebar-nav/greeting-nav-item.php. The new metadata looks like this:
<?php
$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
'layout' => [
'type' => 'sidebar-nav-item-group',
'name' => 'sidebar-nav-item-group-bottom',
'css_class' => 'flex-grow-0 flex-shrink-0',
'components' => [
[
'view' => [
'name' => 'footer-greet-button',
'type' => 'footer-greet-button',
'icon' => 'sicon-bell-lg',
'label' => 'LBL_HELLO',
'flyoutComponents' => [
[
'view' => 'sidebar-nav-flyout-header',
'title' => 'LBL_GREETINGS',
],
[
'view' => [
'type' => 'sidebar-nav-flyout-actions',
'actions' => [
[
'route' => '#Accounts',
'label' => 'LBL_ACCOUNTS',
'icon' => 'sicon-account-lg',
],
],
],
],
],
],
],
],
],
];