Introduction to Widget Framework

Business Case:

KPI to be measured

Bookmark this resource Follow

Ask a question

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

THRON maximizes content value: one way of doing this is to facilitate development of every possible communication channel with the end user.

The Widget Framework does exactly this: it is the fastest way to valorize content on any digital platform: website, mobile app (via web view), intranet or extranet, or even digital archive.

With simple integration and customization in mind, the Widget Framework is a turnkey solution that enables you to get the most out of the contents you have in THRON.

Thanks to Widget Framework you can manage access, user rights, viewing and sharing for your content.


Currently available widgets are:


  • Login : enables website/app/intranet integration with the THRON authentication system (which can also be used for personalizing internal pages).
  • Menu : enables front-end replication of content organization as it was devised in back-end, through the THRON system of folders.
  • Content List : shows all content that the user can see.
  • Search : allows user to set up the searching criteria that will be applied in the associated Content List.


Some of the aforementioned widgets might be used individually, such as Content list, or they can be used combining them. 


Business Benefits


Improved time-to-market: With only a few steps the Widget Framework allows you to use the contents you have in THRON to open new communication channels with users, keeping development costs tightly curbed.

Better efficacy on your content strategy: Use the data from your content to understand which ones are generating more value for your business.

Protect your brand identity: The Widget Framework is a ready-to-use solution that is easily customisable so that you can maintain your brand identity on every communication channel.


Widgets’ core

In order to allow its proper functioning, each aforementioned widget has a special component which must be inserted in the page before the inclusion of any other widget: it's the widget’s core. Such inclusion must be made similarly to that of the specific widget’s javascript: it must necessarily be the first script element in the head of the page. If the embed code used is the one provided by the application itself, the widgets core will be already included.

IMPORTANT : widgets will not work properly without the inclusion of this basic component.

The widgets’ functions are:

  • It is responsible for providing the template used to build all the other widgets, thus enabling all the common functions that will be available on each one of them.
  • It deals with the management of the events launched by the widgets. Such events can be used by any developer in order to integrate and run custom code.
  • It provides generic utility functions, useful for the integration of the widgets with an existing page.
  • It handles the communication between the widgets when they need to provide some data or when they need to communicate with other widgets (e.g., Search widget that needs to communicate search parameters to a Content List widget).


Available functions

THRON.widget.core.init(token): this function allows you to configure a user token to be used by the widgets instead of using an appId. This means that access to content provided by the Widget Framework will be no longer subject to the application ID but to a different token, such as a THRON's user token, with specific access rights on content.


Utility functions


  • THRON.widget.util.getScrollBarWidth(): this function returns the width of the scrollbar in your current browser.
  • THRON.widget.util.getUrlVars(): this function returns an array containing the query params used for accessing the page.
  • THRON.widget.util.isDef(object): this function checks if the passed object is defined, returns true if it is, false or otherwise.
  • THRON.widget.util.htmlEscape(string): this function performs the escape of strings containing html.
  • THRON.widget.util.setCookie(key,value,expireDate): this function allows you to set a cookie on the page, passing as parameters the key of the cookie, the value and the expiration date.
  • THRON.widget.util.getCookie(key): this function can be used to retrieve the value of a cookie given its key.


Native functions available for each widget


  • render(divId): this function is used to display the widget on the div whose id has been included as parameter; this function must be used once the configuration of widget’s parameters has been completed.
  • hide() : this function can be used to hide the widget in the page.
  • show(): this function can be used to show the widget (previously hidden) in the page.
  • bind(eventType, function, context): this function allows you to associate the execution of custom functions to specific events. Each widget can launch different events depending on the needs and on the operations it accomplishes. Details about individual events that can be launched by widgets will be explained in each widget’s section.
    • eventType: it is the event to be intercepted in order to execute the custom function (see each widget's events)
    • function: your custom function
    • context: this parameter will allow you to provide an object that will become the reference to the variable " this" within the function called by the event, over the default which is the widget invoking the function.
  • unbind(eventType, function): can be used to remove a previously configured event binding.

For each callback attached to an event two parameters will be passed:

  • The reference to the widget that generated the event.
  • (Optional) an object containing information about the event.




Each widget has a language file, included in the embed code you are given by the widget framework, containing the translation for each string used by the widget. To manually add a language, with the inline editor, just duplicate a section and change the reference code of the language (for example, “DE” instead of “EN”); by doing so the widget will use strings in that language if the dictionaryLocale of that specific widget has been properly configured.

Each widget also provides a dictionary for internationalization, in case you want to use these strings outside the widget, for example to create a custom HTML template. To access this dictionary you will need to retrieve a reference to the specific widget. For example, if the reference variable to the widget name is loginWidget, the reference to the dictionary will be loginWidget.dictionary. You can then call the function getLabel(key) on this object, passing one of the keys defined in the lang file; in the response you will get the internationalized string in the configured language using dictionaryLocale parameter used during widget’s creation.



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

Have any question?

Open a ticket