About the Page Flow Engine (NGX-PFE)
The core functionalities of the Angular Page Flow Engine (NGX-PFE) are:
- Create configured flows of pages in an app. The configuration is dynamically loaded during runtime
- Page types are standard Angular components that are supplied with a configuration during runtime
- Page types can be used multiple times in a flow, with different configurations
- Page types can be configured with content and used in the navigation flow
- For example, in combination with the ngx-xtra library, it is possible to have completely configurable forms
- The order of pages is determined by conditions that are evaluated during runtime and allow it to guide the user through the flow
- The navigation can react to inputs of the user
- There is a graphical editor available for the navigation configuration
- Page types can be lazy loaded, which means, if they are not used in a configuration, they are not downloaded by the browser (➡ feature flags)
- Extensive multi tenant capabilities
- Provides a global application state, where data like the user inputs is stored
- This state can later be restored, which allows the user to continue, exactly where the application was left
- With the service activator mechanism, it is possible to do http calls in the navigation configuration. These calls can interact with the state
- PFE Actions make it possible to trigger functions in the code with hooks in the flow
- The PFE developer tools make it easy to debug the navigation and state of an app
- Relies on Angular standards as much as possible
1. Page Flow
The configuration defines the journey of a user through a flow of pages.
An example flow could look like this:
The navigation between the pages is defined with a list of possible next pages, that is defined for a page. For example, the Welcome Page defines the Additional Information Page and the Personal Details Page as possible next pages.
Every possible navigation can define conditions, that determine if it is executed. These conditions can access the global state of the application.
Every input of the user is stored in the global state. The pages in the example flow above could have content like this:
The value of the checkbox on the first page can be accessed in the conditions of the navigation, allowing it to redirect the user based on the selection.
The navigation back through the flow, can either be configured with conditions or the automatic history can be used. This would guide the user backwards the same way where they came from.
This configuration is stored as the navigation.json or pfe.json file. It can also be edited with the graphical editor. More information can be found here.
The same flow looks like this in the configuration editor:
The navigation.json configuration file, that describes this flow looks like this:
{
"errorPageID": "",
"pages": [
{
"pageId": "Welcome Page",
"nextOptionList": [
{
"nextPageId": "Additional Information Page",
"conditions": [
{
"type": "PFE_EXPRESSION",
"value1Expression": "$.additionalSupport"
}
]
},
{
"nextPageId": "Personal Details Page"
}
]
},
{
"pageId": "Additional Information Page",
"nextOptionList": [
{
"nextPageId": "Personal Details Page"
}
]
},
{
"pageId": "Personal Details Page",
"nextOptionList": []
}
]
}The following graphic shows an example of a more complex flow:
2. Page Architecture
The displayed pages within NGX-PFE based apps are dynamic. The rendering of the pages is done by the Angular router. Page types can be shared and reused between multiple applications.
2.1. Page Configuration
Each page type defines a certain configuration data model for its content.
The following example shows a page that is split up into several configurable components.
With this setup, the same page type (=same code) can be used multiple times throughout a flow, with different configurations.
In the following example, the Pagetype 1 is used two time in the flow, with different configurations:
The configuration of each page is stored as a json file.
Another example for a page type with different configurations:
3. Companion Libraries in the Ecosystem
3.1. Building Blocks Platform & TALY Libraries
The Building Blocks Platform & TALY Libraries offer an integration with the PFE for building customer journeys. The schematics integration makes it possible to automatically generate complete PFE based apps.
- TALY: https://github.developer.allianz.io/ilt/taly-workspace
- itmp-frontend-workspace: https://github.developer.allianz.io/it-master-platform/itmp-frontend-workspace
3.2. The ngx-xtra Companion Library
ngx-xtra can be used as a companion of the pfe. It contains a set of components, that can be used within pages of a pfe app.
While both can be used independent from each other, ngx-xtra contains connectors to work well together with the pfe.
An example for an ngx-xtra component is the dynamic form:
