Freeform Grid Component

Overview

At its foundation, the Freeform Grid component acts as a container for nesting other Unqork components. In Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module 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 End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. 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 A modal is a window that appears on top of the content you are currently viewing. 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 An accordion is a type of menu that displays a list of headers stacked on top of one another., and Rows and Modal A modal is a window that appears on top of the content you are currently viewing..

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 End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module 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 Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View.. Your Label Text still displays in the Module Builder.

By default, the Hide Label toggle is set to (OFF).

Hide Field

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

By default, the Hide Field toggle 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'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 A Property ID is the unique field ID used by Unqork to track and link components in your module. 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.

Actions Panel

Triggers Group

The Freeform Grid component supports creating multiple triggers directly in the component's configuration window. You can choose from various possible triggering events for each trigger. You can also create several triggers that have the same triggering event.

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

Setting

Description

New Row

Click New Row to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs.

When...

Select an action that, when it occurs, executes the trigger.

Actions include the following:

  • Row is Added: Fires the trigger when a new row is added to the grid.

  • Row is Deleted: Fires the trigger when any row in the grid is deleted.

  • Row is Saved: Fires the trigger when any row in the grid is saved.

Property ID

Enter the Property ID of the component to trigger when the specified When... action occurs.

 

Validation Panel

Validation

A static image displaying the UDesigner Email component's Validation settings.

Setting

Description

Invalid Grid Error

An error message that displays when the grid has validation errors.

Invalid Row Error

An error message that displays when a specific row of the grid has validation errors.

Set Number of Allowed Rows

Setting

Description

Minimum Number of Allowed Rows

Sets the minimum number of allowed rows in the grid.

Minimum Length Error Message

An error message that displays when the grid does not meet the minimum number of rows set.

Maximum Number of Allowed Rows

Sets the maximum number of allowed rows in the grid.When the maximum number of rows is met, the Freeform Grid component's Create New button is disabled and end-users cannot add any new rows.

When the maximum number of rows is met, the Freeform Grid component's Create New button is disabled and end-users cannot add any new rows.

Maximum Length Error Message

An error message that displays when the grid exceeds the maximum number of rows set.

Advanced Panel

Additional Styling

A static image displaying the UDesigner Email component's Advanced settings.

Setting

Description

Custom CSS Class

Enter a Custom CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules.

Updated CSS styling applies to all components that reference this custom class name.

Structure of a Freeform Grid Component's Data

Data entered in the Freeform Grid component stores as an array of objects under a single key. The top-level key is the Freeform Grid component's Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module., and each row added to the Freeform Grid component in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View. becomes a new object in the array of row objects. In each row object, row-specific values store as explicit key/value pairs, where the keys are the Property IDs of the components nested in the Freeform Grid component. The values are those entered by the end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. in that row

Depending on the component type, values store as different data types and data structures. The following image shows an example of how two rows of data entered in a Freeform Grid component display in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.:

Static image displaying an example of how the Freeform Grid data shows in the DevTools Console.

Freeform Grid Data Storage: Grid Cache and Submission Data Object

There are a couple of locations where data can be read or written to the Freeform Grid component:

  • Grid cache: Any data entered in the Freeform Grid component is written to the cache. Cached data is temporarily saved in the browser, but the data only writes to the submission data object after a grid Save event occurs.

  • Submission data object (submission.data): The submission data object stores data for all components in the module. The Freeform Grid component's data is accessible from the submission.data.[gridPropertyId] path. Data from the Freeform Grid component writes to the submission data object after a grid Save event.

To get a snapshot of data in the grid cache, you can use the following Angular Command The Angular command, or data command, is a tool that displays submission data in a browser's developer console. In Express View, enter the following command in the devtool console: angular.element('.unqorkio-form').scope().submission in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.: angular.element(document.body).injector().get("CacheService").cache. To get a snapshot of data in the submission data object, use the following Angular command: angular.element('.unqorkio-form').scope().submission.

The following diagram shows a simplified flow of data in a module containing a Freeform Grid component, after both a grid and moduleSave event.

In the image below, assume myGrid is the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. of the Freeform Grid component. Then, submission.data.{gridPropertyID} is the data access path for the Freeform Grid component's array of row objects.

Static image displaying the flow of data in a module that contains a Freeform Grid component after a grid save event and save event occur.

