Created on 19 December 2016
icon_unfollowing
Login to follow
mobile-utilities

Reactive Utilities

icon_trusted
Stable version 1.0.4 (Compatible with OutSystems 11)
Other versions available for 10
Uploaded on 11 July 2021 by 
mobile-utilities

Reactive Utilities

Documentation
1.4.1

Note: Implementation examples are available in the demo application. It’s recommended to consult it for better comprehension.

──────────────────────────────────────────────────────────────────────────────

Dates

──────────────────────────────────────────────────────────────────────────────

  • Get the current device date and time


Action to use

GetDeviceDateTime

Exposed as function

Yes


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it GetDateTime.

  1. Call the GetDeviceDateTime action
    Open the screen action (created previously) and drag the GetDeviceDateTime action inside the canvas.

  1. Trigger the screen action
    When triggering the GetDateTime screen action, a Date Time variable is returned. This value corresponds to the date and time from the device.


──────────────────────────────────────────────────────────────────────────────

Encryption

──────────────────────────────────────────────────────────────────────────────

  • Cypher a text using SHA512 algorithm


Action to use

CypherText

Exposed as function

Yes


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it Cypher.

  1. Call the CypherText action
    Open the screen action (created previously) and drag the CypherText action inside the canvas.

  1. Fill the CypherText parameter
    Fill the CypherText parameter specifying the text to cypher.

  1. Trigger the screen action
    When triggering the Cypher screen action, a ciphered version of the specified text is returned.

──────────────────────────────────────────────────────────────────────────────

Search

──────────────────────────────────────────────────────────────────────────────

  • Highlight a text list with a searched value


Action to use

HighlightSearchList

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it Highlight.

  1. Call the HightlightSearchList action
    Open the screen action (created previously) and drag the HightlightSearchList action inside the canvas.

  1. Fill the HightlightSearchList action parameters
    Fill the HighlightSearchList action parameters specifying the id of the input that holds the text to search. The id of the container that holds the textual list (typically a List or a Table widget) must also be specified.



  1. Add a CSS class in each textual element (expression)
    In a textual list, each element is displayed using an Expression inside a ListItem (if using the List widget) or inside a row (if using a Table widget). The "searchable" CSS class must be added to this Expression, to enable the highlight feature. Inserting this, each text value will be able to be searched and highlighted.


  1. OPTIONAL: Customize highlighted elements
    By default, the matched text is highlighted by a yellow background.


But this customization can be overwritten, changing the mark CSS tag in the stylesheet. Open it, and apply the desired customization to the mark tag.

──────────────────────────────────────────────────────────────────────────────

Debug

──────────────────────────────────────────────────────────────────────────────

  • Create a debug log 


Action to use

Debug

Debug_StartSync

Debug_EndSync 

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it DebugLog.

  1. Call the Debug action
    Open the screen action (created previously) and drag the Debug action inside the canvas.

  1. Fill the Debug parameter
    Fill the action parameter specifying the debug message.


  1. Trigger the screen action
    When triggering the DebugLog screen action, a log is inserted in the browser console.


  • Delete all client logs

Action to use

Debug_DeleteAll

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it DeleteLog.

  1. Call the Debug_DeleteAll action
    Open the screen action (created previously) and drag the Debug_DeleteAll action inside the canvas.


  1. Trigger the screen action
    When triggering the DebugLog screen action, all client logs are deleted. To delete all the logs, the Preserve Log property must be disabled.


──────────────────────────────────────────────────────────────────────────────

Timers

──────────────────────────────────────────────────────────────────────────────

  • Focus on an input after a timeout


Action to use

FocusAfterTimeout

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it FocusInputTimeout.

  1. Call the FocusAfterTimeout action
    Open the screen action (created previously) and drag the FocusAfterTimeout action inside the canvas.


  1. Fill the FocusAfterTimeout action parameters
    Fill the FocusAfterTimeout parameters specifying the input id to focus, and the duration value of the timeout.

  1. Trigger the screen action
    When triggering the FocusInputTimeout screen action, the focus is set to the input after the specified timeout.


  • Execute a function after a timeout


Action to use

SetTimeout

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it ExecuteFunctionTimeout.

  1. Call the SetTimeout action
    Open the screen action (created previously) and drag the SetTimeout action inside the canvas.


  1. Fill the SetTimeout action parameters
    Fill the SetTimeout parameters specifying the Javascript function to execute, and the duration value of the timeout.

  1. Trigger the screen action
    When triggering the ExecuteFunctionTimeout screen action, the Javascript code is executed after the specified timeout.


  • Start / stop a timer to execute a periodical action


