Designing Screens

Widgets overview

Widgets in OutSystems are visual elements that help you to design and organize your app’s user interface. They serve as building blocks to accelerate UI development.

You can drag widgets to UI Screens, and then set their relevant properties. Widgets appear in the Service Studio toolbox, on the left side of the main screen. Available widgets vary by app type.

You can use widgets to accelerate the following development tasks, among many others:

• Display one or more record or line of information with display widgets, such as Table widgets
• Take input from users with widgets such as Text and Input widgets
• Use Button or Link widgets to navigate between Screens or to trigger other actions
• Display one of two areas on a Screen based on a Boolean condition with an If Widget
• Provide yes or no input options or one selection out of many options with Checkbox or Radio Button widgets
• Use Container widgets to group other widgets and to apply styles to them
• Create reusable UI elements for use within an app or across apps with Block or Web Block widgets

Articles in this Section

• Block Widget

  Reference information on the Block widget available for displaying a reusable screen element on a screen.

• Button

  Reference information on the Button widget for triggering an action on a screen.

• Button Group

  Reference information on the Button group widget available for adding a set of buttons for users to select a single option on a screen.

• Button Group Item

  Reference information on the Button group widget available for adding a set of buttons for users to select a single option on a screen.

• Checkbox

  Reference information on the Checkbox widget for allowing the user to check or uncheck an option on a screen.

• Container

  Reference information on the Container widget for grouping widgets and applying styles to them on a screen.

• Dropdown

  Reference information on the Dropdown widget for showing a dropdown list for the users to select a value on the screen.

• Expression

  Reference information on the Expression widget for displaying a text literal or an expression to calculate at runtime on the screen.

• Form

  Reference information on the Form widget for specifying a collection of user inputs that share the same validation context, on the screen.

• HTML Element

  Reference information on the HTML Element widget for adding a custom HTML element to the screen.

• Icon

  Reference information on the Icon widget for adding a scalable vector picture as an icon to the screen.

• If Widget

  Reference information on the If widget for displaying content on the screen based on a condition.

• Image

  Reference information on the Image widget for displaying an image on the screen from a defined source.

• Input

  Reference information on the Input widget for allowing users to input data on a screen.

• Label

  Reference information on the Label widget for allowing users to add text labels on a screen.

• Link

  Reference information on the Link widget for allowing users to have clickable links on a screen.

• List

  Reference information on the List widget for allowing users to get a list of records on a screen.

• List Action

  Reference information on the List Action widget for allowing you to define the behavior when swiping the correspondent List Item, which can be executing a screen action or navigating to another screen.

• List Item

  Reference information on the List Item widget for allowing you to displays a list item with full swipe behavior capability, containing a List Action widget to define the swiping behavior.

• Placeholder Widget

  Reference information on the Placeholder widget for reserving space in your block for filling when the block is used.

• Popover Menu

  Reference information on the Popover Menu widget for adding a container that opens when the user taps an element or a region.

• Popup

  Reference information on the Popup widget for adding floating container/window (modal container) above other screen content.

• Radio Button

  Reference information on the Radio Button widget for representing an option within a Radio Group on a screen.

• Radio Group

  Reference information on the Radio Group widget for adding groups of two or more Radio Buttons

• Switch

  Reference information on the Switch Group widget for adding two-state toggle controls to allow users to select between two options.

• Table

  Reference information on the Table widget for displaying data in cells distributed in rows and columns. The tables created with Table Widget support automatic pagination, sorting, and dragging Attributes to add columns.

• Text Area

  Reference information on the Text widget for adding a multi-line field to hold text typed by the users.

• Text Widget

  Reference information on the Text widget for enclosing the text that users type in your screen or block.

• Upload

  Reference information on the Upload widget for allowing the users to browse and select a local file to upload into the application.