Form Designer Modes

The Form Designer is organized into four distinct modes, each serving a specific purpose. You can easily switch between these modes using the tabs located in the top right corner:

1. Edit Mode (🖋): Edit Mode is the heart of form creation. Here, you'll build and design your form to fit your unique requirements. The rest of this knowledge article will delve into everything you can accomplish in Edit Mode.
   
   
2. Preview Mode (🔎): Preview Mode allows you to simulate the form's behavior for end users in the Inbox. Calculations are taken into account, but it won't show transition or status changes configured in the Workflow Designer. For a complete test, create a form in the Inbox.
   
   
   
3. PDF Mode: In the Inbox or through a backend action, you can export a form submission as a PDF. PDF Mode provides a preview of how your form will look when exported as a PDF.
   
   
4. Advanced Editor (< >): The Advanced Editor displays the code, written in Mirata's proprietary form definition language. This code is automatically generated based on your actions in Edit Mode. Using the Advanced Editor isn't necessary, as the Form Designer's visual interface covers the form creation process seamlessly.

Designer Edit Mode

In Edit Mode in the Designer, you will see the Component Selector, Editing Space, and Property Pane. Below we go into detail on how to use each of these.

Component Selector

On the left, you have the Component Selector panel. From here, you can drag and drop a component onto the Editing Space. Use the search at the top of the Component Selector to easily find the component type you’re looking for.

Editing Space

The Editing Space translates into the form in the Inbox. Drag components into the editing space and then configure them to build out your form.

Quick Edit Menu

The Quick Edit Menu offers convenient access to common controls, simplifying your form-building experience. Each time you add a new component to your form, remember to utilize the Quick Edit Menu to set the essential Name and Label for that element. (Providing a meaningful Name for each component is crucial; it enables easy retrieval for future use in calculations.)

1. Hold down the shift key as you click on a component to view the Quick Edit Menu for that component.
   
   
2. The component Name is a crucial behind-the-scenes value. While form users won’t ever see the component names, the name field is crucial for form designers. It’s important to always provide a descriptive component name because you’ll use the name to reference the component when creating calculations in the Designer. 

1. If an invalid name is entered, a red error message will promptly notify you. Please note that names cannot contain spaces and should not begin or end with special characters or numbers.

3. The component Label is what is shown on the component. Label is what the users see on the form but doesn’t affect your form functionality. 
   
   
4. Quickly access the Initial control to set an initial value of your component, which is also accessible in the Control Properties in the right-hand Property Panel. (See below in the “Conditions” section for more details.)
5. Quickly access the Readonly control to make your component read only, which is also accessible in the Control Properties in the right-hand Property Panel. (See below in the “Conditions” section for more details.)
6. Use the Duplicate button to create an exact copy of the component, including any calculations and styling. You can duplicate a section or array component and all child components will duplicate as well. 
7. Use the Save as Template button to save the selected component as a template. If you have a group or array component selected, all child components will be a part of the template.
8. Use the Delete button to delete the component from your form. 

Property Pane

Property Pane Overview

The Property Pane, located on the right-hand side, empowers you to tailor the selected component in the Editing Space (you can tell which component is selected because it will have a blue highlight around it). If you don’t have a component selected, then you can configure some settings for the form itself. You’ll see a combination of the below tabs, depending on which component type you have selected in the editing space.

The majority of our configuration functionality for the core form lies in the Property Pane, so it’s too much to cover it all in one article. Scroll down in this article to learn more about the Conditions and Presentation Properties tabs, but use the links in orange below to learn more about the other tabs. 

Property Pane Tabs:

Conditions Tab

* Default control.

1. Initial: Configure what value is in the component every time the form is first created. 

1. Unset*: The component will be empty.
2. Constant: Set a constant value. 
3. Calculation: Use a calculation to dynamically set the value.
4. Number of Items: For array components, pre-set how many rows should be in the array.
5. List of Items: For array components, pre-set a list of items.
6. Query Table: For array components, bring in data from a query.
7. Reference Table: For array components, bring in data directly from a Mirata Data Table.
   

2. Enabled: Configure when the component is enabled vs. disabled. 
   

1. False: Component is always disabled.
2. True*: Component is always enabled.
3. Calculation: Component is dynamically enabled or disabled based on the logic you configure. 
4. When a component is disabled: Validations won’t fire. 
   If Hide While Disabled is on in Presentations Properties, then the component will hide when it’s disabled. 
   If Hide While Disabled is off in Presentations Properties, then the component will still be visible, but will be read only.

3. Readonly: Configure when the component is read only vs. editable.

1. False*: The component is always editable.
2. True: The component is always read only.
3. Calculation: Component is dynamically editable or read only based on the logic you configure. 

4. Update: Configure what value is in the component after certain updates are made to the form. 

1. Unset*: The value in the component won’t ever automatically update after the form is created.
2. Calculation: The value in the component will dynamically update based on the logic you configure.

5. Reset When Enabled To: When you have a calculation for Enabled, then you can configure what value will be in the component whenever it flips from disabled to enabled, based on the logic you configured.  

1. Do not change*
2. Change to initial value
3. Change to empty
4. Change to constant
5. Change to calculation 

6. Reset When Disabled To: When you have a calculation for Enabled, then you can configure what value will be in the component whenever it flips from enabled to disabled, based on the logic you configured. 

1. Do not change*
2. Change to initial value
3. Change to empty
4. Change to constant
5. Change to calculation 

Presentation Properties Tab

1. To get to Presentation Properties, select a component in the Editing Space, then click the presentation icon on the right.
   
2. Control the Width of any component by selecting the component, then dragging it by the arrow on the left inside the component, or by the “Width” controls in Presentation Properties. Use “Full” and “Half” to quickly adjust.
   
3. Add a Hint to select component types, which will display like “Type your email address here” in this example.
   
4. Hide While Disabled switch controls if the component will be visible when it’s disabled. Control when the component is disabled in the calculations tab (Σ).
5. Visible controls if the component is visible when a user is using the form. You can hide components which you don’t want a form user to see.
6. Change the component’s Label. The label is what users see when they use the form, but otherwise it doesn’t affect a form’s functionality. 
   
7. Select an Icon which will show to the left or right of the label, based on the “Position” you select.