Bynder UI components

Bynder UI components to support frontend developers on building their web applications.

Compact View

See Compact View in action

The Bynder Compact View is the easiest way to get assets from Bynder into your web application. It's a component written in ReasonML powered by an OCaml backend that allows developers to add support for selecting and importing assets from a Bynder Asset Bank without having to worry about the intricacies related to building a file picker - UI design, authentication, API requests, etc. This component fetches the assets and their metadata through the Bynder API and renders it by replicating Bynder look and feel. Users can query, filter (by smartfilters, metaproperties, tags, keyword, and existing collections), sort, and select assets to then import them into another application.

Compact View works with all methods of authentication that your Bynder portal supports.

Compact View on Bynder Knowledge Base

Compact View login page
Compact View asset list


Example usage

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Compact View</title> </head> <body> <!-- Compact View Button --> <div id="bynder-compactview" data-assetTypes="image,video" data-autoload="false" data-button="Open Compact View" data-collections="true" data-defaultEnvironment="" data-fullScreen="false" data-header="true" data-language="en_US" data-mode="multi" data-zindex="300"> </div> <script src="https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/js/client-1.5.0.min.js"></script> <div id="importedAssets"></div> <script> document.addEventListener('BynderAddMedia', function (e) { // The selected assets are found in the event detail property var selectedAssets = e.detail; var importedAssetsContainer = document.getElementById('importedAssets'); importedAssetsContainer.innerHTML = ''; var asset; for (var i = 0; i < selectedAssets.length; i++) { asset = selectedAssets[i]; switch (asset.type) { case 'audio': case 'document': case 'image': // Note that we use the 'webimage' thumbnail here but all of the thumbnails // are returned in the compact view response, so the user can use the // thumbnail that is relevant to their use case importedAssetsContainer.innerHTML += '<img src=' + asset.thumbnails['webimage'] + ' />'; break; case 'video': importedAssetsContainer.innerHTML += ('<video width="640" height="480" controls>' +'<source src="' + asset.videoPreviewURLs[0] + '" type="video/mp4">' +'</video>'; break; } } }); </script> </body> </html>


Details and configuration

To setup the Bynder Compact View in your web app, add the following line to your page: <script src="https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/js/client-1.5.0.min.js"></script>
Include <div id="bynder-compactview" /> on your page to create a button that will allow you to load the Compact View. The following attributes can be defined:

AttributeDescriptionPossible ValuesDefault Value
data-assetTypesComma separated list of asset types to display"image", "video", "document", "audio""image,video"
data-autoloadEnable automatic loading after rendering"true" or "false""false"
data-buttonButton textAny"Open Compact View"
data-collectionsEnable the collections in the Compact View"true" or "false""false"
data-defaultEnvironmentSet a default environment for the Compact ViewBynder URL or emptyEmpty
data-fullScreenSet the Compact View to have the whole parent container's dimensions"true" or "false""false"
data-headerSet the header as visible"true" or "false""true"
data-languageSet language for the Compact View"en_US", "nl_NL", "es_ES""en_US"
data-modalWhether to display Compact View in a fixed position modal"true" or "false""true"
data-modeSet the Compact View to allow multiple or single asset selection"single" or "multi""multi"
data-searchTermSet the initial value for search term"Keyword"""
data-shadowDomWhether to mount Compact View in a shadow DOM root"true" or "false""true"
data-zindexSet the z-index of the Compact ViewBetween 1 and 16777270"100"


Example:

<div id="bynder-compactview" data-assetTypes="image,video,document,audio" data-button="Open Compact View" data-defaultEnvironment="https://example.bynder.com" data-fullScreen="false" data-header="true" data-language="en_US"></div>

Once the assets are selected, they are submitted by the Compact View using CustomEvents. They will be returned in an array of objects that can be handled by adding a listener to your page:

document.addEventListener("BynderAddMedia", function(e) { var assetsToImport = e.detail;});

The response contains all of the information about the assets from the Bynder portal, including all thumbnails and public custom derivatives.

List of available asset derivatives can be retrieved by callingapi/v4/account/derivatives/asset.thumbnails['<derivative prefix>'] will contain a direct link for eachpublicly available asset derivative (isPublic: 1).


Versions

1.5.0

Source: https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/js/client-1.5.0.min.js

New Features:

  • New attribute data-shadowDom for toggling the usage of shadow DOM
  • New attribute data-modal for displaying the Compact View in a modal rather than in the parent element

1.4.0

Source: https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/js/client-1.4.0.min.js

New Features:

  • Added close button when autoload is not enabled
  • Improved authorisation error handling
  • Improved performance for large asset banks
  • Decreased bundle size by ~200kB - the most compact version yet!

1.3.0

Source: https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/js/client-1.3.0.min.js

New Features:

  • New attribute data-searchTerm for setting the initial search value

1.2.0

Source: https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/js/client-1.2.0.min.js

New Features:

  • New look and feel to more closely match Flagship experience
  • Added document and audio support (now supports all asset types!)
  • Added Smart Filter support
  • Added Advanced Filter
  • Added ability to open asset detail screen in new tab
  • Front end written completely in ReasonML
  • Back end written completely in OCaml

1.1.0

Source: https://d8ejoa1fys2rk.cloudfront.net/modules/compactview/includes/js/client-1.1.0.min.js

New Features:

  • Added video support
  • Added support for Safari and IE11
  • Configurable as multi select or single select

© 2019 Bynder All rights reserved.