Skip to main content

This content is closed to future replies and is no longer being maintained or updated.
Links may no longer function. If you have a similar request, please write a new post.

Question

 Prakash Chougule (PrakashC16595493)
Deloitte
Developer
Deloitte
IN
PrakashC16595493 Member since 2022 3 posts
Deloitte
Posted: Feb 10, 2025
Last activity: Feb 19, 2025
Posted: 10 Feb 2025 4:33 EST
Last activity: 19 Feb 2025 6:46 EST
Closed

Image Settings in URL

In Pega Infinity 23.x, I was able to add an image URL in a Constellation UI and display it on the next screen. However, after upgrading to Pega 24.2, the image does not load when using the same approach.

  • Navigate to the relevant UI screen in Constellation.
  • Add an image URL in an input field or property(i.e url type property).
  • Navigate to the next screen where the image should be displayed.
  • Observe that the image does not load.
***Edited by Moderator Ellen to add Capability tags***
To see attachments, please log in.
Pega Infinity
Pega Cloud
Constellation
Healthcare and Life Sciences
System Architect

Posted: 1 year ago
Posted: 11 Feb 2025 2:03 EST
Sathishkumar Senthilkumar (sathishsenthil)
Blue Rose Technologies GmbH
CoE Head
Blue Rose Technologies GmbH
DE

@PrakashC16595493

Possible Causes:

  1. Security Restrictions on External Image URLs

    • Pega 24.2 may have tightened Content Security Policy (CSP) rules, preventing external image URLs from rendering.
    • Check the browser console (F12 → Console/Network Tab) for CSP errors.

  2. Changes in Constellation UI Handling of URLs

    • Constellation might now require explicit image components instead of directly binding a URL to an img tag.
    • The framework might sanitize or block inline URLs for security reasons.

  3. Changes in Property Rendering Behavior

Show More

@PrakashC16595493

Possible Causes:

  1. Security Restrictions on External Image URLs

    • Pega 24.2 may have tightened Content Security Policy (CSP) rules, preventing external image URLs from rendering.
    • Check the browser console (F12 → Console/Network Tab) for CSP errors.

  2. Changes in Constellation UI Handling of URLs

    • Constellation might now require explicit image components instead of directly binding a URL to an img tag.
    • The framework might sanitize or block inline URLs for security reasons.

  3. Changes in Property Rendering Behavior

    • Pega may have deprecated direct URL usage for images in certain fields.
    • Instead of binding a Text (URL) property, Constellation might now require an image component.

Solution Approaches:

1. Validate CSP (Content Security Policy) Settings

  • Go to: Dev Studio → Records → Security → Content Security Policy
  • Allow External Image URLs by adding the domain under img-src directives.
  • Restart the server after making changes.

2. Use the Image Widget Instead of Binding URL Directly

  • Instead of binding a URL directly to an img tag, use the Constellation Image Component:
  • This ensures the UI framework correctly processes the URL.

3. Store the Image in Pega and Reference It

  • If external URLs are blocked, store the image in a Pega Binary File or upload it as an attachment:
    • Upload an image using File Upload Component.
    • Retrieve the uploaded image using a Data Page.

4. Debug with Browser Dev Tools

  • Open Developer Tools (F12) → Console & Network:
    • Look for CSP errors (Blocked by Content Security Policy).
    • Check if the image URL is returning 403 Forbidden or 404 Not Found.
    • If the request is blocked, update the CSP settings or use an authenticated Pega-hosted image.

Conclusion:

  • Check CSP settings to allow external image URLs.
  • Use the Image component instead of directly binding a URL.
  • Store images inside Pega to avoid external URL restrictions.
  • Debug using browser console to identify CSP or network-related issues.

This should restore image rendering in Constellation UI after the upgrade.

Let me know if you need further refinements!

Show Less
To see attachments, please log in.
Posted: 1 year ago
Posted: 11 Feb 2025 3:18 EST
Prakash Chougule (PrakashC16595493)
Deloitte
Developer
Deloitte
IN

@sathishsenthil

