Versions Compared

Old Version 6

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 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.

Note

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

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.

    Image Modified

  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.

  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.

    Image Modified

  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.

  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.
      Image Modified 
  2. Click Finish.
Step 5 - Create a Dashboard with a banner banner 
  1. Sign into the Dashboard DesignerPortal. 
    The Dashboard Designer home page appears with the dashboards that are available for the respective user.
    Image Removed Image Added
  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.
    Image Removed 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 RemovedImage 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 go navigate to the dashboard view mode.

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

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

  11. Click Edit, select 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 the Dashboard Designer.

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