Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/pegasystems/mashup-webcomponent
Web Component using the DX API to expose a case type as a Mashup. A complete demo of the application is available at https://pegasystems.github.io/mashup-webcomponent
https://github.com/pegasystems/mashup-webcomponent
lit-element lit-html mashup pegasystems web webcomponent
Last synced: about 1 month ago
JSON representation
Web Component using the DX API to expose a case type as a Mashup. A complete demo of the application is available at https://pegasystems.github.io/mashup-webcomponent
- Host: GitHub
- URL: https://github.com/pegasystems/mashup-webcomponent
- Owner: pegasystems
- License: apache-2.0
- Created: 2019-09-06T15:39:05.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2024-06-20T20:55:15.000Z (5 months ago)
- Last Synced: 2024-10-01T02:42:24.975Z (about 1 month ago)
- Topics: lit-element, lit-html, mashup, pegasystems, web, webcomponent
- Language: JavaScript
- Homepage:
- Size: 13 MB
- Stars: 12
- Watchers: 10
- Forks: 8
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
- Security: SECURITY.md
Awesome Lists containing this project
README
# mashup-webcomponent
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 small (around 80Kb) and is 10X faster to be downloaded and parsed by the browser than the JS files required by Pega Web Mashup.
This web component is using lit library for the template and rendering of the Web component. It supports all modern browsers (Firefox, Chrome and Safari). It does not work on IE11 and Edge.
The Web component supports the following actions:
- Display the worklist - can open assignments inside the same card
- Create a case
- Open an assignment
- Open a case - will show the review harness of the case along with the list of assignmented and child cases
The docs folder contains the JS library to load to use the Web Component:
- pega-mashup-light-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-light-webcomponentv2.js => same as above but using the DX v2 API
- pega-mashup-webcomponent-all.js => can be used if you intend to use the Shadow DOM version of the web component (pega-mashup). includes all versions (v1 and v2 + light)
- pega-mashup-webcomponent-light-all.js => contains both the v1 and v2 components of the light DOM version
## For developers
To build and compile the application - use the following commands:
### Tools to install
install npm from https://nodejs.org/en/download/
### Project setup
```
npm install
```
### Compiles and hot-reloads for development.
```
For core component: npm run dev:core
For UK GDS: npm run dev:govuk
For US WDS: npm run dev:govus
For FR Government system (DSFR): npm run dev:govfr
```
### Compiles and minifies for production
```
npm run build
```
### Lint the Javascript files
```
npm run lint
```
### Run unit tests
```
npm run test
```
### Demo
- Core application: https://pegasystems.github.io/mashup-webcomponent
- UK Government Design system: https://pegasystems.github.io/mashup-webcomponent/demos/ukgds/main.html and https://pegasystems.github.io/mashup-webcomponent/demos/ukgds/worklist.html
- US WDS: https://pegasystems.github.io/mashup-webcomponent/demos/uswds/main.html and https://pegasystems.github.io/mashup-webcomponent/demos/uswds/main1.html
- France Design system de l'etat: https://pegasystems.github.io/mashup-webcomponent/demos/frgov/main.html and https://pegasystems.github.io/mashup-webcomponent/demos/frgov/demo.html and and https://pegasystems.github.io/mashup-webcomponent/demos/frgov/worktable.html