{{mustache}} logic

Todd Gordner

January 06, 2020 14:02

{{ mustache }} - Mustache is a simple web template system PrintNow uses for simple text formatting logic. It is named "Mustache" because of heavy use of curly braces ,{ }, that resemble a sideways moustache. Mustache is used mainly for mobile and web applications and a good choice for a “logic-less” system.

For more information about {{mustache}} go here: https://mustache.github.io/

To download the test files in this example go here: Simple Mode Demo.zip

Indesign Template

In the Adobe Indesign test template example below (IMAGE 1 & 2) we have 3 text blocks tagged (text-block-1, text-block-2, text-block-3) and one logo placeholder tagged (logo). Within the text blocks themselves later in the process we will be assigning {{mustache}} logic that will allow separate variable text items to flow together in the text blocks. The variables we will be working with are also added in the template show as: (first-name, last-name, title, business-name, street-address, town, state, zip, phone, fax, email, website) on the upper right. These variables will be removed from the template view after {{mustache}} logic is added and linked together. Each unique variable will be made available in PrintNow's simple mode as a form. Try to keep those variables on the available space on the template using a small font size.

IMAGE 1

IMAGE 2

Using {{ mustache }} to link form variables

Add mustache logic - The form variables will appear on the front-end when users interact with the online template (IMAGE 3). In each of our text blocks like the one tagged “text-block-1” add mustache logic by adding the double curly braces and referring to the tag name variables i.e. {{first-name}} {{last-name}} {{title}}. The actual tag variables are shown in the upper right and the tag names are as shown (IMAGE 4). If you have a single line item like “website” shown below you don’t need to add mustache code and can work with the tag variable directly. We suggest before you add mustache logic to a template you add guidelines in PrintNow around your text item so you can reposition your text placeholder box. You may have more logic text then what will become actual text entry so you may need to adjust outer positioning.
Link mustache logic - After your mustache logic is added you will need to link the form variables to the mustache logic. To do that select your block text as in “text-block-1” and go into the Admin item view for that layer. You can choose if your text will flow from the Top, Center, or Bottom. Now click “Use Template” and you will notice your tag variables that are contained in that block will be hidden from view. That is expected. If you need to undo your changes in the future click off “Use Template” for text to reappear.

Screen_Shot_2018-12-04_at_10.56.36_AM.png

IMAGE 3

Screen_Shot_2018-12-04_at_10.56.41_AM.png

IMAGE 4

Screen_Shot_2018-12-04_at_10.56.45_AM.png

IMAGE 5

Using {{ mustache }} for more advanced formatting

Formatting examples - The table below are a few examples of the {{mustache}} code combined with the text formatting. If Phone or Fax below in our example is empty the line gap will close. That’s because the Template logic shows {{/phone}} and {{/fax}} closing on the next line. You don’t need to do that with the last line as shown. The {{.}} is short for referring to the previous variable. So {{#phone}}{{.}}{{/phone}} for instance could be written as {{#phone}}{{phone}}{{/phone}} as well.

Template	Form Input	Output
{{first-name}} {{last-name}} {{title}}	First Name = John Last Name = Doe Title = Manager	John Doe Manager
{{#phone}}{{.}} {{/phone}}{{#fax}}{{.}} {{/fax}}{{#email}}{{.}}{{/email}}	Phone = 444-444-4444 Fax = 555-555-5555 Email = jdoe@company.com	444-444-4444 555-555-5555 jdoe@company.com
{{#phone}}P {{.}} {{/phone}}{{#fax}}F {{.}} {{/fax}}{{#email}}E {{.}}{{/email}}	Phone = 444-444-4444 Fax = 555-555-5555 Email = jdoe@company.com	P 444-444-4444 F 555-555-5555 E jdoe@company.com
{{#phone}}P {{#fp_dash}}{{.}}{{/fp_dash}} {{/phone}}{{#fax}}F {{#fp_dash}}{{.}}{{/fp_dash}} {{/fax}}{{#email}}E {{.}}@company.com{{/email}}	Phone = 4444444444 Fax = 5555555555 Email = jdoe	P 444-444-4444 F 555-555-5555 E jdoe@company.com
{{#phone}}P {{#fp_dot}}{{.}}{{/fp_dot}} {{/phone}}{{#fax}}F {{#fp_dot}}{{.}}{{/fp_dot}} {{/fax}}{{#email}}E {{.}}@company.com{{/email}}	Phone = 4444444444 Fax = 5555555555 Email = jdoe	P 444.444.4444 F 555.555.5555 E jdoe@company.com
{{#phone}}P {{#fp_pdash}}{{.}}{{/fp_pdash}} {{/phone}}{{#fax}}F {{#fp_pdash}}{{.}}{{/fp_pdash}} {{/fax}}{{#email}}E {{.}}@company.com{{/email}}	Phone = 4444444444 Fax = 5555555555 Email = jdoe	P (444)-444-4444 F 555-555-5555 E jdoe@company.com
Two text placeholders {{#phone}}P {{/phone}}{{#fax}}F {{/fax}}{{#email}}E{{/email}} {{#phone}}{{.}} {{/phone}}{{#fax}}{{.}} {{/fax}}{{#email}}{{.}}{{/email}}	Phone = 444-444-4444 Fax = 555-555-5555 Email = jdoe@company.com	P 444-444-4444 F 555-555-5555 E jdoe@company.com
Two text placeholders with choice of prefix {{#phone}} {{prefix-phone}} {{/phone}}{{#fax}} {{prefix-fax}} {{/fax}}{{#email}} {{prefix-email}}{{/email}} {{#phone}}{{.}} {{/phone}}{{#fax}}{{.}} {{/fax}}{{#email}}{{.}}{{/email}}	Phone Prefix = P Phone = 444-444-4444 Fax Prefix = F Fax = 555-555-5555 Email Prefix = E Email = jdoe@company.com	P 444-444-4444 F 555-555-5555 E jdoe@company.com

{{mustache}} logic

Indesign Template

Using {{ mustache }} to link form variables

Using {{ mustache }} for more advanced formatting

Related topics

Comments