Manualshelf

2022.1

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

Summary of content (1906 pages)

'; $('#cameras').

  • PAGE 651

    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 632.

  • PAGE 652

    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 653

    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 639. To learn how to create widgets in code, see "Dynamically adding COTG widgets" on page 642 and "Saving and restoring custom data and widgets" on page 645.

  • PAGE 654

    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 640.

  • PAGE 655

    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 656

    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 657

    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 658

    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 659

    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 640. Option Description Type Default enableHighAccuracy By default, the device attempts to retrieve a position using networkbased methods.

  • PAGE 660

    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 661

    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 662

    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 663

    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 664

    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 665

    "Selecting an element" on page 669, "Attributes" on page 667 and "Styling and formatting an element" on page 670. ID's and classes are particularly useful with regard to variable data (see "Personalizing content" on page 830) and styling (see "Styling templates with CSS files" on page 786). 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 666

    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 669). Then select the appropriate element, either on the Format menu, or from the 'Element type' drop-down on the toolbar.

  • PAGE 667

    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 830) and styling (see "Styling templates with CSS files" on page 786).

  • PAGE 668

    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 849.

  • PAGE 669

    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 670

    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 671

    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 672

    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 673

    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 674

    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 675

    l "MSI" on page 709 l "PDF417" on page 711 l "POSTNET" on page 713 l "QR Code" on page 714 l "Royal Mail 2D Mailmark" on page 717 l "Royal Mail 4-State (CBC)" on page 719 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 722 l "Swiss QR Code" on page 724 l UPC-A, UPC-E, see "UPC-A, UPC-E, EAN-8, EAN-13" on page 726 l USPS IMb, see "Australia Post, Japan Post, KIX, USPS IMb" on page 728 l "USPS IMpb"

  • PAGE 676

    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 677

    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 671. 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 678

    Rune When set to a value between 0 and 255, an Aztec Rune corresponding to the selected value is created. Set the Rune to -1 to disable this feature. 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 679

    Codabar Codabar 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 671. 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 680

    Human Readable Message When this option is checked, PlanetPress 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 681

    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 673. 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 682

    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. This is usually of higher quality, but may take longer to generate and is not compatible with Email output. PNG: Binary rasterized format.

  • PAGE 683

    Inter Character Gap Two adjacent characters are separated by an inter-character gap. A value of 1 means that the separator will have the same length as the width of the narrow bars (in centimeters). 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 684

    Code 39 extended Code 39 extended 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 671. 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 685

    Add Checksum When checked, PlanetPress 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. (See the Java4less Barcodes Guide to learn what the tilde character can be used for.

  • PAGE 686

    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 671. Initially the barcode will have the barcode type's default properties.

  • PAGE 687

    Add Checksum When checked, PlanetPress 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, PlanetPress 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 688

    Barcode properties This topic lists the properties of the Code 93 extended barcode. For the properties of other barcode types, see "Barcode type and properties" on page 673. 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 689

    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 690

    Code set Set of characters to be used: l A: ASCII characters 00 to 95 (0–9, A–Z and control codes), special characters, and FNC 1–4 l B: ASCII characters 32 to 127 (0–9, A–Z, a–z), special characters, and FNC 1–4 l C: 00–99 (encodes each two digits with one code) and FNC 1 In Auto mode, the barcode generator will automatically select the correct encoding mode (set A, B or C) according to the input data.

  • PAGE 691

    Human Readable Message When this option is checked, PlanetPress 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 692

    Barcode properties This topic lists the properties of the Data Matrix barcode. For the properties of other barcode types, see "Barcode type and properties" on page 673. Note Tilde characters in the data are processed as special characters (see the Java4less Barcodes Guide to learn what the tilde character can be used for). Any tilde that needs to be included in the output must be escaped by adding another tilde (either "~~", or "7E7E" if the Hex input option is enabled).

  • PAGE 693

    Preferred format Use the drop-down to select the size of the Data Matrix. 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.

  • PAGE 694

    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. 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 671. Initially the barcode will have the barcode type's default properties.

  • PAGE 695

    l Type: The supplement type can be 2-digit (originally used to indicate the edition of a magazine or periodical) or 5-digit (used to indicate the suggested retail price for books). In case this option is set to None, and the data includes digits for the 2 or 5 supplement, the supplement data will be skipped and the additional barcode will not be rendered. Note When the chosen supplement type doesn't match the data, the supplement data will be skipped and the additional barcode will not be rendered.

  • PAGE 696

    GS1 DataMatrix GS1 DataMatrix is one of the types of barcodes that can be added to a template; see "Barcode" on page 671. 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 671. Initially the barcode will have the barcode type's default properties.

  • PAGE 697

    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, PlanetPress 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 698

    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 699

    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. Add Checksum When checked, PlanetPress 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.

  • PAGE 700

    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 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.

  • PAGE 701

    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, PlanetPress 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.

  • PAGE 702

    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 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.

  • PAGE 703

    Human Readable Message When this option is checked, PlanetPress 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

    Note that barcodes of these types don't process tilde characters (~) in the data as special characters. 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 673. 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.

  • PAGE 705

    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. 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 671. In PlanetPress Connect versions prior to 2019.2 the USPS IMb barcode was called "OneCode".

  • PAGE 706

    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 707

    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 673. 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 708

    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 709

    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 710

    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. l Fit to box: The barcode is stretched to fit the parent box in both width and height.

  • 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. PDF417 PDF417 is one of the types of barcodes that can be added to a template; see "Barcode" on page 671.

  • PAGE 712

    Nr. of Columns The number of data columns can vary from 3 to 30. Nr. of Rows A PDF417 bar code can have anywhere from 3 to 90 rows. Bar height Defines the height of the bars for a single row measured in pixels drawn. Compact Check this option to use Compact PDF417 instead of the PDF417 barcode. This shortened form of the PDF417 barcode is useful where the space for the symbol is restricted.

  • PAGE 713

    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 714

    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. l Proportionally: The barcode is stretched up to where it fits either the width or height of the parent box, whichever requires the less stretching.

  • PAGE 715

    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. Instead of using the Script wizard (see "Adding a Barcode" on page 671) you could write your own script to get the data for the QR Code. Barcode properties This topic lists the properties of the QR barcode.

  • PAGE 716

    Correction level Part of the robustness of QR codes in the physical environment is their ability to sustain 'damage' and continue to function even when a part of the QR code image is obscured, defaced or removed. A higher correction level duplicates data within the QR Code to that effect, making it larger. FNC Use the drop-down to either disable FNC or select a FNC option: l l l No: No FNC option.

  • PAGE 717

    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 718

    Barcode properties This topic lists the properties of the barcode type Royal Mail 2D Mailmark. For the properties of other barcode types, see "Barcode type and properties" on page 673. Module width The recommendation is to print these barcodes with a module size of 0.5 mm, which equates to 6 dots when printed at 300dpi. The maximum module size for printing is 0.7 mm. Preferred version Use the drop-down to select the size of the barcode, in a number of modules.

  • PAGE 719

    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.

  • PAGE 720

    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. Add Checksum When checked, PlanetPress Connect will calculate a Checksum character and add that to the result of the Barcode script.

  • PAGE 721

    Royal Mail 4-State Mailmark C, Royal Mail 4-State Mailmark L Royal Mail 4-State Mailmark C and Royal Mail 4-State Mailmark L are some of the types of barcodes that can be added to a template; see "Barcode" on page 671. 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 671. Initially the barcode will have the barcode type's default properties.

  • PAGE 722

    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 723

    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 724

    Swiss QR Code The Swiss QR Code is a specific sub-set of QR barcode standards and is one of the several types of barcodes that can be added to a template; see "Barcode" on page 671. 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 671. Initially the barcode will have the barcode type's default properties.

  • PAGE 725

    l Second: This mode indicator identifies symbols formatted in accordance with specific industry or application specifications previously agreed with AIM International. You must then set a value for the Application Indicator property. 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 726

    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. 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 671. Initially the barcode will have the barcode type's default properties.

  • PAGE 727

    Supplement UPC-A, UPC-E, EAN-13, and EAN-8 may all include an additional barcode to the right of the main barcode. l Type: The supplement type can be 2-digit (originally used to indicate the edition of a magazine or periodical) or 5-digit (used to indicate the suggested retail price for books). In case this option is set to None, and the data includes digits for the 2 or 5 supplement, the supplement data will be skipped and the additional barcode will not be rendered.

  • PAGE 728

    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 671. In PlanetPress Connect versions prior to 2019.

  • PAGE 729

    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 730

    Barcode properties This topic lists the properties of the USPS IMpb barcode type. For the properties of other barcode types, see "Barcode type and properties" on page 673. 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 731

    Tip With the Copy fit feature, text can automatically be scaled to the available space in a Box or Div. See "Copy Fit" on page 802. Positioned Box A Positioned Box is one that can be freely moved around the page and does not depend on the position of other elements. A positioned box is actually a

    element that has an absolute position; in other words, it has its CSS property position set to absolute (see also: "Using the CSS position property" on page 805).

  • PAGE 732

    l offset-y defines the vertical position of the box relative to its container. These attributes can be set in a script. The following script dynamically changes the position of a Positioned Box in a Print context by setting the offset-x and offset-y values. results.attr('offset-x','96'); results.attr('offset-y','96'); The measurements are in pixels (e.g. 96px = 1in). Note that you do not need to set the units. Note Do not set the top or left property of a Positioned Box in a style sheet.

  • PAGE 733

    Positioning an Inline Box Initially an Inline Box will float to the left. Use the (Float left), (No float) and right) icons on the toolbar to change the position of an Inline Box within the text. l l l (Float The Float leftbutton aligns the Inline Box to the left. The text is positioned to the right of it and is wrapped around the box. The Float rightbutton aligns the Inline Box to the right, with the text wrapped around it to the left.

  • PAGE 734

    Adding a Div element To add a Div, select Insert > Structural Elements > Div on the menu. For an explanation of the options, see "Inserting an element" on page 668. HTML tag: div, span 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 666. In HTML, boxes are

    elements. Spans are elements.

  • PAGE 735

    For a list of known backward compatibility issues see: "Business Graphics: Backward Compatibility Issues introduced in 2018.1" on page 116. Also note that charts based on expanded, custom scripts are never converted. Inserting a business graphic The Connect Designer has wizards for adding three kinds of graphics: Pie Charts, Bar Charts and Line Charts.

  • PAGE 736

    * If the current element is located inside another element, use the Elements drop-down to select which element is used for the insertion location. The list displays every element in the breadcrumbs, from the current selection point down to the root of the body. 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.

  • PAGE 737

    to the data-amchart attribute (in a dataProvider property). Connect then passes the value of that attribute to the integrated amCharts library. 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.

  • PAGE 738

    Note In Pie Charts, only data from the first record in the detail table are used. How to create a Pie Chart that has one slice per detail record is explained in a How-to: Put one slice per detail record in a Pie Chart. 2. For a Bar or Line Chart based on a detail table, you also have to select a Category: one data field (in the detail table) of which the values will appear under the bars or the line; in other words, on the x axis. 3. Next to Values, select data fields with a numerical value.

  • PAGE 739

    Chart.... See: "Enhancing a charts' design" on the facing 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. Preparing a data table By default, a chart that is based on a detail table shows one series ("category") of bars/points per record.

  • PAGE 740

    When creating a data mapping configuration (see "Data mapping workflow" on page 246), 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 741

    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.

  • PAGE 742

    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.

  • PAGE 743

    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.

  • PAGE 744

    scanning. Camera The Camera element adds a group of buttons to capture or select an image. Once the image is selected via the camera or the device's library (aka "gallery"), it is saved within the Form data. When the form is submitted, the image is sent in a base64-encoded string format. To learn how to add Camera data to a template, see "Adding ​Camera data to the template" on page 608. The Camera element has a number of options, of which most can be set in the Design view.

  • PAGE 745

    properties, and then check Allow annotations. Clicking (or rather, touching) the image will bring up the annotation dialog. Annotations can be made in a Marker (semi-transparent) or Pencil (solid) style, in different colors and with different widths. Annotations are submitted in SVG format by a hidden input added to the Camera element. The name of that input is the ID of the Camera element, followed by "-note-data", for example camera1-note-data.

  • PAGE 746

    How to use the captured or selected image in a template After a user has submitted the form and the data has been extracted, you may want to display the captured or selected image in a Designer template, for example in a letter or on a web page. To do this: 1. Load the data mapping configuration (or at least the data model). 2. Insert a dummy image in the template. 3. Right-click the dummy image and select Dynamic Image. The Text Script Wizard appears. 4.

  • PAGE 747

    Document ID The Document ID element retrieves the Document ID of the form currently viewed by the app. You could put the Document ID in a hidden input, so that when the form is submitted, the Document ID is submitted as well. A Document ID can be used on the server side to check (in the Connect database) if the data has already been submitted. Fields Table The Fields Table element adds a table with two rows, a Delete button at the end of the first row and an Add button at the end of the second row.

  • PAGE 748

    Image & Annotation The Image & Annotation element is meant to be used with an image that needs input from the user. When inserting an Image & Annotation element you have to select the image. The user can simply click (or rather, touch) the image to bring up the annotation dialog. Annotations can be made in a Marker (semi-transparent) or Pencil (solid) style, in different colors and with different widths. Annotations are submitted in SVG format by a hidden input.

  • PAGE 749

    containing box in a template. With previous versions of the app, the format of returned signatures could vary. Time and Formatted Time The Time element and the Formatted Time element display the current time on the device when the form is first opened. When the element is touched, a time selector appears so the user can modify this time. The Formatted Time element displays times in a format that depends on the locale of the device on which the user is viewing the form.

  • PAGE 750

    Click OK to insert the date or Cancel to close the dialog. Tip If you are looking to add a date that originates from a record set, to a template, see: "Variable Data" on page 846. To insert a date you could use either the drag and drop method or the Text Script Wizard; the latter lets you set the date/time format. 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).

  • PAGE 751

    Forms Web templates can contain Forms. Capture OnTheGo templates always contain a Form. Tip To create a Capture OnTheGo template, preferably use a Template Wizard (see "Capture OnTheGo template wizards" on page 612). The Wizard doesn't just add the form, it also adds the necessary Capture OnTheGo form elements (see "COTG Elements" on page 743), style sheets and JavaScript files, and extra pre-made elements. Adding a Form This procedure describes how to add a Form element to an existing Web context. 1.

  • PAGE 752

    5. Using the the Method drop-down, select whether the form should be sent using the GET or POST method. 6. Using the next drop-down, select the form's Encryption Type (enctype): l l l application/x-www-form-urlencoded: Default. All characters are encoded before they are sent. Spaces are converted to "+" symbols, and special characters are converted to ASCII HEX values. multipart/form-data: No characters are encoded. This value is required when you are using forms that have a file upload control.

  • PAGE 753

    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. For example if the cursor is within a paragraph, the insertion point will be before the

    tag.* After start tag inserts it within the current HTML element, at the beginning, just after the start tag.* Before end tag inserts it within the current HTML element, at the end, just before the end tag.

  • PAGE 754

    with CSS files" on page 786). l l l An Action: the URL where the form data should be sent. The URL should be a server-side script that can accept form data (a Workflow process that starts with a Server Input task, for example). A Method: this defines whether the form should be sent using the GET or POST method. An Encryption Type (enctype): l l l application/x-www-form-urlencoded: Default. All characters are encoded before they are sent.

  • PAGE 755

    l l Maximum length: Enter a numerical value for the minimum character length accepted for this field. Equal to: Use the drop-down to select another field that is already added to the same Form. The contents of both fields must match for the data to be validated. This is useful for confirmation fields such as for passwords, email addresses etc.

  • PAGE 756

    validation. For more information about Forms and Form elements in the Designer, see "Forms" on page 751 and "Using Form elements" on page 591. For more information about elements in Forms, see https://www.w3schools.com/html/html_ forms.asp. Fieldset A fieldset is a group of related elements in a form. The elements don't have to be of the same type.

  • PAGE 757

    Text area The Text area element is a text field accepting multiple paragraphs. You can set a number of rows when adding the Text Area to the Form, and change it on the Attributes pane. Hidden field A hidden field can contain specific data used by the server-side script. It is not visible to the user. When adding a Hidden Field you can set the value that will be sent on submit. Label A Label element is a text displaying informative text within the form. Labels are non-interactive.

  • PAGE 758

    You could also create a Radio Button Group by specifying the same submit name for a number of Radio Buttons when adding them to a Form. Radio Button A radio button sends information to the server whether it is selected (true) or not (false). When adding a Radio Button you can set its initial state and its value. The contents of the value property do not appear in the user interface. If a Radio Button is in selected state when the form is submitted, the name of the Radio Button is sent along with its value.

  • PAGE 759

    A button of the type button doesn't have a standard function. This is mostly used with a JavaScript to activate a script. The button's type can also be changed on the Attributes pane. l There may be multiple submit buttons on a Form. If this is the case, specify a different name and/or value for each of the buttons. Note: When adding a Button to a Form, you can specify a value, but no name. The Button's ID will be copied to the element's name attribute.

  • PAGE 760

    Adding a hyperlink or mailto link 1. Select text or an image. Note Although it is possible, it is not advisable to add a Hyperlink to other elements, such as a Paragraph or Div. HTML 4 specifies that hyperlinks and mailto-links may only contain inline elements. Block elements, such as a Div, may not appear inside a link. HTML 5 states that the link "may be wrapped around entire paragraphs, lists, tables, and so forth, even entire sections, so long as there is no interactive content within (e.g.

  • PAGE 761

    l l l Email: enter a valid email address that appears by default in the To: field of the email client. Subject: type a default subject that appears in the Subject: field of the email client. Message: type a message that appears by default in the Message field of the email client. Note that all these can be changed within the email client once the link is clicked. Tip To quickly change the text of a hyperlink, position the cursor on the link and click ~contents in the Breadcrumbs.

  • PAGE 762

    l PDF l PNG l SVG l TIF/TIFF Base64 encoded images are supported; however, they are added differently: set the src attribute of an element to the base64 code (see below, "HTML tag: img" on the next page). For Email and Web output, PNG is the preferred image format. EPS, PDF, SVG and TIFF images in an Email or Web section are automatically converted to PNG to ensure that they can be seen in the browser or email client. 32-bit BMP files are not supported.

  • PAGE 763

    select an image to be used as the element's background image. See "Background color and/or image" on page 815 and "Using a PDF file or other image as background" on page 523. Tip Editing PDF files in the Designer is not possible, but when they're used as a section's background, you can add text and other elements, such as a barcode, to them. The quickest way to create a Print template based on a PDF file is to right-click the PDF file in the Windows Explorer and select Enhance with Connect.

  • PAGE 764

    Note The Connect image cache size is limited to 100MB. This allows most output jobs to run faster. However, if a job requires more than 100MBs of image files, then the Connect image cache size can be increased to cater for such. Please contact OL Support for instructions on how to modify the image memory cache value, if needed. (See also: "Limit of 100MB of image files within a single job" on page 118.

  • PAGE 765

    Via drag-and-drop The drag-and-drop method is a quick way to import one or more images into a template. 1. Look up the image file or image files on your computer using the Windows Explorer. 2. Select the image (or images, using Shift+click or Ctrl+click) and drag the image file from the Explorer to the Images folder on the Resources pane at the top left. 3. To place an image in the content, drag it from the Images folder on the Resources pane to the content and drop it.

  • PAGE 766

    Note If a URL doesn't have a file extension, and the option Save with template is not selected, the Select Image dialog automatically adds the filetype parameter with the file extension as its value (for example: ?filetype=pdf (if it is the first parameter) or &filetype=pdf). The filetype, page and nopreview parameters are not sent to the host; they are used internally. Therefore, URLs that rely on one of these parameters cannot be used.

  • PAGE 767

    Using one file that contains a collection of images (a 'sprite') When a template that contains lots of images is merged with a large record set, the many file requests may slow down the process of output generation. One solution is to combine the images into a single image file (an 'image sprite') and display the part that holds the image. This reduces the number of file requests and can improve the output speed significantly.

  • PAGE 768

    Just like many other elements, images can be given borders and rounded corners, they can have inner and outer margins and they can be rotated. How to do this is described in general formatting topics, such as "Border" on page 817 and "Spacing" on page 829. All general formatting topics are listed under "Styling and formatting" on page 785. Note It is recommended to resize images outside of the Designer, with image editing software.

  • PAGE 769

    Note When CSS repeating gradients are displayed in a PDF reader, artifacts, like very thin lines may occur. When this happens, try setting the gradient's position a little bit different. Table Tables serve two different purposes: they are a way to display data in a tabular format, and they are also a way to position elements on a page. In HTML email, Tables are the most reliable way to position text and images; see "Designing an Email template" on page 549.

  • PAGE 770

    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. Classes can be shared between elements and are used to access the Table from scripts and as CSS selectors for style rules.

  • PAGE 771

    Note l l Tables with an absolute position are only useful in Print sections. Tables on a Master Page have to have an absolute position, unless they are located inside another element with an absolute position. 4. Click Next and select the desired table style. The top left actually applies no styling to the table. The style can be easily changed afterwards; see "Styling a Table" on the facing page. 5. Uncheck the box Allow resizing if the columns should not be resizable in the workspace (in Design mode).

  • PAGE 772

    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. Deleting a row or column To delete a row or column, simply right-click the row or column and select Row > Delete or Column > Delete on the shortcut menu. If the deleted row was targeted by a script, you will be asked if you want to delete the script as well. Styling a Table The Insert Table wizard lets you select a style for the table.

  • PAGE 773

    l Click in the Table and drag the handles to resize it. Press the Shift key while dragging to scale the Table proportionally. This option only works in a Print section, with a Table that has an absolute position and for which resizing is allowed. l l If the position of the Table isn't absolute, right-click the Table and on the shortcut menu, select Convert to absolute.

  • PAGE 774

    Adding text To add text, simply type in the workspace in the middle. l Press Enter to insert a new paragraph. l Press Shift+Enter to insert a line break. Alternatively, use the Insert Lorem Ipsum toolbar button to insert dummy text, or copy-paste text into the template. Select Paste as Plain Text from the Edit menu or the contextual menu to insert the text without any HTML styles or formatting.

  • PAGE 775

    HTML element: p, h, li and others When adding elements, such as text, images or a table, to the content of a template, you are actually constructing an HTML file, which you can see and edit on the Source tab (see also: "Editing HTML" on page 666). In HTML, text can be contained in many different elements: paragraphs, span elements, line items and table cells, for example. The HTML tag of a paragraph is

    . The paragraph should be followed by a closing tag:

    .

  • PAGE 776

    l Handlebars templates can contain HTML and Handlebars expressions; see "Handlebars templates" on page 781. The information in this topic applies to all or at least two types of snippets. Note Regarding styling: when a snippet is added to different sections or contexts, it is displayed according to the section's or context's style sheet. This means that the same content can look different depending on the styles applied to the section or context, without changing the content.

  • PAGE 777

    Remote snippets A remote snippet is either an HTML or JSON file that is not located within your template file but is hosted on a Content Management System or other external location. To add a remote snippet: 1. Right-click the Snippets folder on the Resources pane, and click New Snippet > Remote HTML file or Remote JSON file. 2. Enter a name for the file as it appears in the Snippets folder. This name is shown in the Snippets folder with the .rhtml file extension for HTML, or .rjson for a JSON file. 3.

  • PAGE 778

    Tip It is also possible to create a new HTML snippet from an existing piece of content in the template; see "Using content to create an HTML snippet" on the next page. Adding a snippet to a section Each type of snippets is used differently; see "Adding an HTML snippet to a section" on the next page, "Using a JSON snippet" on page 781 and "Using Handlebars templates: examples" on page 784. Editing a snippet To edit a snippet, open the snippet file by double-clicking it on the Resources pane.

  • PAGE 779

    Snippets folder on the Resources pane, but their file name ends in .html. This topic contains information that only applies to HTML snippets. If you want to know how to add an existing (remote) snippet to the resources, or how to create an empty HTML snippet, please see "Snippets" on page 775. Tip It is possible to open and edit any external HTML file in the Designer: select File > Open, select All files (*.*) as the file type and then select an HTML file.

  • PAGE 780

    Editing shared content By default, an HTML snippet that is being used as shared content can also be modified in a section where it is used. That way you actually adjust its source. The snippet will be changed at all locations where it is used. 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.

  • PAGE 781

    JSON snippets JSON snippets are snippets that contain JSON data instead of text. Just like other types of snippets, JSON snippets are stored in the Snippets folder on the Resources pane, but their file name ends in .json. This topic contains information that only applies to JSON snippets. If you want to know how to add an existing (remote) snippet to the resources, or how to create an empty JSON snippet, please see "Snippets" on page 775.

  • PAGE 782

    Handlebars is the name of a JavaScript library that implements a templating language (see https://handlebarsjs.com/). It uses a template and an input object to generate output. Handlebars templates look like regular text with embedded Handlebars expressions. A handlebars expression is a {{, some contents, followed by a }}. For example:

    Hello {{firstname}} {{lastname}}!

    When the template is rendered, these expressions are replaced with values from an input object.

  • PAGE 783

    Using a Handlebars template in a section Although Handlebars templates contain HTML text, they cannot be inserted into the content of a section directly. The following steps need to be taken in order to replace Handlebars expressions with values and then add the content of a Handlebars template to a section. Render the Handlebars template First the template needs to be rendered, i.e. converted into HTML, replacing the expressions with values.

  • PAGE 784

    1. Compile the Handlebars template into a function Handlebars templates need to be compiled first. When a Handlebars template is compiled, it is actually compiled into a JavaScript function. 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.

  • PAGE 785

    This is an example: 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.

  • PAGE 786

    time and again, when the company's layout preferences change. See "Styling templates with CSS files" below. Layout properties Colors and fonts make an important contribution to the look and feel of your template. See "Colors" on page 819 and "Fonts" on page 823. 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 799.

  • PAGE 787

    Why use CSS files The basic idea behind CSS is to separate the structure and contents of a (HTML) document as much as possible from the presentation of that document. 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.

  • PAGE 788

    What you can't do with CSS In Connect, it depends on the output channel what can and cannot be done with CSS. CSS can only be used to its full potential with HTML output. Animation and transition features won't work 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).

  • PAGE 789

    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 502. 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 790

    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 791

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