Smart Inputs

Smart inputs allow Administrators and Designers to predefine information for teams in Outfit. This information can then be pre-populated within templates to remove the hassle of reentering rarely changing content. Things like contact details, addresses and primary brand assets are great elements to turn into Smart Inputs.

To add a Smart Input there are three steps that must happen:

  1. Defining the smart input
  2. Populating the smart input for the various teams
  3. Adding the smart input into a template

Defining a smart input

  1. From the menu navigate to the Templating screen.
  2. Once there, click on Smart Inputs () in the horizontal secondary navigation

smart inputs interface

  1. To add a new global Smart Input click on the + New Input button. This then opens a new editable row. Give the smart input a tag name. The tag name is one single string so use dashes and underscores instead of spaces (and preferably in lower case). For example if I wanted to add a phone number smart input I would call the tag phone-number. This tag will then be used within templates to define where content will be replaced with the actual smart inputs, but more on that later.
  2. We can also provide a placeholder value for that smart input. In the case of the phone-number example I want to show the correct way of formatting the phone number.

smart input adding

  1. Once the two fields have been filled out, we can hit Save to add the Smart Input.

Populating the smart input for the various teams

  1. From there, we can select between the teams using the dropdown in the top right of the screen and input the phone number information in each.

adding smart input information

Adding the smart input into a template

While this may seem daunting for someone with no coding experience, it really is just a matter of switching out a couple of characters. Before delving into it, just a quick templating lesson - In templates we use HTML & CSS, however to make the editable inputs we use a Javascript language called Mustache. It is a Mustache tag that we will mainly be dealing with in the templates. They are super easy to spot as well, they look like the following (a set of closing and opening curly brackets with a tag name inside).

{{ i-am-a-mustache-tag }}

For most of the Smart Inputs we are creating, they are already editable inputs themselves, so all we need to do is to prefix the tag name with team..

So taking the example of the phone-number Smart input, we would simply navigate to the index.html.mst of a template, find the corresponding input that handles the phone number and replace it with the following:

{{ team.phone-number }}

adding smart input tag

So when we Save this file and open up a document, residing in one of the Brisbane team’s projects we will find that the phone number now reflects the information that was populated in the Smart input. Easy peasy.

document with smart input