In this section, we describe the way how to add new options to the side menu.

Add a new product option

If there’s a new product release you’ll need to set up its side menu structure to be able to show it to the user.

First, we start by gathering the information about the product to build the product option in the side menu.

• App name

• Required access permissions

• Product icon

• Description

• Name (tooltip)

• Product option order

Building the product option in the side menu

Once you’ve gathered the data above go to the side menu DynamoDB (learn more at Side Menu DynamoDB) and create a new element as the following states.

{
	"id": 21, // Id according to the last id number registered in DynamoDB table
	"app": "MAV_WPP", // the app name
	"requiredRoles": [  // Array of required roles to access the product option
		"ProductTests",
		"RequiredRole",
		"AnotherRequiredRole"
	],
	"icon": "mui-icon-product",  // Product icon
	"order": 10,  // Position of the product option
	"description": "Envío y reportería del producto", // Description of the option
	"name": "Product" // Name of the option tooltip
}

❗IMPORTANT: The key order specifies the position where the product is shown in the side menu.

If you set an order that’s between many other product options, you MUST change the order in the apps in which the order key value is greater than the one you’re setting up.

ℹ️ The id number and the order are not necessarily the same. They could be either different or the same.

Adding the submenu

After building the main product option you’ll need to set up its submenu. To do so just add a new key to the main product option JSON you set up recently like that:

{
	"id": 21,
	"app": "MAV_WPP",
	"submenu": [  // Key submenu allows adding options in object way
		{...}, // First submenu option
		{...}, // Second submenu option
	],
	"requiredRoles": [
		"ProductTests",
		"RequiredRole",
		"AnotherRequiredRole"
	],
	"icon": "mui-icon-whatsapp",
	"order": 10,
	"description": "Envío y reportería de Whatsapp",
	"name": "Whatsapp"
}

Add new options to a product menu

There are two kinds of options the submenu can have a simple and a dropdown option (as a submenu).

Dropdown option

The dropdown option is a submenu and as the product main option, it can contain simple or dropdown (submenus) options.

Simple option

The simple option straightly redirects the user to the related product functionality view.

Check the code below to learn how to deploy it.