Versions Compared

Old Version 3

changes.mady.by.user Former user

Saved on

compared with

New Version Current

changes.mady.by.user Former user

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

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

Note

Before executing the steps mentioned in this tutorial, ensure to install the mandatory prerequisites and start the DS serverWSO2 Dashboard Server.

Prerequisites

To be able to work with this tutorial you need to have a user named editor assigned to the dashboardEditorRole role, and another user named viewer assigned to the dashboardViewerRole role.

Table of Contents

...

Excerpt
Step 1 - Sign into the WSO2 DS Management Console

Insert excerpt
Accessing the DS Management Console

...

Accessing the DS Management Console

...

nopaneltrue

Step 2 - Create the dashboardEditorRole and

...

dashboardViewerRole user roles

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

...

  1. Image Added

  2. Click Add New Role.

    Image Modified

  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. 

      Info

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

  4. Click Finish.

...

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

...

  1. .

Step 3 - Create the editor and

...

viewer user accounts

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

...

  1. Image Added

  2. Click Add New User.

    Image Modified

  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.

      Info

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

  4. Click Finish.

...

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

...

  1. .

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.

...

  1. 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.
      Image Added 
  2. 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.
    Image Added
  2. Click Create Dashboard to navigate to the dashboard creation page.
    Image Added
  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.
    Image Added

  4. Click on the Balanced Grid With Banner layout. 
    Image Added

  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.

    Image Added

  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.

      Tip

      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 navigate to the dashboard view mode.

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

  10. Click Edit to navigate to the Dashboard Designer.
    Image Added

  11. Click Edit to 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.