Tailoring the Customer Portal: To Create and Design a Dashboard

In the following implementation activity, you will configure a dashboard in the MYOB Acumatica Customer Portal.

Story

Suppose that you are Kimberly Gibbs, a system administrator who also handles dashboards at the SweetLife Fruits & Jams company. You need to create the new Case Activities dashboard based on a request from a SweetLife customer, the Storehut chain of supermarkets in New York. On the dashboard, the customer's managers should be able to monitor cases reported to SweetLife and have quick access to orders.

Configuration Overview

For the purposes of this activity, the following tasks have been performed:

  • The MYOB Acumatica application instance with the U100 dataset preloaded and the Customer Portal application instance have been deployed in the same database.
    Tip: These instances must be deployed in the same database. This deployment is outside of the scope of this training.
  • In the U100 dataset, on the User Roles (SM201005) form of MYOB Acumatica, the Portal Admin role has been assigned to the gibbs user account. The role provides full administrative privileges in the Customer Portal. The user account is associated with Kimberly Gibbs, the system administrator in the SweetLife Fruits & Jams company.

Process Overview

In this activity, you will do the following:

  1. Create the Case Activities dashboard.
  2. Set up user access rights to the dashboard.
  3. Add the Data Table, Link, and KPI widgets to the dashboard.
  4. Select the dashboard layout template.
  5. Verify that the dashboard has been correctly configured.
Note: The dashboard configuration shown in the screenshots in this activity may slightly differ in its layout from the dashboards that you configure in your system. These differences do not affect the process flow.

System Preparation

Before you start creating and designing a dashboard in the Customer Portal, do the following:

  1. Sign in to MYOB Acumatica as a system administrator by using the gibbs username and the 123 password.
  2. On the Enable/Disable Features (CS100000) form, make sure that the following features have been enabled:
    • Customer Portal
    • B2B Ordering
    • Case Management on Portal
    • Financials on Portal
  3. Make sure that you have performed the following prerequisite activities:
    1. Configuring the Customer Portal: To License the Customer Portal Instance
    2. Configuring the Customer Portal: To Specify the General Settings of the Customer Portal
    3. Managing Access to the Customer Portal: To Create Roles for Employees of a Customer
    4. Managing Access to the Customer Portal: To Create User Types for the Customer Portal
    5. Managing Access to the Customer Portal: To Create a User Account for a Contact
    6. Managing the Inventory Catalog in the Customer Portal: Implementation Activity
    7. Configuring Case Management in the Customer Portal: Implementation Activity
    8. Tailoring the Customer Portal: To Create a Generic Inquiry
  4. Launch the Customer Portal website with the U100 dataset preloaded, and sign in to the system as a system administrator by using the gibbs username and the 123 password.

Step 1: Creating a Dashboard

To create the Case Activities dashboard, do the following:

  1. In the Customer Portal website, open the Dashboards (SM208600) form.
  2. In the Summary area, do the following:
    1. In the Name box, type Case Activities.
    2. In the Owner Role box, select Portal Admin.
    3. Clear the Allow Users to Personalize check box. Portal users should not be given the ability to make personalized copies of the dashboard.
  3. On the form toolbar, click the Publish to the UI button. The Publish to the UI dialog box opens.
  4. In the dialog box, specify the following settings:
    1. Site Map Title: Case Activities
    2. Workspace: Support
    3. Category: Dashboards
  5. In the Access Rights section of the dialog box, select the Copy Access Rights from Screen option button. Make sure that Dashboards is selected in the box right of the option button.
  6. Click Publish to complete the publication process.

You have created an empty dashboard. In the next step, you will set up access rights for users to this dashboard.

Tip: The system assigns the dashboard an automatically generated ID in a format similar to that of the screen IDs of other dashboards, with DB as the two-letter module code: DB000000. When the ID is assigned, the system adds the dashboard to the site map. Because a workspace and category have been specified, a user with the Portal Admin role can access the dashboard through the workspace.

Step 2: Setting Up User Access Rights for an Administrator to the Dashboard

Now you need to change the access rights to the dashboard so that users with the Portal Admin role can add widgets to the dashboard and users with Customer Admin and Customer User roles can view the dashboard.

While you are still viewing the Case Activities dashboard on the Dashboards (SM208600) form, do the following:

  1. On the Visible To tab, in the row that has Portal Admin in the Role column, make sure that the Granted option is selected in the Access Rights column.
    Tip: You can type the name of the role into the Search box in the lower part of the tab to quickly find the role.

    With these access rights, the gibbs user can view the dashboard because Portal Admin is the owner role you specified for the dashboard.

  2. In the row that has Customer Admin in the Role column, select Granted in the Access Rights column.
  3. On the form toolbar, click Save.
  4. In the row that has Customer User in the Role column, select Granted in the Access Rights column.
  5. On the form toolbar, click Save.
  6. On the form toolbar, click View. The Case Activities dashboard opens. The dashboard is empty because you have not yet added any widgets to it.
  7. On the dashboard title bar, make sure that the Design button is displayed. This indicates that the user can modify the dashboard.

