aletheia-zoid
Table of Contents
Cross-Domain UI-Renderer
This package provides Aletheia encapsulated within a zoid component, providing:
- a component config
- a component definition, based upon above config
- a component definition to generate framework drivers
- a parent window renderer
- a React driver
- a child frame implementation
Install
First install this package and it's peer dependency @axa-ch/aletheia by:
npm install --save @axa-ch/aletheia-zoid @axa-ch/aletheiaUsage
Be aware that you need to build and serve two pages:
- the parent page, which loads the UI-Renderer through an iframe
- the child page, which integrates the UI-Rnderer within an iframe
IMPORTANT: the versions of @axa-ch/aletheia-zoid have to be equal in the parent and the child page, if not, then zoid will throw an error that the versions do not match.
Parent
We provide a generic component definition and a React driver.
Properties
The Ui-Renderer supports the following properties:
| Name | Description | Type | Required |
|---|---|---|---|
locale |
Locale of the application - country and language code allowed. | string |
|
stage |
The current stage at which aletheia is running, i.e. production, acc, dev or local. |
string |
|
iframeUrl |
The URL of the iframe's HTML page. | string |
|
isFromMyAxa |
Whether or not myAXA native Android or iOS App is used. | boolean |
|
apiTestKey |
API Key for local testing. | string |
|
xAxaApikey |
API keys should only be used for public unauthorized API’s. An API key is unique per client application and will be used solely for client identification (for details, please consult the official documentation at confluence). | string |
|
oauthToken |
OAuth token of type Bearer. | string |
|
xAxaContext |
Identity propagation in RESTful service is handled via the X-Axa-Context Header (for details, please consult the official documentation at confluence). | string |
|
fallbackUrl |
The url to fall back to if the process cannot be started. | string |
|
api |
API URL to BPM. | string |
|
refreshUrl |
URL for refreshing the oAuth Access Token. | string |
|
redirectUrl |
URL for refreshing the oAuth Access Token by redirect. | string |
|
satCookieName |
Name of the Secure-Access-Token-Cookie. | string |
|
processInstanceId |
Unique ID for a running process (mainly used for development). | string |
|
processName |
Name of the process which should be started automatically (mainly used for production). | string |
|
endUserKey |
User who started the process. | string |
|
roid |
ROIDs (Right Owner ID) are Alcatraz IDs and are used only on DTP Platform (for details, please consult the official documentation at confluence). | string |
|
uls |
Whether or not to use the User Login Servlet, which offers authetication by user-id and password (for details, please consult the official documentation at confluence). | boolean |
|
onProcessEnded |
Function to be called upon process end. | function |
|
onProcessError |
Function to be called upon process error. | function |
|
onProcessAborted |
Function to be called upon process abortion. | function |
|
nvp |
An array of NVP objects. | array |
|
nvpNamesMap |
A map to rename NVP-names. | array |
React
import React from 'react';
import ReactDom from 'react-dom';
import createReact from '@axa-ch/aletheia-zoid/dist/createReact';
const AletheiaZoidReact = createReact(React, ReactDom);
export default AletheiaZoidReact;Note: Make sure, that you bundle the same React and ReactDom version, and these only once.
Else you might see Invalid hook call violations.
https://reactjs.org/warnings/invalid-hook-call-warning.html
Child
The child consists of two parts:
- the component implementation to be loaded within an iframe
- the expected global styles, font files (from the patterns-library V1), polyfills, etc.
child.js:
// 1. You need the minimum CSS of the patterns-library v1 and aletheia
import './child.scss';
// 2. You need the Aletheia-Zoid Component
import '@axa-ch/aletheia-zoid/dist/component';child.scss:
@import '@axa-ch/patterns-library/src/styles/reboot';
// IMPORTANT: adjust your font's base path accordingly, this is just from the example
$font-base-path: '../node_modules/@axa-ch/patterns-library/src/assets/fonts/';
@import '@axa-ch/patterns-library/src/styles/fonts';Example
Start the example locally:
- run
npm run dev - go to
http://localhost:1234/parent.html
Please see the example folder.