CustomFields

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

Search for Assets

View Results

Preview Asset

Select Asset

Field 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 = ""; //i.e. cloud/abcdefghifjklmnopqrstuvwxyz
    ...
   }
   ...
   

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

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