Working with Dashboard Banners

In this tutorial let's see how a dashboard editor can create a dashboard with a banner, and how a dashboard viewer can view and customize the banner for his/her personal view.

Step 1 - Sign into the DS Management Console

Follow the instructions below to sign into the WSO2 DS Management Console:

1. Access the Management Console. This URL will be displayed in your command line interface after running the product.

   • For access via HTTP: 
http://<DS_HTTP_HOST>:<HTTP_PORT>/carbon/
   • For access via secured HTTP: 
     https://<DS_HTTPS_HOST>:<HTTPS_PORT>/carbon/
   • Example: http://localhost:9763/carbon/ 

2. Enter your username. The default username is admin.
3. Enter your password. The default password is admin.
4. If you wish your browser to save your login details, select the Remember Password checkbox.
5. Click Sign In. 
   Upon successfully logging in the WSO2 DS Management Console home page will appear.

Step 2 - Create the dashboardEditorRole and dashboardViewerRole user roles

1. On the Main tab, click Add under Users and Roles.

   

2. Click Add New Role.

   

3. Enter the required details as follows:

   1. Domain - Select the user store to which you want to add the user role. Select Primary to use the primary user store for this tutorial.

   2. Role Name - Enter a unique name for the user role. 

      The two user roles should be named as follows for this tutorial: dashboardEditorRole and dashboardViewerRole

4. Click Finish.

5. Add the other user role by repeating steps 3 and 4.

Step 3 - Create the editor and viewer user accounts

1. On the Main tab, click Add under Users and Roles.

   

2. Click Add New User.

   

3. Enter the required details as follows:

   • Select a user store from the Domain list to which you want to add the user account. Select Primary to use the primary user store for this tutorial.

   • Enter a unique user name and the password that the person will use to log in. By default, the password must be at least five characters and should have at least one character with a capital letter, characters, numbers and special characters.

     The User Name of the two user accounts should appear as follows for this tutorial: editor and viewer

4. Click Finish.

5. Add the other user account by repeating steps 3 and 4.

Step 4 - Assign the user roles to the user accounts

1. On the Main tab, click List under Users and Roles.
2. Click Users. This link is only visible to users with the Admin role. 
3. Click Assign Roles, which appears in the Actions column.
4. Click on the respective role for the respective user account.
   • Assign the dashboardViewerRole user role to the Viewer user account.
   • Assign the dashboardEditorRole user role to the Editor user account.
      
5. Click Finish.

Step 5 - Create a Dashboard with a banner 

1. Sign into the Portal. 
   The Dashboard Designer home page appears with the dashboards that are available for the respective user.
   
2. Click Create Dashboard to navigate to the dashboard creation page.
    
3. Enter the required dashboard related details and click Next.
   
   • Name of your Dashboard - The name given to identify the dashboard.
   • URL - The URL that is used to access the dashboard. The URL should be unique for each dashboard.
   • Description - A summarized description on the dashboard.
   This directs you to the dashboard layout page where you can select a predefined layout for the dashboard.
   

4. Click on the Balanced Grid With Banner layout. 

5. Click Add, select an image from the file browser window, and click Open. 
   The selected image appears in the block allocated for the banner, with the option to crop the image.

6. Select the area of the image that needs to be cropped and click Save.

   

7. Click Settings  and under the Permissions make the following changes:

   • Under Viewers add "dashboardViewerRole", and after the changes are saved remove all other user roles.

   • Under Editors add "dashboardEditorRole", and after the changes are saved remove all other user roles.

     When the default user roles (e.g., Internal/Everyone) are deleted, the existing user's admin privileges get revoked. Therefore, before removing the existing user roles (e.g., Internal/Everyone) of a dashboard, ensure to first save the new user roles.

8. Click View to go to the dashboard view mode.

9. Log out and log in as the viewer, and click View to go to the dashboard view mode.
    

10. Click Personalize to navigate to the Dashboard Designer.
    The original dashboard that already has a banner, which was uploaded by the editor, appears.

11. Click Edit, select a different image from the file browser, and click OK.  

12. Crop the image as necessary and click Save.
    The banner placeholder displays the newly selected banner image with cropped margins. 

13. Click View to navigate to the dashboard view mode.
    Now, the dashboard appears with the new banner, which was customized by the viewer.

14. Click Personalize to navigate to the Dashboard Designer.

15. Click Reset to remove the custom banner and revert to the original banner, which was added by the dashboard editor.