File Type Icon Not Displayed in File Display Constellation Component

User Experience
1

I am working on integrating the File Display Constellation component using the React SDK and have published a custom component to Pega following the example provided in the official documentation:
https://design.pega.com/extend/file-display/#Usage.

While the component renders the uploaded file name correctly in the Pega runtime, the file type icon (image icon) is not displayed as expected .

image
image863×162 8.77 KB

However, when I run the same component in Storybook, the file type icon is displayed correctly based on the file extension (for example, myfile.do c).

Observations:

  • The same React component and configuration are used in both Storybook and Pega.

  • Storybook correctly shows the file type icon based on the file extension.

  • In Pega Constellation runtime, the icon does not appear.

Expected behavior:
The file type icon should be displayed in Pega runtime, similar to how it appears in Storybook.

Actual behavior:
Only the file name is rendered; the file type icon is missing.

Code snippet:

import { FileDisplay, useToaster } from ‘@pega/cosm os-r eact-core’;

export default function Test() {

const { push } = useToaster();

const handlePreview = true ? id => push({ content: `Previewed ${i d}` }) : undefined;

const handleDownload = true ? id => push({ content: `Downloaded ${ id}` }) : undefined;

const imageSrc = true

? ‘https://www.pega.com/sites/default/files/styles/480/public/media/images/2021-02/ pwi-2021-prevcard.jpg’

: ‘https://pega.c om/media/comp ress.zip’;

ret urn (

<FileDi splay

id='item-1 '

variant={‘file’}

displa yText={‘Pega World iNspire’}

value= {true ? imageSrc : undefined}

onPreview={handlePreview}

onDownload={handleDo wnload}

co mpac t={false}

/>

);

};

Please let me know if any additional details or screenshots are required from my side.

2

@HemanthK17577056 There is a space in the image link in your code snippet, is that the case also for the real component? If so that might be the issue.

Otherwise it could be the CSP of the application, check that it allows the image source you’re using, especially since it’s an external asset.

3

Hello @HemanthK17577056

For icons in custom components, you need to use pega icons from UX design system.

Refer to the below link https://design.pega.com/design/icon/

This will ensure UI consistency. You need to register the icon in the component first and then use it accordingly on your UI element. A sample usage mentioned below,

import { registerIcon } from ‘@pega/cosmos-react-core’;

import * as plusIcon from ‘@pega/cosmos-react-core/lib/components/Icon/icons/plus.icon’;

registerIcon(plusIcon); // Registering method

// Usage method

Hope this helps

Regards

JC