Plugin Input Fields
Input fields are elements in a user interface (UI) where users can enter data. They are fundamental components of forms, allowing users to provide information such as text, numbers, dates, and selections. Each input field is designed to capture a specific type of data, ensuring that the information entered by the user can be processed correctly by the application. Also Click here., for instructions on adding input fields in JSON when creating a plugin and action.
AI Field
The AI Field enables you to integrate AI-powered capabilities into your app's triggers and actions. By adding this field type, you can allow your users to leverage AI for complex tasks without requiring manual intervention.
Actions/Triggers in plugins require an input form because they always need a way for users to send data to your app’s API to find, update, or create a new object. Syntax to create static type fields through JSON are as follow:
Static Input Fields
Static input fields are predefined and do not change based on user interactions. They are essential components in forms and user interfaces for collecting and displaying specific types of data. Here's an overview of different static input field types and their functions:
String
A string input field collects text data, such as names, addresses, and email addresses. For example, a field labeled "Name" might guide users with an initial value like "John Doe."
Number
A number input field collects numerical data, ideal for ages, quantities, or prices. It ensures users enter valid numbers and can enforce constraints like minimum and maximum values.
Boolean
Boolean input fields capture binary choices (true/false, yes/no) using checkboxes or toggles. They are useful for preferences like agreeing to terms or subscribing to newsletters.
Static Dropdown
Static dropdown fields provide a fixed list of options, ensuring consistent data entry. They are ideal for selections like country or status, offering users a predefined list to choose from.
Input Group
Input groups are collections of related input fields under one label, useful for capturing complex data like addresses or contact information. They help organize related data, making forms more user-friendly.
Default
The default value sets the initial content of an input field, providing users with a hint or example of the expected input. This improves form usability and ensures data consistency.
Click here. to know more about static input fields.
Click here. for instructions on adding input fields in JSON when creating a plugin and action.
Static input fields
May 15, 2025Useful in scenarios where users need to select multiple items, such as tags, categories, or preferences in such cases enables users to make multiple selections from a set of options. So this is an array with a comma-separated list of entries sent in the API request. Do not ask users to type this manually use the built-in functionality instead.
Advanced Input Fields
Advanced input fields enhance the user experience by offering more functionality and flexibility in data collection. They address specific needs beyond basic input fields, improving data accuracy and usability. Here are some key types of advanced input fields:
Dynamic Dropdown
A dropdown menu is a UI element that displays a list of options when clicked. Users can select a single value from here. Children here are dynamically fetched via a source. The source here is a JavaScript code that runs and gives the dynamic option. Here is the data type to render dropdown fields in the plugin. Check source section to for more details on source.
Dynamic Multiselect
A multiselect is a tool that lets you pick multiple options from a list at the same time. Children here are dynamically fetched via a source. The source here is a JavaScript code that runs and gives the dynamic option. Here is the data type to render multiselect fields in the plugin. Check source section to for more details on source.
Hidden Fields
This field type is used to hide other fields based on value selected from its children, the key fieldsToHide will have a mapping of children key corresponding to which other keys of the parent json will be hidden on that children being selected.
Help Text
Help text provides additional instructions or examples near input fields, reducing user confusion and errors. It ensures users understand how to complete each field correctly, improving the overall user experience.
Dictionary
It helps you organize and store information using pairs of related data. Each pair consists of a unique key and a value. In this data type, we define the keys and values template. This template allows the user to define the datatype of individual input fields.
Dynamic Input Groups
Dynamic input groups allow users to add or remove sets of related input fields as needed. This feature enhances flexibility by letting users modify the form structure, such as adding multiple phone numbers or email addresses dynamically.
To know more about adding these input fields in any action or trigger, Click here.
This document provides an extensive explanation of creating dynamic input fields for plugins. For knowing the Json structure of all these fields go to their corresponding pages.
Dynamic multiselect
Apr 30, 2025A dynamic input group is a set of input fields that can be added, removed, or modified in real-time based on user interactions or API response . This feature allows for the creation of optional fields and can hide them when not in use, providing flexibility and enhancing user experience.
📌For example When creating a new record in an airtable, dynamically fetch and display columns inside an input group. Users can then input data only into the columns they need, making the process efficient and user-friendly using following steps and achieve result :
Take a get API for get all columns from airtable API documentation
Configure it in javascript API call code
Return an array containing a object containing key,label,type,help for columns
key is used to access this specific column value ex: ${context.inputData.inputgroupName.coloumnName}
Label shown on the UI
type decide type of the field using if condition in input group source code you can change type for a field also
help text can be static or dynamic. Handle source code
This code can be added through the GUI or via JSON by including a key “source” with the escaped code as its value. Use EscapeJSON to properly format the code for JSON.
Response :
it returns a key-value pair. If the key for the column is "name", the returned value will be in the format {site: "site_id"}. To use this value, the path is ${context.inputData.inputgroupName.coloumnName}:
Dynamic Input group
Apr 30, 2025A dynamic dropdown updates its options in real-time based on user interactions or API. The values are fetched from an API using a JavaScript call, and the data is displayed as an array of objects, each containing a label, sample, and value. (Dropdown allows only single value to select)
The source API includes a JavaScript call to fetch the required data. Once retrieved, the data is shown in the dropdown as an array of objects, each containing a label, sample, and value for the child options. Example : If you want to create sites dropdown for webflow application so this is what you have to integrate :
Take a get API for get all sites from webflow API documentation
Configure it in javascript API call code
Return a object containing label,sample,value for all sites
This code can be added through the GUI or via JSON by including a key “source” with the escaped code as its value. Use EscapeJSON to properly format the code for JSON.
Response :
On selecting a value from the dropdown, it returns a key-value pair. If the key for sites is "site", the returned value will be in the format {site: "site_id"}. To use this value, the path is ${context.inputData.site} :
Dynamic dropdown
Apr 30, 2025Dynamic help text is a contextual help popup shown to users based on specific conditions handled in the source code. When these conditions occur, the help text provides guidance to help users understand the plugin's behavior. In short dynamic help text provides real-time feedback based on user interactions.
📌For example, if you're creating an action for Google Sheets to create a new entry, you can use dynamic help text to alert the user if the selected sheet has no columns, making it easy for the user to understand and debug the issue.
Take a get API for get all columns of sheet(example) from google API documentation
Configure it in javascript API call code
Return an array containing label,key,type,help etc for all column, with this add a condition in code if condition not fulfilled return empty array in children and message
This code can be added through the GUI or via JSON by including a key “source” with the escaped code as its value. Use EscapeJSON to properly format the code for JSON.