You have set up access rights for the Customer Portal administrator and users and verified that you have correctly set up the access rights for the administrator. Now you can populate the dashboard with widgets, which you will do in the next steps of this activity.

Step 3: Adding a Data Table Widget to the Dashboard

To add a Data Table widget to the dashboard, do the following:

  1. On the dashboard title bar, click the Design button to switch to design mode.
  2. In the widget placeholder in the upper part of the screen, click Add a new widget. The Add Widget dialog box opens.
  3. In the Add Widget dialog box, click Data Table.
  4. Click Next.
  5. In the Inquiry Screen box of the Widget Properties dialog box, which opens, click the magnifier button. The lookup table opens.
  6. In the Search box, type cases.
  7. In the Title column, double-click Open Cases, which closes the lookup table and fills in the Inquiry Screen box of the dialog box.
  8. Click Inquiry Parameters.
  9. In the Inquiry Parameters dialog box, which opens, do the following:
    1. Clear the Me check box.
    2. Click OK.
  10. In the Widget Properties dialog box (which you return to after closing the Inquiry Parameters dialog box), select the Automatically Adjust Height check box.
  11. Click Column Settings.
  12. In the Column Settings dialog box, which opens, move columns from the Selected Columns list to the Available Columns list by selecting each needed column and then clicking the arrow pointing left. The Selected Columns list should contain only the following columns:
    • Subject
    • Status
    • Reason
    • Severity
    • Priority
    • Contact
  13. Click OK. The Column Settings dialog box is closed.
  14. In the Caption box of the Widget Properties dialog box (to which you return), type open cases to specify the title of the widget.
  15. Click Finish to create the widget with the settings you have specified, save it, and add it to the dashboard.
  16. On the dashboard title bar, click the Design button to switch to view mode.

Step 4: Adding a Link Widget to the Dashboard

To add a Link widget to the dashboard, do the following:

  1. While you are still viewing the Case Activities dashboard, on the dashboard title bar, click the Design button to switch to design mode.
  2. In the widget placeholder in the right part of the screen, click Add a new widget. The Add Widget dialog box opens.
  3. In the Add Widget dialog box, click Link.
  4. Click Next.
  5. In the Widget Properties dialog box, which opens, do the following:
    1. In the Icon box, select the visibility icon, which will be displayed in the widget.
      Tip: You can begin typing the name of the icon into the box to quickly find the icon.
    2. In the Form box, do the following:
      1. Click the magnifier button.
      2. In the lookup table that opens, in the Search box, type orders.
      3. In the Title column, double-click My Orders, which closes the lookup table and fills in the Form box of the dialog box.
    3. In the Caption box, type My Orders.
    4. Click Finish to save your changes and close the dialog box.

      The widget is added to the workspace.

  6. On the dashboard title bar, click the Design button to switch to view mode.

You can see the Case Activities dashboard with the Open Cases and My Orders widgets in the following screenshot.

Figure 1. The Case Activities dashboard with the Data Table and Link widgets


Step 5: Adding a KPI Widget of the Meter Visualization Type to the Dashboard

In this step, you will create a Key Performance Indicator (KPI) widget based on the All Cases generic inquiry. This widget will display the total number of cases and their level in the number of cases. To add the KPI widget to the dashboard, do the following:

  1. While you are still viewing the Case Activities dashboard, on the dashboard title bar, click the Design button to switch to design mode.
  2. In the widget placeholder in any part of the screen, click Add a new widget. The Add Widget dialog box opens.
  3. In the Add Widget dialog box, click Key Performance Indicator (KPI).
  4. Click Next.
  5. In the Widget Properties dialog box, which opens, do the following:
    1. In the Inquiry Screen box, select the All Cases inquiry, which will be used as a base for the widget.
    2. In the Field to Aggregate box, select Case ID.
    3. In the Aggregate Function box, make sure the Count All is selected.
    4. In the Normal Level Type box, leave the default Fixed Value.
    5. In the Normal Level box, specify 10.
    6. In the Alarm Level Type box, select Percent Value.
    7. In the Alarm Level box, specify 140. We specify 150% to revert the levels. 10 cases will be a normal level, from 11 to approximately 15 cases will be a warning level, and from 16 to 20 cases will be an alarm level.
    8. Define the colors as follows:
      • Normal Color: Green
      • Warning Color: Orange
      • Alarm Color: Red
    9. In the Visualization Type box, select Meter.
    10. In the Caption box, type case volume.
    11. Click Finish to save your changes and close the dialog box.

      The widget is added to the workspace.

  6. On the dashboard title bar, click the Design button to switch to view mode.

You can see the Case Activities dashboard with the Case Volume widget in the following screenshot.

Figure 2. The Case Activities dashboard with the KPI widget of the Meter visualization type


