Custom Tab Coded Page

Coded Pages allow developers to write and use custom JS pages within the DCM application. Coded Pages are often used as tabs in detail pages or standalone pages from the left menu.

A simple example we will do is add a custom tab to a Case Detail page that executes a C# rule that calls a WebService to get the City name from a ZIP code.

Steps

On the top right, navigate to
→ <<your solution>>
On the left, navigate to
→ Setup
Navigate to Business Rules → Rules (1)
In the AppStudio, search for the rule "SMPL_lookupZipCode". This C# rule sample calls an external Web Service to validate a ZIP code and get the City and State names.
Test the rule using the debugger. Search for a valid ZIP code (in our example, 90230) to ensure it works and check the values returned by the rule.
The result should be like:
C#
```
...{
"ZIP5": "90230",
"CITY": "CULVER CITY",
"STATE": "CA",
...}
```
On the top right, navigate to
→ <<your solution>>
On the left, navigate to
→ Setup
Navigate to Forms and Pages → Coded Pages (1)
Click on the
New Coded Page button (2).
Assign a Name to the page. In our example, Simple Tab Example.
Download the JS sample code from this link CodedPage-SimpleTabExample.js and insert it in the JavaScript Code area.
Click the Save & Close button.
The next step is to add this coded page in the Case Detail page into a new tab.
Navigate to Forms and Pages > Detail Pages and open the AUTO LOAN detail page.
In the Case Detail Page Builder Drag&Drop a Generic tab to the page.
From Content Type select Coded Page, add ‘Simple Tab Example’ for Tab Title, and in the Coded Page dropdown select ‘Simple Tab Example’. Save
Save your changes to the detail page.
Preview the detail page using any valid case from the list. Enter a valid ZIP Code (for example 90230) and click on the Get City button, you will retrieve CULVER CITY in the City field.

Steps

Related Articles