Moving Footer content to Sidebar Nav

Scott King — Wed, 12 Oct 2022 15:00:28 GMT

Current Revision posted to Dev Tutorials by Scott King on 10/12/2022 3:00:28 PM

Overview

This example explains how to add additional buttons to a new section in the sidebar nav layout. You may have previously customized a button that was added to the footer layout, which can be repurposed here and added to 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:

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_C'] = 'Hello!';

Creating the Custom View with a Primary Action

To add a new sidebar-nav-item, you will first need to create the custom view that extends sidebar-nav-item. 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 two primary files that make up your view. By default, we can use the out of the box template for our view.

greeting-nav-item.js - Contains the JavaScript controller logic
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.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' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
      'template' => 'sidebar-nav-item',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

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 greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

Next, 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'][] = [
    'view' => [
        'name' => 'greeting-nav-item',
        'type' => 'greeting-nav-item',
        'icon' => 'sicon-bell-lg',
        'label' => 'LBL_HELLO_C',
        'secondary_action' => true,
        'template' => 'sidebar-nav-item',
        'flyoutComponents' => [
            [
                'view' => 'sidebar-nav-flyout-header',
                'title' => 'LBL_GREETINGS_C',
            ],
            [
                'view' => [
                    'type' => 'sidebar-nav-flyout-actions',
                    'actions' => [
                        [
                            'route' => '#Accounts',
                            'label' => 'LBL_ACCOUNTS',
                            'icon' => 'sicon-account-lg',
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Customizing the sidebar-nav-item Template

By default, our new sidebar-nav-item is using the base Handlebars template. If you'd like to customize the template, create the following file: ./custom/clients/base/views/greeting-nav-item/greeting-nav-item.hbs. The following snippet is the template for the base view for reference.

{{#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}}"
    >
        <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}}</span>
        </span>
    </button>
    
    {{#if secondaryAction}}
        <button class="sidebar-nav-item-kebab bg-transparent absolute p-0 h-full">
            <i class="{{buildIcon 'sicon-kebab'}} text-white"></i>
        </button>
    {{/if}}
{{/if}}

Next, in ./custom/Extension/application/Ext/clients/base/layouts/sidebar-nav/greeting-nav-item.php remove the 'template' => 'sidebar-nav-item' metadata entry.

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

Changing position of sidebar-nav-item

If you need to change the position of the sidebar-nav-item in the sidebar-nav layout, it is recommended that the layout be redefined using custom metadata. For example, if you wanted to move the group we created above, we could define the custom metadata as such:

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ 
            'layout' => '...',
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

Note: Although this is a best practice for customizing base metadata, these base layouts are subject to change and may be changed in the future. Maintenance of these customizations belongs to the owner of the instance.

Moving Footer content to Sidebar Nav

Scott King — Thu, 29 Sep 2022 18:18:36 GMT

Revision 36 posted to Dev Tutorials by Scott King on 9/29/2022 6:18:36 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

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 extends sidebar-nav-item. 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 two primary files that make up your view. By default, we can use the out of the box template for our view.

greeting-nav-item.js - Contains the JavaScript controller logic
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.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

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' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
      'template' => 'sidebar-nav-item',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

<?php

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
    'view' => [
        'name' => 'greeting-nav-item',
        'type' => 'greeting-nav-item',
        'icon' => 'sicon-bell-lg',
        'label' => 'LBL_HELLO_C',
        'secondary_action' => true,
        'template' => 'sidebar-nav-item',
        'flyoutComponents' => [
            [
                'view' => 'sidebar-nav-flyout-header',
                'title' => 'LBL_GREETINGS_C',
            ],
            [
                'view' => [
                    'type' => 'sidebar-nav-flyout-actions',
                    'actions' => [
                        [
                            'route' => '#Accounts',
                            'label' => 'LBL_ACCOUNTS',
                            'icon' => 'sicon-account-lg',
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Customizing the sidebar-nav-item Template

{{#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}}"
    >
        <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}}</span>
        </span>
    </button>
    
    {{#if secondaryAction}}
        <button class="sidebar-nav-item-kebab bg-transparent absolute p-0 h-full">
            <i class="{{buildIcon 'sicon-kebab'}} text-white"></i>
        </button>
    {{/if}}
{{/if}}

Next, in ./custom/Extension/application/Ext/clients/base/layouts/sidebar-nav/greeting-nav-item.php remove the 'template' => 'sidebar-nav-item' metadata entry.

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ 
            'layout' => '...',
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

Moving Footer content to Sidebar Nav

Scott King — Thu, 29 Sep 2022 18:18:36 GMT

Revision 37 posted to Dev Tutorials by Scott King on 9/29/2022 6:18:36 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

greeting-nav-item.js - Contains the JavaScript controller logic
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.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

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' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
      'template' => 'sidebar-nav-item',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

<?php

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
    'view' => [
        'name' => 'greeting-nav-item',
        'type' => 'greeting-nav-item',
        'icon' => 'sicon-bell-lg',
        'label' => 'LBL_HELLO_C',
        'secondary_action' => true,
        'template' => 'sidebar-nav-item',
        'flyoutComponents' => [
            [
                'view' => 'sidebar-nav-flyout-header',
                'title' => 'LBL_GREETINGS_C',
            ],
            [
                'view' => [
                    'type' => 'sidebar-nav-flyout-actions',
                    'actions' => [
                        [
                            'route' => '#Accounts',
                            'label' => 'LBL_ACCOUNTS',
                            'icon' => 'sicon-account-lg',
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Customizing the sidebar-nav-item Template

{{#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}}"
    >
        <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}}</span>
        </span>
    </button>
    
    {{#if secondaryAction}}
        <button class="sidebar-nav-item-kebab bg-transparent absolute p-0 h-full">
            <i class="{{buildIcon 'sicon-kebab'}} text-white"></i>
        </button>
    {{/if}}
{{/if}}

Next, in ./custom/Extension/application/Ext/clients/base/layouts/sidebar-nav/greeting-nav-item.php remove the 'template' => 'sidebar-nav-item' metadata entry.

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ 
            'layout' => '...',
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

Moving Footer content to Sidebar Nav

Scott King — Thu, 29 Sep 2022 16:25:29 GMT

Revision 35 posted to Dev Tutorials by Scott King on 9/29/2022 4:25:29 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

greeting-nav-item.js - Contains the JavaScript controller logic
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.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

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' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
      'template' => 'sidebar-nav-item',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

<?php

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
    'view' => [
        'name' => 'greeting-nav-item',
        'type' => 'greeting-nav-item',
        'icon' => 'sicon-bell-lg',
        'label' => 'LBL_HELLO_C',
        'secondary_action' => true,
        'template' => 'sidebar-nav-item',
        'flyoutComponents' => [
            [
                'view' => 'sidebar-nav-flyout-header',
                'title' => 'LBL_GREETINGS_C',
            ],
            [
                'view' => [
                    'type' => 'sidebar-nav-flyout-actions',
                    'actions' => [
                        [
                            'route' => '#Accounts',
                            'label' => 'LBL_ACCOUNTS',
                            'icon' => 'sicon-account-lg',
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Customizing the sidebar-nav-item Template

{{#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}}"
    >
        <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}}</span>
        </span>
    </button>
    
    {{#if secondaryAction}}
        <button class="sidebar-nav-item-kebab bg-transparent absolute p-0 h-full">
            <i class="{{buildIcon 'sicon-kebab'}} text-white"></i>
        </button>
    {{/if}}
{{/if}}

Next, in ./custom/Extension/application/Ext/clients/base/layouts/sidebar-nav/greeting-nav-item.php remove the 'template' => 'sidebar-nav-item' metadata entry.

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ 
            'layout' => '...',
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

<?php 

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
  'view' => [
      'name' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
   ],
];

Moving Footer content to Sidebar Nav

Scott King — Thu, 29 Sep 2022 16:14:06 GMT

Revision 34 posted to Dev Tutorials by Scott King on 9/29/2022 4:14:06 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

greeting-nav-item.js - Contains the JavaScript controller logic
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.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

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' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
      'template' => 'sidebar-nav-item',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

<?php

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
    'view' => [
        'name' => 'greeting-nav-item',
        'type' => 'greeting-nav-item',
        'icon' => 'sicon-bell-lg',
        'label' => 'LBL_HELLO_C',
        'secondary_action' => true,
        'template' => 'sidebar-nav-item',
        'flyoutComponents' => [
            [
                'view' => 'sidebar-nav-flyout-header',
                'title' => 'LBL_GREETINGS_C',
            ],
            [
                'view' => [
                    'type' => 'sidebar-nav-flyout-actions',
                    'actions' => [
                        [
                            'route' => '#Accounts',
                            'label' => 'LBL_ACCOUNTS',
                            'icon' => 'sicon-account-lg',
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Customizing the sidebar-nav-item Template

{{#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}}"
    >
        <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}}</span>
        </span>
    </button>
    
    {{#if secondaryAction}}
        <button class="sidebar-nav-item-kebab bg-transparent absolute p-0 h-full">
            <i class="{{buildIcon 'sicon-kebab'}} text-white"></i>
        </button>
    {{/if}}
{{/if}}

Next, in ./custom/Extension/application/Ext/clients/base/layouts/sidebar-nav/greeting-nav-item.php remove the 'template' => 'sidebar-nav-item' metadata entry.

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ ... ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

<?php 

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
  'view' => [
      'name' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
   ],
];

Moving Footer content to Sidebar Nav

Scott King — Thu, 29 Sep 2022 16:11:48 GMT

Revision 33 posted to Dev Tutorials by Scott King on 9/29/2022 4:11:48 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

greeting-nav-item.js - Contains the JavaScript controller logic
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.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

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' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
      'template' => 'sidebar-nav-item',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

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

{{!
    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>

    <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'][] = [
    'view' => [
        'name' => 'greeting-nav-item',
        'type' => 'greeting-nav-item',
        'icon' => 'sicon-bell-lg',
        'label' => 'LBL_HELLO_C',
        'flyoutComponents' => [
            [
                'view' => 'sidebar-nav-flyout-header',
                'title' => 'LBL_GREETINGS_C',
            ],
            [
                'view' => [
                    'type' => 'sidebar-nav-flyout-actions',
                    'actions' => [
                        [
                            'route' => '#Accounts',
                            'label' => 'LBL_ACCOUNTS',
                            'icon' => 'sicon-account-lg',
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Customizing the sidebar-nav-item Template

{{#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}}"
    >
        <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}}</span>
        </span>
    </button>
    
    {{#if secondaryAction}}
        <button class="sidebar-nav-item-kebab bg-transparent absolute p-0 h-full">
            <i class="{{buildIcon 'sicon-kebab'}} text-white"></i>
        </button>
    {{/if}}
{{/if}}

Next, in ./custom/Extension/application/Ext/clients/base/layouts/sidebar-nav/greeting-nav-item.php remove the 'template' => 'sidebar-nav-item' metadata entry.

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ ... ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

<?php 

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
  'view' => [
      'name' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
   ],
];

Moving Footer content to Sidebar Nav

Scott King — Thu, 29 Sep 2022 16:10:46 GMT

Revision 32 posted to Dev Tutorials by Scott King on 9/29/2022 4:10:46 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

greeting-nav-item.js - Contains the JavaScript controller logic
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.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

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' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
      'template' => 'sidebar-nav-item',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Customizing the Nav Item Template

{{!
    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}}"
    >
        <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}}</span>
        </span>
    </button>
    
    {{#if secondaryAction}}
        <button class="sidebar-nav-item-kebab bg-transparent absolute p-0 h-full">
            <i class="{{buildIcon 'sicon-kebab'}} text-white"></i>
        </button>
    {{/if}}
{{/if}}

Next, in ./custom/Extension/application/Ext/clients/base/layouts/sidebar-nav/greeting-nav-item.php remove the 'template' => 'sidebar-nav-item' metadata entry.

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

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

{{!
    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>

    <button class="sidebar-nav-item-kebab bg-transparent absolute p-0 h-full">
       <i class="{{buildIcon 'sicon-kebab'}} text-white"></i>
    </button>
{{/if}}

<?php

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
    'view' => [
        'name' => 'greeting-nav-item',
        'type' => 'greeting-nav-item',
        'icon' => 'sicon-bell-lg',
        'label' => 'LBL_HELLO_C',
        'flyoutComponents' => [
            [
                'view' => 'sidebar-nav-flyout-header',
                'title' => 'LBL_GREETINGS_C',
            ],
            [
                'view' => [
                    'type' => 'sidebar-nav-flyout-actions',
                    'actions' => [
                        [
                            'route' => '#Accounts',
                            'label' => 'LBL_ACCOUNTS',
                            'icon' => 'sicon-account-lg',
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ ... ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

<?php 

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
  'view' => [
      'name' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
   ],
];

Moving Footer content to Sidebar Nav

Scott King — Thu, 29 Sep 2022 15:53:01 GMT

Revision 31 posted to Dev Tutorials by Scott King on 9/29/2022 3:53:01 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

greeting-nav-item.js - Contains the JavaScript controller logic
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.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

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' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
      'template' => 'sidebar-nav-item',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Customizing the Nav Item Template

By default, our sidebar-nav-item is using the template from the base view. If you'd like to customize the template, create the following file: ./custom/clients/base/views/greeting-nav-item/greeting-nav-item.hbs. The following snippet is the template for the base view for reference.

{{!
    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}}"
    >
        <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}}</span>
        </span>
    </button>
    
    {{#if secondaryAction}}
        <button class="sidebar-nav-item-kebab bg-transparent absolute p-0 h-full">
            <i class="{{buildIcon 'sicon-kebab'}} text-white"></i>
        </button>
    {{/if}}
{{/if}}

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

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

{{!
    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>

    <button class="sidebar-nav-item-kebab bg-transparent absolute p-0 h-full">
       <i class="{{buildIcon 'sicon-kebab'}} text-white"></i>
    </button>
{{/if}}

<?php

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
    'view' => [
        'name' => 'greeting-nav-item',
        'type' => 'greeting-nav-item',
        'icon' => 'sicon-bell-lg',
        'label' => 'LBL_HELLO_C',
        'flyoutComponents' => [
            [
                'view' => 'sidebar-nav-flyout-header',
                'title' => 'LBL_GREETINGS_C',
            ],
            [
                'view' => [
                    'type' => 'sidebar-nav-flyout-actions',
                    'actions' => [
                        [
                            'route' => '#Accounts',
                            'label' => 'LBL_ACCOUNTS',
                            'icon' => 'sicon-account-lg',
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ ... ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

<?php 

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
  'view' => [
      'name' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
   ],
];

Moving Footer content to Sidebar Nav

Scott King — Thu, 29 Sep 2022 15:50:03 GMT

Revision 30 posted to Dev Tutorials by Scott King on 9/29/2022 3:50:03 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

greeting-nav-item.js - Contains the JavaScript controller logic
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.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

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' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
      'template' => 'sidebar-nav-item',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Customizing the Nav Item Template

./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}}"
    >
        <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}}</span>
        </span>
    </button>
{{/if}}

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

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

{{!
    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>

    <button class="sidebar-nav-item-kebab bg-transparent absolute p-0 h-full">
       <i class="{{buildIcon 'sicon-kebab'}} text-white"></i>
    </button>
{{/if}}

<?php

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
    'view' => [
        'name' => 'greeting-nav-item',
        'type' => 'greeting-nav-item',
        'icon' => 'sicon-bell-lg',
        'label' => 'LBL_HELLO_C',
        'flyoutComponents' => [
            [
                'view' => 'sidebar-nav-flyout-header',
                'title' => 'LBL_GREETINGS_C',
            ],
            [
                'view' => [
                    'type' => 'sidebar-nav-flyout-actions',
                    'actions' => [
                        [
                            'route' => '#Accounts',
                            'label' => 'LBL_ACCOUNTS',
                            'icon' => 'sicon-account-lg',
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ ... ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

<?php 

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
  'view' => [
      'name' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
   ],
];

Moving Footer content to Sidebar Nav

Scott King — Thu, 29 Sep 2022 15:48:50 GMT

Revision 29 posted to Dev Tutorials by Scott King on 9/29/2022 3:48:50 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

greeting-nav-item.js - Contains the JavaScript controller logic
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.

{{!
    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}}"
    >
        <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}}</span>
        </span>
    </button>
{{/if}}

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

./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

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' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
      'template' => 'sidebar-nav-item',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Customizing the Nav Item Template

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

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

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

{{!
    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>

    <button class="sidebar-nav-item-kebab bg-transparent absolute p-0 h-full">
       <i class="{{buildIcon 'sicon-kebab'}} text-white"></i>
    </button>
{{/if}}

<?php

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
    'view' => [
        'name' => 'greeting-nav-item',
        'type' => 'greeting-nav-item',
        'icon' => 'sicon-bell-lg',
        'label' => 'LBL_HELLO_C',
        'flyoutComponents' => [
            [
                'view' => 'sidebar-nav-flyout-header',
                'title' => 'LBL_GREETINGS_C',
            ],
            [
                'view' => [
                    'type' => 'sidebar-nav-flyout-actions',
                    'actions' => [
                        [
                            'route' => '#Accounts',
                            'label' => 'LBL_ACCOUNTS',
                            'icon' => 'sicon-account-lg',
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ ... ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

<?php 

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
  'view' => [
      'name' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
   ],
];

Moving Footer content to Sidebar Nav

Scott King — Thu, 29 Sep 2022 15:48:29 GMT

Revision 28 posted to Dev Tutorials by Scott King on 9/29/2022 3:48:29 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

greeting-nav-item.js - Contains the JavaScript controller logic
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.

{{!
    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}}"
    >
        <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}}</span>
        </span>
    </button>
{{/if}}

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

./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

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' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
      'template' => 'sidebar-nav-item
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Customizing the Nav Item Template

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

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

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

{{!
    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>

    <button class="sidebar-nav-item-kebab bg-transparent absolute p-0 h-full">
       <i class="{{buildIcon 'sicon-kebab'}} text-white"></i>
    </button>
{{/if}}

<?php

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
    'view' => [
        'name' => 'greeting-nav-item',
        'type' => 'greeting-nav-item',
        'icon' => 'sicon-bell-lg',
        'label' => 'LBL_HELLO_C',
        'flyoutComponents' => [
            [
                'view' => 'sidebar-nav-flyout-header',
                'title' => 'LBL_GREETINGS_C',
            ],
            [
                'view' => [
                    'type' => 'sidebar-nav-flyout-actions',
                    'actions' => [
                        [
                            'route' => '#Accounts',
                            'label' => 'LBL_ACCOUNTS',
                            'icon' => 'sicon-account-lg',
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ ... ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

<?php 

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
  'view' => [
      'name' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
   ],
];

Moving Footer content to Sidebar Nav

Scott King — Thu, 29 Sep 2022 14:54:16 GMT

Revision 27 posted to Dev Tutorials by Scott King on 9/29/2022 2:54:16 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

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 view
greeting-nav-item.js - Contains the JavaScript controller logic
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:

{{!
    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}}"
    >
        <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}}</span>
        </span>
    </button>
{{/if}}

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

./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

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_C',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

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

{{!
    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>

    <button class="sidebar-nav-item-kebab bg-transparent absolute p-0 h-full">
       <i class="{{buildIcon 'sicon-kebab'}} text-white"></i>
    </button>
{{/if}}

<?php

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
    'view' => [
        'name' => 'greeting-nav-item',
        'type' => 'greeting-nav-item',
        'icon' => 'sicon-bell-lg',
        'label' => 'LBL_HELLO_C',
        'flyoutComponents' => [
            [
                'view' => 'sidebar-nav-flyout-header',
                'title' => 'LBL_GREETINGS_C',
            ],
            [
                'view' => [
                    'type' => 'sidebar-nav-flyout-actions',
                    'actions' => [
                        [
                            'route' => '#Accounts',
                            'label' => 'LBL_ACCOUNTS',
                            'icon' => 'sicon-account-lg',
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ ... ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

<?php 

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
  'view' => [
      'name' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
   ],
];

Moving Footer content to Sidebar Nav

Scott King — Thu, 29 Sep 2022 13:24:36 GMT

Revision 26 posted to Dev Tutorials by Scott King on 9/29/2022 1:24:36 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

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

{{!
    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}}"
    >
        <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}}</span>
        </span>
    </button>
{{/if}}

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

./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

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_C',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

Second, 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}}

<?php

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
    'view' => [
        'name' => 'greeting-nav-item',
        'type' => 'greeting-nav-item',
        'icon' => 'sicon-bell-lg',
        'label' => 'LBL_HELLO_C',
        'flyoutComponents' => [
            [
                'view' => 'sidebar-nav-flyout-header',
                'title' => 'LBL_GREETINGS_C',
            ],
            [
                'view' => [
                    'type' => 'sidebar-nav-flyout-actions',
                    'actions' => [
                        [
                            'route' => '#Accounts',
                            'label' => 'LBL_ACCOUNTS',
                            'icon' => 'sicon-account-lg',
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ ... ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

<?php 

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
  'view' => [
      'name' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
   ],
];

Moving Footer content to Sidebar Nav

Scott King — Thu, 29 Sep 2022 13:21:59 GMT

Revision 25 posted to Dev Tutorials by Scott King on 9/29/2022 1:21:59 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

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

{{!
    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}}"
    >
        <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}}</span>
        </span>
    </button>
{{/if}}

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

./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

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_C',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

Second, 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}}

<?php

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
    'view' => [
        'name' => 'greeting-nav-item',
        'type' => 'greeting-nav-item',
        'icon' => 'sicon-bell-lg',
        'label' => 'LBL_HELLO_C',
        'flyoutComponents' => [
            [
                'view' => 'sidebar-nav-flyout-header',
                'title' => 'LBL_GREETINGS_C',
            ],
            [
                'view' => [
                    'type' => 'sidebar-nav-flyout-actions',
                    'actions' => [
                        [
                            'route' => '#Accounts',
                            'label' => 'LBL_ACCOUNTS',
                            'icon' => 'sicon-account-lg',
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ ... ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

<?php 

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
  'view' => [
      'name' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
   ],
];

Moving Footer content to Sidebar Nav

Scott King — Wed, 28 Sep 2022 20:27:31 GMT

Revision 24 posted to Dev Tutorials by Scott King on 9/28/2022 8:27:31 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

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

{{!
    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}}"
    >
        <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}}</span>
        </span>
    </button>
{{/if}}

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

./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

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_C',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

Second, 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}}

<?php

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
    'view' => [
        'name' => 'greeting-nav-item',
        'type' => 'greeting-nav-item',
        'icon' => 'sicon-bell-lg',
        'label' => 'LBL_HELLO_C',
        'flyoutComponents' => [
            [
                'view' => 'sidebar-nav-flyout-header',
                'title' => 'LBL_GREETINGS_C',
            ],
            [
                'view' => [
                    'type' => 'sidebar-nav-flyout-actions',
                    'actions' => [
                        [
                            'route' => '#Accounts',
                            'label' => 'LBL_ACCOUNTS',
                            'icon' => 'sicon-account-lg',
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ ... ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

<?php 

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
  'view' => [
      'name' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
   ],
];

Moving Footer content to Sidebar Nav

Scott King — Wed, 28 Sep 2022 19:48:34 GMT

Revision 23 posted to Dev Tutorials by Scott King on 9/28/2022 7:48:34 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

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

{{!
    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}}"
    >
        <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}}</span>
        </span>
    </button>
{{/if}}

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

./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

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_C',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

Second, 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}}

<?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' => 'greeting-nav-item',
                    'type' => 'greeting-nav-item',
                    'icon' => 'sicon-bell-lg',
                    'label' => 'LBL_HELLO_C',
                    'flyoutComponents' => [
                        [
                            'view' => 'sidebar-nav-flyout-header',
                            'title' => 'LBL_GREETINGS_C',
                        ],
                        [
                            'view' => [
                                'type' => 'sidebar-nav-flyout-actions',
                                'actions' => [
                                    [
                                        'route' => '#Accounts',
                                        'label' => 'LBL_ACCOUNTS',
                                        'icon' => 'sicon-account-lg',
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ ... ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

<?php 

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
  'view' => [
      'name' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
   ],
];

Moving Footer content to Sidebar Nav

Scott King — Wed, 28 Sep 2022 19:39:08 GMT

Revision 22 posted to Dev Tutorials by Scott King on 9/28/2022 7:39:08 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

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

{{!
    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}}"
    >
        <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}}</span>
        </span>
    </button>
{{/if}}

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

./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

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_C',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

Second, 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}}

<?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_C',
                    'flyoutComponents' => [
                        [
                            'view' => 'sidebar-nav-flyout-header',
                            'title' => 'LBL_GREETINGS_C',
                        ],
                        [
                            'view' => [
                                'type' => 'sidebar-nav-flyout-actions',
                                'actions' => [
                                    [
                                        'route' => '#Accounts',
                                        'label' => 'LBL_ACCOUNTS',
                                        'icon' => 'sicon-account-lg',
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ ... ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

<?php 

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
  'view' => [
      'name' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
   ],
];

Moving Footer content to Sidebar Nav

Scott King — Wed, 28 Sep 2022 19:37:01 GMT

Revision 21 posted to Dev Tutorials by Scott King on 9/28/2022 7:37:01 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

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

{{!
    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}}"
    >
        <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}}</span>
        </span>
    </button>
{{/if}}

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

./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

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_C',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

Second, 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}}

<?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_C',
                    'flyoutComponents' => [
                        [
                            'view' => 'sidebar-nav-flyout-header',
                            'title' => 'LBL_GREETINGS_C',
                        ],
                        [
                            'view' => [
                                'type' => 'sidebar-nav-flyout-actions',
                                'actions' => [
                                    [
                                        'route' => '#Accounts',
                                        'label' => 'LBL_ACCOUNTS',
                                        'icon' => 'sicon-account-lg',
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ ... ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

<?php 

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
  'view' => [
      'name' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
   ],
];

Moving Footer content to Sidebar Nav

Scott King — Wed, 28 Sep 2022 19:31:41 GMT

Revision 20 posted to Dev Tutorials by Scott King on 9/28/2022 7:31:41 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

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

{{!
    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}}

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

./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

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_C',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

Second, 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}}

<?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_C',
                    'flyoutComponents' => [
                        [
                            'view' => 'sidebar-nav-flyout-header',
                            'title' => 'LBL_GREETINGS_C',
                        ],
                        [
                            'view' => [
                                'type' => 'sidebar-nav-flyout-actions',
                                'actions' => [
                                    [
                                        'route' => '#Accounts',
                                        'label' => 'LBL_ACCOUNTS',
                                        'icon' => 'sicon-account-lg',
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ ... ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

<?php 

$viewdefs['base']['layout']['sidebar-nav']['components'][] = [
  'view' => [
      'name' => 'greeting-nav-item',
      'type' => 'greeting-nav-item',
      'icon' => 'sicon-bell-lg',
      'label' => 'LBL_HELLO_C',
   ],
];

Moving Footer content to Sidebar Nav

Scott King — Tue, 27 Sep 2022 15:35:06 GMT

Revision 19 posted to Dev Tutorials by Scott King on 9/27/2022 3:35:06 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

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

{{!
    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}}

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

./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

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_C',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

Second, 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}}

<?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_C',
                    'flyoutComponents' => [
                        [
                            'view' => 'sidebar-nav-flyout-header',
                            'title' => 'LBL_GREETINGS_C',
                        ],
                        [
                            'view' => [
                                'type' => 'sidebar-nav-flyout-actions',
                                'actions' => [
                                    [
                                        'route' => '#Accounts',
                                        'label' => 'LBL_ACCOUNTS',
                                        'icon' => 'sicon-account-lg',
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        [ ... ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];

Moving Footer content to Sidebar Nav

Scott King — Tue, 27 Sep 2022 15:34:42 GMT

Revision 18 posted to Dev Tutorials by Scott King on 9/27/2022 3:34:42 PM

Overview

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

<?php

// Create the "Hello" label
$app_strings['LBL_HELLO_C'] = 'Hello!';

Creating the Custom View with a Primary Action

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

{{!
    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}}

Note: Sidebar components must be expanded/collapsed state aware now, therefore you must make sure to provide collapsed (simple icon) and expanded (icon + text) class elements in your buttons.

./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

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_C',
   ],
];

Once all the files are in place, you can run a Quick Repair and Rebuild and a new group and sidebar-nav-item in the bottom of the sidebar-nav bar layout.

Note: You may need to refresh the page to see the profile menu items removed.

Adding a Secondary Action

In this example, we’ll add a secondary action to our greeting-nav-item view. It will trigger a flyout menu that has a link to the Accounts module.

First, let's add a new label to the language file we created earlier for our flyout menu header:

<?php

// Create the "Greetings" header 
$app_strings['LBL_GREETINGS_C'] = 'Greetings';

Second, 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}}

<?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_C',
                    'flyoutComponents' => [
                        [
                            'view' => 'sidebar-nav-flyout-header',
                            'title' => 'LBL_GREETINGS_C',
                        ],
                        [
                            'view' => [
                                'type' => 'sidebar-nav-flyout-actions',
                                'actions' => [
                                    [
                                        'route' => '#Accounts',
                                        'label' => 'LBL_ACCOUNTS',
                                        'icon' => 'sicon-account-lg',
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
    ],
];

Once these changes are added, you can run a Quick Repair and Rebuild and sidebar-nav-item will be updated with a Secondary Action.

Note: You may need to refresh the page to see the profile menu items removed.

Changing position of sidebar-nav-item

./custom/clients/base/layouts/sidebar-nav/sidebar-nav.php

<?php

/*
 * Your installation or use of this SugarCRM file is subject to the applicable
 * terms available at
 * http://support.sugarcrm.com/Resources/Master_Subscription_Agreements/.
 * If you do not agree to all of the applicable terms or do not have the
 * authority to bind the entity as an authorized representative, then do not
 * install or use this SugarCRM file.
 *
 * Copyright (C) SugarCRM Inc. All rights reserved.
 */

$viewdefs['base']['layout']['sidebar-nav'] = [
    'components' => [
        ...
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group-modules',
                'css_class' => 'flex-grow flex-shrink',
            ],
        ],
        [
            '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',
                            'route' => '#Accounts',
                            'icon' => 'sicon-bell-lg',
                            'label' => 'Hello!',
                            'flyoutComponents' => [
                                [
                                    'view' => 'sidebar-nav-flyout-header',
                                    'title' => 'Greetings',
                                ],
                                [
                                    'view' => [
                                        'type' => 'sidebar-nav-flyout-actions',
                                        'actions' => [
                                            [
                                                'route' => '#Accounts',
                                                'label' => 'LBL_ACCOUNTS',
                                                'icon' => 'sicon-account-lg',
                                            ],
                                        ],
                                    ],
                                ],
                            ],
                        ],
                    ],
                ],
            ],
        ],
        [
            'layout' => [
                'type' => 'sidebar-nav-item-group',
                'name' => 'sidebar-nav-item-group-bottom',
                'css_class' => 'flex-grow-0 flex-shrink-0',
                'components' => [ ... ],
            ],
        ],
    ],
];