This project delivers a Web component that leverages the DX API to display a case type from the Pega Platform through Mashup. A complete demo of the application is available at https://pegasystems.github.io/mashup-webcomponent.
The mashup web component is not a replacement of the Pega Mashup and is limited in terms of supported Pega UI components due to using the DX API to generate the UI dynamic.
The benefits of the Mashup component are:
- no need for inner iframe -> the case type ui is completely integrated with the main document -> no need for recalculating the height of the inner iframe every time the content changes
- no need to align your document styles with the Pega Mashup app -> the Web component can run as a light DOM and gets all the styling from the core components from the top document or as a shadow DOM
- improved performance -> The JS file needed to render the UI is very small (less than 30Kb) and is 10X faster to be downloaded and parsed by the browser than the JS files required by Pega Mashup
This web component is using lit-element and lit-html for the template and rendering of the Web component.
This web component supports all modern browsers (Firefox, Chrome and Safari). It does not work on IE11 and Edge.
The docs folder contains the JS library to load to use the Web Component:
- pega-mashup-list-webcomponent.js can be loaded if you only need to use the light DOM component (pega-mashup-light) - it is a smaller file since it does not include any CSS content
- pega-mashup-webcomponent.js can be used if you intend to use the Shadow DOM version of the web component (pega-mashup). The file also contains the light DOM component (pega-mashup-light).
To build and compile the application - use the following commands:
install npm from https://nodejs.org/en/download/
npm install
npm run dev
npm run build
npm run lint
npm run test