Freeform Grid Component

Overview

At its foundation, the Freeform Grid component acts as a container for nesting other Unqork components. In Express View, those nested components render in self-contained rows of the grid, making it a flexible and customizable grid component for creating complex data and displaying interactions.

In addition to nesting simple input fields, you can also use the Freeform Grid component to nest logic components inside the grid, creating row-level logic regardless whether your end-user inputs data inside or outside the grid. It also lets you nest components in other nested components, like displaying a fully-configured Uniform Grid component in each row of the Freeform Grid component.

The Freeform Grid component also provides flexible layout and styling options. These layout options let you create a custom viewing and editing experience that's ideal for complex data display.

The Freeform Grid component also uses a summary-detail view to display data in Express View, letting you easily convey your information hierarchy.

The summary view is an at-a-glance layout that includes the following options:

  • Stacked rows

  • Table

The detail view displays when selecting a row from the summary view. From the detail view, you can explore details and perform actions, like adding, editing, or deleting data.

The detail view includes the following options:

  • Accordion view

  • Modal view

  • Sidebar view

You can mix-and-match most summary and detail views, giving you the flexibility to create custom layouts and complex display logic. For example, your end-user can review information at-a-glance by scrolling through stacked rows. Then, they can select a row to display a modal with more details.

The following video shows three different summary/detail view combinations, applied to the same Freeform Grid component and its data. The only configuration change between each view is the detail view selected. In order: Rows and Sidebar, Rows and Accordion, and Rows and Modal.

You can find the component under the Display & Layout group to the left of the Module Builder.

About the Configuration Window

To learn more about general component settings and those that display when a component is associated with Data Models, view our General Component Settings article.

Display Panel

Field Text

A static image displaying the UDesigner Freeform Grid component's Display settings.

Setting

Description

Label Text

The heading of the grid that displays to the end-user in Express View. To hide the title in Express View, set Hide Label to  (ON).

Contextual Help

Setting

Description

Tooltip

A short hint that displays when an end-user positions their cursor over the Questionmark Icon (Tooltip) icon. Tooltips can display across more than one line.

Helper Text

A quick tip describing the expected value of an input field. Unlike a Tooltip, Helper Text stays visible under the input field and displays on a single line.

Default State Options

Setting

Description

Hide Label

Setting the Hide Label to  (ON) hides Label Text from displaying in Express View. Your Label Text still displays in the Module Builder.

By default, this setting is set to (OFF).

Hide Field

Displays or hides the component from view. Setting Hide Field to  (ON) hides the component in Express View. Setting it to (OFF) displays the component. The component is always visible in the Module Builder.

By default, Hide Field is set to (OFF).

Formatting

Setting

Description

Customize Button Styling

When set to  (ON), customization fields display for the following buttons:

  • Add Row

  • Cancel Row

  • Update Row

  • Delete Row

To customize each button, edit the fields displayed below the corresponding button's header.

Button Label Text

The Button Label Text identifies the purpose of the button before your end-user clicks it.

Each button has the following default Label Text:

  • Add Row: Create New

  • Cancel Row: Cancel

  • Update Row: Save

  • Delete Row: Delete

Button Style

Sets the visual appearance of the button. Options include: Primary, Secondary, Success, Danger, Warning, Info, Light, Dark, and Link. The Button Style only affects the Button component's appearance and does not effect its function.

Custom CSS Class

Enter a Custom CSS Class to apply to the button. When you update the CSS styling, it applies to all elements that reference this custom class name.

Left/Right Icon

Use these fields to add icons (glyphs) to the left or right of your Button's Label Text. For example, entering glyphicon glyphicon-pencil adds an icon of a pencil to your Button.

The full list of supported GLYPHICONS® glyph codes is available here: https://getbootstrap.com/docs/3.3/components/.

Summary View

The Summary View table is where you set up the information you want displayed in the grid's summary view. You'll define the grid headings and the values to display under that heading. Click New Row to add a new heading.

The top-to-bottom order of rows in your Summary View table creates the left-to-right order of headings in Express View.

Setting

Description

Heading

Enter a heading to display in the summary view.

Property ID

