Applications (AppBuilder) simplify the process of using FlowWright software by selecting the necessary features (such as Dashboards, Initiate Forms, Task List, Process View, and Reports) as a custom application, configuring a separate UI with authentication, and granting access to this custom application for user application groups.
The custom application can be published to FlowWright's own App Store by the Administrator.
The Applications feature consists of two parts.
- Design
- Runtime
Using the Design feature, we can;
- Define an application around FlowWright features like Dashboards, Initiate Forms, Task List, Process View, and Reports
- Create a login page and customize
- Configure the application's authentication connection
- Configure the application's languages to render
- Application Globalization
- Grant access to specific application roles
- Create application UI layout with menus and submenus
- Control the display of menus and submenus as per the user's application role
Using the Runtime feature, we can;
- Render the login screen, menus, submenus, and application as per the user's application role
- Use the application
- Engage with a responsive UI that auto-adjusts for any device or screen
How to build an Application?
There are three steps to build a new Application.
- Create an Application
- Configure the login page with name, description, and logos
- Configure the application for the user access, application logo, menus, submenus, menu items like the dashboard, forms, tasks, processes, user area, and display area
As a FlowWright Admin, navigate to the “Applications > Manage Applications”. The application builder page opens in a new tab, as shown in the image below. By default, the table displays local applications in a format similar to the one below. Use the AppLink to navigate to the local application on the new page.
Click the “App Store” button to switch to and view the apps installed for use that are available from the App Store, as shown below. Use the AppLink to navigate the App Store application to a new page.
To create a local application, click the “Actions > Create”. A pop-up window with configuration fields will appear. Provide the Application Name and Key. Select user application roles from the dropdown list that can access this application. After creating the application, use the checkbox to open the Designer. The sample input is shown below. Click the “Create” button to proceed.
The AppBuilder renders the template to be designed on the new page, as shown below. This page has two sections to be configured: the “Login Page and the Application”. A navigation key is provided in the top-right corner for navigation when the configuration is ready.
Provide the Login App Name, Description, and Button text, as below.
How to use the Login Page Configuration?
The Login Page Configuration UI manages the login name, app description, button text, login logo, and background image information displayed during the application login.
Provide the login app name and description. Provide the login text for the button (for example, "Sign In"). Click the “Choose File” button to upload the login logo and the background image. Click the “Preview” button to view the image selected. Click the “Save” button to confirm the changes.
Click the AppLink icon to preview the application Login page.
The page is rendered as shown below. Note: If “Form Authentication” is the only authentication, it redirects to the login page.
How to use the Application Configuration?
The Application Configuration UI manages the application logo, menu items, user area, and display area information required for rendering during application runtime.
Select the authorization roles from the dropdown list as shown below.
The provided application logo is the default FlowWright logo. Click the modify icon to change this image. A pop-up window is rendered for configuration. Choose an image file from the local folder and confirm the upload. The sample input is shown below.
The new logo is rendered, and a confirmation message appears in the top-right corner.
Click the user profile icon to configure the Display Area.
A pop-up window opens for configuration. Select the checkboxes to include information, then click “Save” to confirm the changes. The sample input is shown below.
Click the “Add Menu Item” button to create menu items. A pop-up is rendered for configuration, as shown below. Provide the menu name. Select one of the actions from the dropdown list: “Dashboard, Form, Process, Report, Tasks, and Custom Action”. Select the relevant existing items from the list. For example, select an existing dashboard from the list. Select the authorization roles from the list. Select the checkbox to open the page in a new tab. Click the “Choose File” button to upload an image icon for the Menu. Click "Save" to confirm the changes. The sample input is shown below.
Configure multiple user authorization roles from the drop-down list for this dashboard.
In this example, the Menu configuration uses a Form, and the UI provides the option to select either “Public” or “Private” forms, specifically “Forms With URL” or “All Forms”.
The menu item is created successfully. Hover over the new menu item and click to add submenus, as shown below. The create submenu action is similar to what is described above.
Click the “Configure Default Page” button in the Display Area. A pop-up window will be rendered for configuration, as shown below.
Select the authorization role from the dropdown list. Select the menu item from the list and click the plus (+) sign to include it. The sample input is shown below.
Click the Save button. A confirmation message is displayed in the top-right corner.
Use the 'Add Menu Item' feature to add more menu items related to “Dashboard, Form, Process, Report, Tasks, and Custom Action”. The items considered for the display area are listed below. Up to 3 levels of sub-menus are allowed.
How to execute the application?
Authorized users can navigate to “Create > Applications” and click “AppLink” to execute the application.
Also, copy and paste the following URL after logging in to the FlowWright application to view the application page.
https://<your server>/Apps
The My Applications page renders a list of authorized applications arranged in a deck, as shown below. The user clicks the "Open" link on the app icon to launch the application.
The user authenticates on the application's login screen, as configured.
The application renders the default page on load, as shown below. The user can navigate to other features using the menu items. Click the “User Profile > Apps” menu option to access the My Applications page. Click the “User Profile > Logout” to exit the application. Note: The application does not render the FlowWright left menu and user area for “regular users” (with no admin privileges).
How do you modify an application's metadata, such as name and application key?
As FlowWright Admin, navigate to the “Create > Application” page and select the application from the table list. Then, choose “Actions > Edit”.
The Application metadata is rendered in the pop-up window. Modify the application name, application key, and user access based on the user's application role. Unmark the “Active” checkbox to disable the application. Click the “Update” button to save the new configuration.
The application changes have been updated, and a confirmation message is displayed in the top-right corner.
How to modify an application configuration?
As FlowWright Admin, navigate to the “Create > Application” page and select the application from the table list. Then, choose the “Actions > Design”.
The Application configuration is rendered on the new page. Here, you can modify the login page and application configurations. Click the “Update” button to save the new configuration. An alert notification confirms the changes.
The configuration changes are tracked and viewed in “Status > Logs > System Log > Audit Log”.
How to configure authentication for an application?
Navigate to the “Create > Application” and select the application from the table list. Click “Actions > Design”.
The application configuration is displayed on the new page. Select the “Actions” menu option to navigate to the “Authentication, Languages, Globalization, and Themes” features.
A pop-up window is displayed for configuration, as shown in the image below. Click the drop-down to view the list.
To configure, select the authentication connections from the drop-down list. These connections are available from the “Integrations > Connections”.
Configure multiple authentication connections and click the “Save” button.
The application authentication is configured, and a confirmation message appears in the top-right corner.
How to configure languages for an application?
Navigate to the “Create > Application” and select the application from the table list. Click “Actions > Design”.
The application configuration is displayed on the new page. Select “Actions > Languages".
The Configure Languages pop-up is displayed, and the languages configured in the FlowWright application are shown.
Remove the unnecessary languages and click the “Save” button.
The languages are configured for the App, and a confirmation message appears in the top-right corner.
How to globalize an application?
Navigate to the “Create > Application” and select the application from the table list. Click “Actions > Design”.
The application configuration is displayed on the new page. Select “Actions > Globalize”.
The Globalize Application pop-up is shown. Select the language from the dropdown list and click the “Translate” button.
The text is translated using the Google Translate or Azure Translate AI service and placed in the adjacent textbox. A confirmation message is displayed in the top-right corner.
Navigate to the My Applications page, then click the Open link to launch the application. The application login appears on a new page. Click the culture flag icon, then select the language region.
The application's login screen changes accordingly, as shown in the image below. Log in to the application.
How to configure a UI Theme?
Navigate to the “Create > Application” and select the application from the table list. Click “Actions > Design”.
The application configuration appears on the new page. Select “Actions > Themes”.
A pop-up window is displayed for configuration. Click the drop-down to view the list. The UI Themes are created and managed in the “Administration > UI Themes” page.
Select a UI Theme from the list, then click the “Preview” button. Click the “Apply” button to confirm the changes.
The application is rendered for preview in a new page, as shown below.
View - User Statistics
Select the application from the table list and click “View > User Statistics”.
The application's user statistics are shown below.
View - Dependency Tree
Select the application from the table list, then click “View > Dependency Tree”.
The dependency tree view is displayed on the same page, as shown below. Click the branch to expand or collapse the view.
View - History
Select the application from the table list and click “View > History”.
The application history information is displayed as shown below.
Select “Action > Table”.
The application history information is displayed in a table view, with Permissions shown as a separate tab, as shown in the image below.
