Screen Concepts

A screen is the primary user interface surface in a Lowgile application. Screens allow users to view information, enter data, perform actions, and interact with workflows and processes.

A screen is typically composed of:

input variables
local variables
UI components
data bindings
event handlers

Together, these elements determine what data the screen can access, how information is displayed, and how user actions are processed.

Screen Variables

Screen variables provide data to a screen and store state while the screen is active.

Lowgile supports two primary variable types:

Input variables
Local variables

1. Input Variables

Input variables receive data when a screen is opened.

For example, a Purchase Request Details screen might receive a Purchase Request object through an input variable named request.

The screen can then access properties such as:

screen.request.requestNumber
screen.request.description
screen.request.costCenter

Input variables are commonly used when navigating between screens or when opening task screens from a process.

2. Local Variables

Local variables exist only within the current screen.

They are commonly used for:

temporary UI state
search filters
user selections
intermediate calculations

Unlike input variables, local variables are not passed into the screen when it is opened.

Data Binding

Data binding connects screen variables to components.

For example, a Text Input component may bind to:

screen.request.description

A Dropdown component may bind to:

screen.request.costCenter

When the user changes a component value, the bound variable is updated automatically.

Components

Components are the building blocks used to construct screens.

Common components include:

Text Inputs
Dropdowns
Buttons
Data Tables
For Loops
Containers

Each component can bind to screen variables and participate in the overall screen layout.

Event Handlers

Event handlers execute logic when a user interacts with a component.

Examples include:

button clicks
value changes
screen initialization events

Event handlers commonly:

update variables
call processes
navigate to screens
invoke platform services

For example:

await This.$Process.PurchaseRequestProcessing.start({
  request: screen.request
});

Screens can open other screens and pass data through input variables.

For example:

Sys.Screen.navigateToScreen(
  This.$Screens.PurchaseRequestDetails,
  {
    request: screen.request
  }
);

The receiving screen can then access the passed object through its input variables.

Screen Runtime Context

When a screen is running, Lowgile exposes runtime objects that allow the screen to access data and platform functionality.

Runtime object	Purpose
`screen`	Access screen variables and state.
`This`	Access generated application objects.
`Sys`	Access platform services.

These runtime objects are available inside bindings, event handlers, and screen logic.

Rendering Collections in Screens

Learn how to display arrays using Data Tables and For Loops.

Data Models

Understand how entities and relationships provide screen data.

Process Concepts

Learn how screens participate in workflow execution.