I am looking for more details on storing images in Pega and referencing them in Constellation UI. Specifically, I want to understand:

  1. Uploading an Image Using the File Upload Component

    • What is the recommended approach to allow users to upload images in a case?
    • How can I store the uploaded image as a Binary File or Attachment?

  2. Retrieving the Image Using a Data Page

    • Once the image is stored, how do I retrieve it in Constellation UI?
    • What should be the Data Page structure to serve the image?
    • How can I bind it to an Image Component in Constellation?

 

To see attachments, please log in.
Posted: 1 year ago
Posted: 11 Feb 2025 4:19 EST
Sathishkumar Senthilkumar (sathishsenthil)
Blue Rose Technologies GmbH
CoE Head
Blue Rose Technologies GmbH
DE

@PrakashC16595493

Storing and Displaying Images in Pega Constellation UI (Pega 24.2)

Since Constellation UI does not support direct use of external image URLs due to security restrictions, the recommended approach is to store images within Pega and retrieve them dynamically in the UI.

1. Uploading an Image Using the File Upload Component

Recommended Approach to Allow Users to Upload Images in a Case

Use the File Upload component in Constellation to let users upload images as case attachments.

Steps:

  1. Navigate to your Case Type → Views → Add a File Upload field.

  2. Configure the File Upload Component

  3. When a user uploads an image, it gets stored as an attachment linked to the case.

Alternative: Store Image as a Binary File in Pega

If you prefer to store the image in Binary File (Data-WorkAttach-File) instead of an attachment:

  1. Create a Binary File Rule:

Show More

@PrakashC16595493

Storing and Displaying Images in Pega Constellation UI (Pega 24.2)

Since Constellation UI does not support direct use of external image URLs due to security restrictions, the recommended approach is to store images within Pega and retrieve them dynamically in the UI.

1. Uploading an Image Using the File Upload Component

Recommended Approach to Allow Users to Upload Images in a Case

Use the File Upload component in Constellation to let users upload images as case attachments.

Steps:

  1. Navigate to your Case Type → Views → Add a File Upload field.

  2. Configure the File Upload Component

  3. When a user uploads an image, it gets stored as an attachment linked to the case.

Alternative: Store Image as a Binary File in Pega

If you prefer to store the image in Binary File (Data-WorkAttach-File) instead of an attachment:

  1. Create a Binary File Rule:

    • Go to Records → Technical → Binary File
    • Save the image under a relevant directory (webwb/ for UI use).

  2. Upload Images via an Activity:

    • Use Call pxUploadFile to upload and store it as a Binary File.

2. Retrieving the Image Using a Data Page

Once the image is uploaded (either as an attachment or binary file), you need a Data Page to retrieve it.

Retrieving the Image from Case Attachments

Create a Data Page (D_GetAttachmentImage) to fetch the latest image:

  • Structure:

    • Data Page Type: List
    • Object Type: Data-WorkAttach-File
    • Source: Report Definition or Data Transform

Retrieving the Image from a Binary File

  • Create a REST Service (GET /binary/{imageName}) that returns the stored Binary File.
  • Bind this REST endpoint to the Data Page (D_BinaryImagePage).

3. Binding the Image to an Image Component in Constellation

Once the Data Page (D_GetAttachmentImage) fetches the image, bind it to an Image Component.

Final Flow for Storing and Displaying Images in Constellation UI

  1. User uploads an image via FileUpload component → Stored as an attachment.
  2. A Data Page (D_GetAttachmentImage) retrieves the latest uploaded image.
  3. Bind the Data Page to an Image component in Constellation UI.

This ensures that uploaded images are stored securely in Pega and retrieved dynamically in Constellation UI. Let me know if you need further refinements!

Show Less
To see attachments, please log in.
Posted: 1 year ago
Updated: 1 year ago
Posted: 19 Feb 2025 6:28 EST
Updated: 19 Feb 2025 6:31 EST
Prakash Chougule (PrakashC16595493)
Deloitte
Developer
Deloitte
IN

@sathishsenthil ,How to display the Stored Image??

As i have stored the image in my local data store i want to display that to the manager.

I am Storing the link of the image in my local storage. I have attached the data type image where i am storing the url. 

To see attachments, please log in.

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

Pega Collaboration Center has detected you are using a browser which may prevent you from experiencing the site as intended. To improve your experience, please update your browser.

Close Deprecation Notice