AptEdge Support App Setup in ServiceNow (CSM)

Prerequisites

• CSM plugin installed and configured in ServiceNow
• Recommended: Zurich release or newer

1. Create a Page Variant

1. Go to UI Builder (scope: CSM & FSM Configurable Workspace Foundation)
2. Navigate to:Experiences → CSM/FSM Configurable Workspace → CSM Default Record Page
3. Duplicate the page:
   • Click ⋯ (menu) → Duplicate variant

   • Name it (e.g., AptEdge Case Page) → Create

     

2. Configure the Page

1. Open the new variant in UI Builder by clicking on Editor
2. Set preview data:
   • Table: sn_customerservice_case

   • Select a sample case → Apply

     

3. Add AptEdge Tab

1. In left panel → Content → Tab Sidebar (Right)
2. Add new tab:
   • Start from empty container
   • Label: AptEdge
   • (Optional) Add icon
3. Move tab just below Page Collection

4. Set Sizing = 100% (all fields) under Styles

   

4. Add iFrame Component

1. Inside AptEdge tab → Add Content → iFrame
2. Set Sizing = 100%

5. Configure Parameters

Go to Client State Parameters:

Parameter 1: iframe_data (JSON)

{
  "domain":"<your-aptedge-subdomain>",
  "token":"<your-aptedge-token>"
}

Parameter 2: iframeisReady (Boolean)

• Default: false

Save changes.

6. Add Data Resource

• Add: Current User Info and Roles
• Save

7. Add Client Script

Create a new Client Script:

functionhandler({ api }) {
api.setState('iframeisReady',true);
}

8. Configure iFrame

A. Source URL (Use Script)

/**
 * @param {params} params
 * @param {api} params.api
 * @param {TransformApiHelpers} params.helpers
 */
function evaluateProperty({
    api,
    helpers
}) {
    // Configure parameters
    console.log("Aptedge is loading");

    const domain = api.state.iframe_data.domain;
    const record = api.data.record || {};
    const sysId = record.sys_id;
    const user_email = api.data.current_user_info_and_roles_1.output.data.GlideDomain_Query.user.email;

    // Build iframe URL
    const url = `https://storage.googleapis.com/aptedge_servicenow_app/app/index.html?instance=${domain}&email=${user_email}&case=${sysId}`;
    return url;
}

B. Data Binding (Use Script)

/**
 * @param {params} params
 * @param {api} params.api
 * @param {TransformApiHelpers} params.helpers
 */
function evaluateProperty({ api }) {
    console.log('Inside Data property');
    if (!api.state.iframeisReady) {
        return;
    }
    return {
        message: api.state.iframe_data.token,
        type: 'token'

    };
}

C. Additional Settings

• Disable Sandbox → Enabled

• Target Origin → https://storage.googleapis.com

  

9. Event Mapping

1. Go to Events tab (iFrame)
2. Add event mapping:
   • Select AptEdge Client Script

   • Trigger: Always

     

10. Save

Click Save (top-right).

Done

Make this variant as the default Case Record Page variant

AptEdge will now load inside the Case page as a tab.