You are currently reviewing an older revision of this page.

Moving Footer content to Sidebar Nav

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 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:

  1. Extend the language files to include the new labels
  2. Creating the Custom View
  3. Appending the View to Layout Metadata
  4. 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:

Fullscreen
1
2
3
4
5
6
7
<?php
// Create the "Hello" label
$app_strings['LBL_HELLO'] = 'Hello!';
// Create the "Greetings" header
$app_strings['LBL_GREETINGS'] = 'Greetings';
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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:

  1. greeting-nav-item.hbs - Contains the handlebar template for your view
  2. greeting-nav-item.js - Contains the JavaScript controller logic
  3. greeting-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:

Fullscreen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{{!
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}}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

./custom/clients/base/views/greeting-nav-item/greeting-nav-item.js:

Fullscreen
1
2
3
4
5
6
7
8
9
10
11
({
extendsFrom: 'SidebarNavItemView',
primaryActionOnClick: function(){
app.alert.show('greeting-alert', {
level: 'info',
messages: 'Hello '+app.user.get('full_name')+'!',
autoClose: this.meta.autoClose || false
});
},
})
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

./custom/clients/base/views/greeting-nav-item/greeting-nav-item.php:

Fullscreen
1
2
3
4
5
<?php
$viewdefs['base']['view']['greeting-nav-item'] = array(
'autoClose' => true
);
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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

Fullscreen
1
2
3
4
5
6
7
8
9
10
<?php
$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
'view' => [
'name' => 'footer-greet-button',
'type' => 'footer-greet-button',
'icon' => 'sicon-bell-lg',
'label' => 'LBL_HELLO’,
],
];
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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:

Fullscreen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
{{#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}}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

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:

Fullscreen
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?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' => [
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX