Introduction to Display & Layout

Advanced Datagrid Component

The Advanced Datagrid component helps you organize other components. But, unlike the Data Grid, the Advanced Datagrid displays them in a separate modal.

When designing an Advanced Datagrid component, you'll create headings identify the information in the grid. In Express View, 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. can add, edit, and delete data stored in the grid. All end-user edits take place in a modal A modal is a window that appears on top of the content you are currently viewing..

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

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 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 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., 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 A screen reader is a browser accessibility tool that plays an audio description of the text and alternate text on a website., or apply a custom CSS class Cumulative Layout Shift (CLS) measures how much elements in a webpage shift while using it. Some search engines use the CLS metric to rate a website's accessibility in their search rankings.. 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.

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.

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.

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

• 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 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. the ability to dynamically modify the way they see your data.

To use the Vega Table component, enable the Vega runtime The Vega (v 2.0.0) runtime is the next-generation engine of the UDesigner platform. Vega uses cutting-edge technologies to improve the Creator and end-user experience. 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 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. easily navigate and manage the data in the dashboard.

iFrame Component

The Vega iFrame component lets you embed and display HTML HTML (Hyper Text Markup Language) is the standard markup language for for achieving font, color, graphic, and hyperlink effects when creating web pages. content in your Front-End modules. With this component, you can specify iframe dimensions, or apply a custom CSS class Cumulative Layout Shift (CLS) measures how much elements in a webpage shift while using it. Some search engines use the CLS metric to rate a website's accessibility in their search rankings.. 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 vulnerability used by malicious entities to bypass the access controls of a website. (cross-site scripting) attacks. Bad actors A bad actor is a cybercriminal or organization that might attempt to exploit vulnerabilites in your environment or application. Common exploits used by bad actors include XSS (cross-site scripting) attacks, malware, randsomware, and more. 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.