Add role based external links to the main menu

Author: @Xavier Thevenot (Unlicensed)

Introduction

To enable users to easily open external links, configure the platform to display an additional button in the main menu.

Old main menu with external link (conveniently horizontal)

Old main menu (conveniently horizontal) with external links icon

The external links menu will open from the button.

External links menu

Each external link will display for specific role IDs. The platform will only display the external links button if the user's role lets them access at least one link.

Configure a menu button with external links

To configure the external links menu button do the following steps.

Configure client property. In the client-config-custom.json file, configure the client.header.externalurlicons client property.
"client.header.externalurlicons" : [ { "url": "https://www.abiquo.com", "icon":"fa fa-user", "label":"Abiquo", "labelCode":"abiquo", "roleIds": [ 1,2,3] }, { "url": "https://www.google.com", "icon":"fa fa-google", "label":"Google", "labelCode":"google", "roleIds": [1] } ]
The property is a list of url objects and for each object you can set the attributes described in the table below.
Configure the language file. In the language file, for example, /var/www/html/lang/lang_en_US_custom.json, add the appropriate labels, for example:

{ "mainmenu.button.externalurlicons.label.abiquo" :"Abiquo website", "mainmenu.button.externalurlicons.label.google" :"Google search engine" }

Table of UI configuration properties for external URL menu buttons

Name	Type	Required	Description	Example

Name	Type	Description	Example
url	String	The url of the external link that will open in a new browser window	`https://www.abiquo.com`
icon	String	You can add an icon to your external link. You can specify a valid FontAwesome icon code	`fa fa-google`
label	String	The label displayed for the external link	`Abiquo`
labelCode	String	The code to use in the language files to display the label in each of the available platform languages. You can define labels in each `lang_XX_custom.json` file with the format "`mainmenu.button.externalurlicons.label.{LABELCODE}`". For example: `"mainmenu.button.externalurlicons.label.abiquo" :"Abiquo website",`	`abiquo`
roleIds	Array	The list of role IDs that are allowed to display the external link. To obtain role IDs, use the methods of the Roles resource of the Abiquo API	[1,2,3]