Table of contents
- Introduction
- Operations on the form templates
- Form template studio
Introduction
This studio is a form template editor. Theses templates, or models, can then be filled and submitted via the Ubleam app or via the Fusion backoffice.
The form template studio includes many components and an internationalisation system that adapts to :
- If the form is used on mobile : the language set on the the phone
- If the form is used on Fusion : the language set on the backoffice
Operations on the form templates
In this part, we shall see the different available operations to apply on the form templates, via the Forms icon in the vertical menu of Fusion.
Dans cette partie, nous allons voir les différentes opérations disponibles sur des modèles de formulaire, depuis l'icône Formulaires dans le menu vertical de Fusion
Create a new form template
- Click on the button Create new form template
The form template studio shall then open.
See an existing form template preview
In the form template list:
- Click on the three little dots located at the top right hand corner of an existing model
- In the dorpdown menu, click on the eye
- The form template shall then appear as a pop-in, in a format that suits a mobile screen.
Delete a form template
In the form template list:
- Click on the three little dots located at the top right hand corner of an existing model
- In the dorpdown menu, click on the bin
A confirmation pop-in shall appear.
Edit a form template
In the form template list:
- Click on the three little dots located at the top right hand corner of an existing model
- In the dorpdown menu, click on the pencil
Le studio de formulaire s'ouvrira, avec les données du modèle sélectionné.
Form template studio
The studio is divided into 3 parts:
- On the left: the component selector
- In the center: The preview of the form template being created
- On the right: the properties
- Properties of the form template itself, under this tab
- Properties of the selected component, under this tab
- Properties of the form template itself, under this tab
Right hand menu: General tab, information about the form template
The General tab offers the configuration of the form template general information
- Name of the form template: Technical name of the form template. It is not visible to the mobile final user, but shall be on Fusion. Mandatory field
- Titles of the form template: Translated title, visible to the user, of the form template. Mandatory field
- Language: Language that applies to this title. Adapting to the language set up on the user's smartphone.
- Title: Title that displays depening on the selected language
- Labels: Gives a label to the form template. The label is used by the "Logbook" feature.
Left hand menu: the different components
The components of the template gather all the constituent elements of its content. A vast choice of component types is available.
Display
These components are purely informative elements, in read-only mode.
Divider
- Works as an insert, can be used to title a part.
Text
- Fix text, independent from all context.
Image
- Fix image downloaded from an URL.
Simple input
The simple input components can be as well in read-only as in write mode.
Some of them can include some context related elements.
Text
- Textual input. Can display a default value that is linked to a context.
Numeric
- Numeric input that can include minimal and maximal limits. Can display a number by default.
Checkbox
- Simple binary checkbox.
Dropdown list
- Dropdown menu with one option selectable among many, with the possibility to put one as a default value.
Multi-list
- Conditioned dropdown menus, created via an imported .csv file.
Date
- Date, time or date+time selector. Can display a default value.
Image
- Image uploader. The source and the image maximal number can be set up.
Advanced input
The advanced input components can be in write mode as well as in read only mode. Their complexity is superior to the simple input ones.
Signature
- Signature laying block.
Barcode
- Barcode scanner with the possibility to seize the code manually.
Right hand menu: Properties tab, component parameters
The "Properties" tab, in the right menu, opens the setup of all one selected component related data.
Without any selected component, no property can become available, and the following message shows up:
After selecting a component, one or two cards shall display under this tab :
- General properties: Parameters linked to the component itself
- Specific properties: Parameters linked to the selected component's content
General properties
This card displays in response to the selection of any component.
For the display type components
- Titles of the component: Translated title, visible to the user, of the component. Mandatory field
- Language: Language that applies to this title. Adapting to the language set up on the user's smartphone.
- Title: Title that displays depening on the selected language
- Rank of the component: Position of the component in the form. It is prefilled but can be modified. The component can be also be moved via "drag & drop" thanks to the dedicated button (see the part). Mandatory field
For the other components
- Name of the form template: Technical name of the component. It is not visible to final users, but can be used for API related operations. Mandatory field
- Titles of the component: Translated title, visible to the user, of the component. Mandatory field
- Language: Language that applies to this title. Adapting to the language set up on the user's smartphone.
- Title: Title that displays depening on the selected language
- Rank of the component: Position of the component in the form. It is prefilled but can be modified. The component can be also be moved via "drag & drop" thanks to the dedicated button (see the part). Mandatory field
- Mandatory
- Read-only
Specific properties
After selecting some components, the specific properties card, depending on each of them, displays.
Text (simple input)
- Default value: Applies a value displayed by default
- Link the field to a contextual element: If ticked, then a dropdown menu displays to fetch one context element. It can be an attribute, or even the user's name for example
- Value: Textual input field that sets what to display when "Link the field to a contextual element" is not ticked
- Text input data type: Defines the text type to be entered
- Text: Simple text with no restriction
- Phone: The text typed must match be a succession of digits
- Password: The text displays as a succession of asterisks, " * "
- Paragraph: Simple text with no restriction, in a text block extended in height
- E-mail: The text typed must respect the ###@###.### format
Numeric
-
Default value: Applies a numeric value displayed by default
- Minimum limit: Minimum to be typed (visible in the form)
- Maximum limit: Maximum the maximum to be typed (visible in the form)
Checkbox
-
Default value: Defines if the box is ticked or not by default
Dropdown list
-
Default value: Applies a value displayed by default
- Link the field to a contextual element: If ticked, then a dropdown menu displays to collect the value of a contextual element. It can be an attribute value, or the user name, for example
Attention: The default value must be equal to one of the selectable options. If the selected contextual element is different from any option from the list, then it will not display by default.
- Link the field to a contextual element: If ticked, then a dropdown menu displays to collect the value of a contextual element. It can be an attribute value, or the user name, for example
- Add new option: Add one new selectable option in the dropdown menu. Once ticked, the card will extend:
-
- Option: Translated title of the option
- Language: Language that applies to this title. Adapts to the language set up on the user's device
- Title: Title that displays respecting the language
- Set as default value: Makes this option the default value
- Option: Translated title of the option
Multi-list
- Multi-list creation from a file: Import a file that embeds the whole tree structure of the option combinations. For further details about how to build such a file, please refer to the Form - multi-list component article
-
Default value: Applies a value displayed by default
- Link the field to a contextual element: If ticked, then a dropdown menu displays to fetch one context element. It can be an attribute, or even the user's name for example. It can work only if the selected contextual element is equal to an existing "Value" of the file (please see Form - multi-list component article for further details)
Date
-
Default value: Applies a value displayed by default
- Link the field to a contextual element: If ticked, then a dropdown menu displays to fetch one context element. It can be an attribute, or even the user's name for example
- Date: Date input field, with/without hour, that defines what to display as long as "Link the field to a contextual element" is not ticked
- Date format: Defines the date type
- Date: Simple date
- Date-hour: Date & hour
- Hour: Simple hour
Image (simple input)
-
Image source: Defines what source (on mobile) the images can be imported from
- Maximum number of images
Barcode
-
-
Default value: Applies a value displayed by default
- Link the field to a contextual element: If ticked, then a dropdown menu displays to fetch one context element. It can be an attribute, or even the user's name for example
- Value: Textual input field that sets what to display when "Link the field to a contextual element" is not ticked
-
- Barcode types: Defines the barcode type that can be read by the scanner, among many types:
- AZTEC
- CODE_128
- CODE_39
- CODE_93
- DATA_MATRIX
- EAN_13
- EAN_8
- ITF
- PDF-417
- QR
- UPC_E
Middle overview
The middle screen gives an overview in real time of any operation made on the form template.
Options in the overview
The 3 buttons located besides the form template overview propose distinct functionalities:
- The first button toggles on/or the "drag and drop" mode in order to move easily the different components
- The second button adapts the overview to a device
- The third button changes the language of the overview
Contextual elements
When a contextual element is defined as default value, it shall display in some technical way:
This way of displaying shows if there is a contextual element used, and what it is.
Save the modifications
Saving is made via the button located at the top right hand corner of the page.
It is also possible to save all modifications when trying th quit the studio directly, via the alert bar that appears at the bottom of the page.
Quit the form template studio
To quit the studio, you simply have to click on the displayed at the top left hand corner of the page.