Instructions links to be opened in new tabs in DX API

User Experience
1

Hello :slight_smile:

I have a external application that uses DX API and connects to PEGA. On one of the pages I have instructions to the form, which contains a link. However, I would like to make it open in a new tab. It does only through constellation in PEGA preview, but in DX API I get HTML element as test text . There is no possibility to add target=“_blank” parameter to make it open in new tab always. How can I achieve that? For now I had to override default form in JS, find ‘a’ elements and replace DOM elements with needed parameter. But that’s not a good solution, as it iterates through all elements, it may slow the app and also in the future maybe some links I will not want to open in new tab.

I’m on pega 24.2. Thanks in advance :slight_smile:

2

@RadoslawG17593440

You can achieve this by Overriding the case instructions on your particular view. Below are the steps

  1. Select the override case instructions option in the Instructions dropdown on your particular view. This will create a Paragraph rule in the background with name as “{viewname}_instructionsʼ”.
  2. Create a new field “CollectInstructions” of type Paragraph and format as Plain Text. Please note do not choose Rich Text as you will not see this property while you open Insert field dropdown on the paragraph rule. This seems to be strange as the property control is Plain Text but RichText content in it gets rendered properly on the pega portal. @Kamil Janeczek @MarcCheong Your thoughts here.
  3. Open the flow action for your assignment and create a pre-processing activity. Use method Property-Set-Corr and refer a correspondence rule which you will create in the next step. Refer the property “CollectInstructions” here so that your correspondence content will be populated in it.
  4. Create a correspondence rule and open it in source mode and write whatever content you want to setup. For e.g as shown below with text and link together
    1. Click on the below link to open google in new tab
      Google
  5. Now go back to the instructions Paragraph rule and insert this newly created field “CollectInstructions” in it.

You should be able to see the correspondence content rendered in Rich Text format with Text and Link rendered as you expected.

v24.png
v24.png1893×835 135 KB

You can check the JSON content returned by the DXAPI having the exact content which you setup in the correspondence rule. This should be sufficient for your external UI application to render it as Rich Text without any additional modifications.

For v25, this instructions Paragraph rule is replaced with Dynamic Text rule where the same implementation might not work as expected in Pega portals as Dynamic Text does support only plain text till what i have seen. Below is the snapshot of same implementation in 25.1.1 as well. However, as your UI is external to pega, your JSON content in DXAPI will still remain the same and your UI should not disrupt even if you upgrade to next version.

Hopefully we get support for RichText as well in Dynamic Text rule in future releases.

v25.png
v25.png3434×1338 517 KB

Attached is the implementation document for your reference.

Best practice: As this is not a straight-forward approach, do not write excessive HTML content and styling in the correspondence rule and ensure to follow UI guidelines.

Hope this helps

Happy coding!!!

Regards

JC

RichText Instructions.docx (527 KB)

3

@RadoslawG17593440

For your reference, there was a similar requirement for link in the field group aby another community member where i mentioned about the Dynamic Text rule behaviour in v25. You can checkout here in the below link

Navigation from one tab to another tab

Regards

JC

4

@JayachandraSiddipetathank you so much for your help, works flawless! :slight_smile: