Sitecore Content Hub : How to open Modal pop-up on page load to notify for duplicate assets on create page

Implementing a Modal Popup on Page Load in Sitecore Content Hub Create Page to Notify for Duplicate Assets

Preventing Duplicate Asset Uploads in Sitecore Content Hub

When managing digital assets, ensuring uniqueness is crucial to maintaining an organized and efficient Digital Asset Management (DAM) system. However, during bulk uploads, authors might overlook duplicate icons displayed on asset thumbnails, leading to redundant assets being stored in the DAM.

To address this issue, we can implement a modal popup that triggers on page load within the Create page of Sitecore Content Hub. This modal will notify users about any detected duplicate assets, allowing them to take corrective actions before submission.

Default Behavior in Sitecore Content Hub

By default, Sitecore Content Hub displays a duplicate icon on the asset thumbnail if a newly uploaded asset already exists in the system. To enhance this functionality, we will implement an on-load modal popup using an external ReactJS component.

Steps to Implement the Modal Popup

1. Add the OOTB Modal Component

Sitecore provides an out-of-the-box (OOTB) modal component that we will use. Follow these steps to add the modal:

1. Navigate to the Page Setup

   • Go to Manage >> Pages >> Create.

2. Add the Modal Component

   • Click on the "+Component" button in the Header row.

   • 

   • Search for Modal in the component list.

   • Select Modal and click on Add.

3. Configure the Modal Component

   • Click on the three dots on the modal component and open Settings.

   • Keep the recommended settings.

   • Click on Save.

2. Add a Close Button to the Modal

To provide an option to close the modal:

1. Click on the Modal component to navigate to the Buttons page.

2. Click on the + icon in the top right corner to add a new Close button.

3. Save the configuration once the button appears in the list.

3. Add an External ReactJS Component

To trigger the modal popup on page load, we will use an external ReactJS component.

1. Add an External Component

   • Follow the same steps as adding the modal component.

   • Select External Component from the component list and add it to the Create page row.

2. Upload the JavaScript File

   • Go to Manage >> Portal Assets.

   • Upload the React JS file from here .

3. Link the External Component to the JS File

   • Click on the External component added earlier.

   • Select the uploaded JS bundle and save the changes.

   • 

Expected Outcome

Once implemented, the modal popup will appear on the Create page whenever it is opened. The popup will display the count of duplicate items based on the duplicate icons shown on Asset's thumbnail.

By following these steps, you can efficiently integrate a modal popup in Sitecore Content Hub to enhance the user experience during asset creation.

---

This approach ensures a seamless integration of modal popup using OOTB components and custom JavaScript, improving content management workflows in Sitecore Content Hub.