Manualshelf

2022.1

Manuals Brands Objectif Lune Manuals Applications PRes Connect
1 2 3 4 5 6 7 8 9 10
Table Of Contents

Summary of content (1966 pages)

'; $('#cameras').

  • PAGE 659

    Note When user of the COTG app clicks or touches the Submit button in a Form, the name and value of form elements are submitted. Normally, the name and value of an unchecked Checkbox or Radio Button would not be submitted, but in Connect, they are. Connect uses the workaround described in the following topic: "Getting the status of unchecked checkboxes and radio buttons" on page 640.

  • PAGE 660

    The below procedure describes how to use Camera data as the source of an image inside a

    container. The benefit of this approach is that the image automatically scales to the size of the container. 1. Click the Insert Inline Box icon on the toolbar. The Insert Inline Box dialog appears. 2. Enter an ID for the box (anything will do, as long as it helps you identify the box) and click OK​. The box is added to the text flow and can be resized if needed. 3.

  • PAGE 661

    With OL Connect 2021.1 the COTG library has been updated to version 2.1.0 to support nested fields tables in COTG Fields Table elements. This also fixed an issue with the COTG Camera Widget that occurred when it was used in a COTG Fields Table. How to use the COTG plugin is explained in the following topic: "Using the COTG plugin" on page 647. To learn how to create widgets in code, see "Dynamically adding COTG widgets" on page 650 and "Saving and restoring custom data and widgets" on page 653.

  • PAGE 662

    Optional. An array containing the desired settings, e.g. {quality: 50, height: 1024, width: 1024}. For any unspecified options the default settings will be used. Initialize the new Camera element with any settings that you want to be different from the defaults. Example: $('#myCamera').cotgPhotoWidget({quality: 50, height: 1024}); How to change the default settings is explained in another topic: "Changing default settings for widgets" on page 648.

  • PAGE 663

    Option Description Type Default no loss from file compression. allowannotations Adds an Image & Annotation widget to edit the picture. Boolean false allowdeskew Allows the user to perform a perspective cropping after taking or selecting a picture. Boolean false addtimestamp Adds a time stamp Boolean false stampFormat The date format. For all possible formats see Cordova documentation. 'L' stands for localized date and time.

  • PAGE 664

    Event Description state.cotg restorestate.cotg Restores the state of the widget when the form is reopened in the COTG app, after the app has restored previously entered values of static input fields. The Camera broadcasts the following events. Event Description clear.cotg Fired after the user has clicked the Clear button. set.cotg Fired after the user has taken or selected a picture.

  • PAGE 665

    Event Description show-datepicker.cotg Opens the Date picker. Optionally, you can provide a date (as a Date object) for the Date picker to be opened with, for example: $('#date1').trigger("show-date-picker.cotg", new Date("2018-01-01")); Device Info cotgDeviceInfo() Initializing a Device Info element puts information about the device (phone or tablet) that displays the form, in the hidden input of the element. Example: $('#myDeviceInfo').

  • PAGE 666

    Events The Document ID element listens for the following event. Event Description clear.cotg Removes the Document ID. The Document ID element broadcasts the following event. Event Description set.cotg This event is fired during initialization of the element, after setting its value to the current Document ID. Fields Table The Fields Table element itself is just a table, so it doesn't have to be initialized.

  • PAGE 667

    Call cotgGeolocation([options]) on the new Geolocation element with any settings that you want to be different from the defaults. Example: $('#myGeolocation').cotgGeolocation({timeout: 6000}); How to change the default settings is explained in another topic: "Changing default settings for widgets" on page 648. Option Description Type Default enableHighAccuracy By default, the device attempts to retrieve a position using networkbased methods.

  • PAGE 668

    Event Description update.cotg Sets the element to the current geolocation. Image & Annotation cotgNoteOnImage() Initializing a new Image & Annotation element prepares it for user interaction. Example: $('#myNoteOnImage').cotgNoteOnImage(); Note To use this element with a Camera widget instead of a static image, you only have to initialize the Camera widget with the allowannotations option set to true. The Camera widget will automatically initialize the Image & Annotation widget.

  • PAGE 669

    Event Description set.cotg Fired after an annotation has been made. Locale cotgLocale() Initializing a new Locale element sets it to the device's locale. Example: $('#myLocale').cotgLocale(); Events The Locale element listens for the following event. Event Description clear.cotg Removes the Locale data. The Locale element broadcasts the following event. Event Description set.cotg This event is fired during initialization of the element, after setting its value to the current locale.

  • PAGE 670

    Event Description clear.cotg Removes the Repositiory ID data. The Repository ID element broadcasts the following event. Event Description set.cotg This event is fired during initialization of the element, after setting its value to the current Repository ID. Signature cotgSignature() Initializing a new Signature element prepares it for user interaction. Example: $('#mySignature').cotgSignature(); Events The Signature element listens for the following custom events. Field Description clear.

  • PAGE 671

    Field Description $(“#signature”).trigger(“set.cotg”, “…”); The Signature element broadcasts the following events. Field Description set.cotg This event is fired after a user has entered a signature and clicked the Done button of the Signature window on the device. clear.cotg Fired after a user has clicked the Done button of the Signature window without entering a signature. draw.cotg Fired each time the signature is drawn on the form (by the app, not by the user; e.g. after a set.

  • PAGE 672

    Event Description show-timepicker.cotg Opens the Time Picker. If no time is provided (specified in a Date object), the current time will be shown. User Account cotgUserAccount() Initializing a new User Account element puts the account of the current user in the hidden input of this element. Example: $('#myUser').cotgUserAccount(); Events The User Account element listens for the following custom event. Event Description clear.cotg Removes the User Account data.

  • PAGE 673

    "Selecting an element" on page 677, "Attributes" on page 675 and "Styling and formatting an element" on page 678. ID's and classes are particularly useful with regard to variable data (see "Personalizing content" on page 838) and styling (see "Styling templates with CSS files" on page 794). When you add elements, such as text, images or a table, to the content of a template, you are actually constructing an HTML file.

  • PAGE 674

    l l Article, Section, Header, Footer, Nav and Aside are HTML5 semantic elements; see https://www.w3schools.com/html/html5_semantic_elements.asp Other HTML elements: Heading (H1 - H6), Address and Pre To quickly change a paragraph into a Heading, place the cursor inside of it, or select the paragraph (see: "Selecting an element" on page 677). Then select the appropriate element, either on the Format menu, or from the 'Element type' drop-down on the toolbar.

  • PAGE 675

    Many video courses and hands-on courses about HTML (and CSS) are offered on the Internet as well, some for free. Go, for example, to www.codeschool.com or www.codeacademy.com and look for HTML (and CSS) courses. Attributes ID and class Every element in the content of a template can have an ID and a class. ID's and classes are particularly useful with regard to variable data (see "Personalizing content" on page 838) and styling (see "Styling templates with CSS files" on page 794).

  • PAGE 676

    Changing attributes via script Many attributes can be changed via the user interface. Another way to change attributes is by using a script. Any of the Script Wizards can produce a script that changes an attribute of an HTML element. Set the Options in the Script Wizard to Attribute, to output the script's results to the value of a specific attribute. See "Using the Text Script Wizard" on page 857.

  • PAGE 677

    l l After element inserts it after the element in which the cursor is currently located. For example if the cursor is within a paragraph, the insertion point will be after the end tag of the paragraph (

    ).* Replace inserts it in place of the currently selected element. (This option is not available when inserting content in a Master Page.) * If the current element is located inside another element, use the Elements drop-down to select which element is used for the insertion location.

  • PAGE 678

    Breadcrumbs show the HTML tag of the clicked element, as well as the HTML tags of 'parent elements': elements inside of which the clicked element is located. The clicked element is at the end of the line. Elements with classes or IDs show these details next to them, for instance div #contents > ol.salesitems > li ~contents. Click any of the elements in the Breadcrumbs to select that element. If an element is selected in the Breadcrumbs and the Backspace key is pressed, that element is deleted.

  • PAGE 679

    Format elements via Cascading Style Sheets (CSS) It is highly recommended to use style sheets in templates right from the start. Even more so if the communications are going to be output to different output channels, or if they consist of different sections (for example, a covering letter followed by a policy). Using CSS with templates allows a consistent look and feel to be applied.

  • PAGE 680

    4. Check the option Absolute to insert the barcode in an absolute-positioned box inside the of the HTML, but outside other elements. (This option is not available in Email sections.) Alternatively, use the Location drop-down to select where to insert the Barcode. l l l l l l At cursor position inserts it where the cursor is located in the template. Before element inserts it before the HTML element in which the cursor is currently located.

  • PAGE 681

    Note For barcodes that require a Checksum, the Designer can calculate a Checksum if that isn't provided by your data. In that case the field should contain the required value minus the Checksum. To include a calculated Checksum in the barcode value, edit the barcode properties after adding the barcode to the template; see below. 6. Click OK to close the dialog. In the template the barcode shows up as a gray box. The associated barcode script is added to the Scripts pane.

  • PAGE 682

    To change the barcode type or the barcode's properties such as the scale and color, open the Barcode properties dialog: right-click the barcode (on the Design tab in the Workspace) and select Barcode on the shortcut menu. The barcode properties set via the properties dialog are written to the data-params attribute on the barcode element in JSON format. (To see this, select the barcode and open the document in the Source view.) Click the barcode type below for information about its properties.

  • PAGE 683

    l "MSI" on page 716 l "PDF417" on page 718 l "POSTNET" on page 720 l "QR Code" on page 722 l "Royal Mail 2D Mailmark" on page 725 l "Royal Mail 4-State (CBC)" on page 726 l Royal Mail 4-State Mailmark C, Royal Mail 4-State Mailmark L, see "Royal Mail 4-State Mailmark C, Royal Mail 4-State Mailmark L" on page 729 l "Swiss QR Code" on page 731 l UPC-A, UPC-E, see "UPC-A, UPC-E, EAN-8, EAN-13" on page 733 l USPS IMb, see "Australia Post, Japan Post, KIX, USPS IMb" on page 735 l "USPS IMpb"

  • PAGE 684

    l Bar height: The height of the (shorter) bars. l Extended bar height: The total height of the extended bars. l Bar width: The width of the bars. l Spacing: The distance between the bars. Scale Defines if and how the rendered barcode is scaled in relation to the parent element: l l None: The barcode is rendered based on the module width. Proportional: The barcode is stretched up to where it fits either the width or height of the parent box, whichever requires the less stretching.

  • PAGE 685

    Initially the barcode will have the barcode type's default properties. To change those properties, such as the scale and color, open the Barcode properties dialog: right-click the barcode (on the Design tab in the Workspace) and select the Barcode... option in the context menu. Barcode properties This topic lists the properties of the Aztec Code barcode type. For the properties of other barcode types, see "Barcode type and properties" on page 681. Module size Enter the size of the square modules in pixels.

  • PAGE 686

    Scale Defines if and how the rendered barcode is scaled in relation to the parent element: l l None: The barcode is rendered based on the module width. Proportional: The barcode is stretched up to where it fits either the width or height of the parent box, whichever requires the less stretching. Tilde processing Check this option to process tilde (~) characters in the data as special characters. (See the Java4less Barcodes Guide to learn what the tilde character can be used for.

  • PAGE 687

    Initially the barcode will have the barcode type's default properties. To change those properties, such as the scale and color, open the Barcode properties dialog: right-click the barcode (on the Design tab in the Workspace) and select the Barcode... option in the context menu. Note that this type of barcode processes tilde characters (~) in the data as special characters. See the Java4less Barcodes Guide to learn what the tilde character can be used for.

  • PAGE 688

    Color The Color group allows you to choose a different Barcode color (instead of black) and Background color (instead of white), by typing a hexadecimal color value (see for example w3school's color picker). When black is a composite of CMYK or RGB values, it may incur a color click charge on some printers. Check the Output in Grayscale option to make sure that pure black is used. Output format Defines how the barcode is output on the page. There are two possible formats: l l SVG: Vector format.

  • PAGE 689

    l Interleaved 2 of 5 l Matrix 2 of 5 For the properties of other barcode types, see "Barcode type and properties" on page 681. Module width Specifies the width of the narrow bars in centimeters. Changing this value to a higher value will make the barcode bigger when Scale is set to None. Scale Defines if and how the rendered barcode is scaled in relation to the parent element: l None: The barcode is rendered based on the module width.

  • PAGE 690

    l l SVG: Vector format. This is usually of higher quality, but may take longer to generate and is not compatible with Email output. PNG: Binary rasterized format. This has a slightly lower quality than SVG but is usually generated faster and will display properly in Email output. Code 39 Code 39 is one of the barcode types that can be added to a template. The barcode can be added either using the Barcode toolbar button or through selecting Insert > Barcode on the menu; see "Adding a Barcode" on page 679.

  • PAGE 691

    Add Checksum When checked, PReS Connect will calculate a Checksum character and add that to the result of the Barcode script. If the value to be encoded is longer than 10 digits, a second check character will be calculated. Human Readable Message When this option is checked, PReS Connect shows a human readable text below or above the barcode, as defined using the Text Position, using the specified font and font size. The font size is given in points (pt).

  • PAGE 692

    Barcode properties This topic lists the properties of the Code 39 extended barcode type. For the properties of other barcode types, see "Barcode type and properties" on page 681. Module width Specifies the width of the narrow bars in centimeters. Changing this value to a higher value will make the barcode bigger when Scale is set to None. Inter Character Gap Two adjacent characters are separated by an inter-character gap.

  • PAGE 693

    character: ~dNNN . For example, ~d013 represents a carriage return. Note that with this option checked, any tilde that needs to be included in the output must be escaped by adding another tilde: ~~. Human Readable Message When this option is checked, PReS Connect shows a human readable text below or above the barcode, as defined using the Text Position, using the specified font and font size. The font size is given in points (pt).

  • PAGE 694

    Note that barcodes of these types process tilde characters (~) in the data as special characters. See the Java4less Barcodes Guide to learn what the tilde character can be used for. Barcode properties This topic lists the properties of the following barcode types : l Code 11 l Code 93 l Industrial 2 of 5 l Interleaved 2 of 5 l Matrix 2 of 5 For the properties of other barcode types, see "Barcode type and properties" on page 681. Module width Specifies the width of the narrow bars in centimeters.

  • PAGE 695

    Color The Color group allows you to choose a different Barcode color (instead of black) and Background color (instead of white), by typing a hexadecimal color value (see for example w3school's color picker). When black is a composite of CMYK or RGB values, it may incur a color click charge on some printers. Check the Output in Grayscale option to make sure that pure black is used. Output format Defines how the barcode is output on the page. There are two possible formats: l l SVG: Vector format.

  • PAGE 696

    l None: The barcode is rendered based on the module width. l Fit to box: The barcode is stretched to fit the parent box in both width and height. Add Checksum When checked, PReS Connect will calculate a Checksum character and add that to the result of the Barcode script. If the value to be encoded is longer than 10 digits, a second check character will be calculated. Tilde processing Check this option to process tilde (~) characters in the data as special characters.

  • PAGE 697

    l PNG: Binary rasterized format. This has a slightly lower quality than SVG but is usually generated faster and will display properly in Email output. Code 128 Code 128 is one of the types of barcodes that can be added to a template; see "Barcode" on page 679. The barcode can be added either using the Barcode toolbar button or through selecting Insert > Barcode on the menu; see "Adding a Barcode" on page 679. Initially the barcode will have the barcode type's default properties.

  • PAGE 698

    l ~d199 to switch to subset C l ~d200 to switch to subset B l ~d201 to switch to subset A For example, if a barcode in the format AA123456789 must start as subset B, and then switch to subset C after 1, set the barcode to be: AA1~d19923456789. Scale Defines if and how the rendered barcode is scaled in relation to the parent element: l None: The barcode is rendered based on the module width. l Fit to box: The barcode is stretched to fit the parent box in both width and height.

  • PAGE 699

    l l SVG: Vector format. This is usually of higher quality, but may take longer to generate and is not compatible with Email output. PNG: Binary rasterized format. This has a slightly lower quality than SVG but is usually generated faster and will display properly in Email output. Data Matrix Data Matrix is one of the types of barcodes that can be added to a template; see "Barcode" on page 679.

  • PAGE 700

    interpreted as hexadecimal input and decoded to ASCII before passing the string to the Barcode library. Dots Per Pixels Type the number of dots per pixel. To optimize barcode quality a Data Matrix symbol should not be printed with dots smaller than 4 pixels. Encoding The data represented in the symbol can be compressed using of the following algorithms.

  • PAGE 701

    Note that with this option checked, any tilde that needs to be included in the output must be escaped by adding another tilde: ~~. Color The Color group allows you to choose a different Barcode color (instead of black) and Background color (instead of white), by typing a hexadecimal color value (see for example w3school's color picker). When black is a composite of CMYK or RGB values, it may incur a color click charge on some printers.

  • PAGE 702

    Module width Specifies the width of the narrow bars in centimeters. Changing this value to a higher value will make the barcode bigger when Scale is set to None. Show guardbars Checking this option adds guardbars to the barcode. Guardbars are bars at the start, in the middle and at the end that help the barcode scanner to scan the barcode correctly. Scale Defines if and how the rendered barcode is scaled in relation to the parent element: l None: The barcode is rendered based on the module width.

  • PAGE 703

    Human Readable Message When this option is checked, PReS Connect shows a human readable text below or above the barcode, as defined using the Text Position, using the specified font and font size. The font size is given in points (pt). Color The Color group allows you to choose a different Barcode color (instead of black) and Background color (instead of white), by typing a hexadecimal color value (see for example w3school's color picker).

  • PAGE 704

    l l l The barcode data must start with a leading FNC1 character. Either ~1 or ~d232. The GS1 Application Identifiers (AI) must be used for all data. The function code ~1 must be used as field separator for variable length AI elements. Only ASCII characters should be used. Barcode properties This topic lists the properties of the barcode type GS1 DataMatrix. For the properties of other barcode types, see "Barcode type and properties" on page 681.

  • PAGE 705

    Note The following tilde codes are supported in GS1 DataMatrix barcodes: l ~1 = FNC1 character (for GS1 DataMatrix barcodes) l ~2 = Structure Append l ~3 = Reader programming l ~5 = Macro5 l ~6 = Macro6 l ~7 = ECI expressions Human Readable Message When this option is checked, PReS Connect shows a human readable text below or above the barcode, as defined using the Text Position, using the specified font and font size. The font size is given in points (pt).

  • PAGE 706

    GS1-128 GS1-128 is one of the types of barcodes that can be added to a template; see "Barcode" on page 679. The barcode can be added either using the Barcode toolbar button or through selecting Insert > Barcode on the menu; see "Adding a Barcode" on page 679. Initially the barcode will have the barcode type's default properties. To change those properties, such as the scale and color, open the Barcode properties dialog: right-click the barcode (on the Design tab in the Workspace) and select the Barcode...

  • PAGE 707

    Note that with this option checked, any tilde that needs to be included in the output must be escaped by adding another tilde: ~~. Human Readable Message When this option is checked, PReS Connect shows a human readable text below or above the barcode, as defined using the Text Position, using the specified font and font size. The font size is given in points (pt).

  • PAGE 708

    Note that barcodes of these types process tilde characters (~) in the data as special characters. See the Java4less Barcodes Guide to learn what the tilde character can be used for. Barcode properties This topic lists the properties of the following barcode types : l Code 11 l Code 93 l Industrial 2 of 5 l Interleaved 2 of 5 l Matrix 2 of 5 For the properties of other barcode types, see "Barcode type and properties" on page 681. Module width Specifies the width of the narrow bars in centimeters.

  • PAGE 709

    Color The Color group allows you to choose a different Barcode color (instead of black) and Background color (instead of white), by typing a hexadecimal color value (see for example w3school's color picker). When black is a composite of CMYK or RGB values, it may incur a color click charge on some printers. Check the Output in Grayscale option to make sure that pure black is used. Output format Defines how the barcode is output on the page. There are two possible formats: l l SVG: Vector format.

  • PAGE 710

    l Interleaved 2 of 5 l Matrix 2 of 5 For the properties of other barcode types, see "Barcode type and properties" on page 681. Module width Specifies the width of the narrow bars in centimeters. Changing this value to a higher value will make the barcode bigger when Scale is set to None. Scale Defines if and how the rendered barcode is scaled in relation to the parent element: l None: The barcode is rendered based on the module width.

  • PAGE 711

    l l SVG: Vector format. This is usually of higher quality, but may take longer to generate and is not compatible with Email output. PNG: Binary rasterized format. This has a slightly lower quality than SVG but is usually generated faster and will display properly in Email output. Australia Post, Japan Post, KIX, USPS IMb Australia Post, Japan Post, KIX and USPS IMb are some of the types of barcodes that can be added to a template; see "Barcode" on page 679. In PReS Connect versions prior to 2019.

  • PAGE 712

    l l None: The barcode is rendered based on the module width. Proportional: The barcode is stretched up to where it fits either the width or height of the parent box, whichever requires the less stretching. Color The Color group allows you to choose a different Barcode color (instead of black) and Background color (instead of white), by typing a hexadecimal color value (see for example w3school's color picker).

  • PAGE 713

    Barcode properties This topic lists the properties of the barcode types Australia Post, Japan Post, KIX and UPS IMb. For the properties of other barcode types, see "Barcode type and properties" on page 681. Height, width and spacing The height, width and spacing of the barcode are all measured in pixels (38 dpi). l Bar height: The height of the (shorter) bars. l Extended bar height: The total height of the extended bars. l Bar width: The width of the bars. l Spacing: The distance between the bars.

  • PAGE 714

    Code 11, Code 93, Industrial 2 of 5, Interleaved 2 of 5, Matrix 2 of 5 Code 11, Code 93, Industrial 2 of 5, Interleaved 2 of 5, and Matrix 2 of 5 are a few of the barcode types that can be added to a template. The barcode can be added either using the Barcode toolbar button or through selecting Insert > Barcode on the menu; see "Adding a Barcode" on page 679. Initially the barcode will have the barcode type's default properties.

  • PAGE 715

    Add Checksum When checked, PReS Connect will calculate a Checksum character and add that to the result of the Barcode script. If the value to be encoded is longer than 10 digits, a second check character will be calculated. Human Readable Message When this option is checked, PReS Connect shows a human readable text below or above the barcode, as defined using the Text Position, using the specified font and font size. The font size is given in points (pt).

  • PAGE 716

    Barcode properties This topic lists the properties of the MaxiCode barcode. For the properties of other barcode types, see "Barcode type and properties" on page 681. Resolution Select the printer output definition for the barcode (200, 300, 400, 500 or 600 dpi). Mode PReS Connect supports several modes; for an explanation of these modes see the MaxiCode page on Wikipedia. Tilde processing Check this option to process tilde (~) characters in the data as special characters.

  • PAGE 717

    Initially the barcode will have the barcode type's default properties. To change those properties, such as the scale and color, open the Barcode properties dialog: right-click the barcode (on the Design tab in the Workspace) and select the Barcode... option in the context menu. Note that this type of barcode processes tilde characters (~) in the data as special characters. See the Java4less Barcodes Guide to learn what the tilde character can be used for.

  • PAGE 718

    Color The Color group allows you to choose a different Barcode color (instead of black) and Background color (instead of white), by typing a hexadecimal color value (see for example w3school's color picker). When black is a composite of CMYK or RGB values, it may incur a color click charge on some printers. Check the Output in Grayscale option to make sure that pure black is used. Output format Defines how the barcode is output on the page. There are two possible formats: l l SVG: Vector format.

  • PAGE 719

    l l l Binary: allows any byte value to be encoded Text: allows all printable ASCII characters to be encoded (values from 32 to 126 and some additional control characters) Numeric: a more efficient mode for encoding numeric data Error Correction Level Use the drop-down to select the built-in error correction method based on Reed-Solomon algorithms. The error correction level is adjustable between level 0 (just error detection) and level 8 (maximum error correction).

  • PAGE 720

    Tilde processing Check this option to process tilde (~) characters in the data as special characters. (See the Java4less Barcodes Guide to learn what the tilde character can be used for.) The tilde is expected to be followed by the 'd' character and 3 digits representing an ASCII character: ~dNNN . For example, ~d013 represents a carriage return. Note that with this option checked, any tilde that needs to be included in the output must be escaped by adding another tilde: ~~.

  • PAGE 721

    Note that this type of barcode processes tilde characters (~) in the data as special characters. See the Java4less Barcodes Guide to learn what the tilde character can be used for. Barcode properties This topic lists the properties of the barcode type POSTNET. For the properties of other barcode types, see "Barcode type and properties" on page 681. Module width Specifies the width of the narrow bars in centimeters. Changing this value to a higher value will make the barcode bigger when Scale is set to None.

  • PAGE 722

    Output format Defines how the barcode is output on the page. There are two possible formats: l l SVG: Vector format. This is usually of higher quality, but may take longer to generate and is not compatible with Email output. PNG: Binary rasterized format. This has a slightly lower quality than SVG but is usually generated faster and will display properly in Email output. QR Code A QR Code is one of the types of barcodes that can be added to a template; see "Barcode" on page 679.

  • PAGE 723

    Encoding This option defines the encoding of the barcode. When Auto is selected, the barcode generator determines the encoding based on the supplied string. The other options are: l l Numeric: 10 bits per 3 digits, with a maximum of 7089 numerical characters. Alphanumeric: 11 bits per 2 characters, with a maximum of 4296 alphanumerical characters. l Byte: 8 bits per character, with a maximum of 2953 characters. l Kanji: 13 bits per character, with a maximum of 1817 characters.

  • PAGE 724

    l l None: The barcode is rendered based on the module width. Proportional: The barcode is stretched up to where it fits either the width or height of the parent box, whichever requires the less stretching. Tilde processing Check this option to process tilde (~) characters in the data as special characters. (See the Java4less Barcodes Guide to learn what the tilde character can be used for.) The tilde is expected to be followed by the 'd' character and 3 digits representing an ASCII character: ~dNNN .

  • PAGE 725

    Royal Mail 2D Mailmark Royal Mail 2D Mailmark is one of the types of barcodes that can be added to a template; see "Barcode" on page 679. The barcode can be added either using the Barcode toolbar button or through selecting Insert > Barcode on the menu; see "Adding a Barcode" on page 679. Initially the barcode will have the barcode type's default properties.

  • PAGE 726

    character: ~dNNN . For example, ~d013 represents a carriage return. Note that with this option checked, any tilde that needs to be included in the output must be escaped by adding another tilde: ~~. Color The Color group allows you to choose a different Barcode color (instead of black) and Background color (instead of white), by typing a hexadecimal color value (see for example w3school's color picker). When black is a composite of CMYK or RGB values, it may incur a color click charge on some printers.

  • PAGE 727

    Barcode properties This topic lists the properties of the barcode type Royal Mail 4-State (CBC). For the properties of other barcode types, see "Barcode type and properties" on page 681. Height, width and spacing The height, width and spacing of the barcode are all measured in pixels (38 dpi). l Bar height: the height of the (shorter) bars. l Extended bar height: the total height of the extended bars. l Bar width: the width of the bars. l Spacing: the distance between the bars.

  • PAGE 728

    When black is a composite of CMYK or RGB values, it may incur a color click charge on some printers. Check the Output in Grayscale option to make sure that pure black is used. Output format Defines how the barcode is output on the page. There are two possible formats: l l SVG: Vector format. This is usually of higher quality, but may take longer to generate and is not compatible with Email output. PNG: Binary rasterized format.

  • PAGE 729

    Scale Defines if and how the rendered barcode is scaled in relation to the parent element: l l None: The barcode is rendered based on the module width. Proportional: The barcode is stretched up to where it fits either the width or height of the parent box, whichever requires the less stretching. Human Readable Message When this option is checked, PReS Connect shows a human readable text below or above the barcode, as defined using the Text Position, using the specified font and font size.

  • PAGE 730

    Initially the barcode will have the barcode type's default properties. To change those properties, such as the scale and color, open the Barcode properties dialog: right-click the barcode (on the Design tab in the Workspace) and select the Barcode... option in the context menu. Barcode properties This topic lists the properties of the barcode types Royal Mail 4-State Mailmark C and Royal Mail 4-State Mailmark L. For the properties of other barcode types, see "Barcode type and properties" on page 681.

  • PAGE 731

    When black is a composite of CMYK or RGB values, it may incur a color click charge on some printers. Check the Output in Grayscale option to make sure that pure black is used. Output format Defines how the barcode is output on the page. There are two possible formats: l l SVG: Vector format. This is usually of higher quality, but may take longer to generate and is not compatible with Email output. PNG: Binary rasterized format.

  • PAGE 732

    l Byte: 8 bits per character, with a maximum of 2953 characters. l Kanji: 13 bits per character, with a maximum of 1817 characters. FNC Use the drop-down to either disable FNC or select a FNC option: l l l No: No FNC option. First: This mode indicator identifies symbols encoding data formatted according to the UCC/EAN Application Identifiers.

  • PAGE 733

    Barcode Data To learn more about the specifications of the Swiss QR code , please see the Swiss Payments Standard page, or download the barcode specification ig-qr-bill-en.pdf. Note The Swiss QR code standard dictates that the barcode dimensions must be 46 mm by 46 mm. Please do not change the barcode dimensions in the

    entry as this will invalidate the barcode. UPC-A, UPC-E, EAN-8, EAN-13 UPC-A, UPC-E, EAN-8 and EAN-13 are a few of the barcode types that can be added to a template.

  • PAGE 734

    Show guardbars Checking this option adds guardbars to the barcode. Guardbars are bars at the start, in the middle and at the end that help the barcode scanner to scan the barcode correctly. Scale Defines if and how the rendered barcode is scaled in relation to the parent element: l None: The barcode is rendered based on the module width. l Fit to box: The barcode is stretched to fit the parent box in both width and height.

  • PAGE 735

    Color The Color group allows you to choose a different Barcode color (instead of black) and Background color (instead of white), by typing a hexadecimal color value (see for example w3school's color picker). When black is a composite of CMYK or RGB values, it may incur a color click charge on some printers. Check the Output in Grayscale option to make sure that pure black is used. Output format Defines how the barcode is output on the page. There are two possible formats: l l SVG: Vector format.

  • PAGE 736

    Height, width and spacing The height, width and spacing of the barcode are all measured in pixels (38 dpi). l Bar height: The height of the (shorter) bars. l Extended bar height: The total height of the extended bars. l Bar width: The width of the bars. l Spacing: The distance between the bars. Scale Defines if and how the rendered barcode is scaled in relation to the parent element: l l None: The barcode is rendered based on the module width.

  • PAGE 737

    The barcode can be added either using the Barcode toolbar button or through selecting Insert > Barcode on the menu; see "Adding a Barcode" on page 679. Initially the barcode will have the barcode type's default properties. To change those properties, such as the scale and color, open the Barcode properties dialog: right-click the barcode (on the Design tab in the Workspace) and select the Barcode... option in the context menu.

  • PAGE 738

    Tip Wrapping elements in a box (or in a semantic HTML element) makes it easier to target them in a script or in a style sheet. Place the cursor in the element or select multiple elements. Then, on the menu, click Insert > Wrap in Box. You can now use the wrapper element as a script's or style's selector; see "Using the Text Script Wizard" on page 857 and "Styling and formatting" on page 793. Tip With the Copy fit feature, text can automatically be scaled to the available space in a Box or Div.

  • PAGE 739

    l l Hold the Shift key while resizing a Positioned Box to ensures that the box retains its aspect ratio. Hold the Shift key while dragging a Positioned Box to move it horizontally or vertically. Dynamically changing the position A Positioned Box has the following attributes: l anchor defines the page number (starting by 0) the box is placed on l offset-x defines the horizontal position of the box relative to its container l offset-y defines the vertical position of the box relative to its container.

  • PAGE 740

    Inline Boxes can be used in Print context and in Web pages. It is common to do entire web layouts using the float property. In Email templates, it is best to use Tables to position elements. Adding an Inline Box To insert an inline box, use the icon on the toolbar. Inline Boxes can be resized using the handles on the sides and corner.

  • PAGE 741

    Div The Div is the element used to create both Positioned Boxes and Inline Boxes. By default, a Div element reacts pretty much like a paragraph (

    ) or an inline box set to 'no float' except that it can be resized directly. Just like Positioned Boxes and Inline Boxes, Div elements can be styled using the Format > Box menu item, through the CTRL+M keyboard shortcut or through the CSS files; see "Styling and formatting" on page 793 and "Styling templates with CSS files" on page 794.

  • PAGE 742

    underlying configuration: Programmatically configure a Chart object. For another example see this How-to: Put one slice per detail record in a Pie Chart. Note As of PReS Connectversion 2018.1, the way charts can be compiled and presented has been greatly improved. As a consequence, charts made with a version of Connect prior to 2018.1 may not be converted correctly when opened in a later version.

  • PAGE 743

    l l l Before end tag inserts it within the current HTML element, at the end, just before the end tag.* After element inserts it after the element in which the cursor is currently located. For example if the cursor is within a paragraph, the insertion point will be after the end tag of the paragraph (

    ).* Replace inserts it in place of the currently selected element. (This option is not available when inserting content in a Master Page.

  • PAGE 744

    l A Div element. It has a data-amchart attribute, as you can see when you select the chart and open the Source view in the Workspace. The data-amchart attribute contains settings for how the data is displayed. These settings are made via the chart's properties (see "Enhancing a charts' design" on page 747). l A script. The script determines which data are displayed in the chart, with which colors and labels. The script can be edited any time; see "Selecting data for a Business Graphic" below.

  • PAGE 745

    1. Use the Input Type drop-down to select the source of the data for the Chart: l l Data Fields: The data originate from data fields in the main record. The chart will have the same number of items for each record. Data Table, the data are taken from a detail table that you select using the Detail Table drop-down. Note In Pie Charts, only data from the first record in the detail table are used.

  • PAGE 746

    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" on the next page. 6. Use the Move Up and Move Down buttons to change the order of the fields, which is reflected in the chart. The Preview shows what the chart looks like with the current settings, whilst the Data Preview shows which data will be passed to the amCharts library.

  • PAGE 747

    When creating a data mapping configuration (see "Data mapping workflow" on page 254), it is recommended to arrange data in a detail table in such a way that it matches this 'one series per record, one bar/point per data field' approach. Occasionally you may find that data in a detail table does not match this approach, and that it would be a better fit if the chart had one series of bars/points for each selected detail data field instead, and one bar/point for each record.

  • PAGE 748

    Start by opening the Chart Properties dialog. Right-click the chart (in the template, or in the Outline pane) and select Chart. Every tab menu in the Chart Properties dialog, except the last one, gives direct access to a number of layout options.

  • PAGE 749

    "rotate": true, ... } Properties of the Legend (listed here: https://docs.amcharts.com/3/javascriptcharts/AmLegend) should go in the legend section in the JSON: ... "legend": { "position": "right" }, The Source tab also lets you change properties that are available in either the Script Wizard or other tabs of the Chart Properties dialog.

  • PAGE 750

    Using themes The amCharts library supports working with themes. The default themes are: light, dark, black, patterns, and chalk. All except the 'patterns' theme can be used in Connect templates. Here's how to do that. 1. Add the theme to the top of the JSON on the Source tab of the Chart Properties diaog. For example: { "theme": "light", ... This setting overrides any color settings made in the Chart Script wizard and on the other tabs of the Chart Properties dialog. 2.

  • PAGE 751

    Barcode Scanner The Barcode Scanner element adds a button to trigger the device to scan a barcode. A very large variety of barcode types are supported. Once the barcode has been scanned, the data from the barcode will be added to the COTG Form and submitted along with it. Note Using the Barcode Scanner element requires the installation of the ZXing Barcode Scanner application on Android devices. The application returns the barcode data after scanning.

  • PAGE 752

    To omit the Take now or Library button, edit the Camera element's properties: right-click the Camera element after adding it to the form, select Camera properties and then use the Source drop-down to select which buttons will be available: Take, Pick from library, or both. Annotations Annotations can make a picture much more informative: an arrow, showing in which direction a car was driving; a circle, where the car has been damaged...

  • PAGE 753

    Time stamp A time stamp can be added to each picture taken. Right-click the Camera element after adding it to the form, select Camera properties, and then check Add Time Stamp. The time stamp will be added to the bottom left of the picture, with medium font size, and long date format (for example: 6/15/2009 1:45 PM). These settings can only be changed via the Source tab or in code; see "Using the COTG plugin" on page 647 and the Capture OnTheGo API: "Camera" on page 661.

  • PAGE 754

    When the form is submitted, the date data is sent as plain text. A Formatted Date element submits the date in two formats: in the format that depends on the device's regional and language settings and in the ISO format mentioned above (using a hidden field). A Date element sends the date in the ISO format only. Device Info The Device Info Element adds a field that contains some information about the device (phone or tablet) that is submitting the COTG Form.

  • PAGE 755

    High accuracy By default, devices attempt to retrieve a position using network-based methods. To tell the framework to use more accurate methods, such as satellite positioning, the High Accuracy setting has to be enabled on the Geolocation element. To make this setting, right-click the Geolocation element (or select it on the Outline pane) after adding it to the form, select Geolocation properties and check the High Accuracy option.

  • PAGE 756

    Signature The Signature Element adds a signature box to a COTG form. These signatures are filled in via touch input, either with a finger or capacitive pen. Touching the signature box opens up a fullscreen box used to sign (generally more useful in Landscape mode depending on the device); after confirming, the dialog saves the data into the Form. Signature data is transmitted in SVG plain text format.

  • PAGE 757

    Date The Date element inserts the current system date, optionally making it dynamic so that it updates whenever the template is viewed or produces output. Adding a date To add a Date element, use the Insert > Date option in the menus. A dialog appears with the following controls: l l l Language: Use the drop-down to select which language the date should be displayed in. Update Automatically: Check to update the date automatically when the template is viewed or produces output.

  • PAGE 758

    Formatting an automatically updating date The script added to automatically update the date uses the short date format. To change this: 1. Double-click the date script in the Scripts pane. 2. Delete the first line of the script. 3. On the second line, delete what comes after format and change format to formatter (see "formatter" on page 1363). 4.

  • PAGE 759

    the Form's properties, validation method and location, but doesn't allow you to specify fields. If you choose this method, skip step 8 and 9 of this procedure and add fields after inserting the Form (see "Adding elements to a Form" on page 599). 3. Add an ID and/or a class. ID's and classes are particularly useful with regard to variable data (see "Personalizing content" on page 838) and styling (see "Styling templates with CSS files" on page 794). 4.

  • PAGE 760

    8. Under Fields, click the Add button and click on the desired field type to add a field of that type; see "Form Elements" on page 763. Note A Fieldset is not available in the Form Wizard, because a Fieldset itself can contain multiple different fields. Add the Fieldset after inserting the Form; see "Adding elements to a Form" on page 599. 9. Double-click each field in the Fields list and change its settings. For an explanation of the settings, see "Adding elements to a Form" on page 599. 10.

  • PAGE 761

    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. 12. Close the dialog. Now you can start adding elements to the Form (see "Using Form elements" on page 599, "Form Elements" on page 763, and "COTG Elements" on page 750). Changing a Form's properties and validation method Once a Form has been added, you can of course edit its HTML code directly in the Source view of the workspace.

  • PAGE 762

    l l The Browser validation method leaves it up to the browser to validate the user input. When adding fields to the Form (see the next step) you can only make fields required and set the maximum length as an additional requirement for some fields. JQuery Validation validates input using JQuery scripts. This allows for stricter requirements per field and a different message for each field to display to the user if the input is not valid.

  • PAGE 763

    Validation in Connect 1.0.0 In Connect 1.0.0, the validation method of the template was stored using the names "standard" and "custom". Standard has changed to "browser" and custom is now "jquery-validation". When you open a template made with that version of the software, the template will be migrated to use the new attribute values for the data-validation-method attribute of the

    element. The JavaScript file web-form-validation.

  • PAGE 764

    Email The Email element is a text input field that accepts only email addresses in a valid format. URL The URL element is a text input field that accepts only URLs (a web page address) in a valid format. Password The Password element is a password field that accepts any alphanumerical characters. When the user types in this field, characters are shown as asterisks only. Number The Number element is a text field accepting only numbers.

  • PAGE 765

    property do not appear in the user interface. If a Checkbox is in checked state when the form is submitted, the name of the checkbox is sent along with its value. If a Checkbox is not checked, no information is sent when the form is submitted. Fortunately, there is a workaround to submit the status of an unchecked checkbox; see "Using Form elements" on page 599. Radio Button Group A Radio Button Group is not an input element itself.

  • PAGE 766

    down list and the values related to them. Only the value of the selected option will be sent to the server on submitting the form. By default, the Select element's first item is selected in the browser. To learn how to dynamically add options to a Select element, see this how-to: to Dynamically add options to a dropdown. Button The Button element is an element that can be clicked.

  • PAGE 767

    Note Hyperlinks - both external and internal - are not preserved when printing multiple pages on the same sheet (see "Imposition options" on page 1329). 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 674. The HTML tag of a hyperlink or mailto-link is . This is sometimes called an anchor tag.

  • PAGE 768

    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.

  • PAGE 769

    Dynamically adding or modifying a hyperlink implies writing a script. For information about scripts, see "Writing your own scripts" on page 927. Adding a personalized link Personalized URLs (pURLs) are links that are tailor-made for a specific purpose, generally for individual clients. Typically, a pURL in a Connect template takes the user to a personalized landing page, for example, to download an invoice or get access to specific products or services.

  • PAGE 770

    image can be resized (see "Resizing an image" on page 821) and alternate text can be linked to it (see "Setting an alternate text" on page 775). Tip Using images in an Email template? See "Using images in email campaigns: tips" on page 559. Dynamic images Images can be switched dynamically, so that a letter, email or web page can include one image or another, depending on a value in the data set. Read "Dynamic images" on page 872 to find out how to add such switching images.

  • PAGE 771

    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 674. In the section's source file, images are elements. The tag has at least four attributes: src, alt, width and height. src specifies the URL of the image. alt contains the alternate text; see "Setting an alternate text" on page 775.

  • PAGE 772

    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.

  • PAGE 773

    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.

  • PAGE 774

    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.

  • PAGE 775

    Moving an image An image that is added to a section behaves like a character and is part of the text flow. To move it, simply click the image and drag and drop it somewhere else in the text flow. To learn how to wrap text around it, see "Wrapping text around an image" on page 821. 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 822.

  • PAGE 776

    The alternate text will be shown in emails and on web pages at the position of the image while the image is loading and when the image is not found. On web pages, alternate texts are also used for accessibility. To set an alternative text, click the image and enter the alternate text in the Alternate text field on the Attributes pane at the top right. Using a CSS gradient to create an image CSS gradients are a new type of image added in the CSS3 Image Module.

  • PAGE 777

    HTML element: table 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 674. The HTML tag of a Table is

    . Tables are divided into table rows with the tag. Table rows are divided into table data with the
    tag. A table row can also be divided into table headings with the tag.

  • PAGE 778

    l l l Before end tag inserts it within the current HTML element, at the end, just before the end tag.* After element inserts it after the element in which the cursor is currently located. For example if the cursor is within a paragraph, the insertion point will be after the end tag of the paragraph (

    ).* Replace inserts it in place of the currently selected element. (This option is not available when inserting content in a Master Page.

  • PAGE 779

    Alternatively, click in one of the cells and select Insert > Table > Insert thead or Insert tfoot, on the menu. Deleting a header or footer To delete a header or footer, simply right-click the header or footer and select Row > Delete on the shortcut menu. If the deleted element was targeted by a script, you will be asked if you want to delete the script as well. Rows and columns Adding a row or column To add a row or column to an existing Table, click in a cell.

  • PAGE 780

    The default_table_styles.css file is read-only, but of course you could overwrite styles and create your own theme, using your own style sheets. Regardless, you can change the font, font size and color, the borders, the cell padding (the distance between the edge of the cell and its content), and the background color or image of the table and its cells, via the Formatting dialog. Both approaches are explained in the topic: "Styling a table" on page 816.

  • PAGE 781

    l l l Click in the Table and then drag the border to move the Table. Select the Table (see "Selecting an element" on page 677) and type the desired values in the Top and Left fields on the Attributes pane. Select the Table and select Format > Table, on the menu. On the Table tab, change the Positioning values. 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 825.

  • PAGE 782

    Extra spaces When you add spaces in Design or Preview mode the editor automatically preserves any extra spaces by converting them to non-breaking spaces (" " in HTML). It does this because in HTML extra spaces are generally removed. Take this into account when you edit the template in Source mode (i.e. in HTML) or add text via a script. 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.

  • PAGE 783

    Formatting text Text can be styled, colored, centered, indented etc. It can even be displayed so that it reads from right to left. See "Styling text and paragraphs" on page 807. In all templates you can use the fonts that are provided with the Designer, as well as imported fonts; see "Fonts" on page 831. Translating text OL Connect templates can be multilingual. For information about multilingual templates and how to create them, see "Translating templates" on page 1002.

  • PAGE 784

    Tip It is possible to open and edit any external HTML or JSON file in the Designer: select File > Open, select All files (*.*) as the file type and then select an HTML or JSON file. Adding a snippet to the Resources Here's how to add a snippet to the Resources of a template. 1. Before adding a snippet, import any resource files that are related to the snippet, such as image files and CSS files, into the template file.

  • PAGE 785

    Note Remote snippets may contain other resources, such as images. There is one limitation though: only absolute paths are supported inside remote snippets. Images and other resources referred to with a relative path (for example: images/img.gif) or root-relative path (any path starting with a slash, for example: /base/images/img.gif) won't be available in the template. Note Remote snippets are expected to be UTF-8 encoded. Creating a snippet To start creating a snippet from scratch: 1.

  • PAGE 786

    By default, an HTML snippet that is being used as shared content can also be modified in a section where it is used. This behaviour can be changed; see "Editing a snippet" on the next page Renaming a snippet To rename a snippet, right-click it on the Resources pane in the Snippets folder and select Rename. If you rename an HTML snippet that was inserted into a section as shared content, you need to update the reference to the snippet manually; see "Renaming a snippet" on page 788.

  • PAGE 787

    1. Open the section and select the part or parts that should be saved to a snippet. 2. Right-click the selection, point to Snippet and click Create to copy the selected part to a new snippet, or Create Shared Content to create the new snippet and replace the selected part with a reference to the new snippet. 3. Give the snippet a name.

  • PAGE 788

    Note Remote snippets inserted as shared content cannot be changed from within the Designer. Of course, their source file can be edited outside of the Designer. When that happens, the changes will become visible in remote snippets that are inserted as shared content. Renaming a snippet To rename a snippet, right-click it on the Resources pane in the Snippets folder and select Rename.

  • PAGE 789

    Tip It is possible to open and edit any external JSON file in the Designer: select File > Open, select All files (*.*) as the file type and then select an HTML or JSON file. Using a JSON snippet Unlike HTML snippets, JSON Snippets cannot be inserted into the content directly, but they can be accessed via a script using the loadjson() function. To load a JSON snippet in script, use: loadjson(‘snippets/nameofthesnippet.json’). For example: var json_data = loadjson("snippets/snippet.json"); results.

  • PAGE 790

    The Handlebars library is integrated in OL Connect Designer. This means that you can use Handlebars expressions in this special type of snippets. Working with Handlebars templates involves scripting. If you are new to scripting in the Designer, first read: "Writing your own scripts" on page 927. Note The information in this Online Help focuses on the implementation of Handlebars in OL Connect. For general information about Handlebars and how to use it, see the following web sites: https://handlebarsjs.

  • PAGE 791

    Render the Handlebars template First the template needs to be rendered, i.e. converted into HTML, replacing the expressions with values. This can be done with one line of code in a standard Designer script. Create a standard script and call the function: Handlebars.render(template, data). For example: var html = Handlebars.render( "snippets/policy-info.hbs", record ); The template can be: l the name of a Handlebars template (.hbs) in the template l the name of a Handlebars template (.

  • PAGE 792

    2. Call the function to replace expressions with data The second step is to call the resulting function, passing in some data. The function will replace the expressions with values from the data and will then return HTML. Instead of calling Handlebars.render() you could call Handlebars.compile() and then call the resulting function. For example: var myFunction = Handlebars.compile( "snippets/policy-info.

  • PAGE 793

    let html = '' let policydata = record.tables.Policy for (var i=0; i < policydata.length; i++) { let templateName = 'snippets/' + policydata[i].fields ['snippetName'] + '.hbs' html += Handlebars.render( templateName, policydata[i] ) } results.replaceWith( html ); 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.

  • PAGE 794

    Layout properties Colors and fonts make an important contribution to the look and feel of your template. See "Colors" on page 827 and "Fonts" on page 831. 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 807. Boxes and a number of other elements can have a background color and/or background image; see "Background color and/or image" on page 823.

  • PAGE 795

    Cascading Style Sheets were originally designed for use with web pages, or HTML files. Since every template in the Designer is constructed in HTML, CSS files can also be used in the Designer. Instead of setting the font size, line height, color etc. for each and every paragraph in the template itself, you can define a layout for all paragraphs, and for all output channels, in a CSS file.

  • PAGE 796

    in Print output, obviously. Included Cascading Style Sheets When you create a template, a number of style sheets is automatically included: 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, Web). 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.

  • PAGE 797

    Note The order in which style sheets are executed, can affect the actual output. This sequence can be set per section; see "Applying a style sheet to a section" on page 510. 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.

  • PAGE 798

    example: a folder location on a corporate website, hosted by a CDN (Content Delivery Network) or shared via a Workflow process. Tip After adding the remote file, you may right-click it and select Download Resource. This allows you to maintain a central file, from which you can quickly download a copy to your template without having to copy & paste. Note that a local copy of a remote resource is a snapshot; it is not automatically kept in sync with its remote content.

  • PAGE 799

    Styling your templates with CSS files Note Email clients do not read CSS files and some even remove a