@axa-ch/aletheia-zoid NPM

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

Usage

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`	: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:

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';