Standard Integration - Data source – Upsales Help Centre

General

To enable an app as a data source, check the "datSource" checkbox under Frameworks. Then continue to configure the app as specified by the documentation below. For a full example of how the config may look see Figure 1. For general app configuration, e.g. user configurable fields, see Upsales app documentation.

Capabilities config

The following fields can be configurated under capabilities:

Table 1

Properties for the typeahead config object

Property	Valid values	Example	Description
imageLink	String	"https://img.upsales.com/app/102/logo.png"	Used to render the logo of the app
match	Object	{"upsales": "dunsNo", "integration": "dunsNo"}	Used to determine if a company already exists in Upsales.

Table 2

Properties for the pagination config object

Property	Valid values	Example	Description
enabled	Boolean	true	This enables/disables pagination in the case when metadata.total > data.length

Typeahead config

This is the configuration for the add new company modal. The following fields can be configurated under typeahead:

Table 3

Properties for the typeahead config object

Property	Valid values	Example	Description
idField	String	"duns_no"	When a user press buy on a row, the value from this field of that object will be sent to the app via {body: {data: {id}}}
searchField	String	"name"	This is the field that will be searched against when building the filters against the typeahead endpoint.
pagination	Object, see Table 4. for properties	{"enabled": false}	Option object for enabling/disabling pagination
countryTabs	Object, see Table 5. for properties	{"enabled": true, "showAll": false, "showTotals": false}	Option object for enabling/disabling country tabs
columns	Array of Column, See Table 6. for Column properties	{"type": "add", "width": "30%"}	An array of Column config objects, determine how the result table will look

Table 4

Properties for the pagination config object

Property	Valid values	Example	Description
enabled	Boolean	true	This enables/disables pagination in the case when metadata.total > data.length

Table 5

Properties for the countryTabs config object

Property	Valid values	Example	Description
enabled	Boolean	true	This enables/disables countryTabs, if disabled the typeahead will send any country filter or country list.
showAll	Boolean	true	This enables/disables the "All" tab when using country tabs.
showTotals	Boolean	true	This enables the tags that show the total amount of matching companies for each result.

Columns

The following attributes can be configured for columns

Table 6

Properties for a Column config object

Property	Valid values	Example	Description
type	String	"string"	The type decides the behavior and presentation of the column. For the most part, the type only decides how to present the value of the field, e.g. "currency", but the "add", "user" and "view" types are special types that come with set behaviors attached to them. See Table 7 for valid values.
header	String	"Company name"	This is the name of the column.
width	String	"25%"	The width of the column in %.
field	String	"name"	The field on the object from which the value should be picked.
subText	Array of Column	{"type": "string", "field": "name"}	This adds a second row to the column. The config object is the same as a column with the exception that the following attributes have no effect: width, header, subText.
icon	String	"fa fa-bar-chart"	This enables one to put an icon in front of the value.
style	React style object	{"marginRight": "5px"}	This allows one to pass any CSS style to the TD element of the column
staticValue	String	"sniCode"	This allows for translations of "staticValues" that exists in Upsales, e.g. sniCode.

Table 7

The different types of columns

Value	Description
number	This type will parseInt() the value before rendering it.
string	This type will just render the value as is.
currency	This type will render a number thousand separated.
flag	This type will render a flag if provided with a country code e.g. 'SE'
add	This type till show the add/merge buttons. It uses the pricing object under capabilities to generate the different buy options.
user	This type will render gravatars for users under the user attribute on the object if they are formatted in the same way as for Upsales companies.
view	This type will use the idField to navigate to /accounts/{id}/

Refresh config

This is the options for the update/connect company button in the company view. The following fields can be configurated under refresh:

Property	Valid values	Example	Description
columns	Array of Column	{"type": "string", "field": "name"}	Same as for typeahead

iFrame configuration

To enable the iframe just set iframe=true in the outermost layer of the config. The icon will be the one specified in capabilities.imageLink. The iframe will then do POST request against the app on /iframe providing the company id under body.data.objectId.

Example

Figure 1. An example config for a data source app

{
    {
        "fields": {
            "account": [
                {
                    "type": "multiselect",
                    "name": "countries",
                    "label": "Countries",
                    "required": true,
                    "externalValues": true
                },
                {
                    "type": "checkbox",
                    "name": "createContacts",
                    "label": "Create contacts"
                }
            ],
            "user": [],
            "test": true
        },
        "uiElements": {
            "account": {
                "sidebar": [
                    {
                        "name": "monitoring",
                        "type": "iframe"
                    }
                ]
            }
        },
        "requirements": [],
        "capabilities": {
            "imageLink": "https://img.upsales.com/app/102/logo.png",
            "match": {
                "upsales": "dunsNo",
                "integration": "dunsNo"
            }
        },
        "iframe": true
    }
}