Input Types

In Alpaco you can have many different input types, separated or grouped together to form sets of settings.

These are the current allowed Input Types:

• ​Text String

  - A single line of text with no formatting options.

• Textarea

  - Multi-line text input with simple formatting options.

• ​Select

  - Select/Dropdown of predefined values.

• ​Boolean

  - On/off toggle/switch.

• ​Image

  - Image upload or URL input.

• ​Color picker

  - Color picking wheel w/ eyedrop tool.

• ​Code

  - Ability to insert raw code.

How to get started?

Simply open up your Base or Block, depending on where you want your input, navigate to the Right panel, click the button called "Add input" and select your input type from the dropdown. Just like with Input Groups, the Name and Key needs to be inserted and given a proper name.

Notice the tag below the name, that's generated when you give your input a Key. Putting your cursor in the center panel and clicking the tag in the right panel will automatically insert the tag with correctly formatted syntax in the center panel for you.

Validate Inputs

Validating inputs and give warnings is an essential part of handing over your template to others users. By using validation rules you can add clarity to what the intended use for an input should be. All Input types have a dropdown option in the Template Editor where multiple validation rules can be added and they all come with an option to make a Custom Error Message per validation rule, for each input field.

In the image we see two Validations types, Required Field and Maximum Length set to 25 characters, has been added to a Text String

If an input is not validated in the Email Editor, the user will be informed of the error, taken to where the error is, have the error highlighted and prevented from saving the email before adhering to the specific input requirement.

Here we see a validation rule trigger, showcasing the error message, highlighting and prevention of saving

Validation types	Description	Applicable in Input type
Required field	This field must be blank	​Text String Textarea ​Select ​Boolean ​Image ​Color picker ​Code
Must Not Be Default	This field must not be indentical to the default content	​Text String Textarea ​Select ​Boolean ​Image ​Color picker ​Code
Maximum Length	This field may contain X amount of characters	​Text String Textarea
Minimum Length	This field must be at least X amount of characters	​Text String Textarea
Regex	Define any form of regular expression you want. Be that URL, numbers, wordings ect.	​Text String Textarea

Show or hide

When building your Email Design system, over time it can become very crowded with fields and options for the users to fill in. However many times fields are dependent on each other, and is useless without the other - in these cases you want to hide those uncessary fields. That's where the if/unless field come in handy on Inputs. You'll be able to hide or show any input types by typing in a liquid condition in accompanying if/unless field. The liquid condition could be coming either internally from the Block or even from Cross reference inputs.

Notice the if statement on Button link in the right-hand side, is now dependent on the input called Button text is not empty.

The syntax is a bit deconstructed in so far as you're not suppose to write the entire liquid statement with the proper opening and closing tag, eg. {%if *YOUR STATEMENT*%}{%endif %} as the platform will be doing that for you. Simply type in the liquid condition however complex you may need. You're able to use if or unless as your initial condition.