Covered in this article

View Classes

A view class specifies how to render an input field of any integration component on the AVA UI. The view class (viewClass) is a required parameter in the Fields Object of every component descriptor file.

Here are the general view classes which are used to render the input fields in integration components.

View Class Description
TextFieldView Renders a single line text field
TextAreaView Renders a multi-line text area
CheckBoxView Renders a checkbox
SelectView Renders a drop-down menu to select from available values
MultiSelectView Renders a drop-down menu to select multiple values from the available ones
PasswordFieldView Renders a standard password entry text field where the input values are replaced by symbols such as the asterisk (*) or a dot ()
OAuthFieldView Renders button for initiating the OAuth process

TextFieldView

TextFieldView has many purposes. Use it to draw a one-liner text field form to input the information. For example, you can use it in the case of Basic Authorization to input the API key. The possibilities are many but the implementation is similar.

Property Name Type Required Description
label string Yes Renders a label with the given text above the input field
required boolean Yes Specifies whether the input value is required for the component to operate properly or not. When true is set a red asterisks (*) to appear along with input field or the label. If the value is false then it is optional to fill the field.
placeholder string No Used to give a short and descriptive text which is rendered in the input field.
note string No Used to provide more information about the input field. When present a question mark (?) will appear and the text will be shown in a tool-tip when hovered. It accepts a simple text, URL and HTML <em>. The text in tool-tip will be folded for longer texts.

Here is an example implementation of TextFieldView view class:

"credentials": {
  "fields": {
    "company_domain": {
      "viewClass": "TextFieldView",
      "label": "Company domain",
      "required": true,
      "placeholder":"yourcompany.pipedrive.com",
      "note":"Enter <em>only</em>&nbsp; the domain name here"
      },
    "token": {
      "viewClass": "TextFieldView",
      "label": "API token",
      "required": true,
      "placeholder": "API token goes here",
      "note":"More information is <a href='https://some/article/url'>here</a>."
    }
  }
}

The above example is rendered on the AVA UI in the following way:

Rendering of TextFieldView view class

TextAreaView

TextAreaView can be used to render multi-line text area for the different purposes.

Property Name Type Required Description
label string Yes Renders a label with the given text above the input field
required boolean Yes Specifies whether the input value is required for the component to operate properly or not. When true is set a red asterisks (*) to appear along with input field or the label. If the value is false then it is optional to fill the field.
placeholder string No Used to give a short and descriptive text which is rendered in the input field.
note string No Used to provide more information about the input field. When present a question mark (?) will appear and the text will be shown in a tool-tip when hovered. It accepts a simple text, URL and HTML <em>. The text in tool-tip will be folded for longer texts.

Here is an example implementation of TextAreaView view class:

"query": {
  "label": "SQL Query",
  "viewClass": "TextAreaView",
  "required": true,
  "placeholder": "INSERT INTO films (code,title,kind) VALUES (${code},${title},${kind})",
  "note": "You can use properties of message body as <em>${values}</em>&nbsp; in your insert or update or delete"
}

Which would render in the following way:

Rendering of TextAreaView view class

CheckBoxView

The CheckBoxView view class can be used to render a check-box for enabling an option during the integration flow design. This view class had only one option:

Property Name Type Required Description
label string Yes Renders a label with the given text above the input field

Here is an example implementation of CheckBoxView view class:

"fields" : {
  "SomeOption" : {
    ......
  },
  "CheckSomething": {
    "label": "CheckBoxView Label",
     "viewClass": "CheckBoxView"
  }
}

When the checkbox is selected it will transmit to the next stage "CheckSomething": on (following our example above). Alternatively, if the checkbox is not selected it will transmit nothing.

If multiple check-boxes are necessary then they have to be implemented one-by-one in the component descriptor.

SelectView

Property Name Type Required Description
label string Yes Renders a label with the given text above the input field
required boolean Yes Specifies whether the selection is required for the component to operate properly or not. When true is set a red asterisks (*) to appear along with the label. If the value is false then it is optional to select.
model object or string Yes Contains the name (string) of a function exposed by a component that returns the JSON object or the JSON object containing the values.
prompt string No Used to give a short and descriptive text which is rendered in the select field.

Here is an example of SelectView view class where the model property is an object containing the values:

"fields": {
  "status": {
    "label": "Pet Status",
    "required": true,
    "viewClass": "SelectView",
    "model": {
      "available": "Available",
      "pending": "Pending",
      "sold": "Sold"
    },
    "prompt": "Select Pet Status"
  }
}

This is rendered in the following way:

Rendering of the SelectView view class

