Skip to content

Latest commit

 

History

History

widen-asset-selector

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
html
html
 
 
js
js
 
 
screenshots
screenshots
 
 
README.md
README.md
 
 

README.md

Widen Asset Selector

This custom field for Agility allows an editor to browse assets from their Widen Digital Asset Management System, select them, and save the metadada for the asset. All metadata is saved as a JSON string.

In order to use this field you must have an API access token from widen.

This uses the Widen Instance Search Connector to load a Widen UI within an iFrame in your Agility Instance.

Fields Saved:

  • id
  • external_id
  • filename
  • embed_name
  • embed_link
  • embed_code
  • share_link
  • thumbnail_link

Field Value Sample (as JSON):

{
    "id": "190dfsaf-f82c-462m-bc5e-eab2b8ed3bf9",
    "external_id": "fzsf3duqp0",
    "filename": "beef_soup.psd",
    "embed_name": "640px Landscape",
    "embed_link": "https://embed.widencdn.net/img/demo/fzsf3duqp0/640px/beef_soup.jpeg?u=xkzj3k",
    "embed_code": "<img width=\"640\" alt=\"beef_soup\" src=\"https://embed.widencdn.net/img/demo/fzsf3duqp0/640px/beef_soup.jpeg?u=xkzj3k\">",        
    "share_link": "https://p.widencdn.net/g6dnbl/Mimco4",
    "thumbnail_link": "https://embed.widencdn.net/img/demo/fzsf3duqp0/2048px/beef_soup.jpeg"
}

Video Sample

Quick Video Demo

Empty Field

widen-asset-selector-new

Search for Assets

widen-asset-selector-search

View Results

widen-asset-selector-result

Preview Asset

widen-asset-selector-preview

Select Asset

widen-asset-selector-select

Field Set

widen-asset-selector-set

Installation Instructions

  1. Open the HTML file html/widen-asset-selector-template.html and proceed to Media & Documents and upload the HTML file, or create an Inline Code file containing the contents of the file.

  2. Open the JS file js/widen-asset-selector-init.js and replace the values referencing dependency sources.

    • Replace the values for Template to the absolute URL of the widen-asset-selector-template.html or the inline code reference name.

  3. Within the code of the widen-asset-selector-init.js file, set your API access token here:

...
self.ViewModel = function (options) {
	...
	self.accessToken = "{{access token goes here!}}"; //i.e. cloud/abcdefghifjklmnopqrstuvwxyz
	...
}
...

  1. Copy the entire contents of the widen-asset-selector-init.js file and paste into your existing Input Form Customization JS file. If you don't have one already, save the contents of the file into a new JS file and upload this to Media & Documents, record the absolute URL and set the value in the CMS under Settings > Development Framework > Input Form Customization. Alternatively, you may also save this as an Inline Code file and reference it as your Input Form Customization.

  2. If done successfully, you should see your custom field type available as an option within Module/Content definitions form builder.