Developing CX Apps Profiler Services

Developing Profiler service requires you to develop a single URL endpoint. AMS will call this URL endpoint when it needs to display your service. This topic explains how to develop the endpoint.

Developing the URL Endpoint

When Profiler needs to load your service, AMS will call your service's endpoint URL. The entire process of calling this endpoint is outlined below.

1. Profiler is loaded.
2. Within Profiler, the service returns a page that contains an iframe.
3. The iframe within Profiler calls a public AMS endpoint requesting the service's configuration UI.

4. AMS returns a page with an iframe and Javascript for sending and receiving a MessageEvent using the postMessage() method.

   Example: The Javascript could resemble:

   var Remote = {
       init : function(onMetadata, onConfigSave, onProductResponse,
               onAppResponse) {
           var handler = function(e) {
               if (e && e.data) {
                   var data = e.data;
                   var requestId = data.requestId;
                   if (requestId) {
                       if (requestId == 'metadata') {
                           onMetadata(data);
                       } else if (requestId.startsWith('save')) {
                           onConfigSave(data);
                       } else if (requestId.startsWith('product')) {
                           onProductResponse(data);
                       } else if (requestId.startsWith('application')) {
                           onAppResponse(data);
                       }
                   }
               }
           };
           window.addEventListener("message", handler, false);
       },
       send : function(msg) {
           console.log('Sending', msg);
           window.parent.postMessage(msg, '*');
       },
       save : function(requestId, config) {
           var o = {
               amsAction : "save",
               payload : config
           };
    
           o['requestId'] = "save" + (requestId || "");
    
           Remote.send(o);
       },
       getMetadata : function() {
           var o = {
               amsAction : "metadata",
               requestId : "metadata"
           };
    
           Remote.send(o);
       },
       getFromProduct : function(requestId, url, requestType) {
           if (url) {
               var o = {
                   amsAction : "product",
                   destinationUrl : url,
                   requestType : requestType
               };
    
               o['requestId'] = "product" + (requestId || "");
    
               Remote.send(o);
           }
       },
       getFromApp : function(requestId, relativeUrl) {
           if (relativeUrl) {
               var o = {
                   amsAction : "application",
                   destinationUrl : relativeUrl,
                   requestType : 'POST'
               };
    
               o['requestId'] = "application" + (requestId || "");
    
               Remote.send(o);
           }
       }
   };

5. The iframe within the returned AMS page loads another AMS hosted URL.

6. AMS sends a HTTP POST request to your service's URL endpoint.

   Request sent by AMS to App

   Task	Method	Path
   Render service	POST	http://<service_base_url>/<service_render_url>

   Example

   POST https://app.awesomeapp.com/render
   Authorization: Bearer <JWT>
   
   {
     status: 'CREATED',
     locale: 'en-US',
     applicationServiceInstall: {
       uuid: 'b275f697-f3f1-4c9f-85db-07b1195b17c5',
       name: 'Contact Insight Service',
       description: 'A demo Contact Insight Service',
       invokeUrl: 'http://awesomeapp.com/services/444b0dc1-2ea3-47a1-87d5-e3baccc8447d/invoke',
       smallLogo: 'https://awesomeapp.com/images/logo_small.png',
       mediumLogo: 'https://awesomeapp.com/images/logo_medium.png',
       largeLogo: 'https://awesomeapp.com/images/logo_large.png',
       maxBatchSize: null,
       application: {
         baseUrl: 'https://awesomeapp.com',
         configureUrl: '/configure',
         description: 'Awesome App Description',
         deleted: 0,
         installUrl: '/install',
         largeLogo: 'https://awesomeapp.com/images/logo_large.png',
         mediumLogo: 'https://awesomeapp.com/images/logo_medium.png',
         name: 'Awesome App',
         saveConfigurationUrl: '/saveConfigure',
         smallLogo: 'https://awesomeapp.com/images/logo_small.png',
         status: 'UP',
         publicationStatus: 'DEVELOPMENT',
         statusMessage: {
           "body": null,
           "eta": 0,
           "reason": null
         },
         statusUrl: '/status',
         uninstallUrl: '/uninstall',
         uuid: '5623f79a-8370-463d-b6c0-fc49e54daacc',
         providerUuid: '2ed3ad9c-db8d-41f1-ab62-5c764f65e3a2'
       },
       serviceType: {
         name: 'Contact Insight',
         externalName: 'ContactInsight',
         description: 'Service type for tabs in SalesTools Profiler',
         serviceTypeDefinition: {
           "fieldDefinitions": [
             {
               "name": "render_url",
               "label": "Render URL",
               "description": "The URL AMS will post to render the App",
               "fieldType": "Text",
               "required": true,
               "requireSandbox": true,
               "hasDefaultValue": false,
               "defaultValue": null,
               "tag": "render_url"
             },
             {
               "name": "config_url",
               "label": "Configuration URL",
               "description": "URL AMS will post to in order to render a screen to provide user settings for this app.",
               "fieldType": "Text",
               "required": false,
               "requireSandbox": true,
               "hasDefaultValue": false,
               "defaultValue": null,
               "tag": "config_url"
             }
           ]
         }
       },
       supportedAssetTypes: [
         
       ],
       deleted: 0,
       installUuid: '7a4a92bd-c45e-49ba-9f51-a659207d739f',
       productName: 'SalesTools Profiler Product',
       providerName: 'Demo Provider',
       supportedAssetTypeUuids: [
         
       ],
       status: 'UP'
     },
     assetType: null,
     assetId: null,
     recordDefinition: null,
     uuid: '19ad3f6f-fd72-4857-a7c9-6ef12c1e1864',
     secret: '12b05ef0-2e94-44f9-9828-fd716f0d987d-6bbe8548-8a99-4430-a61c-621dfd1dad06'
   }

7. The app responds with HTML. AMS could inspect the HTML, if needed.
8. The app framework returns the returned HTML to the user.

Considerations for Profiler Panel services

Using Markdown within the payload, developers can provide styling to the data that is displayed, like bolded information or anchor text for links.

Here's an example of a payload decorated with markdown, and the result in Profiler.

Example JSON payload

{
  "payload": {
    "text": "Group Vice President, Oracle Application Labs\n <a href=’https://cloud.oracle.com/…'/>",
    "text_attachments": [
      {
        "fallback": "Couldn’t load the data",
        "fields": [
          {
            "title": "Investor Type",
            "value": "Individual/Angel"
          },
          {
            "title": "Investor Stage",
            "value": "Seed"
          },
          {
            "title": "Board & Advisor Roles:",
            "value": "Oxx, Oracle <a href=”...”>View All</a>"
          },
          
        ]
      }
    ]
  }
}

Example in Profiler

Learn more

Profiler Card Services

Creating Profiler Services