Summary
Menu tiles represent a mobile process. Since version 4 of NAV Anywhere menu tiles are supported, and images can be displayed.
Style sheets (CSS) are used to render web pages based on pre-installed CSS definitions. Menu tiles are displayed making use of this definition and the media library folder to display a picture.
Processes that are visible from the menu can be equipped with an image (not required) to provide an easy recognition of its functionality.
Example
An example will reveal how to include a picture on the tile. For two styles we have included media images that are or can be used.
Menu Process in NAV
To display a picture, the Portal uses a CSS file to determine which picture to show. In the Process “Main Menu”, each Control has a specific label text which has to correspond with the MenuButton in the CSS file.
Add Process to Menu
For this example, we add a new Process “Get Location” to the Main Menu Process:
Release the Main Menu process.
Setup Role Authorization for Process
Make sure the process is authorized to ensure the process is visible in the menu:
Check User for Role permission
Make sure the user has the corresponding Role, which includes the new process.
Result of adding process to Menu in browser
The actions above result in having an additional process available “Get Location”. No image is showing as we have not applied the required steps for this.
Locate Image
Displaying an image on the menu requires the use of the Media folder. In this example we will use an existing image, but new images can be added to fit the purpose of the process.
Located in the folder “TI – Light” you will find a library of tiles to choose from. (Default folder location: C:\inetpub\wwwroot\DAW\TST\Portal\Files\Media\TI – Light)
The Media folder contains a folder for each Style; in this example we use the “TI – Light” style to explain the behavior. The other style that supports images is “DAW – Metro”.
Add reference to menu tile and image
Open the CSS file and scroll to the input.Menubutton lines (Default folder location: C:\inetpub\wwwroot\DAW\TST\Portal\Code\Css\).
Add this code below the existing list of MenuButton definitions and change the values in orange:
input.MenuButton[value=”Get Location“]
{
background: url(‘../../Files/Media/TI – Light/pallet-info.png‘) no-repeat center #D3D7DC;
}
Note! Make sure the value is the same as the label on the control in the Menu (case sensitive).
Now save the file. If you have no permission to store the file, save the file in your Documents folder and copy the file to overwrite it in the destination folder (Default folder location: C:\inetpub\wwwroot\DAW\TST\Portal\Code\Css\).
Result in the browser
The image should be visible when the menu is revisited.
If the image is not showing immediately, please press Ctrl+F5 for a browser cache clearance.
Dynamics NAV Integration Insights from the Experts 