Action to use

StartTimer / StopTimer

Exposed as function

No


  1. Create two screen actions
    Create a screen action and name it TriggerTimer. Create a second screen action and name it EndTimer.

  1. Call the StartTimer action
    Open the TriggerTimer screen action (created previously) and drag the StartTimer action inside the canvas. Save the returned value (Timer) in a Text screen variable, useful to end this timer later.
    Don’t forget to save the returned Timer in a screen variable!

  1. Fill the StartTimer action parameters
    Fill the StartTimer parameters specifying the widget id to trigger periodically. Typically, the widget to trigger can be a Button or a Link. The duration between each period must also be specified.

  1. Call the StopTimer action
    Open the EndTimer screen action (created previously) and drag the StopTimer action inside the canvas.

  1. Fill the StopTimer action parameter
    Fill the StopTimer parameter specifying the Text screen variable related to the started and saved timer. This variable is a reference of the started timer.

  1. Trigger the TriggerTimer action
    When triggering the TriggerTimer screen action, a timer starts and executes a periodical action. At this moment, the timer reference is stored in a screen variable, useful to stop it later.


  1. Trigger the EndTimer action
    When triggering the EndTimer screen action, the started timer will be stopped.


──────────────────────────────────────────────────────────────────────────────

HTTP Request Handler

──────────────────────────────────────────────────────────────────────────────

  • Add a favicon in the application


Action to use

AddFaviconTag

Exposed as function

No


  1. Create the OnApplicationReady action
    In the Logic tab, right-click the Client Actions folder and create the On Application Ready System Event.

  1. Call the AddFaviconTag action
    Open the OnApplicationReady system action (created previously) and drag the AddFaviconTag action inside the canvas.

  1. Change the favicon
    In the Data tab, under the Resources folder, the favicon can be changed. Right-click the favicon.png file and select the Change Resource option to select another favicon.

  1. Trigger the OnApplicationReady
    After the module loads, the OnApplicationReady executes and changes the favicon.


  • Get the application domain


Action to use

GetDomain

GetPageName

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it RetrieveDomain.

  1. Call the GetDomain action
    Open the screen action (created previously) and drag the GetDomain action inside the canvas. To retrieve the page name, the GetPageName action must be dragged.

  1. Trigger the screen action
    When triggering the RetrieveDomain screen action, the domain (or page name) is returned in a Text variable.


  • Perform a GET request (REST API)


Action to use

RestAPI

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it GetREST.

  1. Call the RestAPI action
    Open the screen action (created previously) and drag the RestAPI action inside the canvas.

  1. Fill the RestAPI action parameter
    Fill the RestAPI parameter specifying the Endpoint (URL) to perform the GET method.

  1. Trigger the screen action
    When triggering the GetREST screen action, the GET method starts and returns a Text variable filled with the GET result. The Status Code (and related Code text) are also returned.


──────────────────────────────────────────────────────────────────────────────

Custom menu

──────────────────────────────────────────────────────────────────────────────

  • Create and retrieve a custom menu


Action to use

GetDummyMenu (client & server actions)

Exposed as function

No


  1. Create a copy of MenuManager script file
    In the Scripts folder of your application, create a script selecting the Create Script option. Name it CustomMenuManager. Inside it, copy the Javascript code available in the MenuManager script file of the ReactiveUtilities component (under Scripts folder). In other words, a copy of the MenuManager script must be created in your application.



  1. Create the custom menu
    In the CustomMenuManager script, a custom menu can be created to load later in the application. The export.menus variable must contain a list of Menu objects. Each Menu object has a Label parameter that corresponds to the name of each menu element. The custom menu has also an export.time variable. If the defined date is a null date or higher than the current one (1 hour or more), the cached menu is not fetched, and the menu defined at the server will be fetched. This server menu will be created in the next step.



  1. Create a copy of GetDummyMenu server action
    When the cached menu is expired, an alternative custom menu can be created and loaded. Create a screen action and name it GetDummyMenu. Open it and copy inside the canvas, the flow available in the GetDummyMenu server action of ReactiveUtilities component. The alternative menu (fetched from server) can be configured inside this server action adding each element in the Menu list.

  1. Create a copy of GetDummyMenu screen action to load the menu
    Create a global screen action (a screen action under the Logic tab). Name it GetDummyMenu. Open it and copy inside the canvas, the flow available in the GetDummyMenu screen action of ReactiveUtilities component. This screen action will verify if a cached menu is not expired and load it if it's the case. If not, the server menu is loaded.



  1. Create a screen action
    Create a screen action to retrieve the custom menu from the cache or from the server (if expired). Name it GetCustomMenu.

  1. Call the GetDummyMenu global screen action
    Open the screen action (created previously) and drag the GetDummyMenu global screen action (created in the step 4) inside the canvas.

  1. Trigger the screen action
    When triggering the GetCustomMenu screen action, the custom menu is returned in a List of Menu elements. If the cached menu is not expired, it will be returned. Otherwise, the alternative menu, created in the server action will be returned.

