How to Change address url - Pega integrated to React UI via DX-API
Hi,
Greetings. We have a front end built using a react library and at some point during the UX, it integrates with Pega via DX-API. UI renders the views fed from DX-Api and is via mashup. On UI, url in the address bar is remaining static when we navigate to the next screen. This is causing addressability issue. Is there anyway we can change the url without having to reload the entire page?
@RichardMarsot - Hi, Greetings. Can you please see this when you get a chance?
Client is on Pega Infinity 23.1.1.
Regards,
Bharat
Pegasystems Inc.
US
@KOMARINA can you provide a little more details on your configuration? What do you mean by 'I renders the views fed from DX-Api and is via mashup.' - Are you using Pega Web Mashup or Web-Embed to render the UI? If not, do you build your own rendering UI layer and parse the DX API response and render it with your own React UI library (e.g. no Constellation, no Constellation OrchestrationJS?) -
In any case, if you use web-embed or Pega Web Mashup, there are events available that you can listen too - these events are sent when the screen changes state (for example you open a case in a worklist or you complete an assignment) - see https://docs.pega.com/bundle/platform/page/platform/user-experience/events-in-web-embed.html - You can listen to events and then update the browser history to rewrite the URL and indicate that the ui is not in a different state using pushState https://developer.mozilla.org/en-US/docs/Web/API/History/pushState
Accenture
GB
@RichardMarsot Hi Richard, Thank you, this is via Pega Web Mashup and using Mashup API. I will look at the links provided.
Regards,
Bharat
Pegasystems Inc.
US
@KOMARINA for Pega Web Mashup - here is the action that you can use to listen to the changes - https://docs.pega.com/bundle/platform-23/page/platform/user-experience/mashup-action-objects.html
Accenture
GB
@RichardMarsot Thank you, Richard. We are using as below PCore.getMashupApi().createCase('xxx-xxx-xxx-Claim', PCore.getConstants().APP.APP) I am not sure if this is same as Web Mashup but in sdk-config.json, i see as below { "authConfig": { "authService": "xx", "uAuthService": "xx", "tokenStorage": "none", "mashupClientId": "111111111173869", "portalClientId": "11111111573869"
Pegasystems Inc.
US
@KOMARINA so you are using the React SDK on Constellation and calling the PCore API to create case. Can you clarify the request? Is the new case created in a modal dialog like the OOB Constellation UI or is it loaded in the main area? when do you want to change the URL, When you click on create or when loading the create view?
In any case, if you are using the React SDK, so work is currently on-going to manage the URLs and update them to reflect the UI changes and states -
In the meantime, you can find the ID in the PCore using PCore.getState() or PCore.getStoreValue(...) - see the presentation on advanced debugging here https://community.pega.com/event/clsa-community-advanced-constellation-whats-new-24 and the related content.
Accenture
GB
@RichardMarsot New case is embedded in the Primary work area <div id="pega-part-of-page"><div id="pega-root"><div id="APP/PRIMARY_1/WORKAREA"><div><div id="Assignment"> I have the screen rendered via MashupAPI and when navigating to another screen, the address URL does not change and hence when users use Browser Back and Forward to navigate, page is broken.
Pegasystems Inc.
US
@KOMARINAI am still not clear on your configuration - the ID "pega-part-of-page" is only used inside the assignment component for the React SDK https://github.com/pegasystems/react-sdk
Assuming that you are using the React SDK in embedded mode - you should be able to make the necessary code change and logic to rewrite the URL - the full source code is available on github
Accenture
GB
@RichardMarsot Hi Richard, yes we are using React SDK in embedded mode. I am assuing i still have to use history.pushState to rewrite the URL without any reload of the entire page? Another quick question - Is there any documentation on this React SDK explaining the components that are written and how they integrate with each other apart from the comments and read me available in the repository?
Regards,
Bharat