Step 6: Adding KPI Widgets of the Scorecard Visualization Type to the Dashboard

In this step, you will create two Key Performance Indicator (KPI) widgets based on the All Cases generic inquiry. You will create the Case Volume widget, and change the parameters of new widgets. To add KPI widgets to the dashboard, do the following:

  1. While you are still viewing the Case Activities dashboard, on the dashboard title bar, click the Design button to switch to design mode.
  2. Point at the Case Volume widget, and on the widget title bar, click the Clipboard button to copy the settings of the widget.
  3. In the widget placeholder in any part of the screen, click Paste from clipboard. The system inserts the copied widget.
  4. On the title bar of the created widget, click the Edit button. The Widget Properties dialog box opens.
  5. Click the Filter Settings button.
  6. In the Filter Settings dialog box, which opens, do the following:
    1. On the table toolbar, click Add Row.
    2. In the Data Field column of the added row, select Status.
    3. In the Conditions column leave the default value: Equals.
    4. In the Value 1 column, select New.
    5. On the table toolbar, click Add Row.
    6. In the Data Field column of the added row, select Reason.
    7. In the Conditions column leave the default value: Equals.
    8. In the Value 1 column, select Unassigned.
    9. Click OK to save your changes.
  7. In the Normal Level box, specify 2.
  8. In the Visualization Type box, select Scorecard.
  9. In the Icon box, select access time.
  10. In the Caption box, type unassigned cases.
  11. Click Finish to save your changes and close the dialog box.

    The widget is added to the dashboard.

  12. Point at the Unassigned Cases widget, and on the widget title bar, click the Clipboard button to copy the settings of the widget.
  13. In the widget placeholder in any part of the screen, click Paste from clipboard. The system inserts the copied widget to the dashboard.
  14. On the title bar of the created widget, click the Edit button. The Widget Properties dialog box opens.
  15. Click the Filter Settings button.
  16. In the Filter Settings dialog box, which opens, do the following:
    1. In the row with Reason, change Value 1 column, select Assigned.
    2. Click OK to save your changes.
  17. In the Icon box, select arrow drop down circle.
  18. In the Caption box, type assigned cases.
  19. Click Finish to save your changes and close the dialog box.

    The widget is added to the dashboard.

  20. On the dashboard title bar, click the Design button to switch to view mode.

You can see the dashboard with the KPI widgets in the following screenshot.

Figure 3. The Case Activities dashboard with the KPI widgets


Step 7: Selecting a Template for the Dashboard Layout

Suppose that you want to arrange the widgets on the dashboard so that the left column takes two-thirds of the width of the working area. With this layout, the Open Cases widget on the dashboard will be larger and easier to see and the My Orders widget will be smaller. Further suppose that you want to place the Unassigned Cases and Assigned Cases widgets above the Open Cases widget and the Case Volume widget under the My Orders widget.

To select a dashboard layout template, do the following:

  1. While you are still viewing the Case Activities dashboard in view mode, click the Design button on the dashboard title bar to switch to design mode.
  2. On the dashboard title bar, click the Edit Layout button.
  3. In the Dashboard Layouts dialog box, which opens, do the following:
    1. Select the layout template that has a wide left column (two-thirds of the working area) and a narrow right column (one-third of the working area).
    2. Click OK. The dialog box is closed, and the dashboard widgets are arranged within the selected layout.
  4. Drag the My Orders widget to the right.
  5. Drag the right border of the Open Cases widget to the right so that the widget takes two-thirds of the working area.
    Tip: If the content of each widget's column is not fully displayed, you can drag the right border of the needed column.
  6. Make your dashboard look similar to the dashboard in the screenshot below. Rearrange the widgets on the dashboard as follows:
    1. Open Cases under Unassigned Cases and Assigned Cases
    2. Case Volume under My Orders
    Tip: You can drag and drop all the widgets on the dashboard as you need. Widgets are resizable, and you can change their size as well by dragging a widget by its corner.
  7. On the dashboard title bar, click the Design button to switch to view mode.

    You can see the dashboard with the new layout in the following screenshot.

    Figure 4. The new layout of the Case Activities dashboard


  8. Sign out of the Customer Portal.

Step 8: Verifying That the Dashboard Has Been Correctly Configured

To make sure that customers can use the newly created Case Activities dashboard and that it has been configured correctly, do the following:

  1. Sign in to the Customer Portal as customer contact Tonya Lawrence of Storehut by using the tonya@storehut.example.com username and the 123 password.
  2. On the main menu, click Support to open the Support workspace.
  3. In the Dashboards category, click Case Activities to open the dashboard.
  4. Make sure that the Open Cases and My Orders widgets, which you have added to the dashboard in the previous steps, are correctly displayed on the dashboard, as shown in the following screenshot.
    Figure 5. The Case Activities dashboard (viewed by a portal user)


  5. Sign out of the Customer Portal.