Define the value to display under the heading. You can reference a Property ID in the grid or use a formula that references multiple Property IDs. For example:

  • Using CONCATENATE to join the values of two Text Field components in the grid.

  • Using SUM to total the values of multiple Number components in the grid.

The Property ID or Formula field supports the same formulas as other Unqork components, like the Calculator component. Formulas innclude standard Excel formulas and Moment.js for Date Input fields. You can also string together formulas to create more complex formulas.

To learn more about support formulas in Unqork, view our Supported Formulas page on the Documentation Hub.

Customize Summary and Detail View Group

The following settings let you configure the component's summary and detail view options:

Setting

Description

Choose Summary View

Select which summary view your Freeform Grid component uses:

  • Inline image displaying a selected radio button. Rows: Each row of the grid displays as a stacked row. The headings and values defined in the Summary View table display in each row. To display a row's full detail view, select the stacked row.

  • Inline image displaying a selected radio button. Table: Each row of the grid displays as a row in a table. The headings defined in the Summary View table display at the top of the table. The accompanying values display as a row in the table. To display a row's full detail view, select the table row.

Customize Detail View

Select which detail view your Freeform Grid component uses:

Modal Title

Displays when Customize Detail View is set to Inline image displaying a selected radio button.Modal.

Enter a title for the detail view modal.

Sidebar Title

Displays when Customize Detail View is set to Inline image displaying a selected radio button.Sidebar.

Enter a title for the detail view sidebar.

Adding a Freeform Grid Component

In this configuration, you'll use a Freeform Grid component to let end-users create a list of guests that are joining a reservation. This simple usage of the Freeform Grid component highlights its support for nesting components, including nesting components in other nested components.

This configuration focuses on how to use the Freeform Grid component for basic information collection. To learn about more complex configuration scenarios, including notes on using logic components with the Freeform Grid, visit the Uniform Grid and Freeform Grid: Logic and Referencing Syntax article.

Configure the Freeform Grid Component

For this configuration, the Freeform Grid uses the Rows summary view with a Modal detail view. The modal is where the end-user fills out all the fields nested in the Freeform Grid. The summary view then displays the values from some of the nested components, as defined in the Summary View table.

1. Drag and drop a Dropdown Component Icon Freeform Grid component onto the canvas.
2. In the Property ID field, enter freeformGridGuests.
3. In the Label Text field, enter Guests.
4. In the Helper Text field, enter Please list all guests who will be on this reservation.
5. Set the Customize Button Styling toggle to  (ON).
6. Complete the Summary View table as follows:

Heading

Property ID

Guest Requests

requests

Email

email

Full Name

=CONCATENATE(firstName, " ", lastName)

By using a concatenation formula that references the firstName and lastNameProperty IDs, the summary view can include the guest's full name while the submission data stores individual values.

7. Under Choose Summary View, select Inline image displaying a selected radio button. Rows.
8. Under Customize Detail View, select Inline image displaying a selected radio button. Modal.
9. Under 'Add Row' Button, in the Button Label Text field, enter Add Guest.
10. Click Save Component.

Configure the Columns Component

A Columns component helps structure and organize the module.

1. Drag and drop a Columns Component Icon Columns component onto your canvas, placing it inside the Freeform Grid component.
2. In the Property ID field, enter col1.
3. Under Formatting, select Inline image of the three columns setting option.(3 columns).
4. Click Save Component.

Configure the Text Field Components

The following two Text Field components to collect some basic information about the guest.

1. Drag and drop two  Text Field components onto the canvas, placing one in column 1 and the other in column 2 of the col1 Columns Component Icon Columns component.
2. Complete the Property ID and Label Text as follows:

Property ID

Label Text

firstName

First Name

lastName

Last Name
3. Set the Required toggle to  (ON) for both fields.
4. Click Save Component for each component as you add it.

Configure the Email Component

Next, you'll use an Email component to collect the guest's email address.

1. Drag and drop an  Email component onto the canvas, placing it in column 3 of the col1 Columns Component Icon Columns component.
2. In the Property ID field, enter email.
3. In the Label Text field, enter Email.
4. Set the Required toggle to  (ON).
5. Click Save Component.

Configure the Uniform Grid Component

This Uniform Grid component collects phone numbers using a nested Phone Number component and Dropdown component. Using a Uniform Grid makes it easy for the end-user to add multiple phone numbers, if needed.

