Accessing DX Picker
This section provides steps on how to access the DX Picker in a custom web application.
Prerequisite
DX Picker must be installed and configured in HCL Digital Experience 9.5 release update CF214 or higher. For instructions on installing DX Picker on supported environments, see the DX Picker Installation topic.
Important
To prevent CORS issue and be able to access DX Picker in a custom web application, it is required to add the host of the custom web application in the list of origins of the RingAPI service.
ringApi:
# CORS Origin configuration for Ring API, array of elements
corsOrigin: []
Accessing DX Picker
Note
You must have User access to use DX Picker. Refer to Working with resource permissions for more information.
To use the DX Picker, you must have the DX Picker Web Component imported in your HTML page.
-
Add the DX Picker script as one of the dependencies in your HTML page.
<html> <head>...</head> <body> // Import the dx-picker.js inside <script src="https://<DX_HOSTNAME>/dx/ui/picker/dx-picker.js"></script> </body> </html>
-
After adding the script, you can now use the
dx-picker
tag inside your HTML page.<html> <head>...</head> <body> // Insert the tag inside your code <dx-picker></dx-picker> <script src="https://<DX_HOSTNAME>/dx/ui/picker/dx-picker.js"></script> </body> </html>
-
Open DX Picker by setting the
open
attribute of the picker totrue
.You can assign an id to the
dx-picker
tag and add an onclick handler button that sets theopen
attribute totrue
.<html> <head> function toggleDxPicker() { const dxPicker = document.getElementById('dx-picker-id') if (dxPicker) { const isOpen = dxPicker.getAttribute('open') === String(true); dxPicker.setAttribute('open', !isOpen) } } </head> <body> // Add toggleDxPicker to the button <button onclick="toggleDxPicker()">Open Picker</button> // Insert the tag inside your code <dx-picker id="dx-picker-id"></dx-picker> <script src="https://<DX_HOSTNAME>/dx/ui/picker/dx-picker.js"></script> </body> </html>
Picker Events
Interacting with the DX Picker triggers events which can be accessed by listening to the message
event and inspecting the data
object.
window.addEventListener('message', (event) => {
const eventData = event.data;
/*
* event.data object will have the following structure:
*
* {
* type: <PICKER_EVENT>,
* detail: {
* <data included in the event>
* }
* }
*
*/
})
The following are the current events available in the DX Picker:
-
HCL-DX-PICKER-SELECT
- Triggered when selecting an item.This event contains the following object:
{ "type": "HCL-DX-PICKER-SELECT", "detail": { "source": "dam", "items": [ { "id": string, "name": string, "size": string, "path": string, "thumbnail": string, "assertType": string, "mediaType": string } ] } }
-
HCL-DX-PICKER-CLOSE
- Triggered when the Cancel button is clicked.This event contain the following object:
{ "type": "HCL-DX-PICKER-CLOSE", "detail": { "close": boolean; } }