Skip to main content


         This documentation site is for previous versions. Visit our new documentation site for current releases.      
 

Launching Theme Cosmos pages from Cosmos React portals

Updated on October 11, 2022
Applicable to Cosmos React applications

Give your users access to Theme Cosmos pages from Cosmos React portals. This approach helps you maintain application continuity while you rebuild your existing pages in Cosmos React.

For example, your business owns a Pega mortgage application that is designed in Theme Cosmos. You want to rebuild the application in Cosmos React. To save time to minimum viable product, you incorporate the existing Theme Cosmos documents landing page in the new application instead of building a new page.
Before you begin: Check the applications that you want to integrate:
  • Ensure that both the Theme Cosmos and Cosmos React applications have the same name but different version numbers.
  • Ensure that both applications use single sign-on (SSO) authentication. For more information, see Creating an authentication service.

Creating an openHarness activity

Create an activity that opens a harness in a new browser tab to use for integration of Theme Cosmos pages with Cosmos React applications.

  1. Open the Theme Cosmos application whose pages you want to display in Cosmos React.
  2. In the Work- class, create a openHarness activity.
    For more information, see Creating an activity.
  3. Click Add a step, and then, in Step 1, define the thread of the activity:
    1. In the Method field, enter Property-Set.
    2. In the Step page field, enter pxThread.
    3. Click the Expand to see the method parameters arrow.
    4. In the PropertiesName field, enter Param.ThreadName.
    5. In the PropertiesValue field, enter .pxThreadName.
  4. Click Add a step, and then, in Step 2, define the action:
    1. In the Method field, enter Property-Set.
    2. Click the Expand to see the method parameters arrow.
    3. In the PropertiesName field, enter Param.actionName.
    4. In the PropertiesValue field, enter showHarness.
  5. Click Add a step, and then, in Step 3, set the portal name to default:
    1. In the Method field, enter Property-Set.
    2. Click the Expand to see the method parameters arrow.
    3. In the PropertiesName field, enter Param.PortalName.
    4. In the PropertiesValue field, enter "UserPortal".
  6. Click Add a step, and then, in Step 4, in the Method field, enter call pxOpenWorkItemNewTab.
  7. In the Method Parameters section, select the Pass current parameter page checkbox.
    Configuration of the openHarness activity
    OpenHarness activity logic.
  8. On the Parameters tab of the activity, add the following parameters:
    • tabName
    • className
    • ruleName
    • preActivityName
    • preActivityParams
    • preDataTransform
  9. In the rule form, click Save.

Configuring URL mapping in the Theme Cosmos application

Set URL mapping in your Theme Cosmos application to create a URL address that you can reference from the Cosmos React application.

Before you begin: Define an openHarness activity. For more information, see Creating an openHarness activity.
  1. Open the Theme Cosmos application whose pages you want to display in Cosmos React.
  2. In the navigation pane of Dev Studio, click Records.
  3. Expand the Technical category, and then click URL Mappings.
  4. In the list of mapping instances , click pyDefault.
  5. On the rule form, in the Landing pages section, click Add URL alias.
  6. In the Define URL mapping dialog box, configure the URL path:
    1. In the Identifier field, enter a label for your resource.
    2. Clear the Map path elements for URL generation checkbox.
    3. In the Path element type list, select Constant.
    4. In the Value field, enter the URL extension that you want to associate with the page.
    5. Click Next.
  7. In the Edit processing activity dialog box, configure the activity that starts when the user opens the URL:
    1. In the Class field, enter Work-.
    2. In the Activity field, enter openHarness.
    3. In the Parameter section, provide the parameters for your activity.
      For example:
      Sample activity configuration with parameters
      The parameters are set to represent the target harness.
    4. Click Finish.
  8. On the rule form, click Save as.
  9. On the New tab, ensure that the context points to the application ruleset, and then click Create and open.

Overriding the pyIsAutoGenThread

Ensure that the mapped URL address of the target Theme Cosmos landing page opens correctly in a portal by adjusting the pyIsAutoGenThread when rule.

  1. In the ">Theme Cosmos application, in the header of Dev Studio, search for and open the pyIsAutoGenThread when rule.
  2. On the Advanced tab of the rule form, define the new logic for the when rule:
    1. To the right of the row A of the condition, click the Configure advanced conditions here arrow.
    2. In the list of logic structures, select [condition evaluates to true].
    3. In row A, enter @String.contains(@toUpperCase(pxThread.pxThreadName),@toUpperCase("autothread")).
      For example:
      When rule configuration and the advanced conditions arrow
      The advanced conditions arrow is to the right of the expression row.
  3. On the rule form, click Save as.
  4. On the New tab, ensure that the context points to the application ruleset and the @base class, and then click Create and open.

