Show/Hide Layers
In this example you will set up a document to enable the shopper to select one of 3 layers by simply choosing an item in a drop-down list.
NOTE: Use actions if you want to make multiple layers available. To show/hide just a single layer, you can also use a Check box variable. See “Show/hide a layer (check box variable)”.
Summary
•Action type: On Change (In the Actions tab, edit On Change.)
•Variable type: List with 3 items
•Document with 3 layers
•Action code:
1 set layer My_Layer_1 visible = false 2 set layer My_Layer_2 visible = false 3 set layer My_Layer_3 visible = false 4 if variable Change image selectedItemName is string my_item_1 5 set layer My_Layer_1 visible = true 6 else if variable Change image selectedItemName is string my_item_2 7 set layer My_Layer_2 visible = true 8 else if variable Change image selectedItemName is string my_item_3 9 set layer My_Layer_3 visible = true 10 end if |
How it works
Your document has multiple layers. These layers are created in the original InDesign document or in the Online Editor, and can contain visual elements such as images, transparencies, background fills, etc., that can be switched to obtain differentiating effects as chosen by the shopper.
In this example, we have 3 layers, to create 3 variations of the same business card. Each layer applies a different color design without affecting the other design elements. The layers have the following names:
•My_Layer_1
•My_Layer_2
•My_Layer_3
The shopper can select one of these 3 layers by choosing an item from a drop-down list. The drop-down list and its items are created in the Online Editor as a list type variable. In this example, the list type variable is called Change image and the 3 list items have the following names:
•Change image:
•my_item_1
•my_item_2
•my_item_3
Each list item has an On Change action which sets the visibility of a specified layer:
•my_item_1 displays My_Layer_1
•my_item_2 displays My_Layer_2
•my_item_3 displays My_Layer_3
In the Action editor, you create lines of code by selecting statements and parameters from drop-down lists. You first use the set statement visible = false so all the layers are hidden when the shopper opens the document to start editing (lines 1 to 3). An if/else conditional statement is then used to show the respective layers when a list item is selected. Each statement is on its own code line, and all of these lines are referred to here as the action code.
 |
On Change Action to show/hide layers
This example is for a document with 3 layers, and uses the naming convention explained above.
1 Edit a customizable product in the Online Editor.
Before creating the variable, check in the Objects tab > Layers List that your document has layers. For this example, we have 3 layers called:
•My_Layer_1
•My_Layer_2
•My_Layer_3
If you have the 3 layers, you will now create a List type variable with 3 list items to control which layer is visible.
2 In the Forms tab, click the Add button and then the pencil icon to open the New Variable dialog.
3 In the General tab of the New Variable dialog, complete as follows:
•Name: Change image
•Display Name: Change image
•Type: Choose List from the drop-down.
4 In the Type Specific tab, click the Add button and create 3 list items:
•my_item_1
•my_item_2
•my_item_3
 |
TIP: It is recommended to close the variable settings dialog and save your document before you start creating the action.
5 Click the Actions tab and then the On Change Edit button to start the Action editor.
 |
The Action editor is opened without any code lines if this is a new variable. If you are editing an existing variable with actions, you will see the code lines for the variable.
 |
6 In the Code tab, click the Add button to add your first line of code.
 |
The first line is displayed with a drop-down list. This drop-down list is the first step in the code wizard.
7 Click the first drop-down list, and select set to write the first set statement.
 |
A second drop-down list is displayed where you can select the object to be set.
 |
8 In the second drop-down list, select layer.
TIP: You can select an item in the lists by typing the first letter once, or multiple times if multiple items start with the same letter.
A third drop-down list is displayed where you can select one of the 3 layers available in your document.
 |
9 In the third drop-down list, select My_Layer_1.
NOTE: These are the names that you have given to the layers in your document.
10 Continue the wizard until you have the following statement on line 1:
1 set layer My_Layer_1 visible = false
 |
11 Click the Add button to add the second line of code and write the second line of code using the drop-down lists:
2 set layer My_Layer_2 visible = false
12 Continue the wizard, and add 1 more line so you have the first 3 lines of your code.
 |
These are the set statements that initially hide the layers.
TIP: You can use the Delete, Move Up, Move Down, Copy buttons to work faster when creating your code lines.
13 Now continue with the if/else statements. Click the Add button to add line 4 of your code:
4 if variable Change image SelectedItemName is string my_item_1
14 Complete the action with lines 5 to 10 until you have all code lines as follows:
1 set layer My_Layer_1 visible = false 2 set layer My_Layer_2 visible = false 3 set layer My_Layer_3 visible = false 4 if variable Change image selectedItemName is string my_item_1 5 set layer My_Layer_1 visible = true 6 else if variable Change image selectedItemName is string my_item_2 7 set layer My_Layer_2 visible = true 8 else if variable Change image selectedItemName is string my_item_3 9 set layer My_Layer_3 visible = true 10 end if |
NOTE: The string value for the list item names (my_item_1, etc.) has to be typed in the field; they do not appear in a drop-down list. Make sure you enter the correct value, otherwise your variable will not work properly.
15 When you have created all the lines of code, click Apply to save your changes.
16 Click Close to finish your variable settings and save the document.
17 In the Step 3: Initialize Form Variables panel, you can check that your variable is working as expected and emulate the shopper experience.
The Change Image variable has three items in the drop-down list. The shopper can select a different layer for the document by choosing one of the items in the list.
 |
 |
 |
18 If the action works as expected, save your document. If the action does not work as expected, go back to the Step 1: Create Variables panel, and edit the actions in the variable. In the Action editor, check that you:
•selected the correct statement parameters in the various drop-down lists.
•entered the correct values for the list items: the string values must be identical to the list item names you created in the Type Specific tab.
19 Close the Online Editor and add your newly created, customizable product with On Change action to a store.
doc. version 6.0.4