EngageOne™

 View Only

EngageOne Video - Campaign URL and Single PURL Generator Custom Fields

  • 1.  EngageOne Video - Campaign URL and Single PURL Generator Custom Fields

    Employee
    Posted 12-11-2019 07:23
    Edited by Phil Waters 12-13-2019 03:35

    Introduction

    The EngageOne Video Director allows the fields on the Campaign URL Manager and Single PURL Generator to be customized. The customization allows fields to be grouped together, help and placeholder text to be defined, toggle switches to be created, default values to be defined, the field labels to be defined and the type of input field to be chosen.

    In summary clients of EngageOne Video have the opportunity to provide data into the system in a number of ways. Two of these are:

    • Through Single Personalized URL generation (a one time manual data submission through the platform’s UI)
    • Through the Creation of a Campaign URL (where data isn’t targeting a single individual, but perhaps a large audience group)

    The challenge has been that in the past it’s not been possible to choose how the form data looks in it's appearance, there was no ability to define the form input type (everything were a text field), add titles, friendly descriptions, and conditional visibility of these fields. This features means we can convert something that historically used to look like this:


    to something which looks like this:

    Basic Configuration

    Currently there is no UI to allow the fields to be customized. The customization needs to be performed by uploading a JSON file to a specific location on S3 (s3://eov-management-portal-project-config/<environment - preprod or prod>/<project name>/purl_fields.json). Below is an example of a very basic configuration:


    {
        "groups": [{
            "id": "group-1",
            "heading": "Example",
            "rows": [{
                "fields": {
                    "field1": {
                        "label": "Field 1",
                        "type": "text",
                        "default": "Example",
                        "width": 12
                    }
                }
            }]
        }]
    }

    The above example creates a single group with a title of "Example" and adds a single text field with a label of "Field 1" and a default of "Example". The width of the input box is set to fill the width of the page.

    Configuration

    Groups

    Any number of groups can be configured. The title and description text of a group can be configured using the "heading" and "description" properties.

    Rows

    Within each group a number of rows (containing fields) can be defined. Each row represents a row on the page and uses the Bootstrap grid system to define the width of the fields (see below).

    Field Widths

    The width of fields can be configured using the "width" property. This uses the Bootstrap grid system which uses a number from 1 to 12 to define widths.


    For example, if you want two fields side by side with equal width and that fill the entire width of the page, the "width" property of the two fields would be set to 6 and the fields would be placed in the same group. If four fields should be placed on the same row, the "width" property should be set to 3. Any combination of widths can be used to allow the width of fields to be set as desired. For example, if two fields appear on the same row and the "width" properties are set to 8 and 4, the first field would fill 2/3 of the width of the page and the second field would fill the remaining width (1/3).


    It's also not required to fill the entire width of the row so the "width" property of all fields on a row don't need to sum up to 12.

    Field Types

    The following field types are supported:

    Text (default)

    Setting the "type" property of a field to "text" will use the default text input box which will allow the user to enter any arbitrary value. Validation of the field (defined in the data dictionary) can optionally be used to restrict what the user enters.

    Dropdown

    Setting the "type" property of a field to "dropdown" will use a dropdown field. The dropdown field requires that the options be defined using the "options" property (see below for more details).

    Checkbox

    Setting the "type" property of a field to "checkbox" will use one or more checkboxes. The labels and values of the checkboxes can be defined using the "options" property (see below for more details).

    Radio buttons

    Setting the "type" property of a field to "radio" will use radio buttons. The labels and values of the radio buttons can be defined using the "options" property (see below for more details).

    Date

    Setting the "type" property of a field to "date" will use a date picker field. This will allow the user to use a calendar popup to select a date or enter the date manually.

    Number

    Setting the "type" property of a field to "number" will use a number field. This will allow the user to enter numbers only.

    Colour picker

    Setting the "type" property of a field to "color" will use a colour picker field. This will allow the user to define the hex code for a colour or use the colour picker to choose a suitable colour. The colours can be used to "brand" the video and interaction cards.

    Textarea

    Setting the "type" property of a field to "textarea" will use a multi-line text input box which will allow the user to enter any arbitrary value. As with the default text input box, validation of the field (defined in the data dictionary) can optionally be used to restrict what the user enters.

    File

    Setting the "type" property of a field to "file" will use a file upload field. This will allow the user to upload a file which is then uploaded to S3. This file can then be used within the video

    Switch

    Setting the "type" property of a field to "bool" will use a switch field. The value of "off" and "on" can be specified using the "options" property.

    Field Labels, Descriptions and Placeholders

    Labels, descriptions and placeholders for fields (only applies to HTML field types which support placeholder text) are defined using the "label", "description" and "placeholder" properties. 

    Options

    Certain field types (dropdown, checkbox, radio and bool) require options to be defined using the "options" property. For dropdowns, checkboxes and radio buttons, these can have any value and label. The example below will create three options (Option A, Option B and Option C) and set the value of the field to "a", "b" and/or "c" (radio buttons and dropdowns allow a single value but checkboxes allow any number of values to be selected which will create an array of values)


    "options": {
        "a": "Option A",
        "b": "Option B",
        "c": "Option C"
    }

    Switches ("bool" field type) require two fields ("off" and "on"). The example below will set the value of the field to "no" when the switch is "off" and "yes" when the switch is "on":


    "options": {
        "off": "no",
        "on": "yes"
    }

    Defaults

    A default for any field can be specified using the "default" property. This default will be used when the page first loads and removes the need for a user to enter a value.

    Limit

    The number of characters which can be entered into "text" and "textarea" fields can be specified using the "limit" property. The user will be prevented from entering more than the specified number of characters. This can be useful if the value will be used in an overlay where the space available needs to be limited

    Toggles

    Toggles allow groups and/or fields to be shown or hidden based on the position of the toggle switch. For example, certain groups and/or fields can be hidden when the toggle is "off" and other groups and/or fields can be hidden when the toggle is "on". A field can be defined as a toggle using the "toggles" property as follows:


    "Toggles": [
        {
            "fields": ["field1", "field2"],
            "groups": ["group4"],
            "show": ["1"]
        },
        {
            "groups": ["group5"],
            "hide": ["1"]
        }
    ]

    The above example will show field1, field2 & group4 and hide group5 only when the toggle is "on".

    Example

    The JSON below uses all the features

    {
    "groups": [{
    "id": "group-1",
    "heading": "Example group",
    "description": "Example description for the first group",
    "rows": [{
    "fields": {
    "toggle1": {
    "label": "Turn fields on",
    "type": "bool",
    "options": {"off": "0", "on": "1"},
    "toggles": [{
    "fields": ["test2", "test2a"],
    "groups": ["group-2"],
    "show": ["1"]
    }, {
    "fields": ["file1"],
    "hide": ["1"]
    }],
    "default": "1"
    },
    "test1": {
    "label": "Test One",
    "options": {"1": "One", "2": "Two", "3": "Three"},
    "default": "1",
    "width": 6,
    "description": "Test\nLine 2"
    }
    }
    }, {
    "fields": {
    /* This is a comment
        which spans multiple lines */
    "test2": {
    "type": "textarea",
    "label": "Test Two",
    "default": "1",
    "placeholder": "This is a text field",
    "limit": 10
    },
    "test2a": {
    "type": "text",
    "label": "Test Two",
    "default": "1",
    "placeholder": "This is a text field",
    "limit": 10
    },
    "file1": {
    "type": "file",
    "label": "File Upload"
    },
    "test_3": {
    "type": "bool",
    "label": "Boolean",
    "default": false,
    "options": {"off": "0", "on": "1"}
    }
    }
    }]
    }, {
    "id": "group-2",
    "heading": "Test two",
    "description": "This is another description",
    "fields": {
    "test3": {
    "type": "dropdown",
    "label": "Test Three",
    "options": {"1": "A", "2": "B", "3": "C"},
    "default": "1"
    },
    "test4": {
    "type": "checkbox",
    "label": "Checkbox Field",
    "options": {"1": "A", "2": "B", "3": "C"},
    "default": ["1", "2"]
    },
    "test7": {
    "type": "radio",
    "label": "Radio Button Field",
    "options": {"1": "A", "2": "B", "3": "C"},
    "default": "1"
    },
    "test8": {
    "type": "date",
    "label": "Date Field",
    "default": "2019-02-28"
    },
    "test9": {
    "type": "number",
    "label": "Number Field",
    "default": 77
    },
    "test10": {
    "type": "color",
    "label": "Color Field",
    "default": "#FF0000"
    }
    }
    }]
    }

    The above JSON will produce the following:

     



    ------------------------------
    Phil Waters
    PITNEY BOWES SOFTWARE, INC
    Troy NY
    ------------------------------