AgilePoint – Add custom work center dashboard to a custom page

By Shahaji No comments

Many times an application developed using the AgilePoint platform needs to have its own independent self-serving portal where all types of audience/users for that application can get access to what they have been authorized to. This is where the Build Pages module helps to design and develop a custom page. An application portal can be comprised of multiple pages. One of the common needs of application participants is to look at their tasks. Generally, this need is served by the Dashboard at the out-of-the-box Work Center module. However, this Work Center Dashboard is for the generic use and every user has access to it. If application-specific metadata needs to be shown then a dedicated Work Center Dashboard is required. Please note that the out-of-the-box Work Center Dashboard can be extended to have custom tabs where application-specific metadata can be surfaced in the form of custom columns but if there are multiple applications with this extensibility need then the out-of-the-box Work Center Dashboard can get crowded, which can introduce maintenance overhead in the long term as well as it can raise application governance concern. With this premise, let’s see what can be a good solution.

A solution is simple, configurable, and all out-of-the-box. The first step is to identify a page to host the custom work center dashboard. You can reference AgilePoint documentation on how to create a custom portal page. The second step is to create a custom tab (work center can have multiple tabs, so tab terminology can be misleading but at the end, we get the custom work center dashboard) where application-specific metadata can be surfaced. Follow the below steps to create the custom tab…

  1. Go to Settings -> Build Apps -> Build Pages … you would see something like below.

2. Click on “Add Custom Tabs”.

3. Provide a unique name to the Tab Header (this is tab identifier) as shown in the above screen picture. Unfortunately, this is the same name that appears on the tab. I want to read my tab heading as “My Tasks”, which is entirely possible but we cannot have multiple “My Tasks” custom tabs. There might be an enhancement in the near future to provide a visual literal, so the identifier and the display texts are different.

4. Select a process name against the Process Filter field. Please note that there can be multiple process models in an application. In that case, please select all applicable process models.
5. Since we would like to see an individual’s tasks in this custom work center dashboard, we need to pick the “My Task” option for the “Tab Extension”.

6. Hide Default Columns – There are certain fields/columns/metadata common/generic to all the applications. We have a choice if we would like to hide some of the default columns. Usually, I hide Priority, Process Model, User Name, Department fields but this can vary based on a use case.

7. Enable Dynamic Loading – This is about when we would like to see the task data; all at once or load dynamically and make it available as it comes. This can be helpful to improvise performance if the task volume is high.

8. Is Default Tab – If there are multiple tabs (and in reality, there will be multiple tabs; very commonly two [My Tasks, Group Tasks]), this setting will allow picking a tab as default, so when the dashboard is rendered, this tab appears as selected one.

9. Add New Record – Click on this button add a custom column. There is a limit of 3 columns in the AgilePoint hosted public cloud and very likely 5 columns in the customer hosted environments.
a. Process Model – Select a specific process model or pick “All”. We would need to pick from a specific process model only if the fields to be added is there in multiple process model with the same xPath and the data is not shared between the process models. Else, we can always pick “All”.
b. Column Name – This appears as a title to the column.
c. Custom Data Path – this is xPath of a field/metadata to be displayed in this column. You can copy the xPath as shown in the below screen picture.

The format we need to put the xPath is this /pd:AP/pd:formFields/pd:Amount where we have removed ‘$’ sign, ‘{‘ and ‘}’ from what we have copied in the above screen.
c. Custom Template – a custom stylesheet can be applied here.
d. Width – This is for the width of the column.
e. Index – What should be the order of this column from left to right.
f. Visibility – We can configure columns and keep them invisible with this setting and make them visible whenever needed.

Click on the “Save” button at the bottom. Here we complete the custom tab configuration. The next step is to add this custom tab on a custom portal page. Open your custom portal page and check-out.

1. This is how your blank page would look like

2. Click on “Add Row”.

3. Click on “Add Widget”.

4. Select “Workcenter” from the options presented. It would show right side configuration screen pane like below.


5. Disable all the options except the “Show Overview Tab”. This is not needed either but there seems to be a glitch where single tab rendering doesn’t work in most of the cases. This bug might be fixed soon.

6. Towards the bottom in the configuration pane, there is a “Custom Tabs” option. Expand it and select your custom tab. In my case, I have “Cap – My Tasks”. Click “Add” button at the bottom.

7. The custom work center dashboard gets added on the page. We may need to adjust the height of the row on the custom page to make sure the entire work center dashboard is visible. Save and preview to make sure it is getting rendered the way we want. Here is a partial screen picture in preview mode where we can see a custom column “Amount” is rendered.

8. If everything looks good, we can publish the page.

I hope this helps to comprehend the need of custom work center dashboard as well as how to configure it.