Content List widget

[tab:Actions]

The content list widget allows you to get a horizontal list of contents, displayed in the preferred order and graphically customizable in all its components.

We suggest you to have a look at the Interactive Demo of the Widget Framework in order to have a look at the possibilities offered by this application. 

 

This widget comes with two available variants:

  • Content list: a list of content with a set of information. This variant has four available templates:
    • Content list (hover): a wall of content with title and content type icon appearing on mouseover.
    • Compact content list (hover): a vertical list of content made of thumbnail, content title and description. Content type icon appears on thumbnail mouseover.
    • Content list: a wall of content with title and content type icon.
    • Compact content list: a vertical list of content made of thumbnail with content type icon, content title and description.
  • Content list selection: a list of content with a set of information and the possibility to select content via checkbox. This variant has only one template with the content type icon appearing on mouseover.
  • Content list slide: a list of content with a set of information. This variant has one template which scrolls from left to right.

 

Configuration parameters

 

  • clientId (string, mandatory): domain name used to access THRON.
  • appId (string, mandatory): id of the application which has been activated inside the Marketplace and which you are going to use to access content (you will find the id in the Management page in the application itself). Using this parameter, the Content List will access only those contents which can be accessed by the application. This parameter is used to verify if the app is active and is a valid type
  • forceUserToken (boolean, optional): this parameter forces the widget to use the token configured in the core even if an appId has been configured.
  • categoryId (string, optional): id of the folder whose content the widget must show. If this parameter is not included, the widget will show all the content it can access. If an inexistent categoryId is included, or one for which the token in use does not have the access rights, the widget will not show any content. If this parameter is set to "INBOX" and "forceUserToken" is true, the content list widget will be able to display the content of the user's inbox. 
  • contentIds (array, optional): this parameter will allow you to initialize the widget starting from a specific list of content instead of the folder, the widget in this situation will only show the content that has been configured and all search operations will be performed on such content.

IMPORTANT: if this parameter is enabled, categoryId parameter will be ignored, for this reason any linked menu widget will not work.

  • cascade (boolean): this parameter will force the widget to search for content in all the subfolders of the folder where the widget itself has been installed. Default is false.
  • orderType (string, optional): this parameter allows you to configure the order by which you want to display your content, there are five available values:
    • contentName: alphabetical order based on content’s title.
    • creationDate: order based on content’s creation date.
    • contentType: order based on content’s type.
    • lastUpdate: order based on content’s last update date.
    • sortingField: alphabetical order based on content’s sortingField.

Default is “contentName”.

  • contentOrderMode (string, optional): this parameter allows you to configure the direction of the order by which you want to display your content, there are two available values:
    • _A: ascending order.
    • _D: descending order.

Default is “_A”.

  • dictionaryLocale (string, optional): this parameter allows you to configure the language to be used by the widget’s interface, you can use language codes included in the ISO639-1 standard. The code must be written with uppercases (e.g. “IT”, “EN”). If no language is set, default will be “EN”.
  • dictionaryName (string, optional): this parameter specifies the name of the dictionary to use for the widget, the language file for the widget must reference to this name for being used with the widget. Default “default”.
  • thumbSize (string, optional): size of the thumbnail to be extracted (service will return the closest to the required size among those available). It must be set with the following format: “<width>x<height>” (e.g.: 640x480). Default is “150x150”.
  • contentFilter (string, optional): if this parameter is set, the widget will display only selected content type. Available values are: VIDEO, IMAGE, AUDIO, OTHER, PAGELET, PLAYLIST. More information on available content type can be found in this article.
  • customCssClass (string, optional) : this parameter allows you to configure the suffix to be used for widget’s CSS classes, so that you will be able to include more than one widget in the same page, avoiding names collisions.
  • minBoxWidth (string, mandatory): this parameter is used to define the minimum content size of each widget’s element, used to allow dynamic resize of the elements. The size to be configured does not consider margin and padding of the single elements; the widget’s logic will consider them in order to execute proper resizing. Not available on Content List Slide.

IMPORTANT: for this reason we suggest you to use the “content-box” value as box-sizing for widget’s elements.

  • minBoxHeight (string, mandatory): this parameter allows you to set the maximum content’s height for each widget’s element. Used to elaborate the ratio and preserve it during resize. Not available on Content List Slide.
  • dynamicResizeFlag (boolean): this parameter allows you to disable the dynamic resizing of the elements within the Content List widget. If set to false the elements will only be stretched instead of being scaled to fit the size of the container. Default is "true". Not available on Content List Slide.
  • boxWidth (number, optional): the width of each single element. It is used to count the number of elements to be displayed on each page of the content list. This parameter is specific for the Content List Slide.
  • pageSize (number, optional): number of elements which will be "scrolled" upon each "next" or "prev" click. If not set, the content list will scroll one page at a time. This parameter is specific for the Content List Slide.

 

Functions that can be invoked on this widget

 

  • setCategory(categoryId): this function allows you to change the folder on which the widget is configured, categoryId is the id of the new folder.
  • setContentFilter(value): this function allows you to set a filter on content types, admitted values are the same of the contentFilter parameter.
  • modifyItemTemplate(html): this function allows you to edit the HTML code of the widget’s internal elements, so that you will be able to build a custom GUI. The variable is a string including the html code to be used for each element. You may specify dynamic values within the code, they will be applied according to the single content related to the specific cell. Available values are:
    • contentId
    • contentName
    • contentDescription
    • contentImage
    • contentOwner
    • contentAuthor
    • contentViewCounter
    • contentLastView
    • contentLastUpdate
    • contentType
    • contentCreationDate

