Introduction to Inputs

What is an input?

An Input is a globally accessible tag that gives authors the ability to populate an Outfit document with content. There are various types of inputs that a designer can utilise to help make documents as customisable, or as stringent as necessary.

inputs

How do inputs work?

Inputs are globally accessible, which means they can be accessed account-wide. So that means that an input used in multiple templates can have the same value throughout them all. This gives authors the ability to open a wide variety of documents, which have common inputs, and populate those common inputs in a more efficient manner, compared to opening every document one by one and repopulating the same input with the same data.

Inputs are defined in your template’s index.html.mst file with a set of opening and closing curly braces {{ input-goes-here }}. These curly braces are called mustache tags.


Basic Mustache Tags

We use a customised version of the Mustache template syntax (see here) to make Outfit templates dynamically editable documents. The most common Mustache tag use is for creating a text input. In HTML you would be used to writing a heading tag like the following:

<h1>My Headline</h1> 

Creating an input that can be editable by an author is as easy as replacing the hard coded content with a set of two opening and closing mustache tags, like this.

<h1>{{ headline }}</h1>

From there, if the tag is undefined in the account we can go and make that Mustache tag into a fully fledged Outfit input via our Inputs tab in the template’s repository.

All mustache tags included inside your template must be inside the index.html.mst file. Any mustache tags in other files will be ignored. If you need to add mustache tags to CSS or JS files for whatever reason, they must be in the index.html.mst file in a <script> or <style> tag. See the video below to learn more (or if you like to read, continue on).


Mustache Tag Types

There are two types of Mustache tags that will be used within a template. Both are important and need to be used in the correct context so content will display properly.

Standard Mustache tag (Double Braced)

{{ input }}

The Double Braced mustache tag is probably the most widely used tag type. A double braced tag type is necessary for instances when HTML characters are not to be escaped. This tag would be used for the following: numbers, choices, colours (almost everything) and simple text inputs.

EXAMPLE

As an example imagine we have an {{ input }} with a value that includes a special character (like an ampersand). See the GIF for an example of how the content would be printed.

inputs

Alternative Mustache tag (Triple Braced)

{{{ input }}}

Triple Braced tags are generally used for text inputs (where it’s necessary to keep special characters). If we were to take the example above and wrap the input with three curly braces the input value would show as expected (with a fully legible ampersand).

inputs

Are there more?!

There are a few more advanced Outfit mustache tags called collections, blocks and spreadsheets. These advanced tags handle more complicated processes like repeating types of content. (You can read more about them and how they work here).

Extending Mustache - Conditional Tags

Beyond the two tag types above, Mustache also gives us the ability to presence check those inputs and perform an action if there is no data for a certain input. These actions work by wrapping HTML markup with special presence checking mustache tags. Both actions have an opening and closing tag that need to be present. See the video below to learn more (or if you like to read, continue on!).

Remove data Condition (#)

The most common action of a mustache presence check is to remove content that is wrapped in special mustache tags.

{{#input}}
  {{ input }}
{{/input}}

EXAMPLE

As an example imagine we have the following titles. However I only want to show the subheading if there is content for the {{{ headline }}} tag. What I can do is wrap both the h1 and the h2 in the # presence checker and when there is no data for the {{{ headline }}} input it removes all the wrapped content from the DOM.

{{#headline}} 
<!-- check to see if there is content for the specified input -->
  
  <h1>{{{ headline }}}</h1>
  <h2>{{{ subheading }}}</h2>
{{/headline}}

Add Predefined Data Condition (^)

The second type of action is to add predefined content when there is no data related to an input. So instead of wrapping the the initial tag, we wrap the corresponding predefined data we want to appear in the input value’s place.

{{input}}

{{^input}}
  Default input data
{{/input}}

EXAMPLE

Say we have a choice input that changes the colour of a div. Using the caret character (^) as our wrapping syntax we can do the following to set a default colour if there is no defined colour from the Choice input.

<div style="background-color: {{color}} {{^color}}#000{{/color}}">
</div>

Converting a Mustache Tag into an Input


Once a tag is added in the `index.html.mst` and the file is saved designers are able to convert that tag into a fully fledged input by navigating to the template's Inputs tab.

If an input already exists it will get the same value as the existing version. However if the input is new to the account then the designer can create a new input from the tag. Within the New Input page, you have the ability to write a How To for the input (that will display within the sidebar, whilst editing) and the ability to create the following inputs:

  • Text
  • Number
  • Image
  • Choice
  • Colour

See a comprehensive list for best use-cases for those standard input types here.

Beyond the standard input types we also have some more advanced inputs for repeating sections of content. Read more on how to set these up here.

  • Spreadsheet
  • Collection
  • Block