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
single: Only single document can be selected
drag: Contents can be dragged outside of UCP and selected by dropping on drag target

allowFolderSelection

N (default to true)

true: Folders can be selected
false: Folder can’t be selected

contentTypeFilter

N

"PPTX","PPT", "Email Template", etc...

hideContentTypeFilteredItems

N

true: Hide items not matching with the filter
false: Gray out items not matching with the filter

deliveryOptionsFilter

N

"Livesend","Generate Livesend Link"

hideDeliveryOptionsFilteredItems

N

true: Hide items not matching with the filter
false: Gray out items not matching with the filter

viewMode

Y

narrow: Load in narrow view design.
wide: Loads in wide view

repositories

N

"recents", "favorites", "doccenter", "workspace", "library"

initialFolderId

N

Content Manager
{ "repository": "library", "folderId": "", "teamsiteId": ""}
NOTE: Enter "folderId": "root" to show all contents in the given teamsite.

Workspace
{"repository": "workspace", "folderId": ""}

DocCenter
{"repository": "doccenter", "folderId": "", "contentProfileId": ""}

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 Generator

For 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.


Did this page help you?