Your app CSS

Overview

Copy

When building an application based on Tray Embedded, it is important to remember that there are basically two UI components that you will need to configure and style with CSS:

1. Your application interface which presents the available Solutions to your End Users, including the option to click and configure a Solution Instance for their own use. This is not a Tray.io component and so is entirely controlled by you, using tags and custom fields to assist as explained below.

2. The Configuration Wizard which is triggered when the End User clicks to configure a Solution Instance. This is a Tray.io component and instructions for adjusting the Config Wizard CSS are found in the next page in this section.

Application UI mockup

Copy

The following is a simple mockup of how your application interface might look in terms of presenting your Solutions to your End Users:

Using tags and custom fields to manage CSS and icon urls

Copy

In order to assist you in filtering Solutions and creating classes for box styling and display of icons, you can use Tags and Custom Fields in the Solution Editor:

Then your app can use a GraphQL (see our intro to Tray Embedded GraphQL) List Solutions query such as:

1
query {
2
  viewer {
3
   solutions (criteria: {tags: "two-service"}){
4
    edges {
5
     node {
6
      id
7
      title
8
      description
9
      tags
10
      customFields {
11
       key
12
       value
13
      }
14
     }
15
     cursor
16
    }
17
    pageInfo {
18
     endCursor
19
     hasNextPage
20
    }
21
   }
22
  }
23
 }

This will then return results such as:

1
{
2
 "data": {
3
  "viewer": {
4
   "solutions": {
5
    "edges": [
6
     {
7
      "node": {
8
       "id": "e2ed06d9-f56c-4eda-a1dd-218ae63a30b6",
9
       "title": "Salesforce Accounts > Asana Tasks",
10
       "description": "Set Salesforce Tasks to sync to Asana",
11
       "tags": [
12
        "salesforce",
13
        "asana",
14
        "two-service"
15
       ],
16
       "customFields": [
17
        {
18
         "key": "icon-url",
19
         "value": "\\"https://icons.com/salesforce-asana.png\\""
20
        }
21
       ]
22
      },
23
      "cursor": "ZTJlZDA2ZDktZjU2Yy00ZWRhLWExZGQtMjE4YWU2M2EzMGI2"
24
     }
25
    ],
26
    "pageInfo": {
27
     "endCursor": "ZTJlZDA2ZDktZjU2Yy00ZWRhLWExZGQtMjE4YWU2M2EzMGI2",
28
     "hasNextPage": false
29
    }
30
   }
31
  }
32
 }
33
}