1. Drag and drop a Dropdown Component Icon Uniform Grid component onto the canvas, placing it below the col1 Columns Component Icon Columns component inside the freeformGridGuests Dropdown Component Icon Freeform Grid component.
2. In the Property ID field, enter uniformGridPhoneNumber.
3. In the Label Text field, enter Phone Number(s).
4. In the Helper Text field, enter Enter your phone number(s) below:.
5. Set the Customize Button Styling toggle to  (ON).
6. Under 'Add Row' Button, in the Button Label Text field, enter Add Number.
7. Navigate to the Dropdown Component Icon Uniform Grid component's Validation settings.
8. In the Invalid Error field, enter Please add at least one phone number.
9. In the Minimum Number of Allowed Rows field, enter 1.
10. Click Save Component.

Configure the Phone Number Component

Configure a Phone Number component inside the Uniform Grid component to collect guest phone numbers.

1. Drag and drop a Phone Number component onto the canvas, placing it inside the uniformGridPhoneNumber Dropdown Component Icon Uniform Grid component.
2. In the Property ID field, enter phoneNumber.
3. In the Label Text field, enter Phone Number.
4. Click Save Component.

Configure the Dropdown Component

Configure a Dropdown component inside the Uniform Grid component to let guests identify if the phone number they entered is a home, mobile, or work phone number.

1. Drag and drop a Dropdown Component Icon Dropdown component onto the canvas, placing it inside the uniformGridPhoneNumber Dropdown Component Icon Uniform Grid component.
2. In the Property ID field, enter numberType.
3. In the Label Text field, enter Number Type.
4. Complete the Values table as follows:

 

Label

Value

1

Mobile

mobile

2

Home

home

3

Work

work
5. Click Save Component.

Configure the Radio Buttons Component

The next three components, the Radio Buttons, Text Area, and Decisions components, work together to form a specific functionality. Based on the answer to the Radio Buttons component, the Decisions component either makes the hidden Text Area component visible or it remains hidden.

1. Drag and drop a Radio Buttons component onto the canvas, placing it inside the freeformGridGuests Dropdown Component Icon Freeform Grid component and below the uniformGridPhoneNumber Dropdown Component Icon Uniform Grid component.
2. In the Property ID field, enter requests.
3. In the Label Text field, enter Does this guest have any accommodation requests or other restrictions (e.g. allergies)?.
4. Complete the Values table as follows:

 

Label

Value

1

Yes

Yes

2

No

No
5. Set the Required toggle to  (ON).
6. Click Save Component.

Configure the Text Area Component

Based on the radio-button choice the guest makes, this Text Area component becomes visible to add further information.

1. Drag and drop a Icon Text Area component onto the canvas, placing it below the requests Radio Buttons component.
2. In the Property ID field, enter guestNotes.
3. In the Label Text field, enter Please list your accommodation requests or other notes:.
4. Set the Hide Field toggle to  (ON).
5. Click Save Component.

Configure the Decisions Component

Lastly, you'll configure a Decisions component with the following if/then logic:

  • If the end-user selects Yes from the requests Radio Buttons component, then make the guestNotes Icon Text Area component visible.

  • If the end-user selects No, then keep the guestNotes Icon Text Area component hidden.

1. Drag and drop a Decisions Component icon Decisions component onto the canvas, placing it below the guestNotes Icon Text Area component.
2. In the Property ID and Canvas Label Text fields, enter ruleRequests.
3. Set the Trigger Type to Watch.
4. Complete the Inputs table as follows:

 

Source

Alias

Type

Required

1

requests

 

exact

Checked Box Icon (checked)
5. Complete the Outputs table as follows:

 

Source

Type

1

guestNotes

visible
6. Complete the Conditionals table table as follows:

 

requests

guestNotes_visible

1

Yes

yes

2

No

no
7. Click Save Component.
8.  Save  your module.

Preview Your Configuration

If you need to troubleshoot your work, here's how the completed configuration looks in the Module Builder:

Static image displaying the completed Freeform Grid use case in the UDesigner Module Builder.

You're now ready to test out your configuration. Click Preview to open your module in Express View.

Resource