The data from the input component outside of the Freeform Grid component automatically syncs to the submission data object. The data from the input components inside the Freeform Grid component only syncs to the grid cache. A grid Save event is required for the grid cache to sync to the submission data object. That said, none of these changes can save as a submission in the database until a moduleSave event occurs.

The grid cache impacts how logic components nested inside a Freeform Grid component behave. To learn about using logic components with the Freeform Grid component, including how to use grid referencing syntax, visit the Uniform Grid and Freeform Grid: Logic and Referencing Syntax article.

Due to limitations of the grid cache, nesting an Advanced Datagrid component(s) is not supported in a Freeform Grid component.

Adding a Freeform Grid Component

In this configuration, you'll use a Freeform Grid component to let end-users End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. 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 A modal is a window that appears on top of the content you are currently viewing. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module., 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter email.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter uniformGridPhoneNumber.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter phoneNumber.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter numberType.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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 icon 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter requests.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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 icon Radio Buttons component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter guestNotes.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. 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 icon 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . fields, enter ruleRequests.
3. Set the Trigger Type to Watch.
4. Complete the Inputs table Enter inputs components and actions you want the component to perform. as follows:

 

Source

Alias

Type

Required

1

requests

 

exact

Checked Box Icon (checked)
5. Complete the Outputs table Enter outputs components and actions you want the component to perform. 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 Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View..

Overview

At its foundation, the Freeform Grid component acts as a container for nesting other Unqork components. In Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module 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 End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. 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 A modal is a window that appears on top of the content you are currently viewing. 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 An accordion is a type of menu that displays a list of headers stacked on top of one another., and Rows and Modal A modal is a window that appears on top of the content you are currently viewing..

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

  • Creating a dashboard to review customer information, with high-level information available in the summary view and full customer details available in detail view.

  • Displaying a list of available doctors in the area, where end-users can select a doctor's name to reveal their contact information, without leaving the page.

  • Adding or reviewing beneficiaries for an insurance policy.

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

Static image displaying the Freeform Grid Display configuration settings.

Setting

Description

Title

The heading of the grid. The end-user sees this title at the top of the grid in Express View.

It's best practice to always include a title. To hide the title in Express View, set Hide Title to  (ON).

Title Tooltip

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

The tooltip displays next to the title.

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.

Custom CSS Class

Enter a Custom CSS Cascading Style Sheets (CSS) is a style sheet language used for presenting how a HTML or XML document looks to end-users. Class to apply to your component. Custom CSS lets you maintain a consistent look and feel when the field or element is part of a template or multiple modules.

Updated CSS styling applies to all components that reference this custom class name.

Summary View Table

The Summary View table is where you set the information that displays in your grid's summary view. Define headings as well as what values to show under that heading.

Click + New 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 or Formula

Define the value to display under the heading. You can reference a Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. 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 set the summary and detail view options for your Freeform Grid.

Setting

Description

Choose Summary View

Select which summary view your Freeform Grid uses:

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

  • Table: Each row of the grid displays as a row in a table. The headings defined in the Summary View table display once 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 uses:

  • Accordion: The detail view expands below the row.

  • Modal: The detail view opens as a modal in the same frame.

  • Sidebar: The detail view displays as a sidebar in the same frame.

Modal Title

Displays when Customize Detail View is set to Modal.

Enter a title for the detail view modal.

Sidebar Title

Displays when Customize Detail View is set to Sidebar.

Enter a title for the detail view sidebar.

Additional Display Settings

Setting

Description

Hide Component

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

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

Hide Title

Setting the Hide Title toggle to  (ON) stops the title from displaying in Express View. The title still displays in the Module Builder.

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

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'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/.

Actions Panel

Static image displaying the Freeform Grid Actions configuration settings.

Triggers Group

The Freeform Grid component supports creating multiple triggers directly in the component's configuration window. You can choose from three possible triggering events for each trigger. You can also create several triggers that have the same triggering event.

Setting

Description

+ Add Trigger

Click + Add Trigger to create a new trigger. Triggers let you create if/then rules to trigger components when a specified action occurs.

When...

Select an action that, when it occurs, executes the trigger.

Actions include the following:

  • Row is Added: Fires the trigger when a new row is added to the grid.

  • Row is Deleted: Fires the trigger when any row in the grid is deleted.

  • Row is Saved: Fires the trigger when any row in the grid is saved.

