In-String Placeholders and Text Validation

In the Overview of Creating Templates in Photoshop topic, we introduced markers which allow for defining how a specific layer can be edited in the designer. Supported Markers are text strings in a specific format added to layer names. Using the markers, you can restrict such actions as deleting and rotating objects, replacing a specific image, changing font settings and text, etc. All these restrictions help keep a design consistent after being personalized by end users. However, what if we want not only to restrict some actions but to format a user input as well? Here placeholders come into play. Image placeholders are discussed in the Image Placeholders topic. In this topic, we discuss in-string placeholders used to format a user input in text layers.

An in-string placeholder is a substring in a text layer formatted in a special way (not a part of layer names, like the markers). There are two use cases where placeholders are extremely helpful:

  1. You want to format text typed in by users in accordance with predefined rules (a phone number, an address, etc.).
  2. A product page (or pages) have multiple entries of the same text layer (e.g. a first/last name, a company name, etc.). If a user changes one of them, they may want to change the other ones automatically.

In-string Placeholders Overview

As it was said before, in-string placeholders are specially formatted strings in text layers. Using them you can control what portions of text are editable in layers, format user input to match a specific template, provide multi-value text elements, and populate multiple elements with the same text.

Customer's Canvas provides the following types of in-string placeholders:

  • The replaceable text is a simple text, that can be edited in an arbitrary way.
  • The masked text is a template that specifies the length of input text string, characters, and their positions.
  • The multi-value text allows for selecting a layer value from multiple predefined options.

A text layer can contain multiple types of in-string placeholders in any combination.

Now, when you have got an idea of in-string placeholders, let us learn how to use them.

Using In-string Placeholders

To demonstrate all ways of using in-string placeholders, let us create a business card template and then add different types of placeholders to it.

The Replaceable Text

The replaceable text is the simplest type of placeholders: you just enclose a part of the text with brackets, and a user can edit this text in an arbitrary way. The text in the brackets is a hint explaining what the text layer stands for, so it is better to make the text as much informative as possible.

Business cards usually contain an owner's name, a position, and an email. The owner's name could contain any characters, so let us make it fully editable. The hint for the name will be Your_Name. The Position element will contain fixed word Position and the editable part for the actual position name. And the email element will consist of the editable alias and two fixed parts, E: and @your_company_domain.com.

Now, let us start creating a template for such business card.

  1. In Photoshop, create a new file and add a background layer and three text layers to it. Put the [#Your_Name] text into the first layer, Position: [#Your_Position] into the second one, and E: [#Email_Alias]@your_company_domain.com into the third layer. Save the template. The result should be as follows:

    Template with replaceable text placeholders.

  2. Load the template into the web-to-print designer. You can see that the Object Inspector on the left contains three text fields corresponding to the three placeholders you created in the previous step:

    Replaceable text placeholders.

  3. Next, fill out the fields:

    Filled replaceable text placeholders.

Populate Several Elements With a Single Value

As mentioned above, Customer's Canvas allows populating several elements with the same value. To use this feature, put the same placeholder into multiple positions in a template. When the template is loaded, there will be only one field in the Object Inspector. Whatever the user types in the field, it is copied to the multiple locations in the template. To demonstrate this feature:

  1. Create another template with the same background as the previous one. This template will be the back side of the business card. Add two text layers to the new template. Put [#Your_Name] into the first text layer and [#Your_Position] into the second one. The placeholders should be exactly the same as we placed in the first template. Save the template.

    Second page template.

  2. Load both of the templates as a multipage product into the web-to-print designer. Now you can see that the Object Inspector displays the same three text fields as we had in the previous example. Fill out the fields:

    Filled second page with replaceable text placeholders.

  3. Switch to the back side of the business card. You can see that the name and position elements are already filled with the text you have entered on the previous step:

    Filled second page with replaceable text placeholders.

The Masked Text

Masked text placeholders have the following format: [#Mask_Name#Mask]. The Mask_Name part is a hint that is shown to a user, and the Mask part is a text template. The following symbols are treated as special ones and are replaced by user input in masks:

  • a is replaced with a character;
  • 9 is replaced with a number;
  • * is replaced either with a character or a number.

One of the most popular use cases for masks is phone numbers. So, let us add phone and fax numbers to the business card.

  1. In Photoshop, open the front side template. Add two additional text layers to the template. Put the T: [#Phone#999-999-9999] text into the first layer; it is a phone number. Put F: [#Fax#999-999-9999] into the second layer; it is a fax number. Save the template. The result should look as follows:

    Template with masked placeholders.

  2. Load the template into the web-to-print designer. You can see that the Object Inspector contains the phone and fax fields:

    Masked placeholders.

    Notice that when the template is loaded, all nines (9) are replaced with underscores because 9 is a placeholder symbol. And hyphens (-) remain unchanged because a hyphen is not a special symbol.

  3. Fill out the fields. Try to enter non-decimal symbols in the phone and fax fields - they will be ignored by the editor:

    Filled masked placeholders.

If you want to load a user info into masked in-string placeholders, a value in the userInfo dictionary should be formatted according to the mask, otherwise, the value is not applied to the placeholder. For example, for the [#Phone#999-999-9999] placeholder, the userInfo dictionary should look like this: {"Phone": "123-456-7890"}.

The Multi-value Text

One more type of placeholders supported by Customer's Canvas is a multi-value text placeholder. In the web-to-print designer, they are represented by drop-down lists. The format of multi-value text placeholders is [#Placeholder_Name|value1;value2;value3], where Placeholder_Name is a hint that is displayed in the Object Inspector, and value1, value2, and value3 are possible options. You can add any number of options to a multi-value text placeholder. All options should be separated by the semicolon (;).

Let us put the address element having two addresses to choose from into the business card.

  1. In Photoshop, open the front side template you created in the previous step. Add a new text layer to the template. Put the following text in the layer: [#Address|335 Cloverfield Blvd, Carlington NY 54321;336 Cloverfield Blvd,Carlington NY 54321]. Save the template. The result should be as follows:

    Template combobox placeholder.

  2. Load the template into the web-to-print designer. You can see that the Object Inspector contains the field where a user can select the address:

    Combobox placeholder.

  3. Select an address. Notice that the Address hint is replaced by the selected value:

    Chosen variant in the combobox placeholder.

If a multi-value text placeholder is automatically populated, then the value to populate the placeholder with should be one of the values listed in the template. Otherwise, the value from the userInfo dictionary is ignored. For example, for [#HonorificForm|Mr.;Mrs.] placeholder, the userInfo dictionary should be either {"HonorificForm": "Mr."} or {"HonorificForm": "Mrs."}.

In this topic, we have considered all types of in-string placeholders available in Customer's Canvas: replaceable text, masked text, and multi-value text. As for multi-value text placeholders, there is one more way to set them up which is described in the Setting up Fields with Predefined Values topic.

See Also

Manual