Aprimo Content Selector

The Aprimo content selector is a pre-built UI to use Aprimo DAM as a tool for users to select content items in 3rd party systems. The Aprimo content selector can be launched in either ID mode or CDN mode. ID mode will return the record ID of the selected asset, and CDN mode will also return the public uri of the asset. Public CDN is required for CDN mode. The record ID that is returned can be used in the Aprimo REST API to get metadata on the selected record, and the public uri returned in CDN mode can be used to place the content in a field or on a page.

To open the Aprimo DAM in Content Selection mode you need to call a dedicated endpoint:
https://<tenant>.dam.aprimo.com/dam/selectcontent

The Aprimo Content Selector can only be used in a stand-alone browser window (or browser tab).

If the user is not yet logged in to Aprimo, the user will first be redirected to the login page. After successfully authenticating, the user will be presented with the Aprimo Content Selector and can start selecting content items.

Once the user has made a selection and clicked the button that accepts the users selection, the Aprimo Content Selector will call the opener back using the postMessage API provided, which is supported by all modern browsers (see documentation on MDN ).

The Aprimo Content Selector can be customized with following options:

To provide the options to the Aprimo Content Selector, you must construct a JSON object containing the options you want to control and convert it into base64-encoded string. As an example:
const selectorOptions = {
title: 'Select logo',
description: 'Select the logo that will be used on the printed brochure',
limitingSearchExpression: 'classification.id = 3a6499d4865f446b8711a8b90098ec55',
accept: 'Use this logo',
select: 'single'
}
const tenant = '<tenant name>'
const encodedOptions = window.btoa(JSON.stringify(selectorOptions))
const url = `https://${tenant}.dam.aprimo.com/dam/selectcontent#options=${encodedOptions}`
document.write(`<a target='_blank' href='${url}'>Show selector</a>`)


Dealing with Special Characters

When your JSON object contains property values with characters outside of the Latin1 range, you cannot use the browser’s window.btoa method. To circumvent this, you can use a little trick by first using the encodeURIComponent method before using the btoa method. To optimize the size of the string, you must apply an unescape as well.
function encode(stringToEncode) {
return window.btoa(unescape(encodeURIComponent(stringToEncode)))
}

Using the select option of ‘singlerendition’ will cause the content selector to launch in CDN mode. CDN mode will only display assets that have been pushed to the public CDN. When an asset is selected in CDN mode a new view will open prompting the user to select a specific rendition of the asset. When the user presses the Accept button, the data is returned like normal. In CDN mode the data returned also contains the public uri of the selected rendition (See section: Callback).

When the user clicks either the accept or cancel button in the Aprimo Content Selector, the selector will perform a callback to the originating window, in the browser. To achieve this communication, the postMessage API is used. In order to handle this communication, you need to listen for message events.
window.addEventListener("message", handleMessageEvent, false)


Note: these messages don’t always work correctly when running a page at a file:// URL

The event.data will contain a JSON object, which specifies the following properties:

The TypeScript definition of the Selection object is:
interface Selection {
id: string,
title: string,
rendition?: {
id?: string,
publicuri?: string
}
}


Additionally, when a crop, trim or preset rendition is selected in the content selector in ‘singlefile’ mode, the following information is returned in the additionalFile property:

{
id: string,
title: string,
additionalFile: {
   additionalFileId: string,
   fileName: string,
   label:string,
   type:string //"Crop", "Trim" or "Custom" (for rendition preset)
}
}

<button id="openSelector">Open selector</button>
<script>
const tenantUrl = 'https://sometenant.dam.aprimo.com'
const aprimoContentSelectorUrl = tenantUrl + '/dam/selectcontent#options=<encoded options>'
const handleMessageEvent = (event) => {
// Ensure only messages from the Aprimo Content Selector are handled.
if (event.origin !== tenantUrl) {
return
}
if (event.data.result === 'cancel') {
alert('You have canceled the selector')
} else {
const ids = event.data.selection.map((selection) => selection.id)
alert("You have selected following ids:\n\n" + ids.join('\n'))
}
}
const openSelector = () => {
window.open(aprimoContentSelectorUrl, 'selector')
}
window.addEventListener("message", handleMessageEvent, false)
const button = document.getElementById('openSelector')
button.addEventListener('click', openSelector)
</script>


Note that the Aprimo Content Selector will automatically close the browser window.