Building Process Flow Dashboards in MYOB Advanced

MYOB Advanced process flow dashboards provide the ability to include HTML widgets, so that you can link to internal pages and external sites. This capability demonstrates the advantage of using a web-based ERP system.

In this blog, I will describe how you can create a process flow dashboard linking to specific areas inside the MYOB Advanced application.

Creating a Process Flow Dashboard with Internal Links

We will create a dashboard that displays a flow diagram like the one illustrated below.

The individual icons in the diagram can be linked to specific screens inside MYOB Advanced. For example, clicking on the Warehouse 1 picture links you to the warehouse screen inside MYOB Advanced that shows information about Warehouse 1. In this case, we open a new tab so you can review what you want to see, then close the tab to return to your process flow diagram.

In MYOB Advanced you have the ability to link to specific screens by specifying a screen ID as well as a specific record by specifying the key parameter on the screen. In this case, the key parameter is the warehouse ID.

Step 1: Create the image for your flow diagram

The first step is to create an image for your flow diagram. In this case, I used Adobe Illustrator to create the image using stock art, but you can even use Microsoft PPT. Include images, text, or anything else you need to portray your process. I provided some examples at the end that you can download, but you can build anything to match your process. Here I created one for our Manufacturing Flow.

Step 2: Create a wiki page for your dashboard

Here are the steps involved with creating a new wiki page to hold your dashboards. If you already have a wiki, then you can bypass this step.

• Navigate to System Management > Wiki Preferences > Wiki
• Click “+” to create a new wiki
• Complete information and add it to your site map. The image below is the example that I created.

Step 3: Create a new wiki article and add your image

Follow the steps below to create a new wiki article that will include your image.

• Navigate to the location in your site map where you added the wiki in step 2 (System Management > Wiki Site Map)            
• Click the ‘Create new article’ option. In the screenshot below, I have already added several articles, so the ‘create new article’ option appears at the bottom of the list.
• Select the article and click on "view article" (alternatively you can open any of the other wikis and create a new one from that wiki)

• Select the "+" to create a new article 
  
• Add an article ID and a name
• Select HTML for Article Type. This is important because the wiki markup language does not support the image map construct that we will be using.
• Click the attach button to add the image that you created with your flow diagram.
• After attaching the image, navigate to the ‘attachments tab,’ highlight the file you attached, and click the ‘get link’ button. Copy the ‘external link’ URL from the pop-up box.
  
• Paste the code below into the content tab of your wiki article. Use the reference from your external link to reference the image.
  • The code in the screenshot below is included as an appendix to this article, so you can cut/paste it.

Step 4: Finalize the code for your wiki article

You can create the image map by using the HTML construct for mapping images.

<img src=”link to image” usemap=”#mymap”>

<map name=”mymap”>

<area shape=”rect” coords=”0,8,105,97″ href=”url you want to link to” target=”_blank” alt=”goto vendor 1″>

</map>

By specifying multiple areas and links, you can link to various places in your application. You can include three shapes (circle, rect, poly) defined in the HTML map function. For reference, visit https://www.w3schools.com/tags/tag_area.asp

Alternatively, I also use https://www.image-map.net/

After you have defined all of the mappings, you can update the code provided.

Step 5: Add Wiki to the Dashboard

• After saving your wiki article, navigate to your Dashboards screen (Customisation > Profiles)
• Add Name, Owner, and select if you want users to personalise the dashboard or if you want to expose the dashboard to the mobile app.
• Ensure that you select the "Make Visibile on the UI" box.
• Check the Site Map Title, Workspace, and Category details.
• Save your new Dashboard.
• Navigate to your new Dashboard, click on "Design" and "Add a new widget"

• Select "Wiki Page"
  
• Select your Wiki Article and Save
  
• Your Dashboard is now ready

Appendix

Example Images of different flows and code are available here. Note that some of the code will have to be updated accordingly for your instance of MYOB Advanced.