Automate-IT / Pulse-IT forms 101

This note will present some basics tips for designing Pulse-IT or Automate-IT forms in version 2.6 or more.

• Resizing an object
  • Resizing the frame
  • Resizing the object width
• How to align a group of fields
• Adding a static image
• Editing Sequence data objects
• CSS editing
• Show/Hide object in a Form
• Linking  a list to the player

Resizing an object

Resizing the frame

After dragging an object into your Form, you may decide to resize it. Move your mouse to the right of the object and resize it by dragging it to the left.

In this case, you have changed the frame of the objet. The free space on the right will be filled if you create an object with a corresponding width.

Resizing the frame allow you to have several objects on the same line.

Resizing the object width

If you move your mouse a few pixels on the left of the resize handle, you will see a change in mouse cursor. You are now resizing the object width.

In this case, the space left free on the right part of you form won't be used by any other object.

Resizing the object itself will force the objects to be on  different lines while not using the all screen width.

How to align a group of fields

Let say you want to have a block on the left and 3 string objects on the right

The grid allow only one object per line, that why you won't be able to move String2 just below String.

To do so, you need to use a Grouped Fields block. It will hold your 3 strings objects and will be considered as one object.

Beware that your datas in context will be structured as part of "grouped_fields".

{
  "grouped_fields": {
    "string": "",
    "string_2": "",
    "string_3": ""
  },
  "string_4": ""
}

{
  "string_4": "",
  "string": "",
  "string_2": "",
  "string_3": ""
}

Adding a static image

To display a static image in your form, you need to add a Text Block and set the default value to a html image tag.

<img src='url_to_the_image'>

Editing Sequence data objects

These new objects in 2.6 will let you edit some of the current sequence informations.

• Sequence Color
• Sequence Tags
• Sequence Priority

CSS editing

You may edit the look of your object by using the CSS editor. Select an object in your form. A new "CSS" tab is added to the right of your editor

For each part of your object you will be able to edit the properties such as background color, font, borders,...

If you want to check your parameters, you may go to the CSS tab to see how your parameters has been translated. If you want to reset the setting just select the css code and backspace.

Show/Hide object in a Form

Imagine that you want to hide a form object based on the value of a checkbox.

Simply add the checkbox object and add this snippet to the "on change" callback.

string_4.visible(me.getValue());

Linking  a list to the player

It is now possible to link a list with a player. This allows time-based metadata to be presented to your users in sequences and workflows. As an example, a list could contain in/out markers, text, color tags and overlay columns, but any Pulse-IT form fields can be added to the list to represent customised temporal metadata.

In order to link your player to a list, follow those steps:

- Drop a "Registered media" block and a "List" in your form. 

- Open the "Registered media" block and in the "Linked to" tab enter the key name of your list. 

- Insert fields in your list and use the key name as presented in the "Registered media"  dialog.

- You may add other columns not listed, it is your choice.

2 specific columns are marker_tags and marker_metadata:

- marker_tags are displayed in the upper left part of the player if activated)

- marker_metadata is a JSON structure. The data will be displayed as an overlay in the upper right part of the player if activated)