Introduction to Structuring Modules

Overview

Structuring modules helps maintain simplicity for creators, and presents a unified experience 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.. Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. structure components by uniformly organizing a module's layout. This includes placing input and output components above and below your logic components and using Display & Layout components to group your components by relationship.

Display and Layout Components

Unqork uses grouping and layout components that add structure to your modules. Examples of organization components include Columns Component Icon Columns, Panel, Table, Navigation Component Icon Navigation, and icon Field Group. These components help you nest other components. You'll find these components in the Display & Layout component group of the Module Builder.

The image below shows how the Panel and Columns Component Icon Columns components organize other components into easy-to-read groups.

A static image displaying a module that uses Panel and Column components to organize other components.

Many of the Unqork snippets also have Panels and other organizational configurations. These configurations will help guide you when using a snippet. For instance, here's how the API API Module looks in the Module Builder:

A static image displaying an API Module using Panel components.

Unless your module only has a few components, always include structural components. Using these components improve not only your experience but also your end-user's experience.

Adding Logic to Your Module

One benefit of structural components is that they let you apply logic to a group of settings. One example is setting a Panel component to hidden. This hides all the components in the Panel. You can then configure the whole Panel to show when the 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. performs a certain action.

There are also best practices when configuring logic and Plug-In components. Logic components include the  Calculator, Decisions Component icon Decisions, and Data Workflow components. Each component requires inputs, outputs, and the specific logic you'll need for your module. Some best practices are:

  • Placing input components above their logic component in the Module Builder. This could be an Radio Button component icon Initializer that triggers a Plug-In component.

  • Placing output components below their logic component in the Module Builder. This could be a iconHidden component that contains a Data Workflow output.

  • Group all components involved with a Data Workflow around that Data Workflow component.

Here's a great example of the organization of logic components for a complex bulk processingmodule:

A static image displaying a complex module's layout.

Improved Creator Experience

Adding structure to your modules improves your Creator Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. experience by:

  • Making it easier for others to read and understand your module.

  • Making it easier to find specific components in your module.

  • Improving the ability to troubleshoot and make changes to your module.

The image below shows a variety of components for an Application Management application. Take note of the column organization and grouping of components that share function.

A static image of a module using field groups and columns to sort logic components by likeness.

Improved End-User Experience

Formalizing structure improves your end-user's experience by:

  • Giving your end-user guidance on completing the application process.

  • Organizing content in a readable way.

  • Improving your end-user's efficiency in filling out fields.

Let's look at the previous Application Management module 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.. The previous image shows how well organized the module is on the back-end. But, it should be just as organized on the front-end. In the image below, end-users immediately know it's an Application Management tool. They can also easily follow the fields, drop-downs, and functions of the buttons.

A static image displaying the Application Management Module in Express Views.

Overview

Structuring Components in a module helps maintain simplicity for creators, and presents a unified experience 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.. Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. structure components by uniformly organizing a module's layout. This includes placing input and output components above and below your logic components and using Display & Layout components to group your components by relationship.

Display and Layout Components

Unqork uses grouping and layout components that add structure to your modules. Examples of organization components include Columns Component Icon Columns, Panel, Table, Navigation Component Icon Navigation, and icon Field Group. These components help you nest other components. You'll find these components in the Display & Layout component group of the Module Builder.

The image below shows how the Panel and Columns Component Icon Columns components organize other components into easy-to-read groups.

A static image displaying a module using panels and columns to organize components.

Many of the Unqork snippets also have Panels and other organizational configurations. These configurations will help guide you when using a snippet. For instance, here's how the API API Module looks in the Module Builder:

A static image displaying an API module using panels to organize components.

Unless your module only has a few components, always include structural components. Using these components improve not only your experience but also your end-user's experience.

Adding Logic to Your Module

One benefit of structural components is that they let you apply logic to a group of settings. One example is setting a Panel component to hidden. This hides all the components in the Panel. You can then configure the whole Panel to show when the 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. performs a certain action.

There are also best practices when configuring logic and Plug-In components. Logic components include the  Calculator, Decisions Component icon Decisions, and Data Workflow components. Each component requires inputs, outputs, and the specific logic you'll need for your module. Some best practices are:

  • Placing input components above their logic component in the Module Builder. This could be an Radio Button component icon Initializer that triggers a Plug-In component.

  • Placing output components below their logic component in the Module Builder. This could be a iconHidden component that contains a Data Workflow output.

  • Group all components involved with a Data Workflow around that Data Workflow component.

Here's a great example of the organization of logic components for a complex filtering module:

A static image displaying a complex module using panels and columns to organize components.

Improved Creator Experience

Adding structure to your modules improves your creator experience by:

  • Making it easier for others to read and understand your module.

  • Making it easier to find specific components in your module.

  • Improving the ability to troubleshoot and make changes to your module.

The image below shows a variety of components for a vehicle registration application. Take note of the column organization and grouping of components that share function.

A static image displaying a Car Insurance module using panels and columns to organize components.

Improved End-User Experience

Formalizing structure improves your end-user's experience by:

  • Giving your end-user guidance on completing the application process.

  • Organizing content in a readable way.

  • Improving your end-user's efficiency in filling out fields.

Let's look at the previous vehicle registration module 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.. The previous image shows how well organized the module is on the back-end. But, it should be just as organized on the front-end. In the image below, end-users immediately know it's a filtering dashboard. They can also easily follow the fields, drop-downs, and functions of the buttons.

A static image displaying a module in Express View, columns and panels invisibly organize the fields for the end-user.

Resources