Introduction to Display & Layout

Estimated Reading Time:  2 minutes

Overview

As you work with more components and more complexity, it's best to stay organized. Modules must read easily from left to right and top to bottom. This includes organizing input and output components above and below your logic components. Display & Layout components help you group your components by relationship. Not only do Display & Layout components help you organize components in the Module Builder, but they can provide a better user experience for your end-users.

Display & Layout components include:

• HTML Element
• Data Grid
• Matrix
• Columns
• Panel
• Table
• Advanced Datagrid
• Navigation
• Freeform Grid
• Unifrom Grid
• ViewGrid
• Field Group
• Repeater
• Dynamic Grid
• Rich Text Editor

This is a comprehensive list of Display & Layout components in Unqork. It's important to note that you won't use all of these components in a single use case.

The Display & Layout group is on the left of the Module Builder under the Secondary Fields group.

What You'll Learn

In this article, you'll learn the function of each Display & Layout component.

Display & Layout Components

There are 16 Display & Layout components in Unqork.

HTML Element Component

The HTML Element component adds HTML HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages. formatting into your application. In Express View Express View is how your end-user views you 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., you can see your HTML Elements render along with the rest of your module.

You can use an HTML Element component to do the following:

• Inserting a custom logo or image.

• Showing a section heading or break.

• Adding a paragraph of static text.

WARNING  There are various security concerns when using the Content component. To learn more, see our Best Practices: Security for Content Components article.

DataGrid Component

The Data Grid component is one of Unqork's long-standing layout components. Think of a Data Grid as a place to organize your components on your canvas. The Data Grid organizes your fields in rows and columns. But, instead of showing one fieldset at a time, your end-user can see as many fieldsets as you allow. Meaning, your end-user sees a continuous stream of organized fields in the same view. You can use this component to show multiple entries for a small number of fields. As your end-user enters their data, they can add or remove rows as needed.

Matrix Component

The Matrix component allows you to create a series of questions that have the same responses. Let's say you're creating a survey and want your end-user to answer several questions on a scale of 1 to 5. A Matrix component can help you build that.

Columns Component

Use the Columns component to customize the layout of your module. The Columns component includes pre-made column designs and the ability to build custom column design layouts. Once you've added a Columns component to your module, blue Drag and Drop boxes appear in your chosen column design layout. Drag and drop components into these boxes to organize them into each column.

Panel Component

The Panel component creates self-contained sections or pages in modules. Panels act as a storage unit that houses components. You can also use Panels to help with navigation, create pop-up modals, or display components from other modules.

Table Component

The Table component organizes components into rows and columns for efficient readability. The Table component is similar to the Columns component. But, the Columns component can only organize components in vertical groups. The Table component aligns components both vertically and horizontally.

Advanced Datagrid Component

The Advanced Datagrid is another of Unqork's long-standing layout components. Like the Data Grid, the Advanced Datagrid helps you organize other components. But, unlike the Data Grid, the Advanced Datagrid displays them in a separate modal.

When designing an Advanced Datagrid, you'll create headings for your end-user to see. In Express View, your end-users can add and store data in your grid. Your end-users can also edit and delete any stored data. All end-user edits take place in the modal instead of going through the module itself.

Navigation Component

The Navigation component creates a multi-page navigation experience in a single module. The Navigation component uses Panel components to represent different pages for 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. to navigate through an application.

By default, the Navigation component has a variety of navigation and event buttons. These include:

• Previous and Next buttons
• A Save Draft and Exit button
• A Submit button

TIP  You can also add custom navigation buttons. To learn more, see our Custom Navigation Buttons article.

The default navigation style is navigation bubbles at the top of the page. You can also use tabs or a table of contents-style navigation.

Freeform Grid Component

The Freeform Grid component is a flexible, highly customizable grid component that allows you to create complex data and display interactions. The Freeform Grid even supports nesting components in already-nested components. For example, displaying a fully-configured Uniform Grid within each row of the Freeform Grid.

Uniform Grid Component

The Uniform Grid is a highly-customizable grid component that you can use to fine-tune the data entry, viewing, and editing experience for end-users. You can also nest logic components in 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.

ViewGrid Component

Unqork applications often use dashboards, and configuring a ViewGrid component is the simplest way to create a basic dashboard display. As with all things Unqork, ViewGrids offer flexibility. ViewGrids let you to view and manage submission data, work queues, and large data sets. Tailor your Viewgrid to include any number of columns, buttons, and filters to best suit your needs. These features allow 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. to easily navigate and manage the data in the ViewGrid.

Field Group Component

The Field Group component lets you organize fields and components together in one group. Field Group components are like Panel components, but you won't use Field Group components for navigation. You can also apply a CSS style to a Field Group component to call the group out to 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.. Here are some real-world examples of when you might use a Field Group component:

• A stylized section of a page asking for personal information.

• A boxed-in group of optional survey questions at the end of an application.

• Grouped and hidden follow-up questions that appear when an end-user selects a specific answer.

• Disabling or hiding all fields in a group.

Repeater Component

The Repeater component is a unique component that lets you interface with table-based data. You can add multiple components inside the Repeater component to display repeating rows of data.

Let's say you have a Data Table with two columns (name and age) and five rows of data. In the Module Builder, you could add two components inside a Repeater component. First, a Text Field called Name, and second, a Number component called Age. In Express View you'd see a total of five Name Text Fields and five Age Number components. Each set of Text Field and Number components gets pre-filled with values from each row of your Data Table. Then, they repeat down the page until every row of data appears. Your end-user could even edit those pre-filled fields and save the new values to the submission data.

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 component is built with large-scale data sets in mind. Its focus is supporting high-performance data consumption, analysis, and exploration use cases. Because of this, the Dynamic Grid includes features like pivot mode, data aggregation and grouping, and more. When using the Dynamic Grid, 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.

Rich Text Editor Component

The Rich Text Editor component is an interactive component for rich text Rich text is text that supports various types of formatting, like images and colors. content. You can use the component in the following ways:

• To give your 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. a familiar tool to input and format rich text content.

• To easily create and format rich text content in the Module Builder. Then, display that content as read-only content in Express View Express View is how your end-user views you 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..

• Give your end-users a familiar tool to input and format rich text content.

• Easily create and format rich text content in the Module Builder. Then, display that content as read-only for your end-users in Express View.