Displaying Solutions

Read first

• Tray Embedded Overview
• Main components diagram
• Solution building basics
• User Management

Introduction

Once you have registered and logged a user into your app, you will need to display the Integrations / Solutions available for them to configure their own 'Solution Instances'.

The above screenshot shows a simple mockup of what this might look like (exactly how you display available Solutions to your End Users is up to you).

In the above case, for an End User (who has already been registered and has an access token) you will need to implement the following:

1. List the available Integrations / Solutions in your application with the solutions query (master token)
2. The End User can click to configure any of the available solutions, whereby you:
   • generate a Config Wizard one-time authorization code (master token)
   • and use createSolutionInstance (user token) to obtain a solutionInstanceId
3. The Config Wizard can then be activated with the following url: https://embedded.tray.io/external/solutions/${embeddedId}/configure/${solutionInstanceId}?code=${authorizationCode}

In the above url remember that embeddedId is set in the People and settings section of the dashboard

Key Data

• id is the unique id of the Solution, and is required when creating a Solution Instance for an End User
• title is the title of the Solution as named in the Tray Embedded UI, and can be displayed in your application
• tags which have been set in the Tray Embedded UI can be used to categorize and filter Solutions in your application
• customFields can be used to add any custom fields, such as an icon url for your Solution

Viewing Solutions in the UI

The Solutions you have created for your End Users can be found in the Solutions section of the Tray Embedded dashboard:

APIs connected to Solutions

• The GraphQL solutions query is used to list the Solutions available

Tagging Solutions

In Solution settings, it is possible to use tags to categorize Solutions:

One use for this is that you may wish to group users into basic and advanced product users, using tags in the Solution editor:

tags is then one of the node fields that can be returned for each result from the solutions query:

  query {
    viewer {
      solutions {
        edges {
          node {
            id
            title
            description
            tags
          }
        }
      }
    }
  }

Results are returned in the following format and solutions can then be filtered accordingly for presentation to End Users in your external application:

{
  "data": {
    "viewer": {
      "solutions": {
        "edges": [
          {
            "node": {
              "id": "2d38bxxx-xxx-xxx-xxx-xxc68084266",
              "title": "Salesforce 1",
              "description": "",
              "tags": [
                "basic"
              ]
            }
          },
          {
            "node": {
              "id": "53b10xxx-xxx-xxx-xxx-xxe09038b",
              "title": "Salesforce 2",
              "description": "",
              "tags": [
                "advanced"
              ]
            }
          }
        ]
      }
    }
  }
}

Connected topics

• Custom icon URL can be used to present images/icons
• Updating Solutions and Instances
• Data Mapping

Read next

• The Config Wizard