Skip to main content

 

 

 

 
Language:

 

 

 

 
 
OutSystems

Designing Screens

Template:OutSystems/Documentation_KB/ContentCollaboration
  • Edit
    Collaborate with us
    Edit this page on GitHub
  • We've been working on this article. Please let us know how useful this new version is by voting.

    This page contains an overview of widgets. It also links to pages that provide additional information about the widgets available to help you design 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.
    • Was this article helpful?