Introduction to Display & Layout
Estimated Reading Time: 2 minutes
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
- Advanced Datagrid
- Freeform Grid
- Unifrom Grid
- Field Group
- 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
One of the best ways to increase end-user experience in your application is with an HTML Element component. The HTML Element component allows you to add HTML formatting right into your application. 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.
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.
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.
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.
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.
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.
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 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.
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 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 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.
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 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. After configuring a module, click Preview in the Module Editor 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.