──────────────────────────────────────────────────────────────────────────────

Math

──────────────────────────────────────────────────────────────────────────────

  • Execute a set of mathematical functions


Action to use

Math_*

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it Calculate.

  1. Call the desired mathematical action
    Open the screen action (created previously) and drag the desired math action inside the canvas.

  1. Fill the action parameters
    Fill the action parameters specifying all necessary values (some actions need more than one value).

  1. Trigger the screen action
    When triggering the Calculate screen action, a success flag, a detailed error (if any error) and a result related to the math action are returned.

──────────────────────────────────────────────────────────────────────────────

Text

──────────────────────────────────────────────────────────────────────────────

  • Split a text by a splitter character


Action to use

String_Split

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it SplitText.

  1. Call the String_Split validation action
    Open the screen action (created previously) and drag the String_Split validation action inside the canvas.

  1. Fill the validation action parameters
    Fill the String_Split action parameters specifying the text to split and the related splitter.

  1. Trigger the screen action
    When triggering the SplitText screen action, a List of Text variable is returned with splitted elements.

──────────────────────────────────────────────────────────────────────────────

Random

──────────────────────────────────────────────────────────────────────────────

  • Generate a random decimal number 


Action to use

RandomDecimal

RandomInteger

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it RandomNumber.

  1. Call the number randomizer action
    Open the screen action (created previously) and drag the desired number randomizer action inside the canvas. Both RandomInteger and RandomDecimal actions can be used as functions.

  1. Fill the action parameters
    Fill the randomizer action parameters specifying the min. and max. values.

  1. Trigger the screen action
    When triggering the RandomNumber screen action, a random value is returned between the minimum and maximum value.



  • Generate a random decimal GUID (based on RFC 4122)


Action to use

RandomGUID

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it RandomGUID.

  1. Call the RandomGUID action
    Open the screen action (created previously) and drag the RandomGUID action inside the canvas.

  1. Trigger the screen action
    When triggering the RandomGUID screen action, a random GUID in accordance with RFC 4122 is returned.

──────────────────────────────────────────────────────────────────────────────

Regex

──────────────────────────────────────────────────────────────────────────────

  • Replace a text inside another


Action to use

Regex_Replace

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it Replace.

  1. Call the Regex_Replace action
    Open the screen action (created previously) and drag the Regex_Replace action inside the canvas.

  1. Fill the Regex_Replace parameters
    Fill the Regex_Replace parameters specifying the text to treat, replacing text, related patterns and flags.


  1. Trigger the screen action
    When triggering the Replace screen action, a Text variable is returned. This value corresponds to the replaced version of the text to treat, based on specified pattern and flags.


  • Search a pattern inside a text


Action to use

Regex_Search

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it Search.

  1. Call the Regex_Search action
    Open the screen action (created previously) and drag the Regex_Search action inside the canvas.

  1. Fill the Regex_Search parameters
    Fill the Regex_Search parameters specifying the text to treat, related patterns and flags.


  1. Trigger the screen action
    When triggering the Search screen action, the pattern result, the first index and a boolean value to indicate if the pattern was found are returned.


  • Verify if a pattern exists inside a text


Action to use

Regex_Test

Regex_Validator

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it ValidPattern.

  1. Call the validation action
    Open the screen action (created previously) and drag the validation action inside the canvas. Both Regex_Test and Regex_Validator can be used.

  1. Fill the validation action parameters
    Fill the validation action parameters specifying the text to treat, related patterns and flags.

  1. Trigger the screen action
    When triggering the ValidPattern screen action, a boolean value to indicate if the pattern was found is returned.


──────────────────────────────────────────────────────────────────────────────

Validator

──────────────────────────────────────────────────────────────────────────────

  • Validate an information


Action to use

IsEmailValid

IsNaN

IsTextValid

Exposed as function

