Scribd
Upload
65 views

2-Advanced UI Patterns PDF

The document discusses advanced UI patterns in OutSystems, including UI patterns, rich widgets, and specific widgets. It describes the List_Navigation and List_SortColumn rich widgets which can be used to add list navigation and sorting capabilities to tables. The List_Navigation widget allows navigating between multiple pages of records, while the List_SortColumn widget enables dynamic sorting of table columns. It provides instructions on how to configure and use these widgets to enable list navigation and sorting in tables.

Uploaded by

Manisha Kharayat
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
65 views

2-Advanced UI Patterns PDF

The document discusses advanced UI patterns in OutSystems, including UI patterns, rich widgets, and specific widgets. It describes the List_Navigation and List_SortColumn rich widgets which can be used to add list navigation and sorting capabilities to tables. The List_Navigation widget allows navigating between multiple pages of records, while the List_SortColumn widget enables dynamic sorting of table columns. It provides instructions on how to configure and use these widgets to enable list navigation and sorting in tables.

Uploaded by

Manisha Kharayat
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 20

Advanced UI Patterns

Topics

● OutSystems UI
○ UI Patterns

● RichWidgets
○ List_Navigation
○ List_SortColumn

2
Advanced UI Patterns

● OutSystems UI
○ UI Framework for web and
mobile apps List Sort
Tabs Icon Search
Column
○ 100+ UI Patterns and Screens

● Rich Widgets
○ Groups of Widgets, Themes and Animated
Label
Tag Blank Slate Gallery

Actions

● Widgets are present in the


Service Studio Toolbar Alert Accordion Separator Icon Badge

3
OutSystems UI
OutSystems UI

https://www.outsystems.com/outsystems-ui/

5
UI Patterns
Pre-built UI patterns that can be easily placed in Screens (drag & drop)

6
UI Patterns Documentation

There’s full documentation to support the


usage of the OutSystems UI Patterns

7
Rich Widgets
Rich Widgets

Additional Widgets for common


functionalities in Web applications

Examples of RichWidgets patterns


● DropDownMenu
● Icon
● List_Navigation
● List_SortColumn

9
List_Navigation

Navigator for a Table Records with multiple pages


● Shows a defined number of elements per page

Drag and drop the List_Navigation Widget below the Table Records

10
List_Navigation properties

Set the List_Navigation properties


● ListWidgetId: Associate it with the Table
Records
● LineCount: Number of records displayed
per page
● TotalRowCount: Total number of records
returned by the query
● OnNotify: Action to execute when a page
is selected
○ Refresh the Data Source and the

Table Records + List Navigation

11
List_Navigation in the Table Records

Set the Start Index to depend on the List_Navigation


● The displayed elements are influenced by the page clicked on the navigator
● List_Navigation_GetStartIndex(<TableRecordsName>.Id)

Function retrieves from session the page clicked and calculates the starting index
● Depends on the Line Count of the Table Records

12
List_SortColumn Widget

Defines dynamic sorting in Table Records columns

Drag and drop the List_SortColumn Widget next to the header to be sorted

13
List_SortColumn properties

Set the Column to


“{EntityName}.[AttributeName]”

Set the OnNotify destination to a Screen


Action
● Action triggered when clicking on the Table
Records header
● Refresh the Table Records’ data source
and the Table Records widget

14
List_SortColumn input variable in the Aggregate

In the Aggregate used as source of the Table Records:


● Add a dynamic sort
● Set the Expression to:
List_SortColumn_GetOrderBy(<TableRecordsName>.Id, DefaultOrder:
“{EntityName}.[AttributeName]”)

This function retrieves the column to sort by from the session

15
Summary

● OutSystems UI
○ UI Patterns

● RichWidgets
○ List_Navigation
○ List_SortColumn

16
Advanced UI Patterns
Thank You!
Advanced UI Patterns

● OutSystems UI
○ UI Framework for web and
mobile apps
○ 100+ UI Patterns and Screens

● Rich Widgets
○ Groups of Widgets, Themes and
Actions

● Widgets are present in the


Service Studio Toolbar

18
Modal

● Similar to a Popup

● Interrupts the end-user to demand an


Action
○ Important when a confirmation is
required
○ Relevant when manipulating critical
information

● Consists on
○ Modal Pattern
○ ToggleModal Server Action

19
Using the Modal

● Drag the Model pattern to your


Screen and edit it to your needs

● Toggle Model Action opens / closes


the Modal window
○ e.g. if Modal is open, the Toggle
closes it
○ To be used in a Preparation or Screen
Action
○ WidgetId expects the Id of the Modal
■ Modal must have a name

20

You might also like