Tray Embedded / Advanced Topics / Custom JS / Examples

Examples

Intro

For the following examples we have set up an Embedded project which you can download and install to test yourself.

It is a data mapping integration between Salesforce and a mock Acme solution:

main-config-wizard-screen

Salesforce is a CRM, and we have used a separate Tray workflow to make 'Acme' a mock CRM system which is a placeholder for a service you are wanting to build a custom integration with.

In order to test this solution end-to-end you will need to set up a free Salesforce developer account and follow our documentation on how to set up your Salesforce permissions to authenticate with Tray - taking particular notice of the section on the Salesforce trigger which says that you must a use a Salesforce 'permission set' with the the 'Modify all Data' and 'Customize Application' permissions.

You will also need to do the following:

Import the project

Import the mock API workflow

Edit webhook URLs

You will then need to edit the webhook urls in the following screens to match that of your Acme API service workflow:

Test using the Embedded demo app

You will then:

  1. Publish your solution

  2. Test your solution using the Tray Embedded demo app

  3. Once you have created a Solution Instance for an End User test by adding a new contact/account etc. to Salesforce and you will then see a successful run for that End User:

In all the Custom JS below, the headers, parameters, url etc. entered are specific to the mock Acme API service we have created. When using your own service, you will need to adjust these accordingly

Working with Custom JS

1 - Generating dropdown lists

Normally when you want to display a dynamic list in the config wizard, this is quite intuitive - you create the config slot on a field that is a dropdown list in the workflow (see Config and drop-down lists).

However, this only works when we have the correct connector operations and dropdown lists.

There may be times when you want to define a new list. You can achieve this using custom javascript.

In this example, when pushing records to Acme, we want to prompt the end user to select what object type they want to push new Salesforce records to:

acme-object-drop-down-list

This is done with the following steps:

2 - Customising the data mapping component

As in the example of generating dropdown lists, there are times when you might wish to use the Data Mapping component with dynamic lookups but we don't support the connector operation you need to set this up.

In this case when an End User has selected e.g. 'Contacts' as the Acme object to sync to in step 1 above, we want the available fields to dynamically respond to the fields available for a 'contact'.

On the right hand side, we want the user to be able to select from the list of available Acme fields for the object they have chosen:

sfdc-to-acme-data-mapping-config-wizard

In order to do this dynamicallly, we do the following:

3 - Showing / hiding slots based on dependencies

In order to improve the user experience of the wizard you may wish to show or hide slots based on the value of another. In this solution, on the final screen we present the option to the user of either:

  • using the default mapping if the user so chooses

  • making use of a user-defined mapping

show-hide-slots

The native Data Mapper feature doesn't support the ability to be hidden or visible based on the value of another slot.

So we set up the external_use_default_mapping slot in the following manner: