elements. Spans are
elements. To learn how to change the attributes of elements, see "Attributes" on page 191. Business graphics Business graphics are a great way to visualize data in your documents.
Inserting a business graphic The Connect Designer has wizards for adding three kinds of graphics: Pie Charts, Bar Charts and Line Charts. These wizards insert the chart and its accompanying script, after you select the data that should be displayed, their colors and labels, and a few display options. To insert a business graphic in a template: 1. Place the cursor where the graphic should be added. Also make sure that you have loaded data (see "Loading data" on page 332). 2.
are block level elements - like a Div or a Table. If inserting content at the selected location would produce invalid HTML the final result may be different than expected. For example, when you insert a Div into a paragraph, the paragraph gets split in two. This means you end up with two paragraphs with the Div in between. 5. Click Next and specify the data for the graph. These settings can also be edited when you open the script, after you've inserted the chart.
Rasterizing a business graphic Business graphics are output as SVG images, but not all clients may support that format. Before generating output, you may want to 'rasterize' it. This converts the business graph into a JPG or PNG image. To rasterize a business graphic, right-click it and select Rasterize Options. For a JPG image you can set the quality of the resulting image in a percentage.
axis of the chart. Note Labels are used in the legend. They will be visible when the legend is enabled. 3. Select a color for each of the selected fields. Click on the color to open the Edit Color dialog (see "Color Picker" on page 464). Note Colors defined in the Chart Properties dialog override the colors set in the script. To open the Chart Properties dialog, right-click the chart after adding it, and select Chart.... See: "Enhancing a charts' design" below. 4.
Adding and editing properties manually The last tab menu in the Chart Properties dialog, the Source tab, reflects the choices made in the other tabs. More importantly, this tab gives you the possibility to add any amCharts configuration option that is unavailable via the other tab menus. On the Source tab, all settings are given in JSON.
The Source tab also lets you change properties that are available in either the Script Wizard or other tabs of the Chart Properties dialog. You could, for example, set the colors of the bars, lines or slices by adding an array of hexadecimal color values, like this: "colors": ["#FF6600", "#FCD202", "#B0DE09", "#0D8ECF"] Note that properties defined on the Source tab override those made in the Script Wizard or on other tabs of the Properties dialog.
2. The 'light' theme requires no other settings. For the other themes you will have to manually set the background color of the Div element that holds the chart: A. Switch to the Design mode. B. Right-click the chart area and select Box... from the contextual menu. C. On the Background tab, set the Color to: l #282828 for the 'dark' theme and the 'chalk' theme l #222222 for the 'black' theme 3. Finally, the 'chalk' theme requires adding a remote stylesheet with this URL: 'https://fonts.googleapis.
Changing the date Once inserted, a date can be modified directly in the template (if it does not update automatically) or through the date script (if it does update automatically). To modify the date in the script: 1. Double-click the date script in the Scripts pane. 2. Between the round brackets after Date, enter the desired date in the following order: year, month, day, and optionally hours, minutes, seconds, milliseconds (see https://www.w3schools.com/js/js_dates.asp and https://developer.mozilla.
Note Hyperlinks - both external and internal - are not preserved when printing multiple pages on the same sheet (see "Imposition options" on page 752). HTML element: a When you add elements, such as text, images or a table, to the content of a template, you are actually constructing an HTML file. It is possible to edit the source of the HTML file directly in the Designer; see "Editing HTML" on page 191. The HTML tag of a hyperlink or mailto-link is . This is sometimes called an anchor tag.
4. For a URL: l URL: o External hyperlink: Enter a valid, well-formed URL to link to. It must start with the protocol, such as http:// or https://. o Internal hyperlink: Enter an ID, preceded by a hash; for example: #myID. The link will point to an element with that ID. Note An internal hyperlink may point to an element in another section. Just make sure that there is only one element in the document with the specified ID. l Target: use the drop-down or type in the target for the link.
How to add or modify a hyperlink is described in a how-to; see How to dynamically insert a hyperlink. This implies writing a script. For information about scripts, see "Writing your own scripts" on page 381. Adding a personalized link Personalized URLs (pURLs) are links that are tailor-made for a specific purpose, generally for individual clients.
image can be resized (see "Resizing an image" on page 313) and alternate text can be linked to it (see "Setting an alternate text" on page 274). Tip Using images in an Email template? See "Using images in email campaigns: tips" on page 168. Dynamic images Images can be switched dynamically, so that a letteror email can include one image or another, depending on a value in the data set. Read "Dynamic images" on page 353 to find out how to add such switching images.
can be used as a 'whitespace element'; see "Whitespace elements: using optional space at the end of the last page" on page 147. HTML tag: img When you add elements, such as text, images or a table, to the content of a template, you are actually constructing an HTML file. It is possible to edit the source of the HTML file directly in the Designer; see "Editing HTML" on page 191. In the section's source file, images are ![]()
elements. The ![]()
tag has at least four attributes: src, alt, width and height.
Imported images are images that are saved within the template file. To import images into a template and add them to the content, you can use the drag-and-drop method or the Select Image dialog (both are explained below). External images are either located on a specific website (URL), or in a folder on a hard drive that is accessible from your computer.
l Click Resources, Disk or Url, depending on where the image is located. l l l Resources lists the images that are present in the Images folder on the Resources pane. Disk lists image files that reside in a folder on a hard drive that is accessible from your computer. Click the Browse button to select a folder (or an image in a folder). As an alternative it is possible to enter the path manually. You can give a local path (e.g. C:\Images\Test.jpg) or use the "file" protocol.
3. If the image is a PDF file that consists of more than one page, select the desired page. Note The number of pages in a PDF file cannot be determined via the HTTP and HTTPS protocols. If you wish to use a page other than page 1 in a remote PDF, check the option Save with template; then click OK and reopen the dialog. Next, on the Resources tab, select the PDF, and select a page. 4. Click Finish. The image will be inserted at the position of the cursor.
how to wrap text around it, see "Wrapping text around an image" on page 313. How to make an image stay at a certain position (like any image added to a Master Page) is explained here: "Pulling an image out of the text flow" on page 314. When an image has an 'absolute position' it can be moved around freely: hover over the border of the image to get a move pointer, click that pointer and drag and drop the image somewhere else.
Using a CSS gradient to create an image CSS gradients are a new type of image added in the CSS3 Image Module. CSS gradients let you display smooth transitions between two or more specified colors, while repeating gradients let you display patterns. This way, using image files for these effects can be avoided, thereby reducing download time and bandwidth usage. In addition, objects with gradients look better when zoomed in a browser, and you can adjust your layout with much more flexibility.
For information about HTML tables and a list of attributes, see https://www.w3schools.com/html/html_tables.asp. Inserting a Table 1. On the toolbar, click the Insert Table button, or on the menu select Insert > Table > Standard. 2. Enter the Table's desired attributes: l l ID: a unique identifier for the Table. IDs are used to access the Table from scripts and as CSS selectors for style rules. Class: A class identifier for the Table.
Note: HTML has some restrictions as to which types of elements are allowed as children of other elements. For example, a paragraph element is not allowed to have children that are block level elements - like a Div or a Table. If inserting content at the selected location would produce invalid HTML the final result may be different than expected. For example, when you insert a Div into a paragraph, the paragraph gets split in two. This means you end up with two paragraphs with the Div in between.
Rows and columns Adding a row or column To add a row or column to an existing Table, click in a cell. Then click the black triangle next to the Insert Row Above button on the toolbar, and click one of the Insert buttons, or select one of the options in the Insert > Table Elements menu. Alternatively, right-click the Table and on the shortcut menu, select Row > Insert Above or Insert Below, or select Column > Insert Before or Insert After.
Resizing and moving a Table Resizing a Table l l l Select the Table (see "Selecting an element" on page 194) and type the desired width and height under Geometry on the Attributes pane. Select the Table and select Format > Table, on the menu. On the Table tab, change the width and height of the Table. Click in the Table and drag the handles to resize it. Press the Shift key while dragging to scale the Table proportionally.
Hiding the border When using a Table to position other elements, you will want to hide the borders of the Table. To do this, set the width of the border to 0; see "Border" on page 316. Text and special characters The vast majority of templates for personalized customer communications contain, of course, text. While the most common text element is a
or paragraph, other elements such as Headings (
through ) are also considered text elements.
This how-to describes another way to maintain extra spaces in the text: Maintain extra spaces in text. Adding special characters To add special characters: 1. Position the cursor where the character should be inserted. 2. On the Insert menu, point to Special Characters click Symbols, Dashes and Spaces, Arrows, or Geometric Shapes, and click one of the available special characters. Adding page numbers Page numbers can only be used in the Print context. See "Page numbers " on page 148.
Translating text OL Connect templates can be multilingual. For information about multilingual templates and how to create them, see "Translating templates" on page 440. Snippets A snippet is a small, ready-to-use piece of content in a file. Snippets can be re-used within the same template, in all contexts and sections. They can contain any contents that a section can have, such as text, images, variable data, dynamic tables, etc. Normally, a snippet is an HTML file, but it can also be a JSON file.
Adding a snippet to the Resources Before adding a snippet: l l Import the resource files that are related to the snippet, such as image files and CSS files, into the template file. Drag and drop the files to the corresponding folders (Images and Stylesheets, respectively) on the Resources pane. If you want to use external images, see "Images" on page 268.
Adding a snippet to a section Drag-and-drop To add the snippet to the content of a section, drag the snippet from the Snippets folder on the Resources pane to the desired location in a section. Check the option Insert as shared content to insert a reference to the original snippet in the template, rather than a copy of the original snippet.
The option to modify shared content snippets from within a section can be turned off: l l In the menu, select View > Shared Content Editing to enable or disable editing of all shared content. To enable or disable editing on a case by case basis, you can also manually set the contenteditable attribute on the Article element of the shared content to true or false. This overrides the menu setting. Note Remote snippets inserted as shared content cannot be changed from within the Designer.
Styling and formatting In the Designer you have everything at hand to make your templates look good: colors, fonts and all the tools to position, align and embellish elements in your designs. This topic informs about the ways to style a template. Local formatting versus style sheets There are in general two ways to style elements: l l Using local formatting. Local formatting means styling an element directly, using a toolbar button or one of the formatting dialogs. Using Cascading Style Sheets (CSS).
Text and paragraphs have a number of formatting options that are not available for other elements: font styles and line height, for example. See "Styling text and paragraphs" on page 299. Boxes and a number of other elements can have a background color and/or background image; see "Background color and/or image" on page 315. Several elements, such as boxes, images, paragraphs, and tables, can have a border; see "Border" on page 316.
template itself, you can define a layout for all paragraphs, and for all output channels, in a CSS file. The benefit of this is that you can quickly and easily change the look and feel of all contexts in one template, without having to change the contents. In the event that your company chooses to use another font or to adjust its corporate colors, you only have to change the style sheets.
l l l One style sheet that applies to all document types: context_all_styles.css. One or more style sheets specific to the context (Print, Email). For example, when you create an action email using the Wizard, the files context_htmlemail_styles.ccs and basic_email_action.css are automatically added to the Stylesheets folder on the Resources pane. A style sheet that defines default styles for tables: default.css.
Tip l l To export a CSS file from your template, drag or copy/paste it out of the Stylesheets folder to a folder on the local hard drive. It is possible to open and edit any CSS file in the Designer: select File > Open, select All files (*.*) as the file type and then select a CSS file. Using a remote style sheet A remote style sheet is not located within your template but is located in a network folder or hosted on an external web server (generally called a CDN). To add a remote style sheet: 1.
the local copy with updated content. If you don't want a local copy to be overwritten you should rename it before downloading the remote resource again. There are a few advantages to resources hosted on a CDN: l l These resources are not served by your server, saving on space, bandwidth and processing. Using a popular CDN takes advantage of caching - a client having visited another website using that same CDN will have the file in cache and not re-download it making for faster load times for the client.
See "Email section properties" on page 513. Step 1: edit CSS Editing CSS using a property sheet 1. Select Edit > Stylesheets. 2. Click the downward pointing arrow next to Global and select the context that you want to edit styles for, or select the Global CSS file to edit CSS rules that apply to all contexts. 3. Click New, or click one of the selectors that are already listed and click Edit. 4. Type a CSS selector. This can be: l l A class: .class. Class rules apply to all HTML elements with that class.
l l l A combination of HTML elements, separated by a comma. The CSS rule will apply to all HTML elements that are listed in the selector. For instance, a CSS rule with the selector h1, p applies to first level headings as well as paragraphs. HTML elements inside other HTML elements. For instance, a rule for all paragraphs inside a div element has the selector: div p. Etcetera. See https://www.w3schools.com/cssref/css_selectors.asp for more CSS selectors and combinations of CSS selectors. 5.
Note Block comments (/* ... */) are allowed in CSS, but single-line comments (// ...) are not standard and might not work as expected in all browsers. In the Designer, syntax highlighting doesn't work on single-line comments in CSS files. Step 2: apply CSS to the content After editing the CSS file(s), make sure that the CSS rules actually apply to one or more elements in the template.
Note Note: Elements can have multiple classes. Separate the class names with a space (eg. “red small”). Alternatively, after selecting an element, you can click the Source tab at the bottom of the workspace. The selected element will be highlighted in the source. Add the class or classes and/or the ID to the opening tag of the HTML element, for example:
.
Note Style sheets are applied in the order in which they are included in a section. The styles in each following style sheet add up to the styles found in previously read style sheets. When style sheets have a conflicting rule for the same element, class or ID, the last style sheet ‘wins’ and overrides the rule found in the previous style sheet. Note Style sheets that are linked to (i.e. included in) a section show a chain icon in the Resources pane (see "Resources pane" on page 557).
Using a more specific CSS rule By default, many CSS properties of an HTML element also apply to the elements inside that element. For example, a CSS rule that specifies a certain font-type for a box also applies to paragraphs in that box. In this example the box is the 'parent' element and the paragraphs are the 'child' elements that inherit the font-type property of the box. Note Although the background color property seems to be inherited, it isn't.
l l l A rule for the text color of table cells with a certain class, for example .green { color: green; }. A rule for the text color of a table cell with a certain ID, for example: #greentext { color: green; }. An inline style rule (local formatting) added to the HTML tag of a particular table cell, for example:
... | . Each of these rules is more specific than the previous rules. All of these rules are more specific than the rule that applies to the table as a whole.
1. Open the Stylesheet folder on the Resources pane. 2. Right-click the .scss file and select Compile. The compiled style sheet will have the same name as the Sass file, but with the extension .css. Compiled CSS files can be recognized by their first line: /* Compiled by https://sasslang.com/libsass */. Compiler options can be set in the Preferences; see "Editing preferences" on page 364. Note l Re-compiling a .scss file overwrites any manual changes made to the .css file. l Partial .
Tip To quickly change a paragraph into a Heading, place the cursor inside of it, or select the paragraph (see: "Selecting an element" on page 194). Then select the appropriate element, either on the Format menu, or from the 'Element type' drop-down on the toolbar. More local formatting options are available in the Formatting dialogs; see below. Formatting text To open the Text Formatting dialog, select some text and then select Format > Text.
l The spacing between letters and words and the way the text is wrapped: l l l l Letter Spacing: The space between characters in a text in measure or percentage. This is equivalent to the letter-spacing property in CSS. Word Spacing: Set the space between each word in a text in measure or percentage. This is equivalent to the word-spacing property in CSS. Whitespace: Specify how the text wraps. See CSS White-Space for details. This is equivalent to the white-space property in CSS.
To open the Paragraph Formatting dialog, select a paragraph (see: "Selecting an element" on page 194) or place the cursor in a paragraph, and then select Format > Paragraph. For an explanation of all options in this dialog see: "Paragraph Formatting dialog" on page 493. Removing local formatting from text Layout buttons and options on the Format menu add inline style tags to the text. Style tags can look like this: ... or like this:
.
inside it, will then be scaled to fit the available space. This is how it's done: 1. Right-click the Box or Div element and click the respective element on the shortcut menu. Alternatively, select the element (see "Selecting an element" on page 194) and on the Format menu click the respective element. 2. Click the Content tab. 3. Check the Copy Fit option. 4. Enter the Min font size and/or Max font size using a valid font measurement unit (pt, px, in, cm or mm).
How it works When the Copy Fit feature is activated, the font size is calculated for the entire Box. Elements inside that Box get a font size relative to the Box. This means that their relative proportions are maintained. How to position elements To position elements in relation to each other in a template, you can wrap those elements in a Table or Box (see "Table" on page 275 and "Boxes" on page 253), and/or use the Spacing property of the elements.
Tip Use a negative left margin to create a hanging paragraph or image. Aligning objects In Print sections, objects with an 'absolute position', such as a Positioned Box, have a fixed position in relation to the page (see also: "Using the CSS position property" on the facing page). Objects with an absolute position can be aligned easily: 1. Press the Ctrl key and hold it down while clicking on the objects that you want to align.
Using the CSS position property An element can be positioned independently of the text flow by changing its position property to absolute or to relative (that is, relative to the 'parent', its container). When an element is placed inside another element, such as a Box, changing its position property to absolute positions the element absolutely inside its parent.
About the CSS display property The display property is one of the most important CSS properties for controlling layout. Yet it is unlikely that you will use it often to position elements in a template: in most cases, the initial value of the display property for an element will be the right one. It is more likely that you will use this property in style sheets and scripts to hide certain elements, by setting the value of this property to none(display: none;).
Note It is also possible to rotate elements by creating a style rule in a style sheet; see "Styling templates with CSS files" on page 287. Styling a table Just as other elements, tables can be styled in two ways: l l With local formatting. This means styling the table directly, using the Formatting dialog. Via Cascading Style Sheets (CSS). In a style sheet, style rules are declared for elements with different HTML tags, ID's and classes. These two methods are described below.
insert empty cells if needed -, and then style the cells as usual. Via the Formatting dialog The Formatting dialog allows you to change the font, font size and color (see "Fonts" on page 323), the borders (see "Border" on page 316), the margins or cell padding (the distance between the edge of the cell and its content, see "Spacing" on page 328), and the background color or image of the table and its cells ("Background color and/or image" on page 315).
When used as a CSS selector, the HTML tag for a table is table. For a row, it is tr and for a cell, td. A style rule that uses one of these, however, would apply to all tables, rows, or cells. For a rule to be more specific you need to add an ID (for a unique element) or a class (for a set of similar elements) to the table, row or cell, and use that as the style rule's selector.
Selecting a specific row, odd or even rows, or every nth row The pseudo-class :nth-child() lets you select a specific row, all odd or even rows, or every nth row. Between the round brackets in :nth-child() you can fill in a number, odd or even, or a formula: an+b. In the formula, a represents a cycle size (every...), n is a counter (for the child elements), and b is an offset value ('start at b'). The following examples will make this clear. :nth-child(3) matches just one element: the third child element.
Styling an image Just like many other elements, images can be given borders and rounded corners, and they can be rotated. How to do this isn't any different from the way it is done with other elements, so it isn't described in this topic, but in general formatting topics; see "Styling and formatting" on page 286. This topic discusses specific image formatting issues. Note that image characteristics like brightness and contrast can not be changed within the Designer. Local formatting vs.
Resizing an image There are several ways to resize an image after inserting it in the content of a template. l l l l Click the image and drag the handles to resize it. Press the Shift key while dragging, to scale the image proportionally. Select the image (see "Selecting an element" on page 194) and type the desired width and height in the respective fields on the Attributes pane. Select the image and select Format > Image, on the menu. On the Image tab, change the width and height of the image.
To position an image using the menu, select the image and then select one of the options in Format > Float. Alternatively, open the Formatting dialog (see "Applying local formatting to an image" on page 312): select the image; on the menu, select Format > Image and on the Image tab, under Text Wrap, set the Float property. The float property could also be changed via a style sheet.
Div element, but generally elements should not be positioned absolutely. Designs for the Web should be flexible so that they display nicely on a variety of devices and screen sizes. Background color and/or image In any type of template, boxes, tables and table cells can have a background color and/or a background image. To select a background image or color: 1. Right-click the box and click Box on the shortcut menu. 2.
l l Disk lists image files that reside in a folder on a hard drive that is accessible from your computer. Click the Browse button to select a folder (or an image in a folder). As an alternative it is possible to enter the path manually. The complete syntax is: file:///. Note: if the host is "localhost", it can be omitted, resulting in file:///, for example: file:///c:/resources/images/image.jpg. Url lists image files from a specific web address.
Elements have a rectangular shape, so their border has four sides. Each side of the border can have a different layout. Adding a border 1. Right-click the element and click the respective element on the shortcut menu. Alternatively, select the element (see "Selecting an element" on page 194) and on the Format menu click the respective element. 2. Click the Border tab. 3. Uncheck the option Same for all sides to be able to style each side of the border separately. 4. Specify the width of the border (side).
1. Select a Box, Image or Table element (see "Selecting an element" on page 194) and on the Format menu click the respective element. Alternatively, right-click the element and click the respective element on the shortcut menu. 2. On the first tab in the Formatting dialog (the Box, Image or Table tab respectively) specify the corner radius in a measure (10mm, 5px, 0.5in) or percentage (0 - 90%). 3. For a Box or Image, click Apply to see the effect without closing the dialog or OK to close the dialog.
3. Under Property, type border-radius. 4. Under Value, type the value of the corner radius in a measure (10mm, 5px, 0.5in) or percentage (0 - 90%). 5. Click OK, and click OK again to close the Formatting dialog. Using a CSS file Of course you could also add this rule to a CSS file; see "Styling templates with CSS files" on page 287. The following rule sets the border-radius of the corners of all paragraphs to 5 pixels: p { border-radius: 5px; }.
l l Click the New button (the green plus). Select an existing color from the list and copy it using the Duplicate button . (The Filter drop-down limits the list to colors of a certain type.) Select the new color and click the Edit button . 3. In the Edit color dialog, type a name for the color (or let the Designer create a name based on the values that you select). The color’s name can be used in style sheets. It should not contain spaces or special characters.
l If applicable, check the Overprint option for this spot color. Overprinting refers to the process of printing one color on top of other colors. This is sometimes required, for example to deal with special print applications, such as applying UV ink or varnish to a certain area, or to avoid mis-registration when printing black on top of colored areas. Note Black overprint can be enabled for text smaller than a given size; see "Overprint and black overprint" on page 133.
time and again, when the company's layout preferences change. See "Styling templates with CSS files" on page 287. In style sheets, you can color every type of element that has a CSS color property, such as color, background-color or border-color.
1. Select an HTML element (see "Selecting an element" on page 194). 2. On the Format menu, click the element. For a div element, click Box. The Formatting dialog opens up. 3. Click the Border or Background tab. 4. Click the downward pointing arrow next to Color to select a color from the list of predefined colors (see "Defining colors, spot colors and tints" on page 319). Alternatively, click the small rectangle to the right of the color list to open the Color Picker dialog.
Note Hosting non-standard fonts on the operating system in a server environment (as opposed to importing them into the template) is not recommended. If output is produced on the server whilst running under a different account, that account might not have access to the font. If you do add a font to a server, select the option "Install for all users", and do not forget to restart the machine, as otherwise the font might not be available, due to the way certain Windows versions handle fonts.
Note Font software may have specific restrictions for copying and redistribution. Please consult the license agreement for each font vendor before using it in a template. It is your responsibility to comply with the requirements of third-party agreements. Note Vertically-oriented fonts (fonts whose typeface name begin with the at (@) character) are not supported in Connect.
slower) and results in bigger files. Finally, because of the plain machine transformation of the font, the result will probably not look as good as when using a carefully designed, properly styled, font. It is much better, if you have separate files for the bold, italic and any other versions of a font, to use those. Font types The Designer currently supports 5 font types: TTF, OTF, WOFF, EOT and SVG.
Note Support for remote fonts in email clients cannot be relied upon, and not all remote fonts are supported by all browsers. It is therefore recommended to add fallback fonts to the specific style rules whenever using remote fonts in a Web or Email section (see "Applying a font" on page 324). Locale The locale is a setting that can affect date, time and currency output, and other formatting that depends on location and language.
letter country code (de-DE, zh-CN, fr-CA, fr-FR, etc), as defined by the international standards ISO-639-1 and ISO 3166. l Select Data Field to use a data field from the record. The locale will be recordspecific in this case. Use the drop-down to select a field within the current Data Model that contains the locale. This field must be a string and contain the exact locale to be used, such as "en" or "fr-CA". It cannot be an alias such as "english" or "french".
2. Click the Spacing tab. Note All settings in the Formatting dialog are in fact CSS style rules. Click the Advanced button to manually add CSS properties (at the left) and values (at the right). For more information about CSS, see "Styling and formatting" on page 286. It is also possible to change an element's formatting via a style sheet; see "Styling templates with CSS files" on page 287. 3. Set the value for the padding in measure or percentage.
Variable data Variable data are data from a database or data file that are used to personalize documents. Data fields can be inserted in the text directly. For example, if a person's last name can be found in your data, the field that holds the last name can be used in the text of a letter, invoice or email. Scripts in PrintShop Mail Connect Designer are the basis of Variable Data Publishing and are used to personalize documents based on your data.
To swap a Print section's background dynamically, you can use the Dynamic Background Script Wizard; see "Dynamic Print section backgrounds" on page 355. Snippets Snippets are pieces of content that can be re-used within the same template, in all contexts and sections. Snippets can contain any contents that a section can have, such as text, images, variable data, dynamic tables, etc. They are often very useful to personalize content, especially in combination with variable data and scripts.
at a time), they may be used to create a Table Of Contents (TOC), as explained in the topic: "Creating a Table Of Contents" on page 435. See "Post Pagination Scripts" on page 433. Loading data Before you can add variable data fields to a template in the Designer, you need to have a Data Model and a sample of customer data.
l Tabular files: CSV files (.csv, .txt) and Excel files (.xls, .xlsx) Note Excel files saved in "Strict Open XML" format are not supported yet. l Microsoft Access Database (.mdb, .accddb) l XML files (.XML). l AFP files (optional). 2. Review the options presented, to ensure that the data will be interpreted correctly. The options available depend on the type of data file (see below).
l First row contains field names: Check this option to use the first line of the CSV as headers. This option automatically names all extracted fields. l Sort on: Select a field on which to sort the data, in ascending (A-Z) or descending (Z-A) order. Note that sorting is always textual. Even if the selected column has numbers, it will be sorted as a text. MDB file options l l l l File: Include the full path to the file.
l MySQL l Microsoft Access Database (.mdb, .accddb) l SQL Server l ODBC DataSource l JDBC l Oracle. 2. Review the options presented. The options available depend on the type of database data source; see below. MySQL 1. Enter the appropriate information to connect to the database: l l l l l Server: Enter the server address for the MySQL database. Port: Enter the port to communicate with the MySQL server. The default port is 3306.
Microsoft Access 1. Enter the appropriate information to connect to the database: l File name: Browse to your Microsoft Access database file (.mdb) l Password: Enter a password if one is required. 2. Click Next and enter the information for the source table. l l l Connection string: Displays the full path to the database. Table: Use the drop-down to select the appropriate table or stored query to retrieve the appropriate data set.
l Sort on: Select a field on which to sort the data, in ascending (A-Z) or descending (Z-A) order. Note that sorting is always textual. Even if the selected column has numbers, it will be sorted as a text. 3. Click Finish to open the database. ODBC DataSource 1. Select the ODBC system data source. Note: Only 32-bit data sources are currently shown in this dialog, even if your system is 64-bits. 2. Click Next and enter the information for the source table.
l l l Password: Enter the password that matches the username above. Advanced mode: check to enable the Connection String to manually enter the database connection string. Connection string: Type or copy in your connection string. 2. Click Next and enter the information for the source table. l l l Connection string: Displays the full path to the database. Table: Use the drop-down to select the appropriate table or stored query to retrieve the appropriate data set.
l Sort on: Select a field on which to sort the data, in ascending (A-Z) or descending (Z-A) order. Note that sorting is always textual. Even if the selected column has numbers, it will be sorted as a text. 3. Click Finish to open the database. After adding data from a database, the Data Model pane at the right hand bottom shows the data fields that occur in the data. The Value column displays data from the first record in the data file.
The Generate Counter Wizard creates a record set with a Counter field and in that field, the current counter value for each record. The Counter starts and stops at set values and is incremented by a set value as well. 1. To open the Generate Counter Wizard, select File > Add data > Generate counters. 2. Adjust the settings: l l l l l l l Starting value: The starting number for the counter. Defaults to 1. Increment value: The value by which to increment the counter for each record.
Variable Data Variable data are data from a database or data file that are used to personalize documents. Data fields can be inserted in the text directly. For example, if a person's last name can be found in your data, the field that holds the last name can be used in the text of a letter, invoice or email. Scripts in PrintShop Mail Connect Designer are the basis of Variable Data Publishing and are used to personalize documents based on your data.
The script replaces the placeholders in the content with the value of a data field in the current record. Switch to the Preview tab at the bottom of the workspace to see the script in operation. The value of the corresponding data field in the first record appears instead of the placeholder, everywhere where the placeholder is found in the text. This value will be refreshed when you browse through the records in the Data Model pane. When the output (the letter, email, etc.
Tip Drag the data field directly to the Scripts pane to create a script without adding a placeholder to the template. Note Connect versions older than 2020.2 used the placeholder text as the script's selector. Looking for text in a text is a less optimized operation and may impact output speeds in longer documents. For that reason placeholders are now by default wrapped in a Span and the class of that Span is used as the script's selector.
Note Scripts can only have the same name when they are not in the same folder. 3. The selector states the text to be found in the template. The results can be replaced by the script. Tip Hover over the name of a script in the Scripts pane to highlight parts of the template that are affected by the script. l Text, for example: @lastname@, or {sender}. The text doesn't have to have any special characters, but special characters do make it easier to recognize the text for yourself.
n An HTML element with a specific ID. In the Script Wizard, click Selector and type the ID, including the preceding #, for example: #intro. Note Each ID should be unique. An ID can be used once in each section. n l Etcetera. See https://www.w3schools.com/cssref/css_selectors.asp for more selectors and combinations of selectors. A selector and text. This is text inside an HTML element (or several HTML elements) with a specific HTML tag, class or ID.
l l As text. This inserts the results as-is, meaning HTML tags and elements are displayed as text in the output. In this scenario, "
" shows up in the text and does not insert a line break. As the value of an attribute of an HTML element. The selector of the script should be an HTML element. Which attributes are available depends on the selected HTML element. If the script's selector is an image (![]()
element) for example, and the attribute is src , the script will modify the image's source.
Tip l l An example of how to create an address block using the Text Script Wizard is described in a how-to; see How to create an Address Block. To use only part of a data field, or to split the data, you will have to write a script. For an example, see this How-to: How to split a string into elements.
1. Open the Text Script Wizard: double-click to open an existing script in the Scripts pane or create a new Text Script using the Text Script Wizard; see "Using the Text Script Wizard" on page 343. 2. Click a data field that contains text, or add such a data field to the script with the Add field button on the right. 3. Under Format choose the correct setting: l Uppercase transforms all characters to uppercase. l Lowercase displays transforms all characters to lowercase.
page 327. l Currency no symbol does the same as Currency, but omits the currency symbol. 4. Close the Script Wizard. For a new script, don’t forget to add the selector to the template. Showing content conditionally One way to personalize content is to show or hide one or more elements depending on a field’s value. For example, a paragraph written for Canadian customers could be hidden when the recipient of the letter is not living in Canada, if that can be derived from the data.
that is generated automatically. If you'd want to change the selector later, you can do that after reopening the script (double-click the name of the script in the Scripts pane). 4. Set the Action: use the drop-down to select whether to Show or Hide the element when the condition below is true. 5. Check the Toggle Visibility option, if you want the opposite action to be performed if the condition evaluates to false. By default, this option is checked. 6.
using the Conditional Content Script wizard" on the previous page, a CSS class will be applied automatically. If you have created the script yourself, or if you want a script to apply to more elements later on, you have to do this manually. 1. Double-click the conditional script in the Scripts pane to reopen it. 2. Make sure that the selector is a CSS class (for example, .male) or an HTML element with a certain CSS class (for example, p.male).
Including or excluding Print sections using the Conditional Print Section Script wizard 1. Right-click the section and click Make Conditional. Alternatively click the black triangle on the New button on the Scripts pane at the bottom left of the window, and click Conditional Print Section Script. Double-click the new script to open the Conditional Print Section Script wizard. 2. Rename the script so that it reflects what the script does. 3. Select the section you want to put a condition on. 4.
that is affected by a Conditional Print Section script a small decorator appears if it is skipped with the current data record. Dynamic images Dynamic images are called dynamic because they are switched, depending on the value of a data field. This way, a template can be adjusted to different customers.
is "localhost", it can be omitted, resulting in file:///, for example: file:///c:/resources/images/. l Online requires you to give a specific web address (for example, http://www.mysite.com/images/). 4. The Dynamic Image Script Wizard composes the file names (including the path) based on the selected location, the prefix, the value of a data field, and the suffix. The variable part of the file names is the value of the data field(s) in the Field column.
Editing a Dynamic Image To edit dynamic images added to the template earlier, right-click the image, or the space reserved for the dynamic images. Then click Dynamic Image to open the Dynamic Image Script Wizard again. Alternatively you may double-click the respective script on the Scripts pane. Dynamic Print section backgrounds Print sections can have a PDF background image (see "Using a PDF file or other image as background" on page 140).
l On the Scripts pane, right-click Control and select New > Dynamic Background Script. 2. Select the desired section from the Section drop-down. You may also change the name of the script. 3. Select the location of the files: l l l Select Resources if the PDFs reside in the Images folder on the Resources pane. Folder on disk refers to a folder on a hard drive that is accessible from your computer. Click the Browse button to select a folder. As an alternative it is possible to enter the path manually.
background" on page 425). Preferences The Preferences dialog is used to modify the general software preferences. Changes made in this dialog affect the software globally, not individual templates and data mapping configurations. The Preferences dialog is separated into individual tabs, where each tab controls certain aspects of the software. To open the Preferences dialog, select Window > Preferences.
because the database would run out of space. The solution is to use the "Clean-up Service" to remove the temporary data and files once they are no longer needed. The more items that are present in the database, and the larger they are, the more time and processing power (CPU) that will be required for cleaning them up. Thus a regular Clean-up of the database (as often as possible) is recommended. This is especially the case if items are not going to be retrieved from the database at a later date. i.e.
Note If the Product managing the service is set to Designer, then the Designer must be running at the time that the cron job is scheduled, for the Clean-up to run. l l Product managing the service: Select which of the applications will run the service.For PrintShop Mail Connect the Designer is the only choice. Database Clean-up Service: l Allow database clean-up service: Select this checkbox to enable the database Clean-up settings, and enable the actual clean-up.
l Minimum time to retain Data Sets: The minimum time a Data Set (and all the records it contains) is retained within the database before being set for deletion. Tip In order to prevent attempts at deleting database objects which might still be in use, it is recommended that all Minimum time retention values should always be set to at least the length of your longest job. Preferably with some extra time added, for good measure.
l File Clean-up Service: l Allow file clean-up service: Check to automatically detect orphan files and set them for deletion. Orphan files could be resources and internal files used by Connect, but which are not needed by any running job. l Minimum time to retain orphaned files: The minimum time during which orphaned files are kept in the database before being set for deletion.
l Basic Connection Settings selections: l Database vendor: Select the database type from the drop down list. Note Moving from one vendor database to another will reset all screen selections to defaults, regardless of what may have been previously selected. l Database URL: This is a read-only summation of the current database connection settings.
swap is applied. The tables within that schema, though, will not be created until Connect is restarted. l Username: Enter the database login username. Tip It is considered best practice for this user to have root privileges. l l Password: Enter the password associated with selected username. Advanced Connection Settings selections: l Maximum concurrent threads: This option sets the maximum database threads.
l Property: These are free field text fields. Note These fields and their associated values get appended to the JDBC connection and therefore must follow all rules regarding acceptable URL addresses for such. l l l l Value: The value applied to the associated Property. l Add: Used to add extra Property values to the table. l Delete: Used to remove existing Property values from the table. Test Connection: Use to test if current connection settings will connect to the specified database.
l l Enable for Print Context: Check to enable
resizing in the Print contexts. l Enable for Email Context: Check to enable
resizing in the Email contexts. Detail tables preview limit l l Maximum number of records to show in preview: This setting limits the number of records to show in detail tables in the Designer (Preview tab). The lower this number, the shorter the time before the preview or the next record will appear. Dragging data fields to the editor.
l l l l l Compact: Each CSS rule takes up only one line, with every property defined on that line. Nested rules are placed next to each other with no new line, while separate groups of rules have new lines between them. Compressed: This output style minifies the output. It has no whitespace except that necessary to separate selectors and a new line at the end of the file. It also includes some other minor compressions, such as choosing the smallest representation for colors.
l Edges: The edges around elements in a section in the Workspace. Click the Show Edges icon l l l l l l l l Table: This color highlights tables, and the rows and columns in tables; see "Table" on page 275. Resizable Table: This color highlights tables for which the option Allow resizing has been checked when adding the table; see "Table" on page 275. Forms: This color highlights forms; see Forms.
l l Restore Defaults. This option restores the preferences to Defaults. This applies to the current Preferences page only, but not other Preferences. Apply: This option applies the settings made within the current Preferences page, but does not close the Preferences dialog. Email preferences Email (General) preferences l Default From Group: l l l Name: Enter the name that is set by default in the "From name" field in the Send Email and Send Test Email dialogs ("Send (Test) Email" on page 516).
Tip Gmail only allows Connect to be used as an SMTP client when "Access for less secure apps" is enabled in the Google account settings. l Port: The specified port number will be added to the host name, for example: smtp.mandrillapp.com:465. Note If the mail server supports it, the connection will be encrypted without the need to send the server a STARTTLS instruction when port 465 is used. l l l l l Use authentication: Check if a user name and password are needed to send emails through the host.
Emmet preferences Emmet is a framework that enables the lightning-fast creation of HTML code though the use of a simple and effective shortcut language resembling CSS Selectors (see Emmet Abbreviations: "Emmet" on page 167. The Emmet functionality is available in the HTML and CSS source editors of Connect Designer. Emmet transforms abbreviations for HTML elements and CSS properties to the respective source code. This is, for example, the abbreviation for a
element with the class row: div.
l New: Add a new abbreviation. l Name: The name of the abbreviation is also its trigger. l Context: The context in which the abbreviation is enabled (HTML, CSS, etc.). l Description: A short description of the abbreviation . l l Pattern: This defines what an abbreviation expands to. Since Emmet is mostly used for writing HTML/XML tags, abbreviation definition uses XML format to describe elements; see http://docs.emmet.io/abbreviations/types/.
l New: Click to create a new snippet. l Name: The name of the abbreviation is also its trigger. l Context: The context in which the snippet is enabled (HTML, CSS, etc.). l Description: A short description of the snippet. l Pattern: The pattern defines what a snippet expands to. l Automatically insert: This option doesn't affect how Emmet works in Connect Designer. l Edit: Modify the currently selected snippet. l Remove: Remove the currently selected snippet from the list.
The Emmet preferences also provides you with buttons to : l l l Reload Engine. This allows you to reload the Emmet engine based upon the current settings. Restore Defaults. This option restores the preferences to Defaults. This applies to the current Preferences page only, but not other Preferences. Apply: This option applies the settings made within the current Preferences page, but does not close the Preferences dialog. Engines preferences See Engines Preferences.
l l Edit: Edit that information relating to an existing hardware device. This launches the Edit PKCS#11 Module dialog. Delete: Remove an existing hardware device from the list. The Hardware for Digital Signing preferences also provides you with buttons to : l l Restore Defaults. This option restores the preferences to Defaults. This applies to the current Preferences page only, but not other Preferences.
Logging preferences PrintShop Mail Connect logs the activities it undertakes whilst running. New Connect logs are created daily and are held for a period before they are automatically deleted. The settings on this page determine the level of logging and how long the log files should be retained. These log files can be an essential resource when diagnosing issues with OL Support.
l l Size-based logs: Use this setting to restrict log file size, and to keep only a specified number of them. By combining the maximize individual log file size with the amount of log files to retain, this effectively allows a hard disk space usage limitation to be placed upon the logging process. l l l Number of days to retain logs: This value only impacts upon historic (closed) logs. Chose between 1 and 99,999 days.
Advanced settings The Advanced settings over-ride the Overall logging settings, and provide a greater level of logging granularity. Warning Higher logging settings will have an impact upon Connect production speeds, as well as leading to substantially larger log files. The Advanced Log Settings should only be set in conjunction with advice from OL support, to ensure that only the most relevant settings are set to the higher logging levels.
l l Selected Printers: Lists the available Printer Definition Files in the system. Note that these are not installed Windows printers or printer queues, but PrintShop Mail Connect Printer Definition Files. Printer checkbox: This checkbox selects/deselects all printers in the list. Click to check all, click again to uncheck all. General Print preferences In order to print, the Designer connects to a Connect Server.
Project Wizards preferences Project Wizard deployment settings l Workflow Configurations l Encoding: By default, Project Wizards set the encoding of the Workflow configuration that they create to the encoding of the system on which the Designer runs (system default). If Workflow runs on another machine, and that system has a different active code page, Workflow may be unable to correctly interpret all the characters that are used in the configuration file (in path or file names, for example).
l l l Enable: activate the Auto Backup function. Revisions to keep: Enter the maximum number of backup files. When the maximum is reached, Auto Backup will overwrite the oldest file. Destination: Select the directory in which the backups should be stored. l Original: the directory in which the original file is stored. l Other directory: use the Browse button to select another directory.
l Designer scripting profiling group: l Number of iterations: Enter the number of times to run scripts when running the Profile Scripts dialog. The default is 1000. Accepted values are 1 to 1000000000. Yes, that's 1 billion - which would take a long time to run! The Scripting preferences also provides you with buttons to : l l Restore Defaults. This option restores the preferences to Defaults. This applies to the current Preferences page only, but not other Preferences.
Script types There are three types of scripts in the Designer: Control Scripts, Standard Scripts and Post Pagination Scripts. Control Scripts When output is generated from a template, Control Scripts run before all other scripts, when a record is merged with a context. They determine how different sections of the context are handled. They can, for example, make the page numbering continue over all Print sections, split Email attachments, or omit Print sections from the output.
Note In a Print context, the scripts in the Scripts pane run once for each section and then once for each Master Page (see "Master Pages" on page 153). Tip Content added by a script isn't visible in Design mode, but is visible and can be inspected in Preview mode. Post Pagination Scripts Post Pagination Scripts are run in a Print context after the content has been paginated.
"Setting the scope of a script" on page 387), so that the script can modify them. The selector can be: l l l Text, for example: @lastname@, or {sender}. The text doesn't have to have any special characters, but special characters do make it easier to recognize the text for yourself. In the Script Wizard, click Text and type the text to find. A selector (HTML/CSS): n HTML elements of a certain type, such as a paragraph:
.
3. Click the label to the left of the ID or Class input field (ID or Class) to make a new script with that ID or class as selector. Writing a script 1. Create a new script (see: "Creating a new Standard Script" on page 383, " Adding a Control Script" on page 418 or "Adding a Post Pagination Script" on page 434), or double-click an existing script in the Scripts pane on the bottom left. If the script was made with a Script Wizard, you have to click the Expand button before you can start writing code.
Two basic code examples Writing a script generally comes down to modifying the piece(s) of content collected from the template with the script's selector, using values, or depending on values of the record that is being merged to the template at the moment the script runs. Modifying the template To access and change the results of the query that is carried out with the selector (in other words: to modify the output), use the object results.
Tip For more examples of using conditions, see this how-to: Combining record-based conditions. If an expanded script contains errors or if there are warnings, icons appear in the overview ruler on the right hand side of the editing area. These icons are shown relative to their position in the script and do not move as you scroll down. You can click on an icon to quickly jump to the error or warning. Script errors are highlighted by a red icon, and warnings in yellow.
object (see "results" on page 929). The each() function could be used to iterate over elements in the results. l Each matched element: The script runs once for each element that matches the selector. The current element is accessible via the this object (see "this" on page 849). If the script targets (something in) a row that is bound to a detail table, the current detail record is accessible via this.record. Note The scope of Control Scripts can't be set, because they don't have a selector.
l l l Folders have an execution scope. You can specify for which contexts and sections the scripts in a folder have to run. Folders provide a better overview than a long unorganized list of scripts. Folders make it easier to change the order of execution for a bunch of scripts (see: "Changing the order of execution" on the previous page to learn why the order of execution is important). Dragging a folder up or down will cause all the scripts in that folder to be executed earlier or later, respectively.
To change the execution scope of a script: 1. Put the script in a folder; see "Script folders" on page 388. 2. Right-click the folder, and then click Properties. 3. Check the contexts and sections for which the scripts in this folder should run. Note Control scripts are always executed first, regardless of where they are in the Scripts pane. They can not be excluded from execution for a specific context or section, using the execution scope of a folder; see "Execution scope" on the previous page.
Import/export scripts The easiest way to import scripts into another template is to open the template and use the Import Resources dialog; see "Import Resources dialog" on page 475. Remember also to import or add any files that a script refers to. Alternatively, scripts can be exported or imported via the Scripts pane. To export a script: 1. On the Scripts pane, click on a script, and then click the Export button, or right-click a script and select Export. 2. Give the script a name and click OK.
Print section to which that Master Page is applied. Testing for errors Information in the Scripts pane One way to see whether a script is functional is to take a look at the Scripts pane. Tip Hover over the name of a script in the Scripts pane to highlight parts of the template that are affected by the script. Icons on the name of scripts in the Scripts pane can show that there is a warning, information or error. If one of these icons appears, you can hover over it to see more details.
or warning. Script errors are highlighted by a red icon, and warnings in yellow. The topmost icon will display red if any errors exist in the script at all. Tip To do a quick search for a certain script or piece of code, type a search text in the filter field located below the buttons in the Scripts pane. Doing a Preflight In addition to the icons and messages in the Scripts pane, a preflight can show if your scripts function as expected before generating output: 1.
Note An image with an unknown file extension is represented by a red cross in the output, but no error is logged unless the image refers to a local file that does not exist on disk. Image file extensions that the software recognizes are: AFP, BMP, EPS, GIF, JPG/JPEG, PCL, PDF, PNG, PS, SVG, and TIF/TIFF. Using the Script Debugger The Designer's Script Debugger allows you to set breakpoints in scripts and step through them.
After running the Script Profiler you can see in which sections the script has run: l Hover the mouse over a value in the column Count to see the number of times that the script has run, per section. You can also see the breakdown of the execution time across different execution stages: l l Hover the mouse over a value in the column Elapsed to see the time elapsed (in milliseconds) since the start of the session.
Script Profiler settings Number of runs By default, the Script Profiler runs on 1000 instances of all the scripts. To test on a higher or lower number of instances: 1. On the menu, select Window > Preferences. 2. Click Scripting. 3. Set a number of iterations (maximum one billion) and click OK. Sorting In the Scripts Profiler, the scripts are by default sorted based on the values in the Elapsed column, from high to low. Click any of the columns to sort the scripts according to the values in that column.
This topic presents a number of other ways to speed up script execution by optimizing the scripts. Use an ID or class as selector Scripts (except Control Scripts) start with a query. The selector in the second column in the Scripts pane is what a script looks for in the template. The selector can be a text, HTML/CSS tags, or a combination of text and HTML/CSS tags. Looking for text in a template is a less optimized operation and may impact output speeds in longer documents.
before() and after() are resource intensive. Try avoiding DOM modifications, especially within loops. Storing the content in a variable and appending the information after the loop is more efficient: this way, the template will be touched only once. Example The following example loads a snippet into a variable and uses the find() and text() commands of the Designer scripting API. var labelElm = loadhtml('snippets/label.html'); for(var i = 0; i < record.tables.products.length; i++) { var label = labelElm.
A QueryResult allows you to perform DOM manipulations like adding and removing elements, adding and removing CSS classes etc. When the required manipulations are limited to find/replace actions, you could change the QueryResult into a string. This allows you to replace text using the replace() method. For this, you could use toString(): var labelSnippet = loadhtml('snippets/label.html').toString(); Or you could copy the HTML of the QueryResults to a variable: var block = results.
In this example, @product@ is a pattern (to be used in a search) and g is a modifier (to find all matches rather than stopping after the first match). For more information about possible regular expressions, see https://www.w3schools.com/js/js_regexp.asp. The script in this how-to: Translate and replace script uses the replace() method with a regular expression.
block = block.replace('@customercode@', data.customercode); … results.html(block); The first line retrieves the HTML of the promo block and stores it in a variable called block. To make the code more readible, the fields from the record are stored in a variable named data. After replacing the placeholders by values, the script replaces the HTML of the promoblock with the personalized string. Other resources There are also many resources online to help learn about JavaScript performance and coding mistakes.
In a Print context, the Standard scripts in the Scripts pane run once for each section and then for each Master Page (see "Master Pages" on page 153). Next, each processed Master Page is put behind every page to which it should be applied. Scripts are NOT executed again for every page. Finally, Post Pagination Scripts run, in the order in which they appear in the Scripts pane (see "Post Pagination Scripts" on page 433). Post Pagination Scripts are run in a Print context after the content has been paginated.
l l An attribute of an HTML element. Type the attribute and, optionally, its value, between square brackets, e.g.: [target], to select HTML elements with a matching attribute. A pseudo-class. For example, tr:nth-child(even) selects all even table rows. These components can be combined in different ways. For example, p div selects all paragraphs inside
elements, while p, div selects all paragraphs and all
elements.
Note To make scripts run exclusively on certain sections, it is advised to put them in folders and set the execution scope of the scripts in a folder via the folder properties; see "Execution scope" on page 389. Example The following rule applies formatting to
elements in sections of which the name starts with ‘Letter’: [section^='Letter'] h1 { color: brown; } Note To target sections as well as Master Pages, use the body selector without the masterpage or section selector.
l l Selector: [masterpage] body Script: results.html('
Hello World
'); The following script adds the box only to the Master Page called "Master Page 1". l l Selector: [masterpage="Master page 1"] body Script: results.html('Hello World
'); Sheet position selectors In Print output, pages have a sheet position that depends on the options set in the "Sheet Configuration dialog" on page 519 (e.g.
[section='Section 1'] .frontside h1 { color: green; } The following rule hides
elements on the back of a sheet on which no content (from the main text) is allowed. .backside.nocontentpage .h1 { display: none; } Print section background selector When you inspect a Print section in a browser, you will see that it has a element as the first child of the element. Inside this
there are one or more MediaBoxes: elements with the class page_mediabox.
value larger than 0 (zero) and add !important to make this style rule override the inline style declaration that normally puts the section background behind the Master Page elements: .page_mediabox img.ol_pdf_datamapper_input { z-index: 10 !important; } Scaling the section background The rule below downscales the section background image and keeps it in the centre of the page: .page_mediabox img.ol_pdf_datamapper_input { transform: translate(-50%, -50%) scale(1.5, 1.
Adding a background pattern The Postcard template wizard (in the Basic Print templates group) uses the .DESIGN class to mark areas that are reserved for postal use and should not contain text or images. These areas were added to the Master Page as absolute positioned boxes that have been given the class clearzone. The following style rule assigns a background pattern to elements with that class in the Design view: .DESIGN .
To insert the snippet in the content at any position where the script's selector is encountered, write results.loadhtml('snippets/nameofthesnippet.html'). Make sure that the file name is exactly the same as the file in the Snippets folder. If the file name isn’t correct, the snippet will not appear in the template. To load a JSON snippet in script, use: loadjson(‘snippets/nameofthesnippet.json’). Tip To insert the code to load a snippet even quicker, you can: l l Drag a snippet into the script window.
Example The following script evaluates if the value of the LANGUAGE field in the record is ‘En’. If so, the snippet is added to the content. if (record.fields.LANGUAGE == ‘En’) { results.loadhtml(‘snippets/nameofthesnippet.html’); } Another example is given in a how-to; see Load a snippet based on a data field value.
Load a snippet and insert variable data into it The following script loads part of a snippet based on the value of a field, and then finds/replaces text by the value of a field before inserting the content into the document. var promoTxt = loadhtml('snippets/promo-en.html', '#' + record.fields['YOGA']); promoTxt.find('@first@').text(record.fields['FIRSTNAME']); results.
Step 2: Preparing the template The next step is to set up a template. If you've got the HTML to embed content in your template you can paste that HTML on the Source tab (and skip Step 3). Otherwise your template has to contain an element that can be replaced or followed by the remote content: an empty paragraph, for example, or a heading. If the element isn't unique in the template, give the element an ID.
Tip Install the Postman application to preview JSON returned by an endpoint. Tip To load a JavaScript file (.js) or a style sheet (.css) you can use loadtext(). See "loadtext()" on page 798. Inserting content in the template To insert the content after the selected element, use results.after(). To replace the element with the new content, use results.html() or results.replaceWith().
Tip More examples of how to use an API to load external content are given in these How-to's: l Using the Google Maps API l Using the OpenWeatherMap API Using scripts in Dynamic Tables In most cases you don't need a script to change the content or style of rows or cells in a Dynamic Table. However, if the contents or style of cells or rows in a Dynamic Table need to be personalized based on the value of a field, you will need a script.
The code of the script replaces the contents of the element with the current value of the data field: var field = this.record.fields['ID']; if (field) { this.text(formatter.upperCase(field)); } The scope of the script is set to Each matched element (see "Setting the scope of a script" on page 387). This means that in the code, this refers to the element that matches the selector, and this.record refers to the current (nested) detail record (see "this" on page 849).
The data-script attribute is used if you let the Designer create a script for you (see "Quick-start a script with the Create script button" on page 414). How the scope of a script can simplify code It is recommended to set the scope of a script that targets (an element in) dynamically added rows to Each matched element. The selector of a script that targets (something in) a row that is linked to a detail table will probably match multiple elements.
access the selected cell and this.record to access the current detail record, without performing any loops. Selector: table [data-script='Shipped']. Scope: Each matched element var field = this.record.fields['Shipped']; if (field) { this.text(formatter.upperCase(field)); if (field == 1) this.parent().css('color', 'green'); } The following script targets the table, and has its scope set to "Result set". This script loops over the detail table in the record, evaluating the field Shipped.
The basics of script-writing in the Designer are explained in the following topic: "Writing your own scripts" on page 381. What Control Scripts are Control Scripts are a special kind of Designer script. They can manipulate the way output is generated from a template. They allow you, for example, to change the page numbering in Print output, to split one generated Print document into multiple Email attachments, or to set a Print section's background dynamically.
4. Write the script; see the "Control Script API" on page 889. If you are not familiar with scripting, also see "Writing your own scripts" on page 381. Tip New Control Scripts added to the template contain code to continue the page numbering over all print sections, and two examples: one to select different sections of a Print context for email and print output, and one to select a Web section.
Task See topic Field/function of section object Use a Conditional Print Section script to in-/exclude a Print section based on a simple condition; see "section" on page 935 enabled attachments Include/exclude sections: l l l Conditionally omit Print or Email sections Output one section or another, based on the value of a data field In all other cases take a look at the examples in the following topic: "section" on page 935.
Task See topic Field/function of section object "section" on page 935, "media" on page 895 height, width Media, or Duplex printing for a Print section Dynamically change the page size of print sections and media Note: When a Control Script changes the size of a section, it should also change the size of the linked Media; this is not done automatically.
Page numbering starts with page 1 for each section. If for a section restartPageNumber is set to false, that section will start with the page number following the last page of the previous section. Note that even if a section is not enabled (so it will not be outputted), its restartPageNumber flag is still taken into account for composing the page number sequences. By default, each section has restartPageNumber = false when the first control script runs.
1. Section A page 1 2. Section B page 1 3. Section C page 2 4. Section D page 1 Disabled section When a section is disabled, it will not be outputted, but its restartPageNumber flag will still be taken into account for composing the page number sequences. So, if the restartPageNumber flags are set as follows: 1. Section A (1 page) restartPageNumber = true 2. Section B (2 pages) restartPageNumber = false 3. Section C (3 pages) restartPageNumber = true, enabled = false 4.
topic shows how to do that. For information about Control Scripts in general, see "Control Scripts" on page 417 and "Control Script API" on page 889. If you don't know how to write scripts, see "Writing your own scripts" on page 381. Defining parts Defining parts is done by setting the part field on a section, for example: merge.template.contexts.PRINT.sections['Section 2'].part = "PDF_Attachment2";. (Also see "section" on page 935 and "Control Script API" on page 889.
l l attachment 1: Section A, Section B attachment 2: "Part2", which is Section C. The file name of this attachment is the part name. Controlling multiple Email attachments The following script attaches the following sections to an email: l Print section 3 + 4 as attachment with continued page numbers l Print section 6 as separate attachment if (channel == Channel.EMAIL) { // only when generating Email output if (merge.context.type == ContextType.PRINT) { merge.context.sections['Section 1'].
Control Script that sets a Print section's background. Note that the settings made in a Control Script take precedence over the settings made in the Print Section Properties dialog. Note Encrypted PDF files are not supported in PDF pass-through mode. For information about Control Scripts in general, see "Control Scripts" on page 417 and "Control Script API" on page 889. If you don't know how to write scripts, see "Writing your own scripts" on page 381.
Positioning, scaling and rotating the background After a background has been selected, it can be positioned, scaled and rotated, using properties of the background object; see "background" on page 909. To position the background, for example, set the section's background.position: activeSection.background.position = MediaPosition.FIT_TO_MEDIA; For all possible positions, see "MediaPosition" on page 923.
var activeSection = merge.template.contexts.PRINT.sections['Section 1']; activeSection.background.source = BackgroundResource.RESOURCE_PDF; activeSection.background.url = "images/somepage.pdf"; activeSection.background.position = MediaPosition.ABSOLUTE; activeSection.background.left = "10mm"; activeSection.background.top = "10mm"; You could replace the last three lines of the previous script by the following line to scale the Print section background to Media size: activeSection.background.
Cloned sections have the same properties as normal sections (see "section" on page 935), but they cannot call the section functions clone(), addBefore() and addAfter(), which means you cannot clone a clone, or use a clone as a starting point to insert other clones into a template. Note that with multiple clones, the next clone is always added after the previous clone. With addBefore(), the code original.addBefore(clone1); original.addBefore(clone2); will result in "clone1, clone2, original".
Selector: [section="my_section_clone_0"] h1 Script: results.css('color','red'); Inside a Standard Script, cloned sections can be found using merge.section: if (merge.section == "my_section_clone_0") { results.html("Clone!"); } else { results.html("Original."); } Note that in a Control Script, merge.section is only defined when the output channel is WEB; see "merge" on page 945.
function addPolicy(policy){ var resourceUrl = 'images/policy-' + policy + '.pdf'; var clone = printSections["Policy"].clone(); clone.name = "policy_" + policy; clone.background.url = resourceUrl; clone.enabled = true; printSections["Policy"].addAfter(clone); } Control Script: Securing PDF attachments The Print context can be attached to an email in the form of a PDF file and secured with a password.
Password types PDF allows for two types of passwords to be set on a secured PDF file: a user password and owner password. The user password allows a limited access to the file (e.g. printing or copying text from the PDF is not allowed). The owner password allows normal access to the file. The Email PDF password script sets both the user and owner password to the same value, so that when the recipient provides the password, he can manipulate the file without limitations.
Post Pagination Scripts Post Pagination Scripts are run in a Print context after the content has been paginated. Because they can search through the output of all Print sections, and modify Print sections (one at a time), they may be used to create a Table Of Contents (TOC), as explained in the topic: "Creating a Table Of Contents" on page 435. This topic explains what a Post Pagination Script is and how to add it to a template.
reside on) and sections (for instance, whether they are enabled). With this information, a Post Pagination Script can do two things: l l Modify the output. The script may modify the output of a section. It could, for example, use information like page numbers to create a Table Of Contents (TOC), as explained in the topic: "Creating a Table Of Contents" on the next page. If needed, a Post Pagination Script can change the sheet configuration and re-paginate the section (see "paginate()" on page 944.
Print section to which that Master Page is applied. Creating a Table Of Contents This topic explains how to create a multi-page, cross-section Table Of Contents (TOC) using a Post Pagination Script. For information about Post Pagination Scripts in general, see "Post Pagination Scripts" on page 433. The basics of script-writing in the Designer are explained in the following topic: "Writing your own scripts" on page 381. Step 1: Opening a Print template Create or open a Print template.
var pageNo = this.info().pageNo; var text = this.text(); var level = this.tagName(); toc toc toc toc += += += += '
'; '' + text + ''; ''; '' + pageNo + '
'; }); results.html( toc ); // Repaginate the result merge.section.paginate(); // Update the page numbers var $numbers = query('.number'); merge.context.query("h1, h2").each(function( index ) { var pageNo = this.info().
Note that the info() function can also be used to get an element's sheet number, the section it is located in, and the total page count and sheet count of that section (see "PaginationInfo" on page 928 and "info()" on page 933). In this case only the page number is used. Then the callback function adds an entry to the variable that holds the table of contents, using the retrieved info.
merge.context.query("h1, h2"). The callback function in each() retrieves the heading's new page number. It then uses the index number of the heading in the result set to get the corresponding entry in the TOC: var entry = $numbers.get( index ); (see "get(index)" on page 831), and replaces it with the new page number. Excluding headings Often there are certain headings that you don't want to appear in the table of contents. The title of the table of contents itself, for example.
This code takes the element's ID. If an element doesn't have an ID, the script generates a new, unique ID for it. 3. Replace the line: toc += '' + text + ''; with this line: toc += '' + text + ''; The new line adds a hyperlink: with the element's ID to the table of contents.
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . "; } p.toc-entry .number { flex-shrink: 1; text-align: right; font-weight: bold; } These styles make use of the CSS Flexbox Layout Module. For more information about that, see W3schools: CSS Flexbox. Translating templates OL Connect has a built-in feature to automatically generate output and previews from one template in different languages, and to pluralize certain words in the output.
These file types are widely used in translation software, so you can team up with a professional translator or translation agency to translate your templates, or you can do it yourself using a free online tool, such as the Poedit software. Other ways to translate a template The built-in translation feature is easy to use for labels and short texts in for instance invoices, web forms, transaction email messages, and pack lists.
Translating content that is inserted by a script Personalization scripts may add content to the output. OL Connect will apply translations to that content at the moment it is added to the template, for example with the html() or replaceWith() function. Translations are applied if that content is marked for translation, and if there is a matching translation entry (see "Tagging text that is inserted by a script" on page 444).
Note Remember, only text in HTML elements that are tagged for translation get translated in the output. Note Changing the text in a tagged element will break the relationship with the translation entry. This means that the text will not be translated. Edit the entry in the Translations pane or use the Sync button on the "Translations pane" on page 568 to restore the connection.
Tagging text in snippets If the text that you want to tag for translation is located in a snippet, do not tag it in the section where the snippet is used. Instead, open the snippet (see "Snippets" on page 282) and tag the elements inside the snippet as described above. Tagging text that is inserted by a script OL Connect will also apply translations to content that is inserted by personalization scripts, but only if that content is marked for translation, and if there is a matching translation entry. 1.
HTML tags in translation entries A translation entry may contain HTML tags, for example when part of the text is styled or when there is a hyperlink in the text. HTML tags must not be translated or removed. Normally, translators will recognize a simple bold or italic tag (... or ... respectively), but more complex elements like hyperlinks could cause problems. The translator may accidentally modify the tag, and break the hyperlink for example.
Note that it isn't required to translate the template effectively. You may also create a translation file for the original language of a template and use it just for pluralization by entering plurals only. To enable pluralization on a translation entry: 1. Double-click the respective entry on the Translations pane. 2. Check the Pluralization option. 3. Select the data field that holds the number. Note Pluralization cannot be based on a data field in a detail table. 4.
This topic explains how to export the .pot file and how to import a .po file. Tip Translation tools are capable of combining .pot files. Combining .pot files may also result in .po files that contain translations for entries in multiple templates. This can be an interesting feature, especially when there are multiple templates in a project, as this eliminates the need to maintain individual .po files for each template. For information about the translation process, see "Translating templates" on page 440.
Editing an imported .po file When you double-click a .po file in the Translations folder it will be opened in the text editor of the Designer, where you can read and edit it. If you are working with a translator or translating agency, remember to send them a copy of the modified .po file to keep the .po files in sync. Updating an imported .po file OL Connect Designer monitors the .po file on disk (in the folder from which it was last imported) for changes. When a .
l "Menus" on page 541 l "Toolbars" on page 572 l "Resources pane" on page 557 l "Outline pane" on page 556 l "Attributes pane" on page 551 l "Styles pane" on page 567 l "Translations pane" on page 568 l Parameters pane (see Runtime parameters) l "Workspace" on page 569 (Source, Design and Preview tabs) l "Data Model pane" on page 553 l "Scripts pane" on page 564 l "Preflight Results and Messages" on page 554 Page 449
Dialogs Dialogs can allow you to perform a command or make settings. They can also ask you a question or provide you with information or progress feedback. Here is a list of all dialogs: Attachments dialog The Attachments dialog lets you add and remove static Email attachments. For more information about email attachments, see: "Email attachments" on page 185. l l l Add: Click this button to open the Select File dialog (see below). Delete: Deletes the file from the list of attachments.
Note Certain characters are invalid in a URL (for example, '$', '%', and '&') and must be percent-encoded. The same applies to a file path, since that actually is a URL that starts with the file protocol. Note that even a space character is invalid in a URL. Spaces in a URL are supported for backward compatibility, but it is recommended to percent-encode a space character as %20. The option Save with template is available when choosing an image from disk or by URL.
l General Group: l l l l Rotate: Check to rotate the chart 90 degrees so that the bars are horizontal starting from the left. (Equivalent to the rotate property; see: rotate.) Stack Series: Check to stack the values in one bar, instead of having one bar per value. (Equivalent to the stackType property of the ValueAxis ; see: stackType.) Text Group: Determines how text is displayed in labels and legends.
Value Axis tab Settings on the Value Axis tab are equivalent to properties of the ValueAxis class in the amCharts library; see: ValueAxis. l Title group: l l l l l Label: Enter a label for the value axis (the Y axis, or the X axis if the graph is rotated). (Equivalent to the title property; see: title.) Bold: Check this option if the title should be bold. (Equivalent to the titleBold property; see: titleBold.) Color: The default label color is black.
property; see: tickLength.) l Axis group: l l l l Color: Select a color for the value axis: click the colored square to open the Color Picker dialog ("Color Picker" on page 464), or enter a valid hexademical color (HTML Hex Color) or a predefined CSS color (CSS color names). (Equivalent to the axisColor property; see: axisColor.) Opacity: Enter the opacity in percentage for the axis. 100 is fully opaque, 0 is transparent. Set opacity to 0 to hide the axis.
l Title group: l l l l l Label: Enter a label for the category axis (the X axis, or the Y axis if the graph is rotated).(Equivalent to the title property; see: title.) Bold: Check if you want the title to be bold. (Equivalent to the titleBold property; see: titleBold.
Tip The position of the ticks (which is Middle by default) does not move with the grid. To change the tick position, add the following to the categoryAxis section on the Source tab: "tickPosition": "start" . l Tick Length: Length of the tick marks. (Equivalent to the tickLength property; see: tickLength.) Tip By default, one label per grid line will appear on the Category axis.
property; see: axisThickness.) l Auto Wrap: Specifies if axis labels (when horizontal) should be wrapped if they don't fit in the allocated space. (Equivalent to the autoWrap property; see: autoWrap.) Graphs tab Most settings on the Graphs tab correspond to properties of the AmGraph class in the amCharts library; see: AmGraph. l Labels: l l l l l l Text: Text of the data labels. You can use tags like [[value]], [[description]], [[percents]], or[[category]].
l l Width: Specify a bar width between 0 and 1. (This is a relative width, not pixel width). (Equivalent to the columnWidth property; see: columnWidth.) Spacing: The gap in pixels between two columns of the same category. (Equivalent to the columnSpacing property of the AmSerialChart class; see: columnSpacing.) Legend tab Settings on the Legend tab correspond to properties of the AmLegend class in the amCharts library; see: AmLegend. l Show Legend: Specifies if legend is enabled or not.
legend item. (Equivalent to the verticalGap property; see: verticalGap.) l l Labels Group: Defines if and how labels are shown in the Legend. l l Max Columns: Enter a numerical value to define the maximum number of columns in the legend. If the Legend's position is set to "right" or "left", this is automatically set to 1. (Equivalent to the maxColumns property; see: maxColumns.) Text: Enter the text used to display the labels; [[title]] is a variable that will be replaced with the title of the graph.
property; see: markerBorderColor.) l Border Opacity: Enter a numerical value between 0 and 100 to define the opacity (in percentage) of the border. (Equivalent to the markerBorderAlpha property; see: markerBorderAlpha. When specified on the Source tab, the value should be between 0 and 1, e.g. 0.8.
Box tab l General group: l l l l l l l Height: Set the height of the box in measure or percentage. When no unit is entered, the default unit will be added to the value (see "Print preferences" on page 377). Equivalent to the CSS height property. Angle: Set the rotation angle of the box in clockwise degrees. Equivalent to the CSS transform:rotate property. Corner radius: Set the radius of rounded border corners in measure or percentage. Equivalent to the CSS border-radius property.
l l l l l Y-offset (Print Context): Sets the vertical offset between this box and the current page's top. This only works for Positioned boxes. X-offset (Print Context): Sets the vertical offset between this box and the current page's left edge. This only works for Positioned boxes. Bottom: Set the vertical offset between this box and its parent's bottom position. Note that you can't set the Height and Top (or Y-offset) and Bottom of a Box. Remove the Height before setting the Bottom property.
Spacing tab For information about spacing see "Spacing" on page 328. l Padding group: Defines padding (spacing inside the element) in measure or percentage: l l l All sides: Check to set all padding to use the Top value. Equivalent to the CSS padding property. Top, Left, Bottom, Right: Set padding for each side. Equivalent to the CSS padding-left, padding-top, padding-right and padding-bottom properties.
Content tab l Copy Fit: Check this option to automatically scale text inside the Box to the available space; see "Copy Fit" on page 302 . l l l l Minimum font size: Specify the minimum font size using a valid font measurement unit (pt, px, in, cm or mm). Do not put a space between the number and the unit. The smallest possible size is 1pt. The default is 4pt. When left blank, the font size in Design view becomes the minimum font size. Text can only be made bigger than its initial size.
how they are printed or outputted; see "Colors" on page 319. l RGB group: Enter the Red, Green and Blue color values from 0 to 255. l HEX: Enter a valid HTML Hex Color. l The eye dropper lets you select a color from anywhere on your desktop. To open it, click the eye dropper button l next to the HEX color field. CMYK group (suitable for Print output only): Enter the Cyan, Magenta, Yellow and Black color values from 0 to 100 percent.
l l l l Name: Enter the name of the color. This name should not contain spaces or special characters. Create name based on values: Check so that the name is automatically based on the color slider values below. Type: Use the drop-down to specify which type of color this should be: either a Tint or a Color. Option group: contains the options for the chosen type. Options change depending on the selected type. l Color: l l l l l l Model: This can be either CMYK or RGB.
l Working Space Group: Defines the color profiles for the current template. l l l l CMYK: Use the drop-down to select a color profile for CMYK colors. The list displays ICC profiles located in "%USERPROFILE%\Connect\color-profiles\cmyk" Gray: Use the drop-down to select a color profile for Grayscale. The list displays ICC profiles located in "%USERPROFILE%\Connect\color-profiles\gray" Untagged Images Group: Defines color profiles for any image that does not specifically have color profiles or color se
PDF Attachments tab For an explanation of the options on the PDF Attachments tab, see "PDF Attachments dialog" on page 496. Print context properties For information about the Print context, see: "Print context" on page 130. Finishing tab For an explanation of the options on the Finishing tab and when they are applied, see: "Setting the binding style for the Print context" on page 132. Color Output tab For an explanation of the options on the Color Output tab see "Overprint and black overprint" on page 133.
l l Generate Thumbnails: The generated thumbnail images will be included in the PDF file. When exporting an XML report, the thumbnails will be saved in the same folder as the XML, in a subfolder named Thumbnails. l Sections (first page): Save the first page of each section as a thumbnail image. l Image resources: Save all image resources as thumbnail images.
Description tab l File (read-only): The name of the file. l Author: The name of the author. l Company: The company the author works for. l Description: Enter a description of the template. l Keywords: Enter one keyword or a list of keywords, separated by semicolons. l Created (read-only): The date on which the template was created. l Modified (read-only): The date on which the template was last modified.
l Find: The source string to find. l Replace with: The string to replace the source with. l Direction l l l l Forward: Look forward from the current position of the pointer in the template or source. Backward: Look backward from the current position of the pointer in the template or source. Scope l All: Searches in the complete text of the template or source. l Selected lines: Searches in the currently selected text or source.
l Replace: Click to replace the current instance with the replacement text. l Replace All: Click to replace all instances of the source string with the replacement text. l Close: Close the dialog. Font Manager The Fonts Manager contains the fonts that were added to the template manually. It essentially lists the fonts located in the Fonts folder of the Resources pane (see "Fonts" on page 323). Fonts with the same file name with a different extension are considered variations of the same font.
l None: Does not define the property. l Normal: Defines font-style as normal l Italic: Makes the font italic. l l Oblique: Makes the font oblique (this is generally the same as italic but does not require a special italic version of the font). Name: Check the fonts in the list to include them in the font definition. Image Formatting dialog The Image Formatting dialog is accessible by selecting an image in the template and then selecting Format > Image in the menu.
l l l l Source: Enter the web address or local file address of the image. Equivalent to the HTML src attribute. Alternate text: Enter an alternate text for the image. This is displayed in browsers and email clients when the image is loading or if the image cannot be displayed. It is also used for accessibility. Equivalent to the HTML alt attribute.
l l Top, Left, Bottom, Right: Set padding for each side. Equivalent to the CSS border-left, border-top, border-right and border-bottom properties. Margin group: Defines margins (spacing outside the element) in measure or percentage: l l All sides: Check to set all margins to use the Top value. Equivalent to the CSSmarginproperty. Top, Left, Bottom, Right: Set the margin for each side. Equivalent to the CSS margin-left, margin-top, margin-right and margin-bottom properties.
the folder using the arrow to the left. Note Resources may be interdependent. A Print section may need a certain Master Page or Media, for example; a Dynamic Image script relies on the presence of certain images; etcetera. This isn't visible in the Import Resources dialog. Make sure to select all necessary resources. 3. Choose what happens when a resource with the same name at the same hierarchy level already exists in your template.
Includes dialog The Includes dialog defines which style sheets and JavaScript files should be applied to a section when generating output (see: "Styling templates with CSS files" on page 287 and Using JavaScript). To open this dialog and make settings for one section, right-click the section on the Resources pane and select Includes. Email clients do not read CSS files and some even remove a
