Advanced Inputs

The Action specification now supports new advanced input types that can be included in the links.actions fields. Until now, we've been working with basic input fields and buttons. But you can also use these:

• text

• email

• URL

• numbers

• dates

• date-times

• checkboxes

• radio buttons

• text areas

• select.

Here's an example of this using text, email, number, and text area fields:

const payload: ActionGetResponse ={
   title: 'Alice\'s Adventures',
   icon: '<image-url>',
   label: 'Donate SOL',
   description: 'Cybersecurity Enthusiast | Sign up for my newsletter!',
   "links": {
    "actions": [
      {
        "label": "Sign Up", // button text
        "href": "/api/newsletter?name={name}&email={email}&phone={phone}&message={message}",
        "parameters": [
           {
             type: "text",
             name: "name",
             label: "Enter your Name",
             required: true,
           },
           {
            type: "email",
            name: "email",
            label: "Enter your Email",
            required: true,
           },
           {
            type: "number",
            name: "phone",
            label: "Enter your Phone Number",
            required: true,
          },
          {
            type: "textarea",
            name: "message",
            label: "What do you expect from this newsletter?",
            required: true,
          },
        ]
      }
    ]
  }
};

Here's what that would look like when unfurled:

Here's another example using the Select and Checkbox fields:

const payload: ActionGetResponse ={
   title: 'Alice\'s Adventures',
   icon: '<image-url>',
   label: 'Donate SOL',
   description: 'Cybersecurity Enthusiast | Sign up for my newsletter!',
   "links": {
    "actions": [
      {
        "label": "Sign Up", // button text
        "href": "/api/donate?amount={amount}&choice={choice}",
        "parameters": [
          {
            type: "select",
            name: "amount", // parameter name in the `href` above
            label: "Donation Amount in SOL", // placeholder of the text input
            required: true,
            options: [
              { label: "1", value: "1" },
              { label: "5", value: "5" },
              { label: "10", value: "10" },
            ],
          },
          {
            type: "radio",
            name: "choice", // parameter name in the `href` above
            label: "Do you want to sign up for our newsletter", // placeholder of the text input
            required: true,
            options: [
              { label: "Yes", value: "1" },
              { label: "No", value: "0" },
            ],
          },
        ]
      }
    ]
  }
};

Here's what that would look like when unfurled:

Now, we'll finish up with a discussion of OPTIONS AND POST requests.