The Form Designer is a powerful tool that allows you to create, customize, and fine-tune the various forms used with Assemblies. It gives you control over the design and layout using an intuitive interface for assembling and organizing Elements, the primary building blocks of these documents. Each Element serves a specific purpose, and by combining them within the Form Designer, you can build tailored forms that meet your exact needs for each Assembly.
Table of Contents
- Accessing the Form Designer
- Form Designer Screen Subtabs
- Form Designer Elements
- Form Designer Side Panel
- Form Designer Views
Accessing the Form Designer
To locate the Form Designer, begin by navigating to Settings / Components / Assemblies.
1. Select an Assembly.
2. Click on the Form Designer tab.
Form Designer Screen Subtabs
The Form Designer is divided into Subtabs, each representing a different form or section of the system where your Assembly will appear. This allows you to customize each form, system section, or document separately, giving you full control over how your Assembly is displayed throughout the system.
Order Entry
a. Standard - This view allows you to customize how your Assembly will appear and the options you will be given during Line Item entry when the Line Item entry is set to Standard.
Note: This view is set on the Line Item itself. See example below.
b. Advanced - This view allows you to customize how your Assembly will appear and the options you will be given during Line Item entry when the Line Item entry is set to Advanced.
c. When set, this toggle allows the Standard Options to also show in the Advanced view both in the Form Designer as well as the Advanced Line Item view.
d. Click Save in order to keep changes made to this screen.
Example:
a. This toggle alternates the Line Item view between Advanced and Standard.
b. Depending on how the Standard Options are set in the Form Designer, you may notice different options are available between the Advanced and Standard Views.
Assembly Settings
a. Settings -This subtab allows you to select the options you would see in the Pricing tab under the Assembly Settings heading. See example below.
Note: Pricing amounts and defaults should be set in the Pricing tab.
b. Click Save to retain changes made to this screen.
Example:
a. The Assembly Settings heading is found under the Pricing tab, where you can set default options for the Assembly.
Documents
Note: For more information on Documents, please see Form Designer Documents.
a. Invoice - This allows you to customize the information that will appear on the Invoice for this Assembly.
Note: The Invoice tab is also present on Estimates.
b. Work Order - This allows you to customize the information that will appear on the Work Order for this Assembly.
c. Click Save to retain changes made to this screen.
Form Designer Elements
Elements are the primary building blocks and are found throughout your system when creating an Assembly, Form, Custom Field, or Formula. Understanding what they do and how to use them will help you in customizing your system.
Formatting
a. Section - This adds a new Section, or heading, in the Form Desinger.
b. Group - This adds an additional Group Header.
c. Spacer - Adds an empty line of space.
d. Splitter - Formats fields side by side.
Inputs
a. Single-Line Text Input - This creates a text field which allows you to type a single line of text.
b. Multi-Line Text Input - This creates a text field which allows for multiple lines of text.
Note: Numbers may be included in both the Single and Multi-Line Text Input.
c. Number Input - This creates a field for inputting numbers.
Note: Letters will not show in this field, it is for numbers only.
d. Checkbox - This inserts a single Checkbox.
e. Dropdown - This allows you to create a list of options to choose from in a dropdown format.
Labels
a. Single-Line Label - When adding this, you can customize a single line of informative text. It will then be inserted with an information icon that will show the text when hovered over it.
b. Multi-Line Label - Adding this allows you to input more information, using multiple lines of text as needed. It will then be inserted with an information icon that will show the text when hovered over it.
c. Web Link - This allows you to add a clickable link.
Example: This can be helpful for adding a specific customer's website to their Contact Details.
Linked Elements
a. Dynamic Component Group - This is the Standard Options section available on most assemblies. This is a landing spot for Child Assemblies that are not going to be imbedded within the Parent Assembly.
b. Linked Assembly - This allows you to add an Linked Assembly.
c. Linked Labor - This allows you to add a Linked Labor.
d. Linked Material - This allows you to add a Linked Material.
e. Linked Material Collection - This adds a garment assembly for installed integrations to display their materials in a dropdown.
f. Linked Machine - This allows you to enter a Linked Machine.
Table
a. Table - This inserts a Table into your Form Designer.
Form Designer Side Panel
Clicking on an Element or Component in the Form Designer opens up a side panel with information specific to that Element or Component. You can edit the information found here at any time.
Note: The side panels will have slightly different headings and information fields depending on which Element or Component you select. This example uses a Linked Material.
a. This ellipsis allows you to Delete this Linked Component from the Assembly.
b. Details heading is where you would find basic information including a Label and Variable Name.
Note: The Variable Name is used in pricing formulas. It must be unique and not include spaces.
c. Data heading includes information such as Component Categories, pricing formulas, property mapping, and advanced settings.
Note: For more information on Component Categories, please see Component Categories Overview, or Managing Component Categories
d. The Default is the value is what will automatically populate in the field.
Note: This should almost always be left blank. This element will be available in every form and area within the system. That is where you should define a default value or formula.
e. The Save button must be clicked in order to save any changes as the system does not do this automatically.
Form Designer Views
The Form Designer can be viewed in one of three different ways.
a. Edit View - This allows you to add and edit your Form Designer.
b. Preview for Computer - Clicking this will show you how your form would appear on a computer screen.
Note: This view is available for Order Entry and Assembly Settings Subtabs.
c. Preview for Phone - Clicking this will show you how your form would appear on a phone screen.
Note: This view is available for Order Entry and Assembly Settings Subtabs.
