Bynder UI components

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

Compact View

See Compact View in action

Bynder Compact View is the easiest way to get assets from Bynder into your web application. It's a component built with ReasonReact 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 & 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

Demo

For a demo of the Compact View latest version and its configuration options check out our demo page at https://bynder.github.io/bynder-compactview/.

Screenshots


Example usage

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 in your page. In the example above we use a div with id importedAssets that will be filled with the assets urls. This response array contains all of the information about the assets from the Bynder portal, including all public derivatives.

List of available asset derivatives can be retrieved by the API call: https://bynder.docs.apiary.io/#reference/account/derivative-operations/retrieve-derivatives.

How it works

To setup the Bynder Compact View in your web app, add the following line to your page:

<script src="https://d8ejoa1fys2rk.cloudfront.net/5.0.5/modules/compactview/bynder-compactview-2-latest.js"></script>

After it you can trigger/configure the Compact View through its new API:

BynderCompactView.open({ onSuccess: function (assets) { /* Do something with given asset array */ }, defaultDomain: "example.bynder.com", /* ... other options ... */ })

The optional options object accepts the following attributes (which are also all optional):

AttributeDescriptionPossible ValuesDefault Value
onSuccessComma separated list of asset types to displayfunction (assets: array(asset), additionalInfo?: Object): voidconsole.log
containerA DOM element to act as the container for Compact View (disables modal)Dom.HTMLElement instanceNone
portalPortal config object{url: string, editable: bool} None
portal.urlSet a default portal URL for the Compact View login screentA string containing Bynder portal URLNone
portal.editableIf false, limits Compact View tot a single portaltruefalse true
defaultSearchTermSet the initial value for search term"Keyword" None
languageSet language for the Compact View"en_US", "nl_NL", "de_DE", "fr_FR", "es_ES""en_US"
modeSet the Compact View to allow multiple or single asset selection"MultiSelect", "SingleSelect", "SingleSelectFile""SingleSelect"
themeA theme object for customizing Compact View look and feelObject (see below for recognized keys)None
assetTypesAn array of strings for limiting allowed asset typesimage, video, document, audio["image", "audio", "video", "document"]
assetFieldSelectionA multiline string containing desired asset fields (see below)StringAll fields


Possible values for mode:

  • MultiSelect: Users can select multiple assets
  • SingleSelect: Users can only select a single asset. In this case, onSuccess callback will receive an array with a single element containing the selected asset.
  • SingleSelectFile: In addition to SingleSelect behavior, users will be prompted to select an asset derivative. This derivative can be a built-in derivative, a custom derivative (if available publicly) or the original file (if available publicly). Selected file information will be then passed in an object as the second argument of onSuccess callback under  selectedFile key.


In all three modes, all publicly available files of selected assets are available under asset.fields structure.


Recognized keys for theme:

type theme = { colorPrimary?: CSSColor; colorButtonPrimary?: CSSColor; colorButtonPrimaryLabel?: CSSColor; colorButtonPrimaryActive?: CSSColor; colorButtonPrimaryHover?: CSSColor; colorButtonPrimaryHoverLabel?: CSSColor; };

Example assetFieldSelection values:

# ES6
  `
databaseId
name
files
url
tags
textMetaproperties {
  name
  value
}
metaproperties {
  nodes {
    name
    options {
      name
      displayLabel
    }
  }
}
    `

# For legacy browsers
  
"databaseId \
name \
files \
url \
tags \
..."


Fields accepted by assetFieldSelection:

  • interface Asset {

  • # Asset ID.
  • idID

  • # Asset database Id.
  • databaseIdString

  • # Asset name.
  • nameString

  • # Asset description.
  • descriptionString 

  • # Asset type. Possible values are: IMAGE, DOCUMENT, AUDIO and VIDEO.
  • typeAssetType

  • # The HTTP URL for this payload.asset.
  • urlURI

  • # Date created.
  • createdAtDateTime

  • # User who created the payload.asset.
  • createdByUser 

  • # Date published.
  • publishedAtDateTime 

  • # Date updated.
  • updatedAtDateTime 

  • # Size of the asset file in bytes.
  • fileSizeInt

  • # Height of the original asset file.
  • heightInt

  • # Width of the original asset file.
  • widthInt

  • # Asset orientation. Possible values are: PORTRAIT, LANDSCAPE, SQUARE.
  • orientationOrientation

  • # Whether or not this asset is archived.
  • #
  • # Knowledge base entry
  • isArchivedBoolean

  • # Brand ID.
  • brandIdString 

  • # Files associated with the payload.asset.
  • filesJSONObject

  • # Copyright of the payload.asset.
  • copyrightString 

  • # Extensions of the asset file. This can have more than one value in case of a
  • # derivative with different extensions.
  • extensions: [String!]! 

  • # Whether or not this asset is marked as Limited Use.
  • #
  • # Knowledge base entry
  • isLimitedUseBoolean

  • # Whether or not this asset is marked as Public.
  • #
  • # Knowledge base entry
  • isPublicBoolean

  • # Whether or not this asset has a watermark.
  • #
  • # Knowledge base entry
  • isWatermarkedBoolean

  • # Tags of the payload.asset.
  • #
  • # Knowledge base entry
  • tags: [String!]! 

  • # Asset original URL.
  • originalUrlURI 

  • # Metaproperties of the asset
  • #
  • # Knowledge base entry
  • metapropertiesMetapropertyConnection

  • # Metaproperties of the asset with type `text` and `longtext`
  • #
  • # Knowledge base entry
  • textMetaproperties: [TextMetaproperty!]! 
  • }


  • type TextMetaproperty {

  • nameString!

  • valueString!
  • }


  • type MetapropertyConnection {

  • nodes: [Metaproperty!]!
  • }


  • type Metaproperty {

  • idID!

  • nameString!

  • # Arguments
  • language: Preferred language for this label
  • label(languageString):  String!

  • typeString!

  • zIndexInt!

  • options: [ MetapropertyOption!]!

  • isApiFieldBoolean!

  • isEditableBoolean!

  • isFilterableBoolean!

  • isMainfilterBoolean!

  • isMultifilterBoolean!

  • isMultiselectBoolean!

  • isRequiredBoolean!

  • isSearchableBoolean!
  • }


  • type MetapropertyOption {

  • idID!

  • nameString!

  • assetCountInt!

  • # Arguments
  • language: Preferred language for this label
  • label(languageString):  String!

  • displayLabelString!

  • imageUrlURI

  • zIndexInt!

  • isActiveBoolean!

  • isHiddenByDefaultBoolean!

  • isSelectableBoolean!
  • }


Limitations

Assets marked as "Limited" are not available via Bynder public files and therefore not available via Compact View.


Migration from 1.x.x

Compact View 2 comes with a JavaScript API allowing programmatic control of the component lifetime. The most notable change when migrating is the switch away from configuration using HTML data attributes. 

Here's a diff demonstrating migration from our old example code to the new API:


History

2.0.0

Source: https://d8ejoa1fys2rk.cloudfront.net/5.0.5/modules/compactview/bynder-compactview-2-latest.js

New Features:

  • New design and improved UX to close the gap to Bynder's asset bank
  • New API to configure and initialize the Compact View according to your use case
  • Bynder domain URL validation in the Compact View landing page
  • Extended system language support for: English UK/US, Spanish, German, Dutch, French
  • Custom Smartfilter, metaproperty and metapropertyoption translations
  • Configure the look & feel through the new theme attribute
  • New attribute container to allow loading the Compact View inside any DOM element in your page
  • Simplified Compact View attributes

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

© 2020 Bynder All rights reserved.