Menu widget

Business Case:

KPI to be measured

Bookmark this resource Follow

Ask a question

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

The menu widget can be used coupled with one or more Content List widgets; it allows you to control the content to be displayed. Starting from a basic folder, this widget displays the tree of its subfolders, which you will be able to scroll freely. Selecting one of the folders, the widget will change the related Content List, updating it accordingly to the new data. The widget can be also used stand alone exploiting generated events detailed below.

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.


Configuration parameters


  • clientId (string, mandatory): this is the domain name used to access your THRON service code.
  • 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). 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. Might be a different token, such as a user's token, with specific access rights on content/folders.
  • categoryId (string, mandatory): this is the id of the folder from which the menu widget will be generated, it will take that folder as the root level, and it will use its subfolders to create the first menu level. You can use any folder as root, as long as the token in use (or the appId if configured) has visibility on that specific folder.
  • startingLevel (string, optional): this parameter becomes mandatory if the folder included in the rootCategoryId parameter is not a top-level (root) folder of the service code. The parameter is used to indicate the depth of the base folder in order to perform the recovery of its subcategories. Starting value is 1, used to indicate top-level folders.
  • linkedWidgets (array of strings, mandatory): this parameter is an array of Content List widgets used for configuring on which widgets the menu will operate.
  • dictionaryLocale (string, optional): this parameter is used to set the language to be used by the widget’s interface, you can use the language codes provided by ISO 639-1 standard, “uppercase style” (e.g.: "EN", "IT"). If not configured the 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”.
  • customCssClass (string, optional): this parameter is used to configure the suffix to be used by CSS classes within the widget, so you can have more widgets in the same page avoiding name collisions.
  • showHome (boolean, optional): this parameter is used to configure if the widget should show the root category at the top of the tree. The label to use must be configured in the language file. Default is “false”.
  • userInbox (boolean, optional): this parameter can be used in order to make the "Home" folder of the widget as the private folder of the user accessing it. More instructions are provided below. Default is false.
  • activateModeSwitch (boolean, optional): this parameter is used to configure if the widget should switch interface to mobile mode under a certain dimension. Default is “false”.
  • modeSwitchTreshold (number, optional): this parameter is used to configure the dimension under which the widget should switch to the mobile interface. Default is “480”.
  • forceMobile (boolean, optional): this parameter is used to force the mobile interface in the widget if set to true. Default is “false”.
  • selectedCategoryId (string, optional): this parameter can be used to set the folder that must be selected upon widget's load by providing its categoryId. Default is root folder.


Functions that can be invoked on this widget


  • modifyItemTemplate(html): this function allows you to edit the HTML of the elements within the Menu in order to have a custom GUI. The variable is a string containing the HTML you want to use within each item. You can specify dynamic values within the code: they will be applied according to the single content related to the specific cell. Available values are:
  • categoryId
  • categoryName
  • hasSubCategories (true or false according to the fact that the folder has subfolders or not)




  • THRON.widget.event.SELECT: the event is launched when the user selects a new category to show; as parameters, it passes the reference to the clicked element (selectedElement) and the categoryId of the selected category (categoryId)


How to link the "Home" folder  of the widget to the user's private folder


Following this procedure, when a user clicks on the "Home" folder in the menu widget he will be able to see the content which is present in its private folder, hence both its own content and the content which has been directly shared with him as a user or member of a group.

If you wish to link the "Home" folder of the menu widget to the private folder of the user accessing it you will have to follow these steps:

  1. First of all make sure that the user's token has been injected into the widget's core through the THRON.widget.core.init function. More instructions are available here.
  2. Then make sure that the parameter "forceUserToken" has been set to true both on the menu widget and on the content list widget.
  3. On the content list widget make sure to set the "categoryId" parameter to "INBOX".
  4. Finally, on the menu widget, set the "userInbox" and "showHome" parameters to true.


Use cases

For integration purposes we will now list here the most common use cases of Menu Widget rendering and the relative configuration. Please consider that this configurations will only affect the Menu Widget itself. If you have linked a content list widget you will have to configure it according to your project's aim.


  • Let's say you want to render all the folders related to the application itself. This is the simplest case, you will have to install the Widget Framework on a root folder, and include it into your project by using the code provided in the editor. In this case the application's token will be used in order to render the widget, hence any user will be able to see al the folder tree on which the application has been installed (regardless its visibility on such folders).
  • Let's say you want to make the application-related folder tree available to users, but constrain their rendering to the user's visibility on such folders. If this is your case you will have to make sure that the user's token is injected into the widget's core by means of the function THRON.widget.core.init("<tokenId>") and that you set the parameter "forceUserToken" to true on the Menu Widget.
  • Finally you might want to render the menu widget by displaying all the folders that a specific user can see. If this is your case you will have to make sure hat the user's token is injected into the widget's core by means of the function THRON.widget.core.init("<tokenId>"). Additionally you will have to set the parameter "forceUserToken" to true and the "startingLevel" parameter to "0" on the Menu Widget.


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

Have any question?

Open a ticket