Using the Mashup web component and DX API

Uplus allows to render cases and the worklist using the DX API (v1 and v2) with the mashup web component - The mashup web component is not using Constellation core engine to render the UI - it is a lighter implementation that calls directly the DX API - As such there might be difference in the behavior and feature set between the pega Web Embed (based on Constellation UI) and the mashup web component using the dx api v2.

Configuration

• v1 should use basic auth - this is how the 'api' service package is configured by default - there should not be any need to change this
• v2 should use oauth - this is how the 'application' service package is configured by default

Here are some tips on how to get started: 1/ never change the authentication scheme of the 'application' service package leave it as oauth2 - do not switch it to basic auth

2/ always login with the application url

If you want to test the DX api v2, you need to switch your application to Cosmos React, click on button 'generate routing table', generate a new web channel and rebuild the views - first test with the Cosmos React portal to make sure that your app is fully functional

3/ create a new oauth2 client registration

• set a public
• enable password credentials - client credentials is not recommended since it hardcodes the user
• get the clientsecret before saving the record

4/ change the csrf dynamic settings as indicated in red especially samesitecookieattributevalue to 'None' and validreferers to a comma separated list of valid referers

5/ in the mashup web demo page Mashup web component demo, enter all settings

you should be able to see the worklist and create case.

Important Note: Make sure that your system has https enabled with a valid certificate. If your system has an invalid https certificate - this will be blocked by Chrome. On Safari or Firefox, go to the url and accept the risk to see the login page, then open a new tab to use the mashup web component. For Chrome, you will need to start the application with the flag --ignore-certificate-errors

6/ When the mashup web component demo is working, do to the uplus application and change the settings -> General

Using the 'Display' action

The display action allows to show a Harness when using Pega Web Mashup or a View Page using Pega Embed UI. In the case of the mashupweb component, 3 types of display are supported:

• worklist
• tasklist
• dataview

the Worklist renders a table of assignments for the user and shows the case label, ID and priority - It is possible to change the title of the worklist

the tasklist is similar to the worklist in terms of data but renders the assignments as a flat list without using a table - it is more targeted for consumers

the dataView allows to show any Data page and render the data in a tabular format - to configure the dataView, using the extra parameter field and instead of using a key value format, enter directly the following JSON object

{"name":"D_pyUserWorkList","noresults": "No result found","params": [ { "name": "ID", "value": "wssuser2"}], "fields": [ { "name": "pxRefObjectInsName", "label": "ID"}, { "name": "pxCreateDateTime", "label": "Create date", "type": "date"}, { "name": "pyInstructions", "label": "Instructions"}, {"name": "pzInsKey", "label": "", "action": "Open"}]}

• name is the name of the DP - note that the DP must be available and marked as an API to be accessible
• noresults - text to show if no data found
• params - array of objects to pass as parameter to the DP
• fields - array of objects to show the columns in the table - the table is rendered in the order of this array - each field is indicated by a name (propertyname), a label (show in the heading of the table) - if the property name is called 'pzInsKey', automatically a button will be rendered instead of the key - the button caption will be set using the 'action' prop - clicking on the button will open the assignment

Note: if the params needs to be more dynamic and pass the user that is logged in, set the value of the parameters to '##USERID''. in this case, the Pega UserID that is currently logged in will be passed as parameter

Setting the label for the attachment component

When using the pxAttachment component, the button label is not sent by the DX API

To set the label of the button when using the DX API v1 mashup web component, set the attribute 'LABEL' as custom DX attribute