Then...

Enter the Property ID of the component to trigger when the specified When... action occurs.

Validation Panel

Static image displaying the Freeform Grid Validation configuration settings.

Set Number of Allowed Rows Group

Setting

Description

Minimum

Sets the minimum number of allowed rows in the grid.

Minimum Error Message

An error message that displays when the grid does not meet the minimum number of rows set.

Maximum

Sets the maximum number of allowed rows in the grid.When the maximum number of rows is met, the Freeform Grid component's Create New button is disabled and end-users cannot add any new rows.

Maximum Error Message

An error message that displays when the grid exceeds the maximum number of rows set.

Validation

Setting

Description

Invalid Error

An error message that displays when the grid has validation errors.

Invalid Row Error

An error message that displays when a specific row of the grid has validation errors.

Structure of a Freeform Grid Component's Data

Data entered in the Freeform Grid component stores as an array of objects under a single key. The top-level key is the Freeform Grid component's Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module., and each row added to the Freeform Grid component in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View. becomes a new object in the array of row objects. In each row object, row-specific values store as explicit key/value pairs, where the keys are the Property IDs of the components nested in the Freeform Grid component. The values are those entered by the end-user End-users, also known as Express Users, are the individuals accessing an application through Express View. In most cases, end-users are the customers using the product. in that row

Depending on the component type, values store as different data types and data structures. The following image shows an example of how two rows of data entered in a Freeform Grid component display in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.:

Static image displaying an example of how the Freeform Grid data shows in the DevTools Console.

Freeform Grid Data Storage: Grid Cache and Submission Data Object

There are a couple of locations where data can be read or written to the Freeform Grid component:

  • Grid cache: Any data entered in the Freeform Grid component is written to the cache. Cached data is temporarily saved in the browser, but the data only writes to the submission data object after a grid Save event occurs.

  • Submission data object (submission.data): The submission data object stores data for all components in the module. The Freeform Grid component's data is accessible from the submission.data.[gridPropertyId] path. Data from the Freeform Grid component writes to the submission data object after a grid Save event.

To get a snapshot of data in the grid cache, you can use the following Angular Command The Angular command, or data command, is a tool that displays submission data in a browser's developer console. In Express View, enter the following command in the devtool console: angular.element('.unqorkio-form').scope().submission in the DevTools Console The DevTools Console helps you securely store, build, test, and deploy your software.: angular.element(document.body).injector().get("CacheService").cache. To get a snapshot of data in the submission data object, use the following Angular command: angular.element('.unqorkio-form').scope().submission.

The following diagram shows a simplified flow of data in a module containing a Freeform Grid component, after both a grid and moduleSave event.

In the image below, assume myGrid is the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. of the Freeform Grid component. Then, submission.data.{gridPropertyID} is the data access path for the Freeform Grid component's array of row objects.

Static image displaying the flow of data in a module that contains a Freeform Grid component after a grid save event and save event occur.

The data from the input component outside of the Freeform Grid component automatically syncs to the submission data object. The data from the input components inside the Freeform Grid component only syncs to the grid cache. A grid Save event is required for the grid cache to sync to the submission data object. That said, none of these changes can save as a submission in the database until a moduleSave event occurs.

The grid cache impacts how logic components nested inside a Freeform Grid component behave. To learn about using logic components with the Freeform Grid component, including how to use grid referencing syntax, visit the Uniform Grid and Freeform Grid: Logic and Referencing Syntax article.

Due to limitations of the grid cache, nesting an Advanced Datagrid component(s) is not supported in a Freeform Grid component.

Adding a Freeform Grid Component

In this configuration, you'll use a Freeform Grid to let end-users list guests joining a reservation. This simple usage of the Freeform Grid component highlights its support for nesting components, including nesting components within already-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.

Here's how the completed configuration looks in the Module Builder:

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

Configure the Freeform Grid Component

For this configuration, the Freeform Grid uses the Rows summary view with a Modal A modal is a window that appears on top of the content you are currently viewing. 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter freeformGridGuests.
3. In the Title field, enter Guests.
4. In the Helper Text field, enter Please list all guests who will be on this reservation.
5. Complete the Summary View table as follows:

Heading

Property ID or Formula

Guest Requests

requests

Email

email

Full Name

