Styles and Form Fields
Wherever one wants to control color, appearance or content via form fields or logic, Styles are a powerful option to use. Basically, every aspect of a Frame can be controlled with Styles. Since one Frame can use several Styles, you can solve pretty complex problems with them.
Another good use for Styles are documents where one would like to change the appearance of several Frames at once. Each Frame can have one or more Styles applied.
Please read more about the Styles Tab and how to create Styles here
A great source of wisdom are also our example documents which make use of Styles to showcase some cool functionality. You can also open them in the editor when creating a new document:
Childs Book - See Styles managing skin & hair color. Also explained below
Avatar - Use of Styles to recolor hair and skin tones in images
Business Card - Use of Styles to reposition elements . . .
Childs Book
Let’s have a look at a child book example, where all the complex personalization options for selectable hair and skin color are built with just a few simple Styles.
We have switched on Show Styles in the top menu bar Settings menu to present us with small colored badges that show us the various Style names. (See how to switch on style badges)
As one can see, eyebrows and hairdo have the Style ‘hair’ assigned and all skin elements have the Style ‘skin’. (See how Styles are assigned!)
Looking into the Styles tab, we can see that both styles set the fillColor and are connected to a form field.
But in this case it’s pretty easy the style simply sets the fillColor of all skin elements to the color selected in the form field. Let’s have a look at what the form field looks like:
The form field User Interface is set to Image-List, creating a selection of nice color patches from small images. The Value of the form field is simply a color value (could be also one of your pre-existing named color swatches).
So, whenever the Buyer selects one of the available skin colors the applied Style will make sure that everywhere where there are skin portions in the document the skin color changes.
This even works (as long as a Template Style is used) in Sub Documents. In this children’s book, everywhere where the hair is used a Sub Document containing the hair in different Styles is also used.
Lets have a look at this document. It’s a document containing separate pages for each hairstyle. For each page the spreadName has been set to the name of the hairstyle (hair short, hair very short, …).
This is how it looks in the code editor:
.hair {
fillColor: ${form.HairColor};
spreadName:${form.HairStyle};
}
Each hairstyle shape also has the Style ‘hair’ assigned, which in this case will set the fill color for the hair (fillColor: ${form.HairColor};).
The same Style is also assigned to all places where this ‘Hair’ Sub Document is used in the children’s book (have a look above). In this example, the Style Property spreadName (spreadName: ${form.HairColor};) comes additionally into effect by choosing the right page from the Sub Document to show the selected hairstyle.
In this case the form field to control the Styles spreadName property simply has the names of the pages in its values and looks like this:
Not only can properties like color be controlled via Styles but also content like a text or an image can be changed by a Style. Throughout this document the name of the child is also populated through a Style.
Because we use a Style to set the text for each Frame with the Style ‘name’ assigned, the input field for the text is also disabled and the name of the Style which controls it is displayed above.
Adding the ‘Pajama’ Style and form field, which pretty much works the same as the skin color, we get an easy to use user interface and a simple to maintain yet feature rich personalizable document.
Pin to Frame
A nice use of form fields in conjunction with styles are Pinned Form Fields. Let’s create an example where we control the colorization of an image frame by a form field which only appears once the buyer clicks on the image.
Start by creating an image frame with any image. use sepia (100) to colorize it monochromatic. Next create yourself a Document form field named ‘HueRotate’ and set it to a number value list. Make sure you create a Document type Form Field as Template Form Fields don’t have this option. Now enter the small value list and the corresponding labels by selecting the small + on top left of the table.
Now we will connect it to the Frame, by selecting the image frame and then selecting Pin to Frame in the Form Fields context menu:
A small pin will appear on top of the form field to indicate that it’s pinned to a frame.
If you like you can test drive that the form filed only appears when the image frame is selected by switching to the buyer side.
Next, we will connect the form field and the image frame by using a style. Open the styles tab and create yourself a simple document style as follows:
This will now change the color angle of the image based on the user’s selection in the drop down. Now go to the buyer side to proudly test your creation.
If more than just the Hue Rotate is necessary to reach the desired recoloring its also possible to control several image manipulation properties at once. There is even a convenient Create Style function integrated into the image parameter dialogue. This is especially useful if you’d like to create diffrent hair colors for avatars.
Once the image has the desired coloring use the Create Style Button and enter a style Name. In this case we have chosen ‘imageColor’. Then you can go on and create all your selectable color changes and for each create a equally named style.
After this one of the styles must get the default style and into all others a if condition needs to be added which reacts on the label or value of the form field like shown below.
Here is the code if you’d like to copy it to the code editor.
.imageColor {
if: ${label.HueRotate === "Green"};
brightness: -17;
contrast: 24;
saturate: 87;
sepia: 0;
hueRotate: 100;
}
.imageColor {
if: ${label.HueRotate === "Red"};
brightness: -17;
contrast: 24;
saturate: 87;
sepia: 0;
hueRotate: 315;
}
Conditional Styles
Conditional Styles are useful in cases where one would like to create Styles which only come into effect at the moment a condition is met.
A Conditional Style contains a condition which will activate the style.
A good example for conditional Styles is switching Frame positions and sizes based on document formats where a Flex Design is pushed to its limits, such as changing between landscape and portrait formats.
Let us have a look into the Calendar Grid Style Demo document. It has two different aspect ratios controlled by a DOCUMENT_SIZE form field. (Learn more about changing document size with form fields.)
Now we create Conditional Styles which control the position and size of the main image in the calendar. As one can see, we used only percentage values which will keep the document size flexible even as we change dimensions.
Here is the code if you’d like to copy it to the code editor.
.inside-image {
if: ${info.DOCUMENT_SIZE === "A4"};
left: 0%;
width: 100%;
top: 0%;
height:50%
}
.inside-image {
if: ${info.DOCUMENT_SIZE === "DESK"};
left: 0%;
width: 50%;
top: 0%;
height:100%
}
This is how the calendar looks if the DOCUMENT_SIZE form field is switched to A4:
And this is how it looks when switched to DESK:
Another use case of Conditional Styles is switching visibility of certain Frames in a document. In the Style example below, the ‘hide’ Style is assigned a Frame that will only be visible if the form field ‘hide’ is set to ‘Show’.
.hide {
visible: ${form.hide === "Show"};
}
With the same method one could control drop shadows, effects, and essentially every other aspect of a Frame. To discover more examples, we strongly recommend to use the Style Wizard which will create Frames, Styles, and their corresponding Form Fields. Our Style Wizard is a great way to have fun learning about the superpowers of styles.
(Start using the Style Wizard)
Additionally, we recommend exploring the available Style properties in the comprehensive Style Reference Manual. (Overview on all available Style properties)
Condition Editor
The condition editor is a great help to build conditional styles.
Please read about the condition editor in the styles chapter
The editor will automatically show the start editor icon: 
beside an if condition in a style.
Exchanging images with Styles
Quite often one needs to change images based on Form Field values. This can be achieved by using styles.
In this example we simply want to react on a simple select-list form field for image selection.
We can simply pair this with a conditional style which simply points to the right (previously uploaded) image based on the form field value.
.changingImage {
image:Printess.jpg;
}
.changingImage {
if:${form.selectImage === "Frog"}
image: frog.png;;
}
When this Style is applied to a frame containing an image feature it will change the image when the Form Field changes its value.
Pro Tip: You can also directly apply an image by using the image itself in an image-list form field and address it directly in the style. The Image then also automatically is used for the user interface to provide a visual selection.
This is the corresponding style. In this case no Conditional Style is required note that the image is directly addressed with image.selectImage.
.changingImage {
image:${image.selectImage}
}
The same can be achieved by adding the image name directly to the form field in our example add Printess.jpg and frog.png to the form field value column. The corresponding style should look like this:
.changingImage {
image:${form.selectImage}
Same counts for the info column where the style would look like this:
.changingImage {
image:${info.selectImage}
}