Plugin Input Fields

This document explains how to create dynamic input fields for plugins in a system akin to Zapier's Zaps creation. We will explore the JSON structure, which defines these fields, and then delve into how to harness the to interact with the user-provided data.

JSON Structure for Input Fields

Each JSON object within the array represents an input field. This structured data is utilized to form an array of actions for various plugins, similar to a Slack plugin action to send a message to a Slack channel.

Here's a simplified format of the JSON structure:  

[
   {
      "key": "key_name",
      "label": "label_name",
      "type": "type_of_input_field",
      "required": boolean,
      "help": "A brief description of what this input field does",
      "dependsOn": ["key_name", "key_name", "key_name"],
      "children": [
          {
             "key": "key_name",
             "label": "label_name",
             "required": boolean,
             "help": "A brief description of what this input field does"
          },
          {
             "key": "key_name",
             "label": "label_name",
             "required": boolean,
             "help": "A brief description of what this input field does"
    }
        ],
    },
    {
        "key": "key_name",
        "label": "label_name",
        "type": "type_of_input_field",
       "required": boolean,
        "help": "A brief description of what this input field does",
       "dependsOn": ["key_name", "key_name", "key_name"],
        "source": "API function for getting the dynamic input field in an array of JSON"
    }
]

The type key can have the following values:

1. string

2. dropdown

3. input groups

4. radio

For input field types "dropdown", "radio" or "input groups", the JSON object can contain either a "source" or "children" key but not both.

Dependency Management

The depends on key contains an array of key_names representing other input fields that the current field depends on.

Static vs Dynamic Data

• Static Data: The children key holds a static array of JSON objects, each representing input data.
• Dynamic Data: The source key holds JavaScript code as a string to dynamically retrieve data in an array of JSON format.

Sample Code for Input Fields

Here are sample code snippets demonstrating each type of input field:

A. Dropdown

1. Static Dropdown:

1. 
   [
     {
       "key": "sheets",
       "type": "dropdown",
       "label": "sheets",
       "required": false,
       "children": [
         {
           "label": "Email",
           "sample": "string",
           "value": "option 1"
         },
         {
           "label": "Phone",
           "sample": "string",
           "value": "option 2"
         }
       ]
     }
   ]

2.    2. Dynamic Dropdown:

3. [
     {
       "key": "sheets",
       "type": "dropdown",
       "label": "sheets",
       "required": false,
       "source": "API CALLING CODE, which returns an array of JSON"
     }
   ]
   
   

4. B. Input Groups

    1. Static input groups:

5. [

     {

       "key": "woodpecker_values",

       "type": "input groups",

       "label": "woodpecker_data",

       "required": false,

       "children": [

         {

           "label": "Email",

           "sample": "string",

           "value": "option 1"

         },

         {

           "label": "Phone",

           "sample": "string",

           "value": "option 2"

         }

       ]

     }

   ]

   
   

6. Dynamic Dropdown:
7. 
   

8. [
           {
                   "key": "woodpecker_values",
                   "type": "input groups",
                   "label": "woodpecker_data",
                   "required": false, 
                   "source": "API CALLING CODE, which return array of json" 
           }
   ]

   
   
9. Input groups with nested input groups or inputs.

C. Radio

Static input groups:

1. Static Radio:

[
  {
    "key": "woodpecker_values",
    "type": "radio",
    "label": "woodpecker_data",
    "required": false,
    "children": [
      {
        "label": "Email",
        "value": "option 1"
      },
      {
        "label": "Phone",
        "value": "option 2"
      }
    ]
  }
]

2. Dynamic Dropdown:

3. [
     {
       "key": "woodpecker_values",
       "type": "radio",
       "label": "woodpecker_data",
       "required": false,
       "source": "API CALLING CODE where it will return an array of JSON"
     }
   ]
   
   

   D. String

[
  {
    "key": "woodpecker_values",
    "type": "string",
    "label": "woodpecker_data",
    "required": true
  }
]

Perform API Format

The Perform API is utilized to handle the data passed into the input fields. Values from the input fields are accessed through a context.inputData object, and each value can be referenced using the key property from the JSON structure, e.g context.inputData.key-name

The Perform API also utilizes context.authData to manage authentication details required to execute the API, supporting both Basic Authentication and OAuth 2.0.

Sample Array of JSON for Creating Input Fields

[
      {
            "key": "email",
            "label": "Enter email",
            "type": "string",
            "required": true,
            "help": "This email is for user to get organization",
            "dependsOn": []
      }, 
      {
            "key": "databaseKey",
            "label": "Enter database key",
            "type": "string",
            "required": true,
            "help": "This email is for user to get organization",
            "dependsOn": ["email"]
      }
]

Sample Code for Perform API

const url = 'perform_api_url';
const authkey = context.authData.accesstoken;

const data = {
      UserEmail : context.inputData.email,
      UserDataBaseKey : context.inputData.databaseKey,
};

const headers = {
  authkey,
     'content-type': 'application/json'
};

return axios.post(url, data, { headers }).then((response) => {
      console.log('Your Response', response.data);
      return response.data;
}).catch((error) => {
      console.error('Failed Response:', error);
      return error.response.data;
});

The axios library is used to send an API request, which can be tailored (e.g., GET, POST, etc.) according to user requirements.

This document provides an extensive explanation of creating dynamic input fields for plugins, accompanied by clear examples and code snippets. Through adhering to the outlined JSON structure and utilizing the perform api, developers can efficiently manage and interact with user-provided data within the plugin system.