Setup
You will need an existing Joyfill form and the following permissions in your security group:
Can change site configuration settings.
Can configure forms.
Click here to learn about permissions and security groups.
If you see this arrow, click to expand for more information!
If you see this arrow, click to expand for more information!
We will add additional information and images under these arrows.
How to navigate the Joyfill form builder
The form builder has three sections: Form elements, Form editing area and Settings panel.
Form elements
Use the search bar to find a specific element, then click and drag it into the form.
Use the search bar to find a specific element, then click and drag it into the form.
Available form elements include Image, File, Heading Text, Display Text, Empty Space, Text, Multiline Text, Number, Date Time, Dropdown, Multiple Choice, Single Choice, Checkbox, Signature, Table, and Chart.
Form editing area
Use the Move icon in the upper-right corner to reposition the element, or the Resize icon in the lower-right corner to adjust its size. Other elements on the form will reposition automatically.
Use the Move icon in the upper-right corner to reposition the element, or the Resize icon in the lower-right corner to adjust its size. Other elements on the form will reposition automatically.
At the bottom of the form editing area, several tools are available for managing pages and adjusting the form view:
At the bottom of the form editing area, several tools are available for managing pages and adjusting the form view:
Click + to add a new page.
Click the page dropdown to access options: Settings (Page Settings), Duplicate, Delete, Move Left, and Move Right.
Click the desktop or mobile icons to switch the view of the editing area.
Click the cog icon to open the Settings for the form.
Settings panel
The settings panel has different views: Settings for desktop and mobile, Page Settings and Settings for the element.
Settings for desktop and mobile
Click the cog icon at the bottom of the Form editing area to open desktop settings, or click the mobile icon to switch to mobile settings.
Click the cog icon at the bottom of the Form editing area to open desktop settings, or click the mobile icon to switch to mobile settings.
Edit the text to rename the form or upload a PDF, PNG, or JPG file to set the form background.
Open the Title (text above the element) and Text (content inside the element) sections to change the size (Tt icon + number), colour, alignment (left, center or right) and format (bold, italic, underline, capatalise) of text.
Open the Field section to change the background colour, border colour, border width (Bw), border radius (Br), and padding (between the content and the border) for the fields where the text is displayed.
If Field Syncing Enabled is turned off on the mobile view, any changes applied to the desktop view are not automatically applied on the app.
Page Settings
Click the Page dropdown at the bottom of the Form editing area and select Settings.
Click the Page dropdown at the bottom of the Form editing area and select Settings.
Edit the text to rename the page or upload a PDF, PNG, or JPG file to set a page background.
Use the Hidden checkbox to hide the page, and set up Conditions.
Adjust the page’s width, height, and padding (between the content and the border) in the Styles section.
In the Layout section, choose the field style (Normal or Transparent), the layout type (Grid or Float), and adjust columns and row height.
Click Delete to remove the page.
Settings for the element
Click directly on the element in the form to open the Settings for the element, which has two tabs: Settings and Styles.
Click directly on the element in the form to open the Settings for the element, which has two tabs: Settings and Styles.
Settings
Edit the text to change the element's title, which can be hidden or visible.
In the Field section, check the box to allow Multiple images or Multiple files to be uploaded, choose the format of Date type element (Date, Date and Time or Time), configure the X and Y axis titles/ranges and enable Display Line Details (only Chart), set a Default Value or tick Read-only, Required or Hidden.
Set up Conditions to show or hide the field.
In Tooltip, add a title and body and make the tooltip visible when clicking the information icon on the live form.
Search and select data sources from your Uptick workspace to Prefill the field from automatically.
Delete or Duplicate the element.
Styles
Open the Title (text above the element) and Text (content inside the element) sections to change the size (Tt icon + number), colour, alignment (left, center or right) and format (bold, italic, underline and capatalise) of text.
Open the Field section to change the background colour, border colour, border width (Bw), border radius (Br) to round field corners, padding (between the content and the border), margin (outside the field, layer stacking order, and the X, Y, Width, and Height positioning of the field.
How to set up Conditions for a page or an element
1. Open the Page settings or Settings for the element and click on the branches icon next to Conditions.
1. Open the Page settings or Settings for the element and click on the branches icon next to Conditions.
2. Select Show or Hide for the field or page (if it is visible by default, set to Hide; if hidden by default, set to Show), then choose whenever All or Any of the following conditions must match.
2. Select Show or Hide for the field or page (if it is visible by default, set to Hide; if hidden by default, set to Show), then choose whenever All or Any of the following conditions must match.
3. Click + to add a new condition, select the Page and Field, choose an operator (such as is, contains, is greater than, etc.) and enter a value if required.
3. Click + to add a new condition, select the Page and Field, choose an operator (such as is, contains, is greater than, etc.) and enter a value if required.
4. Click the checkmark button to save the Conditions.
4. Click the checkmark button to save the Conditions.
How to set up Prefill field from
1. Open the Settings for the element and click to expand the Prefill from section.
1. Open the Settings for the element and click to expand the Prefill from section.
2. Click on the text, then search and select a data source from your workspace to automatically populate the field.
2. Click on the text, then search and select a data source from your workspace to automatically populate the field.
Standard fields to Prefill from:
Standard fields to Prefill from:
Organisation Name: Display your organisation’s name.
Task Address: Address of the task.
Authorisation Ref: Relevant PO or WO numbers.
Authorisation Note: Additional authorisation comments from the customer.
Authorisation Name: Name of the person with authorisation.
Task Description: Description of the work to be done.
Task Name: Short description of the task.
Task Ref: Reference to the task.
Scope of Works: The complete description of the works to be done.
Task Assigned To: The user the task is assigned to.
Property Name: Name of the property against the task.
Property Ref: Ref of the property against the task.
Client Name: Ref of the property against the task.
Branch Name: Name of the branch against the task.
Branch Address: Address of the branch against the task.
Branch Email: Email of the branch against the task.
Branch Phone: Phone number of the branch against the task.
Property Street Address: Streetline address of the property.
Property Address Suburb: Suburb/Town/City of the property address.
Property Address Post Code: Postal code of the property address.
Property Address State: State of the property address.
Property Address Country: Country of the property address.
Full Property Address: Full address of the property.
Display Property Address: Display address of the property.
Current Users Name: Dynamically add the current user’s name.
Current Date and Time: Dynamically add the current date and time.
Current Date: Dynamically add the current date.
Current Time: Dynamically add the current time.
Prefill from the accreditations linked to the user by selecting the accreditation type name from the list. If the accreditation type is marked as property-specific, the accreditation must have a property assigned to be prefilled on the form.
Prefill from the accreditations linked to the user by selecting the accreditation type name from the list. If the accreditation type is marked as property-specific, the accreditation must have a property assigned to be prefilled on the form.