Adding Theme Cosmos landing pages to the navigation menu

Give Cosmos React users access to portal pages from Theme Cosmos applications by adding the pages to the main navigation menu. With this access, you can expand the scope of your application and better support a gradual phase-out of Theme Cosmos technology.

You can add items to your navigation menu by editing the out-of-the-box pyPopulateAdditionalNavPages data transform, which is the source for the data page that defines the contents of the menu. You can use the same method to add external web pages to the main menu.

Before you begin: Map the URL address of the target Theme Cosmos landing page. For more information, see Configuring URL mapping in the Theme Cosmos application.
  1. Open the Cosmos React application.
  2. In the header of Dev Studio, search for and open the pyPopulateAdditionalNavPages data transform.
  3. On the Definition tab, click Add a row, and then define the parent row for the logic that appends the Theme Cosmos page to the navigation menu:
    1. In the Action list, select Append and Map to.
    2. In the Target field, enter Primary.pxResults.
    3. In the Relation list, select a new page.
  4. Under the Append and Map to action, add and configure the first child action that defines the label for the Theme Cosmos page:
    1. In the Action list, select Set.
    2. In the Target field, enter .pyLabel.
    3. In the Relation list, select equal to.
    4. In the Source field, enter the label for the page in double quotes.
  5. Under the Append and Map to action, click Add a row, and then configure the second child action that defines URL address for the Theme Cosmos page:
    1. In the Action list, select Set.
    2. In the Target field, enter .pyURLContent.
    3. In the Relation list, select equal to.
    4. In the Source field, enter the URL path that you mapped in Configuring URL mapping in the Theme Cosmos application.
  6. Under the Append and Map to action, click Add a row, and then configure the third child action that defines menu icon for the Theme Cosmos page:
    1. In the Action list, select Set.
    2. In the Target field, enter .pxPageViewIcon.
    3. In the Relation field, list equal to.
    4. In the Source field, enter the name of the icon that you want to use in double quotes.
      The name of the icon must be preceded by pi pi-. For more information on out-of-the-box Pega Cosmos icons, see Icon reference.
    For example:
    Sample configuration of the pyPopulateAdditionalNavPages data transform
    The data transform configured to append the Documents page to the navigation menu.
  7. On rule form, click Save as.
  8. On the New tab, ensure that the context points to the application ruleset, and then click Create and open.

Adding Theme Cosmos landing pages to the case view actions menu

Expand the case view actions menu by adding links to Theme Cosmos landing pages. This approach helps you integrate existing landing pages with your new Cosmos React application.

You can use the same method to add external web pages to the actions menu in the case view.
Before you begin: Map the URL address of the target Theme Cosmos landing page. For more information, see Configuring URL mapping in the Theme Cosmos application.
  1. Open the Cosmos React application.
  2. In the header of Dev Studio, search for and open the pyDefault data transform.
  3. On the Definition tab of the rule form, click Add a row, and then define the parent row for the logic that appends the Theme Cosmos page to the actions menu:
    1. In the Action list, select Append and Map to.
    2. In the Target field, enter .pyCaseLinks.
    3. In the Relation list, select a new page.
  4. Under the Append and Map to action, configure the first child action that defines URL address for the Theme Cosmos page:
    1. In the Action list, select Set.
    2. In the Target field, enter .pyURLContent.
    3. In the Relation list, select equal to.
    4. In the Source field, enter the URL path to the target page.
      The URL of the target place is the URL of the target application, which you can find in the application definition, combined with the name that you mapped in .
  5. Under the Append and Map to action, configure the second child action that defines the label for the Theme Cosmos page:
    1. In the Action list, select Set.
    2. In the Target field, enter .pyLabel.
    3. In the Relation list, select equal to.
    4. In the Source field, enter the label for the page in double quotes.
    For example:
    Sample configuration of the pyDefault data transform
    The data transform configured to append the Documents page to the actions menu.
  6. On rule form, click Save as.
  7. On the New tab, ensure that the context points to the application ruleset, and then click Create and open.

Tags

Pega Platform 8.7 User Experience

Have a question? Get answers now.

Visit the Support Center to ask questions, engage in discussions, share ideas, and help others.

Visit the Support Center

Did you find this content helpful?

Yes
No

Want to help us improve this content?
Suggest an edit

We'd prefer it if you saw us at our best.

Pega.com is not optimized for Internet Explorer. For the optimal experience, please use:

Close Deprecation Notice
Contact us