@axa-ch/aletheia-zoid

aletheia-zoid

Table of Contents

• Install
• Usage
  • Parent
    • Properties
    • React
  • Child
• Example

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/aletheia

Usage

Be aware that you need to build and serve two pages:

1. the parent page, which loads the UI-Renderer through an iframe
2. 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	:x:
stage	The current stage at which aletheia is running, i.e. production, acc, dev or local.	string	:x:
iframeUrl	The URL of the iframe's HTML page.	string	:x:
isFromMyAxa	Whether or not myAXA native Android or iOS App is used.	boolean	:o:
apiTestKey	API Key for local testing.	string	:o:
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	:o:
oauthToken	OAuth token of type Bearer.	string	:x:
xAxaContext	Identity propagation in RESTful service is handled via the X-Axa-Context Header (for details, please consult the official documentation at confluence).	string	:o:
fallbackUrl	The url to fall back to if the process cannot be started.	string	:x:
api	API URL to BPM.	string	:x:
refreshUrl	URL for refreshing the oAuth Access Token.	string	:o:
redirectUrl	URL for refreshing the oAuth Access Token by redirect.	string	:o:
satCookieName	Name of the Secure-Access-Token-Cookie.	string	:o:
processInstanceId	Unique ID for a running process (mainly used for development).	string	:o:
processName	Name of the process which should be started automatically (mainly used for production).	string	:o:
endUserKey	User who started the process.	string	:x:
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	:o:
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	:o:
onProcessEnded	Function to be called upon process end.	function	:x:
onProcessError	Function to be called upon process error.	function	:x:
onProcessAborted	Function to be called upon process abortion.	function	:x:
nvp	An array of NVP objects.	array	:o:
nvpNamesMap	A map to rename NVP-names.	array	:o:

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:

1. the component implementation to be loaded within an iframe
2. 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:

1. run npm run dev
2. go to http://localhost:1234/parent.html

Please see the example folder.