Skip to main content
Guides
Spaces

Marketplace Front-end

Marketplace frontend is developed in angular, and it is completely dynamic website, we can add Metadata in backend to make component visible. It supports both light and dark mode

How to access marketplace:​

How To Add/Update Component:​

Marketplace consist of different components, that we can add by adding MetaData in database.

Marketplace website components are:

Integrations:​

Integrations represents the list of available integrations, these are listed on the SideNav Bar of the UI.

To add new Integration follow the steps:

  1. Add New Integration in database
  2. In MetaData of Integration add
{
  "icon": "cm-app cm-app-sign",
  "displayName": "INTEGRATION_NAME"
}
  1. Mark IsVisible field as True

Adapters:​

Every Integrations have list of available adapters, This will come under a new page whenever any integration selected from SideNav.
To add new Adapter under integration follow the steps:

  1. Create New Adapter in Database.
  2. In MetaData Filed enter
{
  "logo": "LOGO_URL",
  "description": "ADAPTER_DESCRIPTION",
  "displayName": "ADAPTER_NAME",
  "integrationType": "Integration_TYPE"
}

This is Mandatory to add in MetaData

  1. Change IsViseble field to True.

[Optional Steps]

Actions:

Action refers to the buttons available in bottom of adapter form page, which should perform some actions, when they clicked. For Example: Test Connection, Perform some redirections etc. If you want to add action in adapter, follow the steps:

  • Add below code in MetaData
"actions": [
    {
        "icon": "sync-true",
        "displayName": "Test connection"
        "type": "REST",
    }
]
  • Select icon from https://www.cm.com/app/aurora-dls/tokens/aurora-icons?activeTab=explorer and paste in icon , if you don’t want icon Button then keep icon field as null .
  • type refers to the type of action we need to perform. It can be of following type:
    • REST:
      If the type is set to REST, adding request block is mandatory. This is use to send any REST Request. It must include following code inside the action
"actions": [
    {
        "icon": "sync-true",
        "displayName": "Test connection"
        "type": "REST",
        "request": {
            "url": "URL",
            "method": "METHOD like GET, POST, PUT",
            "successMessage": "The Message need to display after success full request"
        }
    }
]
  • If you wants to add More than one action, then keep repeating above steps and Add them in action array.

Adapter Details:

Adapter Details are the extra details that can be display on the adapter form.
This will add buttons/details on the top of form. For example: Copy Outbond URL (Router Settings) etc.

To add this follow the steps:

  • Add the below code in MetaData:
"viewDetails": [
    {
      "categoryName": "Router Settings",
      "memberItems": [
        {
          "type": "outbondUrl",
          "value": "https://api.cmtest.nl/marketplace/salesforce/v1/tenants/{tenantId}/adapters/{tenantAdapterId}/handover?ApiKey={apiKey}",
          "displayName": "Handover Endpoint"
        },
        {
          "type": "outbondUrl",
          "value": "https://api.cmtest.nl/marketplace/salesforce/v1/tenants/{tenantId}/adapters/{tenantAdapterId}/message?ApiKey={apiKey}",
          "displayName": "Message Endpoint"
        },
        {
          "type": "outbondUrl",
          "value": "https://api.cmtest.nl/marketplace/salesforce/v1/tenants/{tenantId}/adapters/{tenantAdapterId}/events?ApiKey={apiKey}",
          "displayName": "Event Endpoint"
        },
        {
          "type": "outbondUrl",
          "value": "https://api.cmtest.nl/marketplace/salesforce/v1/tenants/{tenantId}/adapters/{tenantAdapterId}/presence-check?ApiKey={apiKey}",
          "displayName": "Presence Check Endpoint"
        }
      ]
    }
  ]
  • categoryName : It is the display name of Category
  • memberItems : It is the array of members/element that should display under category. It have following filed:
    • type : It refers to the type of detail, it can be outbond url/ some display etc.
      • outbondUrl : Creates a copy button.
    • value : Value of the member type, it can be URL or any other value
    • displayName : the name which should display on the front end

Adapters Form:​

Adapters Form is the page where we can add details to create/update new tenant Adapter. It consist of fields, which should be added on Configurations and Credentials in Database.
To add forms in frontend flow the steps:

  1. Select the Adapter.
  2. In formDetails Field enter
{
  "formData": [
    {
      "key": "name",
      "inputType": "string",
      "isRequired": true,
      "displayName": "Adapter Name"
    },
    {
      "key": "configurations.routerConfiguration.accountId",
      "inputType": "string",
      "isRequired": true,
      "displayName": "Router Account Id"
    },
    {
      "key": "configurations.routerConfiguration.adapterId",
      "inputType": "string",
      "isRequired": true,
      "displayName": "Router Adapter Id"
    }
  ],
  "metaData": {
    "oAuthRequired": false
  }
}
  • formData consist of all the form fields.

In formData array, we should add the following field:

  • key → key mapped w.r.t to configuration. For example:
    in configuration structure is
"credentials":{
  "SalesforceConfigurations":{
    "instanceUrl":"URL"
  },
  "routerCredentials":{
    "bmAdapterId":"SOME_ID"
  }
}

then key should be:

credentials.salesForceByocConfigurations.instanceUrl and credentials.routerCredentials.bmAdapterId

  • inputType → refers to the type of input, it can be of following type:
    • string
    • password
    • checkBox
    • dropdown → to add this, you need to add extra field inputDataOptions which should be array of strings. example →
{
      "key": "ShaType",
      "inputType": "dropdown",
      "displayName": "DISPLAY_NAME",
      "isRequired": true,
      "inputDataOptions": [
        "SHA256",
        "SHA512",
        "HMAC256",
        "HMAC512"
      ]
}
  • isRequired → If field is required them mark it as true else false
  • isEditable → If you don’t want to make field editable then mark this as false, if you don’t add this field default will be true .

That’s is for now , Happy coding 👨‍💻