=CONCATENATE(firstName, " ", lastName)

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

6. Under Choose Summary View, select Rows.
7. Under Customize Detail View, select Modal.
8. Set the Customize Button Styling toggle to (ON).
9. Under Triggers, select + Add Trigger.
10. Under 'Add Row' Button, in the Button Label Text field, enter Add Guest.

Static image displaying how the Freeform Grid component's Display settings are configured.

11. Click Save.

Configure the Columns Component

A Columns component helps structure and organize the modal.

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter col1.
3. Under Column Layout, select Inline image of the three columns setting option. (3 columns).
4. Click Save & Close.

Configure the Text Field Components

The following two Text Field components and the Email component collect some basic information about the guest.

1. Drag and drop two  Text Field components onto the canvas, placing one in column 1 of the Columns component, and the other in column 2 of the Columns component.
2. Complete the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. and Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. as follows:
Property ID Label Text

firstName

First Name

lastName

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

Configure the Email Component

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter email.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Email.
4. Set the Required toggle to (ON).
5. Click Save & Close.

Configure the Uniform Grid Component

This Uniform Grid collects phone numbers, with the help of 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.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter uniformGridPhoneNumber.
3. In the Title 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. Under Set Number of Allowed Rows, in the Minimum field, enter 1.
8. Under Validation, in the Invalid Error field, enter Please add at least one phone number.
9. Click Save.

Configure the Phone Number Component

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter phoneNumber.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Phone Number.
4. Click Save & Close.

Configure the Dropdown Component

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 A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter numberType.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Number Type.
4. Complete the Values table as follows:

 

Option Label

Data Source Values

1

Mobile

mobile

2

Home

home

3

Work

work
5. Click Save & Close.

Configure the Radio Buttons Component

The next three components, the Radio Buttons, Text Area, and Decisions components, work together. Based on the answer to the Radio Buttons, the Decisions component will either make the hidden Text Area component visible or keep it hidden.

1. Drag and drop a Radio Buttons icon Radio Buttons component onto the canvas, placing it inside the Freeform Grid, below the Uniform Grid component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter requests.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Does this guest have any accommodation requests or other restrictions (e.g. allergies)?.
4. Complete the Values table as follows:

 

Option Label

Value to Store in Submission Data

1

Yes

Yes

2

No

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

Configure the Text Area Component

1. Drag and drop a Icon Text Area component onto the canvas, placing it below the requests Radio Buttons icon Radio Buttons component.
2. In the Property ID A Property ID is the unique field ID used by Unqork to track and link components in your module. field, enter guestNotes.
3. In the Label Text Label Text conveys what the input component is and what information it displays. Enter the purpose of the corresponding component or field. field, enter Please list your accommodation requests or other notes:.
4. Set the Hide Field toggle to (ON).
5. Click Save & Close.

Configure the Decisions Component

The if/then logic for this Decisions component is:

  • If the end-user selects Yes in the requests Radio Buttons icon Radio Buttons component, then make the guestNotes Icon Text Area visible.
  • If the end-user selects No, then keep the guestNotes Icon Text Area 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 A Property ID is the unique field ID used by Unqork to track and link components in your module. and Canvas Label Text Canvas Label Text indicates the purpose of the corresponding field or component. For non-input components, the Canvas Label Text isn't end-user facing, and only appears in the . fields, enter ruleRequests.
3. Set the Trigger Type to Watch.
4. Complete the Inputs table Enter inputs components and actions you want the component to perform. as follows:
 

Property ID

Alias

Type

Required

1

requests

 

exact

Checked Box icon (Checked)
5. Complete the Outputs table Enter outputs components and actions you want the component to perform. as follows:
 

Property ID

Type

1

guestNotes

visible
6. Complete the Micro Decisions table as follows:

 

Input Values

Output Values

 

requests

guestNotes_visible

1

Yes

yes

2

No

no

Static image displaying how the Freeform Grid component's Actions settings are configured.

7. Click Save & Close.
8.  Save   your module.

Preview Your Configuration

You're now ready to test out your configuration. Click Preview to open your module in Express View Express View is how your end-user views your application. Express View also lets you preview your applications to test your configuration and view the styling. This is also the view your end-users will see when interacting with your application. After configuring a module, click Preview in the Module Builder to interact with the module in Express View..

Resource