# Interface

Interface uses the [parameters syntax](https://developers.make.com/custom-apps-documentation/block-elements/parameters).

## Arrays and collections

Arrays and collections use the `spec` syntax to specify their structure.

{% tabs %}
{% tab title="Simple array" %}

```json
{
	"name": "emails",
	"spec": {
		"type": "email",
		"label": "Email"
	},
	"type": "array",
	"label": "Emails"
}
```

{% endtab %}

{% tab title="Array of collections" %}

```json
{
	"name": "emails",
	"type": "array",
	"label": "Emails",
	"spec": [
		{
			"name": "email",
			"type": "email",
			"label": "Email"
		},
		{
			"name": "source",
			"type": "text",
			"label": "Source"
		}
	]	
}
```

{% endtab %}

{% tab title="Collection" %}

```json
{
	"name": "address",
	"spec": [
		{
			"name": "city",
			"type": "text",
			"label": "City"
		},
		{
			"name": "street",
			"type": "text",
			"label": "Street"
		},
		{
			"name": "number",
			"type": "number",
			"label": "Number"
		}
	],
	"type": "collection",
	"label": "Address"
}

```

{% endtab %}
{% endtabs %}

### **Arrays and collections with unknown structure**

When you have a parameter that is a collection or array but you don't know the structure inside, you need to specify the structure. Then, when the service returns any parameter inside the collection or arrary, the user will be able to map them.

{% tabs %}
{% tab title="Array" %}

```json
	{
    "name": "custom_fields",
    "type": "array",
    "label": "Custom Fields"
}
```

{% hint style="info" %}
For array, `spec` is not specified.
{% endhint %}
{% endtab %}

{% tab title="Collection" %}

```json
{
    "name": "address",
    "type": "collection",
    "label": "Address",
    "spec": []
}
```

{% hint style="info" %}
For collection, `spec` is set to an empty array.
{% endhint %}
{% endtab %}
{% endtabs %}

## Example

{% tabs %}
{% tab title="Appearance" %}

<div align="left"><figure><img src="https://1562974717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNS0mCBwODiYtOVXjc6qf%2Fuploads%2Fgit-blob-088109d3c4e4c4b08776ee08201d07e350e6eeb8%2Finterface_setvariable.png?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>
{% endtab %}

{% tab title="Source" %}

```json
[
	{
		"name": "id",
		"type": "uinteger",
		"label": "User ID"
	},
	{
		"name": "createdAt",
		"type": "date",
		"label": "Created at"
	},
	{
		"name": "fullName",
		"type": "text",
		"label": "Full name"
	},
	{
		"name": "emails",
		"spec": {
			"type": "email",
			"label": "Email"
		},
		"type": "array",
		"label": "Emails"
	},
	{
		"name": "address",
		"spec": [
			{
				"name": "city",
				"type": "text",
				"label": "City"
			},
			{
				"name": "street",
				"type": "text",
				"label": "Street"
			},
			{
				"name": "number",
				"type": "number",
				"label": "Number"
			}
		],
		"type": "collection",
		"label": "Address"
	}
]
```

{% endtab %}
{% endtabs %}

## Interface generator <a href="#interface-generator" id="interface-generator"></a>

Both the web interface and Visual Studio Code have an interface generator tool to help generate the interface.

Run a module for which you want to generate an interface, then in the panel with the output, click on the button circled below and choose **Download output bundles** option.

<div align="left"><img src="https://1562974717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNS0mCBwODiYtOVXjc6qf%2Fuploads%2Fgit-blob-ecb3fae3bf17d5efd9fdafc6e7d996b72c6e8a6d%2Fdownloadbundles.png?alt=media" alt="" width="563"></div>

A new panel will appear with the original response from the endpoint.

Copy the text to your clipboard.

<div align="left"><img src="https://1562974717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNS0mCBwODiYtOVXjc6qf%2Fuploads%2Fgit-blob-28bc472396bceda3c0429a524600509b20f5cef3%2Fbundlecontent.png?alt=media" alt="" width="563"></div>

<details>

<summary>Generator in web interface</summary>

Go back to the tab with your app and make sure you are in the settings of the right module. Select the **Interface** tab. You can see a JSON snippet:

```json
[
    {
        "name": "id",
        "type": "uinteger",
        "label": "User ID"
    }
]
```

In the upper-right corner, click the **Options** button and choose **Generator**.

<div align="left"><figure><img src="https://1562974717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNS0mCBwODiYtOVXjc6qf%2Fuploads%2Fgit-blob-dc9edde246ca45d0e2d81e06fa1b44c86de63cbc%2Fgenerator_button.png?alt=media" alt="" width="563"><figcaption></figcaption></figure></div>

A new panel will appear. There, paste the previously copied JSON from your clipboard and click **Generate**.

<div align="left"><figure><img src="https://1562974717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNS0mCBwODiYtOVXjc6qf%2Fuploads%2Fgit-blob-260538e0c87d9901e9567ffba483edb6ae0ebb4e%2Fgenerate_json.png?alt=media" alt="" width="375"><figcaption></figcaption></figure></div>

A new data structure is generated. Copy it to your clipboard and close the panel.

<div align="left"><figure><img src="https://1562974717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNS0mCBwODiYtOVXjc6qf%2Fuploads%2Fgit-blob-9726bfbfad912499c2c7c66a810ce6d648da6ca5%2Fnewdatastructure.png?alt=media" alt="" width="375"><figcaption></figcaption></figure></div>

In the Interface, replace the JSON structure with the new structure.

</details>

<details>

<summary>Generator in Visual Studio Code</summary>

Go back to VS Code and make sure you are in the settings of the right module. Select tab **INTERFACE**. You can see a JSON snippet:

```json
[
    {
        "name": "id",
        "type": "uinteger",
        "label": "User ID"
    }
]
```

Click the 'magic wand' icon.

Paste your data and copy the generated code.

You still need to check all the labels and types to make sure there are no errors.

You might need to change some abbreviations to uppercase (such as URL, VAT, etc.).

</details>

{% tabs %}
{% tab title="Old structure" %}

```json
[
    {
        "name": "id",
        "type": "uinteger",
        "label": "User ID"
    }
]
```

<div align="left"><img src="https://1562974717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNS0mCBwODiYtOVXjc6qf%2Fuploads%2Fgit-blob-5e4d0d8b865bf7b7dbd5aa4ec94c16e97c5135f4%2Finterface_oldstructure.png?alt=media" alt="" width="563"></div>
{% endtab %}

{% tab title="New structure" %}

```json
[
  {
    "name": "result",
    "type": "text",
    "label": "Result"
  }
]
```

<div align="left"><img src="https://1562974717-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FNS0mCBwODiYtOVXjc6qf%2Fuploads%2Fgit-blob-3632815ca32aaf9f1ad8f9b459d8d88261d20a5a%2Finterface_newstructure.png?alt=media" alt="" width="563"></div>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
The generated code still needs to be reviewed!

Make sure the generated **type** for dates is **date**.

The label must be grammatically correct. Use sentence case and uppercase for abbreviations such as UID, URL, etc.

In the case of **Search** modules, you need to delete the pagination data `__IMTLENGTH__` and `__IMTINDEX__`.
{% endhint %}

{% hint style="info" %}
Whenever you change Interface in a module, you need to refresh your scenario in order to see the changes.
{% endhint %}

## Dynamic interface using RPC

You can use RPC to generate the interface dynamically.

{% tabs %}
{% tab title="Source" %}

```javascript
"rpc://nameOfTheRPC"
```

{% endtab %}
{% endtabs %}

You can also define RPC to generate just a part of the interface.

{% tabs %}
{% tab title="Source" %}

```json
[
	{
		"name": "id",
		"type": "uinteger",
		"label": "User ID"
	},
	"rpc://nameOfTheRPC"
]
```

{% endtab %}
{% endtabs %}

You can access module parameters in remote procedures via the `{{parameters.foo}}` syntax.

{% hint style="info" %}
If you call the RPC from the interface of an instant trigger, you can use `{{webhook.foo}}` syntax to access webhook's parameters.
{% endhint %}