This project contains some flows which use HTML, CSS and JavaScript to create custom UIs. This builds on the default functionality of LivePortal and improves capabilities for User-Driven Automation, User-Assisted Automation and Reporting. Each flow includes documentation explaining how the UI functions.
Items that are part of this project:
A custom HTML Calendar control which can be used in place of the default Calendar control.
An example table with a hidden column containing a much larger text, which is copied to the clipboard when they click on a row.
Two examples of how a file can be downloaded (either a static reference to a file or a dynamic reference generated by a flow).
A responsive overlay which can be activated by an action (in this example, clicking a button). The overlay contains data entry fields. This utilises Bootstrap which is included with a default LivePortal installation.
A custom overlay, similar in function to the Bootstrap overlay but not as responsive.
An HTML Table using a Repeat Start / End control to generate it from a List variable. This allows users to add, edit, and delete records and returns a JSON of any modifications.
An HTML Table using a Repeat Start / End control to generate it from a List variable. This allows a user to click a row and return which row was clicked, for example to transition to another screen with details about this item.
An HTML Table which is dynamically generated from a hidden JSON. This is suitable for larger datasets which may otherwise not load on the page. This table allows users to filter each column and includes a scrollbar to scroll through the results. This is a more complex implementation and is mostly driven by JavaScript.
An HTML Table using a Repeat Start / End control to generate it from a List variable. This allows a user to select multiple rows, and returns the corresponding JSON when the user clicks 'Next'. This also includes a textbox to filter the table.
An HTML Table using a Repeat Start / End control to generate it from a List variable. This includes a textbox to filter the table, utilising a 'debounce' function which prevents the search action from taking place until a set time period after a user has stopped typing. This is suitable for larger datasets which may cause performance issues by applying the filter after each keypress.
An HTML Table using a Repeat Start / End control to generate it from a List variable. This allows a user to select one of three columns in each row by adding radio buttons.
Download the Studio Package file and Import it into your Cortex Environment. Don't forget to apply rights using the Studio Authorization module.