Fields types

Let’s examine the possible types of fields that can be specified in the settings section of the manifest.json file. All possible types are listed in the table, with a description of their properties.

For each type, examples of using it in manifest.json, and if necessary, an example of the localization file from the i18n.

Types text and pass

manifest.json

{
"widget":{
  "name": "widget.name",
  "description": "widget.description",
  "short_description": "widget.short_description",
  "code": "new_widget",
  "secret_key": "57009cb5048a72191f25b01355c17d10dc349d5",
  "version": "1.0.0",
  "interface_version" : 2,
  "init_once" : false,
  "locale":[
        "en",
        "es"
        ],
    "installation": true
    },
"locations":[
    "ccard-1",
    "clist-1"
    ],
"settings":{
    "login":{
        "name": "settings.login", //indicates the localization file in the i18n folder
        "type": "text", //type: text field
        "required": false
        },
    "password":{
        "name": "settings.password",//indicates the localization file in the i18n
        "type": "pass", //type: password
        "required": false
        }
  }
}

i18n/en.json

{
    "widget":{
        "name":"Test widget",
        "short_description":"Short one",
        "description":"ENGLISH: #SUBDOMAIN# #HOST# #LOGIN# #API_HASH# #USER_ID# #ACCOUNT_ID# This widget is an example on working with Kommo"
    },
    "settings":{
        "login":"User login",
        "password":"User password"
        }
}

Type users

This type of field is used when it is necessary to present a list of the system users with text fields, it is required in case you need to enter some information for each employee, for example, an internal phone number (extension) for VoIP service).

manifest.json

{
"widget":{

    },
"locations":[

    ],
"settings":{
    "login":{

        },
    "password":{

        },
    "phones":{
        "name": "settings.user_phones",
        "type": "users",
        "required": true
    }
  }
}

i18n/en.json

{
    "widget":{

    },
    "settings":{
        "login":"User login",
        "password":"User password",
        "user_phones":"Phones list"
        }
}

Type users_lp

This type of field is an extended version of the users field. The difference is that for each user there are two fields not just one. It is used when each employee needs to provide pairs of values, for example: login and password. 

manifest.json

{
"widget":{

    },
"locations":[

    ],
"settings":{
    "auth_data":{
        "name":"settings.auth_data",
        "type":"users_lp",
        "required": false
    }
  }
}

i18n/en.json

{
    "widget":{

    },
    "settings":{
        "auth_data":"Auth list"
        }
}

Type custom

Kommo widgets support adding custom program logic to the widget’s settings page by adding a field of arbitrary structure and appearance.

The field of the random structure consists of a hidden input (a field through which read and save are carried out), a div element into which DOM elements can be displayed for user interaction, and some javascript code that provides the necessary logic.

To use fields of an arbitrary structure, you need to take two simple steps:

1. Add a field to manifest.json and allow the widget to be executed on the settings page
2. Implement reading and writing data

manifest.json

Do not forget to add the area settings to the locations array!

{
"widget":{

    },
"locations":[
    "ccard-1",
    "clist-1",
    "settings"
    ],
"settings":{
  "myfield": {
      "name": "settings.myfield",
      "type": "custom",
      "required": true
    }
 }
}

Important: a field with the type custom can contain a json string or a number. The string data type will not be stored on the server.

Build the widget and upload it to your account. A div with the ID <widget code>_custom_content and a hidden input with the ID <widget code>_custom will become available for you.

To make changes to your field reflected in the form and its buttons, you need to create a change event on the hidden system input. Here is an example of how you can do this:

$('input[name="name of your field"]').trigger('change');

Next, we will learn about widget connection areas.