In order to use one of these values you will have to include it within the HTML string, preceded by the “#:” characters and followed by the “#” character. Here’s an example:

var newTemplate = '<div class="contentImage">'
+'<img src="#= contentImage #" alt="#: contentCreationDate # image" />'
+
'<h3>#:contentDescription#</h3>'
+
'<h3>#:contentName#</h3>'
+
'<p>#:contentCreationDate#</p>'
+
'</div>'
  • setCustomParams(value):this function allows you to set widget’s search parameters, in order to customize content display and filter content types. Sample json to be sent to this function is included below: 

 

{
    "tags": [{
        "id": "<tagId>",
        "classificationId": "<classificationId>"
    }],
    "search": "<searchValueBool>",
    "localeParams": "<localesCSV>",
    "searchKey": "<searchKey>",
    "searchFields": [<fieldsCSV>],
    "dateFrom": "<date ISO-8601 formatted>",
    "dateTo": "<date ISO-8601 formatted>",
    "tagsOperator": "<tagsOperatorSelector>",
    "contentFilter": [<contentFilterCSV>]
}

Available parameters are:

      • tags: it must include tags to be used by the search as an array containing of a series of objects id/classificationId; the classificationId entry will contain the id of the class on which you want to perform the search, while the id entry will contain the id of the specific tag.
      • search: boolean, must be true if you want to activate a search function; any other value will re-set the widget.
      • localeParams: list of ISO-639-1 uppercase language codes, separated by comma, used to perform the search.
      • searchKey: the string to be searched (text search).
      • searchFields: array of strings including the list of fields on which the search has to be performed, separated by comma; available values are: NAME, DESCRIPTION, OWNER, ITAGS.
      • dateFrom (optional): starting date for performing search on a specific time interval; must be formatted as a ISO-8601 string.
      • dateTo (optional): ending date for performing search on a specific time interval; must be formatted as a ISO-8601 string.
      • tagsOperator: used to set the operator to be used in the tag search, if “AND” the search will be performed on content associated with EVERY tag included, if “OR” the search will be performed on content associated with AT LEAST ONE of the tags included.
      • contentFilter: array of strings with the list of content types to be included within the search, available values are: VIDEO, IMAGE, AUDIO, OTHER, PAGELET, PLAYLIST.
      • metadataParams: used to define metadatas on which the search has to be performed; defined as an array containing a series of objects name/value (“name” being the metadata key and “value” being the value of the metadata entity).

 

  • emptySelectedElements(): this function allows you to clear the selection from the Content List Selection widget.
  • reset(): this function allows you to re-load the widget at its initial state. The widget will be restored using the configuration included in the embed code.

 

Graphic customization

 

The widget has specific conditions to fulfill in terms of graphics and CSS in order to properly perform the resize of its elements. Natively, the widget tries to ensure that the content fill all the available space, widening single elements in width and maintaining proportion, to ensure that no unoccupied space remains. This implies that each single element must be constructed through sizing rules as a percentage, to ensure that internal components are centered, and by enlarging the container they will remain aligned.

 

Events

  • THRON.widget.event.LOAD_COMPLETE: this event is launched once the widget has completed content’s loading.

 

For information on how to trigger a popup opening and embed THRON Player upon elements' click, please read this article.

 

How to make the widget display the content of the user's private folder

 

If you wish to make the widget display the content which is present in the private folder of the user accessing it (hence its personal content and the content which has been directly shared with him), you will have to follow these steps:

  1. Make sure that the user's token is injected into the widget's core through the function THRON.widget.core.init. More instructions can be found here.
  2. Set the "forceUserToken" parameter to true.
  3. Set the "categoryId" parameter to true.

[/tab]

[tab:Code Samples][dropdown:Sample JSON for the setCustomParams function with search on Title/Description/Author]

{
    "tags": [{
        "id": "<Enter itagId here>",
        "classificationId": "<Enter classificationId here>"
    }, {
        "id": "<Enter itagId here>",
        "classificationId": "<Enter classificationId here>"
    }],
    "search": true,
    "localeParams": "IT,EN",
    "searchKey": "<enter search key here>",
    "searchFields": ["<enter fields to be searched in>"],
    "dateFrom": "yyyy-mm-aaThh:mm:ss.000Z",
    "dateTo": "yyyy-mm-aaThh:mm:ss.000Z",
    "tagsOperator": "AND",
    "contentFilter": ["VIDEO", "IMAGE", "AUDIO", "OTHER", "PAGELET", "PLAYLIST"]
}

[/dropdown][dropdown:Sample JSON for setCustomParams function with search on metadata]

{
    "tags": [{
        "id": "<enter itagId here>",
        "classificationId": "<enter classificationId here>"
    }, {
        "id": "<enter itagId here>",
        "classificationId": "<enter classificationId here>"
    }],
    "search": true,
    "localeParams": "IT,EN",
    "metadataParams": [{
        "name": "<enter metadata name here>",
        "value": "<enter metadata value here>"
    }, {
        "name": "<enter metadata name here>",
        "value": "<enter metadata value here>"
    }, {
        "name": "<enter metadata name here>",
        "value": "<enter metadata value here>"
    }],
    "dateFrom": "<yyyy-mm-ddThh:mm:ss.000Z>",
    "dateTo": "<yyyy-mm-ddThh:mm:ss.000Z>",
    "tagsOperator": "AND",
    "contentFilter": ["VIDEO", "IMAGE", "AUDIO", "OTHER", "PAGELET", "PLAYLIST"]
}

[/dropdown][/tab]

Was this article helpful?
0 out of 0 found this helpful

Have more questions?

SUBMIT A REQUEST

Hai altre domande?

INOLTRA UNA RICHIESTA

Comments