Introduction to the Module Builder

Overview

The Module Builder is one of the core functions of the Unqork Designer Platform. With modules built in the Module Builder, Creators Also known as Unqork Users, or Designer Users; is anyone who is inside the Unqork platform. develop applications that businesses use to facilitate their products. These applications can be as simple as a questionnaire 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 fill out or complex interfaces that can manipulate databases and display dynamic information in a dashboard.

A static image displaying the Module Editor in the Unqork Platform.
(click image to expand)

What You'll Learn

In this article, you'll learn how to access the Module Builder and navigate its settings and functions.

Navigating the Module Builder

The Module Builder is the Designer view or the back-end of your module. From this view, you can modify the module's settings and contents.

Module Header

The module header displays general information, like the name and location of the module. It also provides access to module settings, previewing the module 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., server-side executing testing, and saving changes.

A static image displaying the module header in the Module Builder.

Module Header Settings include:

  Setting Description

1

Navigation Breadcrumbs

These links display where you are in your environment. For example, if you view a module in an application, then the breadcrumbs display as: Home > workspaceName > applicationName.

2

Module Type

Module types include:

  • API API: An API-type module includes preconfigured components that meet Unqork API specifications for server-side/remote execution. An API tag is also added by default to ensure the module displays in the API Docs Dashboard tool. When creating an API-type module, the Server-Side Execution setting is set to (ON) by default, and disabled. Disabling this setting promotes security best practices.

  • FE Front-End: A Front-End-type module is an  element built for user interfaces. When creating a Front-End module, the Server-Side Execution setting is set to (OFF) by default, and disabled. Disabling this setting ensures this module type is always accessible in Express View.

  •  O  Other: An Other-type module is for module elements that aren’t considered Front-End or API modules. This module type includes modules used for storing data, rerouting data, and so on. When creating an Other-type module, the Server-Side Execution setting is set to (OFF) by default. With Other-type modules, you can choose to set the Server-Side Execution setting to (ON).
3 Module Name

The name you choose for your module. A module's title must be unique to an individual environment.

TIP  Click the (star Starring elements stores them in the Starred tab of your UDesigner homepage for quick access. You can star any element, regardless if it's yours or belongs to another team member.) next to the module name to display it in the Starred tab of your UDesigner homepage.

4

Last Saved

Displays the time and Creator email that last saved the module. If you are the last Creator to save the module, it displays you instead of your Creator email address.

Clicking on the Last Save text opens the Module History page.
5

Viewing /Editing

Indicates if you are viewing or editing the module.

  • Preview icon Viewing: While viewing a module, component configurations can be inspected.

  • Edit icon Editing: While editing a module, a Creator can add or remove components, modify component configurations, and access the Server-Side Execution Testing page for API (API) modules.

 

6

···

Opens the module options drop-down. Click the ··· (ellipsis) button to display the following settings:

  • Copy Module Definition: This option lets you copy the entire module definition to your clipboard. Copying the definition ensures you copy the component's entire configuration.

  • Paste Module Definition: This option lets you paste the entire module definition from your clipboard to another module.
    This setting is only available while editing a module.

TIP  To learn more about copying and pasting module definitions, view our How To: Copy and Paste Module Definitions article.

  • Module History: Opens the Module History page. From this page, you can view or restore previous versions of the module.

  • Delete Module: Opens the Delete Module confirmation modal. Deleting a module removes it from the application. Modules deleted this way can be recovered using Unqork's API.
    This setting is only available while editing a module.

7

Click this button to add a comment to the module and tag teammates.

8

PreviewOpen Dropmenu icon/

Server-Side ExecutionOpen Dropmenu icon

There are two ways to preview your module:

Depending on which module type you create, this button either displays as Preview or Server-Side Execution. To switch between them, click the Open Dropmenu icon (drop-down) button.

9

SaveOpen Dropmenu icon

This button lets you save any recent configuration changes. When you save your module for the first time, Unqork assigns a unique module ID to your module.

Click the Open Dropmenu icon (drop-down) button to display the following options:

  • Save and Update: Updates all imported modules and saves the current module. With this option, you don't have to update each module separately.

  • Save as Snippet: Lets you save your current module as a snippet. A snippet is a reusable configuration. Selecting this option opens the Save as Snippet pop-up modal.

Module Builder Designer View

The Module Builder Designer View provides the tools needed to create a no-code application. The Designer View consists of the component tray, canvas, and Module Outline. In the image below, the three sections of the Module Builder have been highlighted. Use the tables below to better understand each of these sections.

A static image displaying the component, canvas, and Module Details sections of the Module Builder.

Section 1 - Components Component Tray

The Component Tray contains the building blocks of a module. From this tray, components can be selected and dragged onto the canvas. Alternatively, Snippets, which are pre-configured component collections, can also be selected and dragged onto the canvas.

Setting Description

Components

Displays Components in the tray.

Component Library

Drag and drop component building blocks of your module. You'll use components to create fields, layouts, and logic for your application. Unqork organizes components into five categories:

  • Frequently Used: Includes the most frequently used components in Unqork.

  • Primary Fields: These components let you create end-user functions, like entering text, making radio button choices, or selecting options from a drop-down. They include the Date Input, Multi-Select Dropdown, Radio Buttons, and Text Field components.

  • Secondary Fields: These components are another type that let end-users make selections. They include the Address Search, Button, Email, Phone Number, and Protected Field components.

  • Display & Layout: These components help you organize, structure, and create module dashboards. They include the Columns, HTML Element, Panel, and ViewGrid components.

  • Data & Event Processing: These components work on the back-end of your module to perform logic and send and receive information using API calls. They include the Calculator, Data Table, Decisions, Initializer, and Plug-In components.

  • Charts & Graphs: These components let you display information in charts, graphs, and KPI widgets. They include the Chart, KPI, and Map components.

Section 2 - Canvas Canvas

The canvas is where you build a module's contents. Add components to the canvas from the component tray, then configure their settings.

Setting Description

Show UI Only

Set this toggle to (ON) to hide all components that Express View users won't see.

TIP  To learn more about the Show UI Only toggle, view our Module Header: Show UI Only article.

Module Canvas

The Module Builder Canvas is where components from the component tray are placed. In the canvas view, you can add, remove, copy, paste, or modify components to create individual modules.

TIP  To learn more about moving and modifying components, view our Component Toolbar Settings article.

Section 3 - Module Outline Module Outline

The Module Outline provides a high-level view of the components of your module. From this list, you can search for components, select ones to highlight on the canvas, or see if there are configuration issues with your components.

TIP  To learn more about identifying configuration issues with the Module Outline, view our Real-Time Configuration Analysis Tool article.

Setting Description

Module Details

Displays information specific to the module. The Module Details panel includes:

  • Module Name: The name of the module you have open in the Module Builder.

  • Module Path: The path of the module you have open in the Module Builder.

  • Module ID: The unique identifier of the module you have open in the Module Builder.

  • Module Type: The type of the module you have open in the Module Builder.

  • Tags: All tags associated with this module. For example, an API tag would display for an API-type module.

  • Module Size: The size of the module in Designer View.

  • Module Size in Express: The size of the module in Express View.

  • Manage Module Settings: Click this button to adjust any of the above details, except the module ID.

TIP  To learn more about the Module Outline tool, view our Module Outline article.

Resources