The true power of this view class is in the ability to pass a string containing the name of a function exposed by a component that returns a JSON object. This is commonly implemented with the dynamic select models. For example the component descriptor of the MailChimp component has the following structure:

"fields": {
  "listId": {
    "viewClass": "SelectView",
    "prompt": "Select your MailChimp List",
    "label": "List",
    "required": true,
    "model": "getLists"
  }
}

Here the model has a getLists which is exposed in the lib/commons.js as a function getLists:

/**
 * Function that returns values for the list selection box
 *
 * @param conf
 * @param cb
 */
function getLists(conf, cb) {
  co(function*() {
    console.log('Fetching lists');

    mailchimp.setApiKey(conf.apiKey);
    const lists = yield mailchimp
      .get('lists');
    let result = {};
    lists.lists.map((list) => {
      result[list.id] = list.name
    });
    console.log('Result ', result);
    cb(null, result);
  }).catch(err => {
    console.log('Error occurred', err.stack || err);
    cb(err);
  });
}

This function itself uses the mailchimp-v3 libraries to query the MailChimp API for the names of the lists in your connected account, which is not predetermined anywhere in the component descriptor.

MultiSelectView

MultiSelectView shares the properties of SelectView:

Property Name Type Required Description
label string Yes Renders a label with the given text above the input field
required boolean Yes Specifies whether the selection is required for the component to operate properly or not. When true is set a red asterisks (*) to appear along with the label. If the value is false then it is optional to select.
model object or string Yes Contains the name (string) of a function exposed by a component that returns the JSON object or the JSON object containing the values.
prompt string No Used to give a short and descriptive text which is rendered in the select field.

EXAMPLE:

"triggers": {
  "getPetsByStatusWithGenerators": {
    "main": "./lib/triggers/getPetsByStatusWithGenerators.js",
    "type": "polling",
    "title": "Get Pets By Status With Generators",
    "fields": {
      "status": {
        "label": "Pet Status",
        "required": true,
        "viewClass": "MultiSelectView",
        "model": {
          "available": "Available",
          "pending": "Pending",
          "sold": "Sold"
        },
        "prompt": "Select Pet Status"
      }
    }
  }
}

Here is how it looks like in the UI:

MultiSelectView in the UI

PasswordFieldView

The PasswordFieldView view class is used to provide a secure input field for passwords in the credentials of the integration components. It has the following properties:

Property Name Type Required Description
label string Yes Renders a label with the given text above the input field
required boolean Yes Specifies whether the input data is required for the component to operate properly or not. When true is set a red asterisks (*) to appear along with the label. If the value is false then it is optional to fill-in.
placeholder string No Used to give a short and descriptive text which is rendered in the input field.

Here is an example of PasswordFieldView view class usage in the credentials:

"credentials" : {
  "fields": {
    "host":{
      "viewClass":"TextFieldView",
      "label":"Host",
      "required":true,
      "placeholder":"Name of the host"
    },
    "username": {
      "viewClass": "TextFieldView",
      "label": "User Name",
      "required": true,
      "placeholder": "Paste your SFTP user name"
    },
    "password": {
      "viewClass": "PasswordFieldView",
      "label": "Password",
      "required": true,
      "placeholder": "Paste your SFTP password"
    }
  }
}

This is rendered in the following way:

Rendering of the PasswordFieldView view class

OAuthFieldView

The OAuthFieldView view class is used to render a button in the credentials of the component with Authenticate or Re-Authenticate. When the button is pressed the process of OAuth1/Oauth2 authentication is started or repeated. This view classes has only one parameter:

Property Name Type Required Description
required boolean Yes Specifies whether it is required to authenticate or not. When true is set a red asterisks (*) appears along with the label. If the value is false then it is optional to authenticate.

Since the main purpose of the OAuthFieldView view class is to facilitate the OAuth1/Oauth2 authentication then it is worth to present how to use it in conjunctions with the OAuth object:

"credentials" : {
  "fields":{
    "oauth":{
      "viewClass":"OAuthFieldView",
      "required":true
    }
  },
  "oauth2":{
    "client_id":"",
    "client_secret":"",
    "auth_uri":"https://accounts.google.com/o/oauth2/v2/auth",
    "token_uri":"https://www.googleapis.com/oauth2/v4/token",
    "scopes": [ "https://spreadsheets.google.com/feeds" ],
    "access_type": "offline",
    "prompt": "consent"
  }
}

This will render in the following way:

Rendering of the OAuthFieldView view class

In the above presented method the OAuth2 authentication will be initiated when the button Authenticate is pressed.