Content Picker
The Seismic Content Picker control allows developers to add support for choosing files and folders from Workspace or DocCenter from any web application. The picker handles all communication with the Seismic APIs and returns information about the files selected to the containing application via a JavaScript callback.
Browser Support
Chrome, Firefox, Safari, and Edge (latest 2 versions)
Limited support for Internet Explorer 11 (requires ES2015/Intl polyfill)
Mobile Chrome and Safari
Getting Started
To quickly load a Seismic Platform component, you first must include the Seismic Bootstrapper script in the DOM and create an empty container element for the component to live in. The bootstrapper will check the containing application for dependencies already loaded, like react, or jquery, and only load what isn't already available.
Updated seismic-bootstrapper to version 2.0.0
Please refer to the updated HTML script below
<script crossorigin src="https://smc-prod-cdn.seismic.com/static/public/seismic-bootstrapper/2.0.0/SeismicBootstrapper.js"></script>
<div id="contentPickerContainer"></div>
After the script is loaded and the container element in place, you must initialize the Bootstrapper and then attach the component to the element.
Updated content picker to version 4
Please refer to the updated Javascript below
const options = {
manifestPath: "https://smc-prod-cdn.seismic.com/static/public/",
token: ''
};
const containerEl = document.getElementById('contentPickerContainer');
window.SeismicPlatform.SeismicBootstrapper.init(options);
function tokenResolver() {
return options.token
};
function apiDomainResolver() {
return "api.seismic.com"
};
function headerResolver() {
return {
'Authorization': 'Bearer ' + tokenResolver(),
'Content-Type': 'application/json',
}
};
const apiOptions = {
apiDomainResolver: apiDomainResolver,
authTokenResolver: tokenResolver,
globalErrorHandlers: {},
customHeadersResolver: headerResolver,
};
window.SeismicPlatform.SeismicBootstrapper.attach("[email protected]", {
settings: {
"language": "en-US",
"selectionMode": "single",
"allowFolderSelection": false,
"repositories": ["recents", "favorites", "doccenter", "workspace", "library"],
"initialFolderId": {},
"viewMode": "narrow",
"contentTypeFilter": [],
"hideContentTypeFilteredItems": true,
"deliveryOptionsFilter": [],
"hideDeliveryOptionsFilteredItems": true
},
apiOptions: apiOptions,
callbacks: {
onSelectionChanged: function (items) {
console.log(items);
},
onPreviewClick: function (item) {
console.log(items);
}
}
}, containerEl);
Options
In addition to the options listed above, the following options can be used to customize the Seismic Content Picker for your use case.
Name | IsRequired | Value Range |
|---|---|---|
language | N (default to en-US) | de-DE, en-GB, en-US, es-ES, fr-CA, fr-FR, it-IT, ja-JP, ko-KR, pt-BR, zh-CN, zh-TW, el-CY, tr-CY |
selectionMode | Y | multi: Multiple contents can be selected |
allowFolderSelection | N (default to true) | true: Folders can be selected |
contentTypeFilter | N | "PPTX","PPT", "Email Template", etc... |
hideContentTypeFilteredItems | N | true: Hide items not matching with the filter |
deliveryOptionsFilter | N | "Livesend","Generate Livesend Link" |
hideDeliveryOptionsFilteredItems | N | true: Hide items not matching with the filter |
viewMode | Y | narrow: Load in narrow view design. |
repositories | N | "recents", "favorites", "doccenter", "workspace", "library" |
initialFolderId | N | Content Manager Workspace DocCenter |
assetTypeFilter | N | { "filterType": "blacklist", "values": ["LiveDoc", "LiveDoc Component", "Email Template"] } {"filterType": "whitelist", "values": ["File"] } |
formatFilter | N | { "filterType": "blacklist", "values": ["PPTX"] } {"filterType": "whitelist", "values": ["PNG"] } |
profileFilter | N | profileFilter: { "filterType": "blacklist", "values": ["1fd349ba-78da-4f62-8160-36c0c7c14fa1"] } profileFilter: { "filterType": "whitelist", "values": ["1fd349ba-78da-4f62-8160-36c0c7c14fa1"] } |
showPreview | N (default to false) | true - Adds a preview button items, which on click triggers onPreviewClick callback. |
application | N | The name of your application for reporting purposes |
tintColor | N | #ecf0f1AA, #10c0392b, rgb(170,34,51) |
Example return values
When clicking the "done" button, it will execute the function provided to the callbacks.onDone option during initialization, and pass the following JSON to the first parameter.
[
{
"repository": "doccenter",
"id": "L2RkZTA0NGE5ZDgtMjY1OS00NzM1LWIzNGMtMzUwYTMxNzNmOWQyL2RmTkRWak9HWXpZekl0TTJaalpTMDBPVEpsTFRobE9HTXROMlEyTnpjeU5URTJPV0ZqLFBUMD0sUTFCSC9kZlpEbGpOall3Wm1JdFlXUXlaQzAwWWpneUxXRmtNall0T0dFd01ESTJNVGM1TlRFMyxQVDA9LFJYaDBaWEp1WVd3PS9sZjViZmNkNWU5LTYyZGEtNDkwYi04YjZiLWM1YmZhOWQxMzM2YQ==",
"profileVersionId": "67aa047c-a251-4d77-b626-68e00a8c9457",
"name": "Ballpark Analytics Sell Sheet",
"type": "File",
"format": "PDF",
"description": null,
"parentFolderId": "dfZDljNjYwZmItYWQyZC00YjgyLWFkMjYtOGEwMDI2MTc5NTE3,PT0=,RXh0ZXJuYWw=",
"contentProfileId": "374df864-f9d2-4b27-b7ed-682e10e39088",
"sourceBlobId": "d4acb093-764f-4d5a-bc74-6833084868b6",
"sourceContainerName": "tstrader",
"contentProfileName": "Enterprise Sales - East",
"path": [
{
"id": "dfNDVjOGYzYzItM2ZjZS00OTJlLThlOGMtN2Q2NzcyNTE2OWFj,PT0=,Q1BH",
"name": "CPG"
},
{
"id": "lf5bfcd5e9-62da-490b-8b6b-c5bfa9d1336a",
"name": "Ballpark Analytics Sell Sheet"
}
],
"thumbnailId": "tef8785a9-2933-4320-96ea-f31693cead75",
"thumbnailUrl": "https://newdownload.seismic.com/api/download/v1/blob?t=tstrader&c=tstrader&id=tef8785a9-2933-4320-96ea-f31693cead75&et=20210822164011&sig=Uf1d1B9v5e8seUaIg7kUnj7iiOHYBlBlvSXs1WV7El8%3D",
"sourceBlobDownloadUrl": "https://newdownload.seismic.com/api/download/v1/blob?t=tstrader&c=tstrader&id=d4acb093-764f-4d5a-bc74-6833084868b6&et=20210822164011&sig=UJ3o1s5HeqcDM6xnJvzR2FIy3BDXzy09oUK4bJEo5zE%3D",
"applicationUrls": [
{
"name": "DocCenter Universal Link",
"url": "https://tstrader.seismic.com/Link/Content/DC6CFTgSb7lU29V8FZeJlvDQ"
}
],
"libraryContent": {
"id": "815321e8-fb26-4d95-bd57-c15978996f0d",
"versionId": "5bfcd5e9-62da-490b-8b6b-c5bfa9d1336a",
"teamsiteId": "1"
},
"version": "1.0",
"expiresAt": null,
"properties": [
{
"name": "Asset Grouping",
"id": "46a9a522-3e7d-405c-83c5-aee8746515c9",
"values": [
"Collateral"
]
}
],
"deliveryOptions": [
{
"id": "2d4227a5-eebc-4532-8e03-cf6f4b24427e"
}
],
"iconUrl": "https://api.seismic.com/icon-host/v1/content-icons/icon?format=pdf",
"modifiedAt": "2018-03-13T15:45:07.667Z",
"size": 316753,
"urlObjectUrl": null
}
]
{
"applicationUrls": [
{
"name": "Default",
"url": "https://quake.seismic.com/share/wwrgbX1WDE6biuIQI3dTsAD"
}
],
"createdAt": "2015-10-25T16:43:01.733Z",
"createdBy": {
"id": "5b6c0c7b-9f5e-49b4-8b03-fe711d3eec9a"
},
"deliveryOptions": [
{
"id": "d8b1d28e-51e3-4b98-92d2-4e35841243ad"
},
{
"id": "41598e97-da18-4b4e-8791-6ff48fe77daf"
}
],
"format": "DOCX",
"id": "z2d02a4b-0e29-4ef7-9f69-d6ff02618db9",
"isContextualContent": false,
"modifiedAt": "2015-10-26T16:43:01.733Z",
"modifiedBy": {
"id": "5b6c0c7b-9f5e-49b4-8b03-fe711d3eec9a"
},
"name": "Sample Docx File",
"parentFolderId": "b2d02a4b-0e29-4ef7-9f69-d6ff02618db7",
"repository": "workspace",
"resourceUrl": "https://api.seismic.com/integration/v1/workspace/files/6de00ac3-567d-4e0c-9b8a-e210237753b0",
"size": 151712,
"type": "file",
"versionId": "cbb03059-04e4-4647-b583-827db5f5de78",
"iconUrl": "https://api.seismic.com/icon-host/v1/content-icons/icon?format=docx"
}
Authorization
The Content Picker UI needs an access token to make Seismic API calls.
Access Token
To simplify getting an actual token during the development and testing phases, Siesmic has provided the following
Token GeneratorFor your production application, you can reference the authentication section of the API documentation.
Design
CSS Changes Not Supported
Future versions of the content picker will support CSS overrides. We have not yet locked down our class structure, so modify the CSS at your own risk.
Demo
The following demos are live code samples in Codepen, you can click the JS and HTML buttons to see and the underlying code.
To see it in action, go grab a token here and paste it in to the options.token in the code.
Updated 12 days ago