Introduction to Display & Layout

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 display in your chosen column design layout. Drag and drop components into these boxes and organize them into each column.

Content Component

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.

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.  Built with large-scale data sets in mind, use a Dynamic Grid to focus on supporting high-performance data consumption, analysis, and exploration use cases.  Dynamic Grid also includes features like pivot mode, data aggregation and grouping, and more.

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

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.

HTML Element Component

The HTML Element component adds HTML formatting  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.

Image Component

The Vega Image component lets you display images in your Front-End modules. With this component, you can specify image dimensions, alternate text, or apply a custom CSS class. Use this component by specifying the URL of external image files, or image files stored in Managed Assets.

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.

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.

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.

Rich Text Editor Component

The Rich Text Editor component is an interactive component for rich text content. You can use the component in the following ways:

• To give your end-users 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.

• 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.

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.

Uniform Grid Component

The Uniform Grid component 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.

Vega Table Component

The Vega Table component is a powerful tool that lets you gather, organize, and display data in your application. Using the Vega Table component, you can retrieve data and customize how it displays. You can also use Vega Table operations that give end-users the ability to dynamically modify the way they see your data.

To use the Vega Table component, enable the Vega runtime in your module. To learn more about enabling Vega, see the Adding a Vega Table Component section of this article.

Like the Panel or Field Group components, the Vega Table component acts as a grouping or storage component for fields (other components) configured inside it. Instead of creating self-contained pages or sections, the Vega Table uses the component fields to create table headers. You can add any Unqork component to your Vega Table, but each component behaves differently depending on the view settings of your Vega Table component.

Common ways you can use the Vega Table component include:

• Collecting, editing, and displaying  data from different sources on a single screen, such as a dashboard.

• Displaying dynamic data that end-users can manipulate using Vega Table Operations.

• Applying logic (rules, calculations, procedural operations, and so on) to multiple data records simultaneously.

To learn more about Vega Table operations, view our Vega Table Operations reference guide.

ViewGrid Component

Unqork applications often use dashboards, and configuring a ViewGrid component is the simplest way to create and customize a basic dashboard display.  ViewGrid components let you view and manage submission data, work queues, and large data sets. Tailor your Viewgrid component to include any number of columns, buttons, and filters as needed. These features let end-users easily navigate and manage the data in the dashboard.

iFrame Component

The Vega iFrame component lets you embed and display HTML content  in your Front-End modules. With this component, you can specify iframe dimensions,  or apply a custom CSS class. Use this component by entering an external URL address of a page you want to display inside the iframe.

Iframes are susceptible to XSS (cross-site scripting) attacks. Bad Actor can perform XSS attacks and change the source site URL, install malware, steal information, or hijack clicks and keystrokes.

To embed Unqork content outside of the Unqork Platform without using iframes, view our Embedded User Interface article.