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

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

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

3. 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

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

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

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

4. 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

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

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

3. 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.
   
   
   

4. 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.

5. 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 

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

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

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

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

• Delete all client logs
  
  

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

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

3. 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

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

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

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

4. 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

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

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

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

4. 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

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

2. 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!

3. 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.
   
   

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

5. 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.

6. 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.

7. 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

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

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

3. 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.

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

• Get the application domain

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

2. 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.

3. 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)

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

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

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

4. 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

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.

2. 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.

3. 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.

4. 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.

5. 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.

6. 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.

7. 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

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

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

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

4. 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

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

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

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

4. 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 

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

2. 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.

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

4. 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)

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

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

3. 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

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

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

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

4. 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

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

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

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

4. 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

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

2. 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.

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

4. 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

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

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

3. 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.

4. 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

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

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

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

4. 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

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

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

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

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

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

Keyboard keys

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

• Detect an Enter press

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

2. 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.

3. 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

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

2. 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.

3. 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.

4. 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

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

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

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

4. 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

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

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

3. 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

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

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

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

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