Scribd
Upload
13 views18 pages

Widgets I

The document discusses basic widgets for building web screens in OutSystems, including widgets for displaying data like text, expressions and labels, input widgets like inputs, and navigation widgets like buttons and links. It also covers layout widgets like containers and tables, and record widgets like forms and table records.

Uploaded by

Astro Astro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views18 pages

Widgets I

The document discusses basic widgets for building web screens in OutSystems, including widgets for displaying data like text, expressions and labels, input widgets like inputs, and navigation widgets like buttons and links. It also covers layout widgets like containers and tables, and record widgets like forms and table records.

Uploaded by

Astro Astro
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 18

Widgets I

Basic web screen building blocks


Web Screen building blocks

The visual elements that make up the application screens are called Widgets. Widgets
allow inputting and displaying data to the user in a variety of formats

We will cover some of the basic widgets that OutSystems provides out-of-the-box next

Basic Data Display Widgets


● Static Text, dynamic Expressions and Labels

Basic Data Input Widgets


● Inputs

Screen Navigation Widgets


● Buttons and Links
Widgets Toolbox

Drag and drop widgets from the toolbox to the screen editor to use them

Toolbox
(widgets)
Basic Data Display Widgets

Expression widget
Displays calculated values

Displays Example value in Design/Preview


Can be used to inject HTML directly in the
page through the Escape Content property

Text widget
Displays static text
Basic Data Input Widgets

Input widget
Allows end-user to enter data by typing it in

Bound to a Variable that will hold the


data
Configurable Type of input data
Can be marked as Mandatory
Empty input assigns Null Value to variable
Provide a suggestion with Prompt
Basic Data Display Widgets (cont.)

Label widget
A label to be displayed next to an input

Label text is a calculated Value


Displays Example value during Design/Preview
Bound to an input through the Input Widget
property
Basic Data Display Widgets (cont.)

Label widget
A label to be displayed next to an input

Label text is a calculated Value


Displays Example value during Design/Preview
Bound to an input through the Input Widget
property
● Mandatory inputs will generate a visual cue
on bound labels
● Clicking label will move focus to bound
input
Screen Navigation Widgets

Button & Link widgets


Trigger an action or navigate to a screen

Need to specify a Destination with a Screen


Action to execute or a web screen to navigate to

Method determines how inputs are submitted

Can display a Confirmation Message dialog


before executing
Screen Navigation Widgets

Button & Link widgets


Trigger an action or navigate to a screen

Need to specify a Destination with a Screen


Action to execute or a web screen to navigate to

Method determines how inputs are submitted

Can display a Confirmation Message dialog


before executing

Links can contain other widgets and are


therefore visually more flexible than Buttons
Web Screen building blocks (cont.)

We will cover a few more, larger base widgets that OutSystems provides
out-of-the-box

Screen Layout Widgets


● Container and Table

Record Widgets
● Form and Table Records
Screen Layout Widgets

Container widget
Groups widgets and applies style to them

“Box” that can contain other widgets


● Easily set Width
● Height based on contents
● Screen flow determines position

Finer-grained dimensions and positioning through Style

Dynamically decide whether to Display contents or not


Screen Layout Widgets (cont.)

Table widget
Displays content in a tabular view

Static number of rows/columns


Edit using Table toolbar
Each Cell can contain other widgets
Cell contents’ dimensions always take
precedence over specified cell dimensions
No longer frequently used in modern Web
applications
Record Widgets

Form widget
Allows showing/editing a single record

Can contain input widgets


Provides local property to hold input data
Bound to a Source Record
● Defines the local property data-type
● Fills local property with initial data
Record Widgets (cont.)

Form widget
Allows showing/editing a single record

Can contain input widgets


Provides local property to hold input data
Bound to a Source Record
● Defines the local property data-type
● Fills local property with initial data
Inputs inside bind to the Form’s local
property and are validated together on
submit
Record Widgets (cont.)

Form widget
Allows showing/editing a single record

r
othe widgets
Can contain input

No layout constraints!

Drag’n’drop accelerator defaults to a


full line Container with a Label
bound to an Input, per attribute
Record Widgets (cont.)

Table Records widget


Displays multiple records in a tabular layout

Provides local property to hold data


Bound to a Source Record List
● Defines the local property data-type
● Local property is filled with copy of
list
Iterates through local property list
Displays one row per record in the local
property list
Record Widgets (cont.)

Table Records widget


Displays multiple records in a tabular layout

Each cell can contain other widgets *


Edit using Table toolbar
Accelerator defaults to one column per
attribute, but you can change it afterwards!
Cell contents’ dimensions always take
precedence over specified cell dimensions

*
except other Table/List Records and Labels
Widgets I
Basic web screen building blocks

You might also like