The Custom UI Patterns Forge Component was updated to version 1.4.1.

On this new version, you will find:

• Updated references for Outsystems UI version 2.11.0
• The Demo package references were also updated for Outsystems UI version 2.11.0

No changes were made to the widgets available.

The Custom UI Patterns Forge Component was updated to version 1.4.0.

On this new version, you will find:

• Timer is now disabled when the value of the input parameter Interval is not within the expected range (1 to 60 seconds) (thank you Miguel Figueiredo for the suggestion)

No changes were made to the other widgets available.

The Custom UI Patterns Forge Component was updated to version 1.3.4.

On this new version, you will find:

• Updated references for Outsystems UI version 2.10.0
• The Demo package references were also updated for Outsystems UI version 2.10.0

No changes were made to the widgets available.

The Custom UI Patterns Forge Component was updated to version 1.3.3.

On this new version, you will find:

• Fix for an Architecture Dashboard Code Pattern violation
• Updated references for Outsystems UI version 2.9.0
• A Demo package is now included on the Forge Component

No changes were made to the widgets available.

The Custom UI Patterns Forge Component is regularly updated with new widgets, following the suggestions and requests we receive from numerous friends and from the Outsystems Community members, so come back from time to time and check what's new.

This component doesn't use any custom CSS classes. It is 100% based on Outsystems UI CSS classes!

The set of widgets available are grouped according to their purpose, in the following sections:

• Controls - A set of custom widgets related to user controls
  • Text Area Auto Size
    • Automatically resizes a Text Area vertically, based on its content
    • Drag and drop the widget to a Page or Block and bind the Text Area inside it to a variable 
  • Numbers Up/Down
    • Displays an horizontal pattern to navigate numbers with step, from the first to the last value
    • Drag and drop the widget to a Page or Block and set the Input Parameters accordingly  
• Data - A set of custom widgets related to data
  • Audit Information
    • Displays Audit information about a given data record, regarding when and by who that record was created and last updated
    • Drag and drop the widget to the bottom of a Form, right after the Save button (just a suggestion, of course), and set the Input Parameters according to the record you're creating / editing  
  • Boolean Status
    • Displays an Icon and a Label for a given Boolean Status
    • Drag and drop the widget to the desired area on your Page or Block and set the Input Parameters accordingly 
    • You can use this widget on a Table or a Show Record, to display a fancy record status  
• Development - A set of custom widgets related to development
  • Preview in Service Studio
    • Allows you to implement a Preview area on Blocks. When the Block is applied on a Parent, what the developer will see on Service Studio is this widget, and not the Block content itself
    • Very useful when a Block has a very complex and lengthy content 
    • Place an If element on the root of the Block, bind a False condition to it (for example, "ServiceStudioPreview" = "True"), place this widget on the True branch and adjust the widget Icon and Label according to the Block purpose 
    • The Block content must be placed inside the False branch of the root If element 
    • This technique only works if your Block doesn't have Placeholder elements in it  
• Logic - A set of custom widgets related to logic flows
  • QR Code to go Mobile
    • Displays a Mobile Phone Icon and a Label that, if clicked, will open a popup with a QR Code, encoding a URL to be scanned on a mobile device to navigate to a webpage
    • Drag and drop the widget to the desired area on your Page or Block and set the Input Parameter accordingly 
    • You can use this widget on the Footer of your Pages to allow Users to quickly access the Application on a Mobile Device, instead of having to type in the complete URL on the browser  
  • Waiting
    • Displays a Spinner and an optional Waiting Message, while some process is being executed, giving the user a visual evidence that something is happening
    • Drag and drop the widget to the desired area on your Page or Block and set the Input Parameter accordingly 
    • You can use this widget while data is being fetched from the database 
    • Create a local boolean variable (you can name it IsWaiting, for instance) with True as the default value, place an If element on the area you want, place this widget on the True branch and finally the Page or Block content on the False branch 
    • On the OnAfterFetch event of the aggregate or data action, set the boolean variable to False, so the effect is achieved  
  • Waiting Popup
    • Displays a Popup with a Spinner and an optional Waiting Message, while some process is being executed, giving the user a visual evidence that something is happening
    • Create a local boolean variable on your Page or Block (you can name it IsWaiting, for instance) with False as the default value, drag and drop the widget to the bottom of the Page MainContent Placeholder or to the end of your Block Content, and set the Input Parameter accordingly 
    • You can use this widget while data is being processed on a Screen Action (for instance, while saving data on the database) 
    • Set the value of the boolean variable to True before calling the Action that saves data on the database, call the action, and afterwards, set the value of the boolean variable back to False, to achieve the desired effect 
  • Confirmation Popup
    • Displays a Confirmation Popup to the user, asking him for a Yes / No / Cancel answer
    • Drag and drop the widget to the bottom of the Page MainContent Placeholder or to the end of your Block Content, and set the Input Parameters accordingly 
    • You can use this widget to ask the user for a confirmation before an Action is triggered on your logic 
    • This is a more appealing alternative to the browser's default confirmation message dialog box  
•  Interactive Maps- A set of custom widgets related to Maps
  • Interactive Map
    • Displays an Interactive Map of a given location
    • Drag and drop the widget to the desired area on your Page or Block.
    • The administrative areas are clickable and an event is triggered when clicked, returning the clicked area on the Map  
    • Additionally, you can highlight a Map Area by its name, by setting the input parameter HighlightMapArea
• Utilities - A set of custom widgets related to utilities
  • Avatar Card
    • Displays an Avatar and aditional information related to a User
    • Drag and drop the widget to the desired area on your Page or Block and set the Input Parameter accordingly 
    • The widget already has an Avatar and 2 expressions, to display the Name of the User and some additional information 
    • By default, the avatar and expressions are displayed with a Card styling, that can be disabled by setting the input parameter UseCardLayout as False 
  • Elapsed Time
    • Displays the elapsed time in Hours, Minutes and Seconds from an initial date-time to the current date-time
    • This is the same widget available on the Elapsed Time Forge Component, also published by the Nexllence Team
    • Drag and drop the widget to the desired area on your Page or Block and set the Input Parameter accordingly 
  • Timer
    • Triggers an event every amount of seconds set in the input parameter Interval  
    • This must be an integer value ranging from 1 to 60 seconds
    • Drag and drop the widget to the desired area on your Page or Block and set the Input Parameter accordingly
  • Application Switcher
    • Displays a Sub Menu with the current Application Name and Icon, and a list of options with the Applications the user in session has some permission to access
    • Drag and drop the widget to the desired area on your Page or Block 
    • Besides displaying the Application Icon, this widget is similar to the RichWidgets ApplicationSwitcher for Traditional Web Applications 
  • Star Rating
    • Displays a list of Stars to allow a user to rate something, and optionally display the rating value related to the selected Stars  
    • Drag and drop the widget to the desired area on your Page or Block and set the Input Parameters accordingly

The Demo allows you to view detailed information about each widget, how to use it and a brief preview / demo of it.