Yes


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it Validate.


  1. Call the desired validation action
    Open the screen action (created previously) and drag the desired validation action inside the canvas.


  1. Fill the validation action parameters
    Fill the validation action parameters specifying the value to validate. For email validation, a custom pattern can also be added.


  1. Trigger the screen action
    When triggering the Validate screen action, a Boolean variable is returned to indicate if the specified value is valid.

──────────────────────────────────────────────────────────────────────────────

Javascript events

──────────────────────────────────────────────────────────────────────────────

  • Focus an input


Action to use

FocusIt

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it SetInputFocus.

  1. Call the FocusIt action
    Open the screen action (created previously) and drag the FocusIt action inside the canvas.


  1. Fill the FocusIt action parameter
    Fill the FocusIt parameter specifying the id of the input to focus.


  1. Trigger the screen action
    When triggering the SetInputFocus screen action, the focus is set to the input.


  • Trigger a click on a button or a link


Action to use

ClickIt

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it TriggerButton.

  1. Call the ClickIt action
    Open the screen action (created previously) and drag the ClickIt action inside the canvas.

  1. Fill the ClickIt action parameter
    Fill the ClickIt parameter specifying the id of the button (or link) to trigger.

  1. Trigger the screen action
    When triggering the TriggerButton screen action, the button (or link) is triggered.

──────────────────────────────────────────────────────────────────────────────

Keyboard keys

──────────────────────────────────────────────────────────────────────────────

  • Detect an Enter press


Action to use

GetEnterPress

CloseKeyboardOnEnterPressed

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it DetectEnter.


  1. Call the desired action
    Open the screen action (created previously) and drag the GetEnterPress action inside the canvas. To close the keyboard on Enter press, the CloseKeyboardOnEnterPressed action must be dragged.


  1. Trigger the screen action
    When triggering the DetectEnter screen action, a Boolean value is returned, to indicate if the Enter was pressed. For mobile devices, if the Enter key was pressed, the keyboard is also closed.



  • Trigger a button when pressing a key


Action to use

KeyboardKeyMakeWidgetClick

TriggerButtonOnEnterKeyCode

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it TriggerOnPressedKey.


  1. Call the desired action
    Open the screen action (created previously) and drag the desired action inside the canvas.
    To trigger a click when pressing the Enter key, the TriggerButtonOnEnterKeyCode action can be used.
    To trigger a click when pressing another key, the KeyboardKeyMakeWidgetClick action must be used.


  1. Fill the action parameters
    For both actions, the button to trigger must be specified. For the KeyboardKeyMakeWidgetClick action, the key that triggers the button must also be specified.

  1. Trigger the screen action
    When triggering the TriggerOnPressedKey screen action, a click will be performed on the button if the specified key is pressed.


  • Get a character code


Action to use

GetCharCode

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it GetCharacterCode.

  1. Call the GetCharCode action
    Open the screen action (created previously) and drag the GetCharCode action inside the canvas.

  1. Fill the GetCharCode action parameters
    Fill the GetCharCode parameter specifying the character to search for the code.

  1. Trigger the screen action
    When triggering the GetCharacterCode screen action, an Integer variable is returned, holding the code related to the specified character.

──────────────────────────────────────────────────────────────────────────────

Close feedback messages

──────────────────────────────────────────────────────────────────────────────

  • Close a feedback message


Action to use

CloseFeedbackMessage

CloseFeedbackMessageUsingAPI

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it CloseFeedback.


  1. Call the desired action
    Open the screen action (created previously) and drag the desired action inside the canvas. (CloseFeedbackMessage or CloseFeedbackMessageUsingAPI).


  1. Trigger the screen action
    When triggering the CloseFeedback screen action with an opened feedback message, the feedback message is closed.

  • Close a feedback message with timeout


Action to use

CloseFeedbackMessageWithTimeout

Exposed as function

No


  1. Create a screen action
    Create a screen action to call the corresponding action. Name it CloseFeedback.


  1. Call the CloseFeedbackMessageWithTimeout action
    Open the screen action (created previously) and drag the CloseFeedbackMessageWithTimeout action inside the canvas.


  1. Fill the CloseFeedbackMessageWithTimeout action parameter
    When triggering the CloseFeedbackMessageWithTimeout screen action with an opened feedback message, the feedback message is closed.

  1. Trigger the screen action
    When triggering the CloseFeedback screen action with an opened feedback message, the feedback message is closed after the specified timeout.


Support options
This asset is not supported by OutSystems. You may use the discussion forums to leave suggestions or obtain best-effort support from the community, including from  who created this asset.
Dependencies
Reactive Utilities has no dependencies.