Introduction to the Grid System

Overview

When looking to gather or display information, Unqork's grid components are the go-to choice. Grids are the foundation of many applications and interaction capabilities (even if you don't immediately recognize them as grids!). The Grid System brings three entirely new grid components to the Unqork Designer Platform:

  • The Dynamic Grid component
  • The Uniform Grid component
  • The Freeform Grid component

Each component in the Grid System is guided by common standards, including:

  • Sharing the same core functionality: Because each grid component has consistent capabilities, you can choose a component based on your use case's needs, not the component's limitations. For example, each grid uses the same data structure and has advanced logic capabilities.
  • Providing a cohesive configuration experience: With a consistent approach to configuration, you can pick the grid component you need, not just the one you're most familiar with. Coupled with support for advanced tooling, you can build powerful applications faster than ever before.
  • Support for more use cases and UX/UI patterns: The Grid System unlocks a wide variety of use cases, from simple data entry to data exploration and data analysis. We're also bringing support for more complex UX and UI patterns, so you can meet a wider variety of design requirements.

What You'll Learn

In this article, you'll learn:

The Dynamic Grid Component

The Dynamic Grid component combines the ease and usability of a spreadsheet with the power and flexibility of an Unqork grid component. In Express View, your end-user gets a streamlined, spreadsheet-like data entry and exploration experience. And as an Unqork grid component, the Dynamic Grid supports data validation, data integrity controls, and complex logic.

The Dynamic Grid focuses on supporting high-performance data consumption that lets your end-user focus on the data. You can expect efficient inline data editing, simple keyboard navigation, and data legibility. Ensuring the integrity of your data is important. That's why the Dynamic Grid component provides a strong schema validation framework. When configuring your Dynamic Grid, you’ll assign each column a column type. For example, Number, Text Field, or Checkbox. Having defined column types means your end-user can only enter values that match your data model. You can also set column-specific validation rules for even greater control.

For exploration and analysis use-cases, the Dynamic Grid includes features like pivot mode, data aggregation and grouping, and more. You can also enable sorting and filtering functions. Even with data sets of up to 5,000 rows/50,000 data points, you'll experience quick loading and lag-free scrolling. (And we're continuously working on meeting those same high performance benchmarks with even larger data sets.)

Here's how the Dynamic Grid component looks in action in Express View:

Ready to learn more about the Dynamic Grid component and all its features? See our Dynamic Grid Component and Dynamic Grid: Targeted Logic and Referencing Syntax articles.

The Uniform Grid Component

The Uniform Grid component is highly-customizable and lets you fine-tune the data entry, viewing, and editing experience for end-users. With its traditional table-based layout, the Uniform Grid is well-suited to inline editing with data in full view. The Uniform Grid has flexible styling options and customizable interactions. For example, customizing how end-users can invoke the edit state of the whole grid or a selected row. The Uniform Grid works well for scenarios where end-users need a rich data entry experience, without a set number of rows. Such as, listing guests for a booking or adding beneficiaries to an insurance policy.

At its foundation, the Uniform 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. And because you're using Unqork components, each input field supports full component-level configuration. The Uniform Grid doesn't only support nesting simple input fields. You can also nest logic components within the grid, creating row-level logic based on end-user inputs. For example, showing or hiding fields in the row based on input to another component in that row.

The Uniform Grid currently supports nesting Primary Fields, Secondary Fields, and the following Data & Event Processing components used to configure logic: Calculator, Data Workflow, Decisions, Initializer, and Plug-In. Nesting other components may result in unexpected behavior.

While you can easily customize your Uniform Grid’s appearance, the Uniform Grid is best when a simple table layout is appropriate. For more advanced layout options, try the Freeform Grid.

Take a look a the following GIF to see how a Uniform Grid component works in Express View:

Ready to learn more about the Uniform Grid component and all its features? See our Uniform Grid Component and Uniform Grid and Freeform Grid: Logic and Referencing Syntax articles.

The Freeform Grid Component

The Freeform Grid component is flexible, highly-customizable, and lets you create complex data and display interactions. Like the Uniform Grid, 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. The Freeform Grid also supports nesting logic components within the grid, creating row-level logic based on end-user inputs both inside and outside the grid. The Freeform Grid even supports nesting components within already-nested components. For example, displaying a fully-configured Uniform Grid within each row of the Freeform Grid.

The Freeform Grid component brings flexible layout and styling options to the grid components line up. Its multiple layout options let you create a custom viewing and editing experience that's ideal for complex data display. The Freeform Grid uses a summary-detail view to display data in Express View. This summary-detail approach lets you easily convey information hierarchy.

The summary view is the at-a-glance layout. Summary view presents a subset or summarized view of your data. The summary view options include:

  • Stacked rows

  • Table

The detail view displays upon 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 options include:

  • Accordion view

  • Modal view

  • Sidebar view

You can mix-and-match most summary and detail views. This gives 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 select a row to bring up a modal that shows more details.

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

Ready to learn more about the Freeform Grid component and all its features? See our Freeform Grid Component and Uniform Grid and Freeform Grid: Logic and Referencing Syntax articles.

When to Use Each Grid Component

Now that you've learned about each component in the Grid System, let's compare them side-by-side. Hopefully, you already have a sense for what use cases each grid component suits. Generally speaking, though:

  • If your focus is high-performance data analysis or exploration, use the Dynamic Grid. It's also a great option for simple data entry with a spreadsheet-like experience.
  • If you're looking for advanced styling capabilities, try the Uniform Grid or Freeform Grid. They're well-suited to visual customization and a richer data entry or viewing experience.
  • If you're looking for flexible layout options or the ability to show information hierarchy, the Freeform Grid is the best choice. The Dynamic Grid and Uniform Grid both use a table-based layout in Express View. The Freeform Grid offers a variety of summary and detail view options and combinations.

For more guidance, you can refer to the following table. It highlights and compares key features across each component:

Key Features Dynamic Grid Uniform Grid Freeform Grid

Allows Inline Editing

Yes

Yes

Yes

Allows Input Validation

Yes

Yes

Yes

Allows Trigger Events

Yes

Yes

Yes

Allows Targeted Logic Integration

Yes

Yes

Yes

Supports Server-Side Execution

Yes

Yes

Yes

Suited to Data Analysis & Exploration

Yes

No

No

Optimized for High Performance with Large Data Sets

Yes

No

No

Rich Layout Options

No

No

Yes

Rich Styling Options

No

Yes

Yes

As you can see, basic functionality like inline editing and input validation comes standard. Each component's submission data also follows the same data structure and naming conventions. Entered data stores as an array of row objects under the grid component's Property ID. So, you'll have a single source of truth when referencing fields. You'll also experience the same support for powerful logic and referencing across all three components, including the ability to target logic at the component, column, row, and even cell level. With a cohesive configuration experience across the board, you can choose the component that best meets your use case and UX needs. Whether you're looking to analyze and explore data or collect and present data in an engaging way, the Grid System has you covered.