Question
Virtusa
IN
Last activity: 19 Feb 2025 6:46 EST
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.
Blue Rose Technologies GmbH
DE
Possible Causes:
-
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.
-
Changes in Constellation UI Handling of URLs
- Constellation might now require explicit image components instead of directly binding a URL to an
imgtag. - The framework might sanitize or block inline URLs for security reasons.
- Constellation might now require explicit image components instead of directly binding a URL to an
-
Changes in Property Rendering Behavior
Possible Causes:
-
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.
-
Changes in Constellation UI Handling of URLs
- Constellation might now require explicit image components instead of directly binding a URL to an
imgtag. - The framework might sanitize or block inline URLs for security reasons.
- Constellation might now require explicit image components instead of directly binding a URL to an
-
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
imgtag, 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.
- Look for CSP errors (
Conclusion:
- Check CSP settings to allow external image URLs.
- Use the
Imagecomponent 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!
Virtusa
IN
I am looking for more details on storing images in Pega and referencing them in Constellation UI. Specifically, I want to understand:
-
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?
-
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?
Blue Rose Technologies GmbH
DE
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:
-
Navigate to your Case Type → Views → Add a File Upload field.
-
Configure the File Upload Component
-
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:
-
Create a Binary File Rule:
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:
-
Navigate to your Case Type → Views → Add a File Upload field.
-
Configure the File Upload Component
-
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:
-
Create a Binary File Rule:
- Go to
Records → Technical → Binary File - Save the image under a relevant directory (
webwb/for UI use).
- Go to
-
Upload Images via an Activity:
- Use
Call pxUploadFileto upload and store it as a Binary File.
- Use
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: ListObject Type: Data-WorkAttach-FileSource: 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
- User uploads an image via
FileUploadcomponent → Stored as an attachment. - A Data Page (
D_GetAttachmentImage) retrieves the latest uploaded image. - 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!
Updated: 19 Feb 2025 6:31 EST
Virtusa
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.
Virtusa
IN
What should i give the property configurations.