Welcome to the Janison Academy help portal

Menu

Introduction

The CLS is shipped with a fully functional, standard menu structure that can be customised to suit your requirements. If you have Subdomains, you can also customise the menu structures for each of the Subdomains.

Menus are customised by navigating to Settings > Menu. Understandably, the menu structure is a restricted area of the CLS that most Users are not permitted to change. If you are unable to access this area please talk with your Account Manager or the Client Services team.

Once you are at the Menu Settings page, you see the code that specifies menus. You can customise this code to reorder or delete menu items and to add menu items that lead externally or to Custom Pages. Note that if you want to rename an existing menu item, you would do this through String Resources.

The menu code is written in XML, Extensible Markup Language. The XML standard describes structured data and makes it possible to electronically share it. It is somewhat similar to HTML and contains markup indicators, or tags surrounded by angle brackets (< and >).

To understand the CLS menu’s XML code, start with the existing, standard CLS menu structure which has two main components:

    1. The Main Menu, affectionately called the Hamburger.

This offers links to the primary categories of activity and information in the CLS.

    1. The Secondary menu

This offers links to the separate categories of activities that are organised via the five primary categories.

In the screenshot below:

  1. The Main Menu shows that Manage Learning has been selected
  2. The Secondary Menu shows that Manage CPD has been selected within Manage Learning.

You can also see various options that can be selected as part of managing CPD Plans: add, search, import, etc.

Note that the Home screen has a different layout. It does not have a secondary menu at the left. Instead it has a menu at the top of the page:

It is important to remember that this entire menu structure is not visible to all Users. This is because the Role(s) that a User holds limits what s/he can do and see in the CLS, see Roles.

Note also that you can customise screen colours, styles and images via Styles & Images and also customise header and footer logos and links.

To customise menus navigate to Settings > Menu.

Customise menu

Navigate to Settings > Menu.

The process involves:

  1. Selecting the required Subdomain (if applicable).
  2. Copying the existing XML menu code in the Built In box.
  3. Pasting this code into the Custom box.
  4. Editing the code in the Custom box.
  5. Saving it.

Select Subdomains

If there are no Subdomains you will be taken straight to step 2.

If there are Subdomains, select the one where you want to customise menus from the drop-down list.

Click Continue and study the existing code below.

You can also use the drop-down list above in conjunction with Delete Selected Subdomain settings.

When you click this button it will clear the contents of the Custom box for the Subdomain selected in the drop-down list, thus removing all its custom menu settings.

Note that if you leave the Subdomain set at [Default] in either of these two actions above, any subDomain that does not already have custom menu code will have it either added (when you click Continue) or deleted (when you click Delete Selected Subdomain settings).

The existing code

The text inside the Built In box is the existing XML code for the menu.

If you study the code you can see that it starts with two tags:

These tags are terminated at the very end of the code with:

Between these pairs of code, there are several collections of statements defining subMenu tags, for example Home starts with:

and is terminated with:

Each of these collections that define subMenu tags tags describes a main menu item and its secondary menu items.

For example, the first collection creates the Home menu in the hamburger and specifies the top page menu items:

The second collection creates the People submenu and its secondary navigation:

The remaining collections, not shown here, create DesignManage Learning and Settings.

Copy existing XML code

Using standard text editing techniques, select all text in the Built In box and copy it.

Paste it into the Custom Box.

Edit and save XML code

You can now make modifications to the code in the Custom box. Make sure that you do not accidentally delete any important text, such as end tag statements, because dysfunctional XML code cannot work and will not create custom menus.

Make changes to the code as desired in order to:

  • Reorder a Menu
  • Remove entries from a Menu
  • Remove entries from a Menu
  • Add an external item link
  • Add a Custom Page link

You can also add other subMenu attributes :

  • Icon for the subMenus: user, girl, car, plus, minus, windows and so on

  • Resource, in order to have a subMenu caption that can be translated.

Note that, as discussed, changing the caption attribute for an exiting menu item will not change its label in the menu. To achieve this change you would use String Resources. However the caption attribute determines the label of new menu items: external links and Custom Pages (see below).

When you have finished editing the custom code click Save. Wait until the page has finished processing (you may need to click Save twice to trigger this) and then check your changes in the menu.

Reorder a Menu

It is a simple matter to reorder the list of menu items. Simply change the position of the tag in the list. For example, if we move the highlighted statement from the beginning to the end of the list, we create a secondary menu where Latest Activity has moved to the bottom of the list.

This kind of reordering could also be done to the order of the five subMenu collections to reorder items in the hamburger. For example moving the Settings collection so that it is the first collection in the XML code will have this result:

Remove entries from a Menu

Items can also be deleted from a menu. For example, if the line below is deleted, Latest Activity disappears from the secondary menu area in Manage People.

Of course, you can also delete an entire collection from the list.

If you delete everything between, for example:

and

then Manage People disappears from the hamburger altogether:

It’s important to understand (and reassuring, if you do this accidentally) that while the menu access to the Manage People page has gone, an authenticated (logged on) User with permission to see the page can still type its address in the browser and get to it.

Add an external item link

To add a link to a webpage outside the CLS use the tag externalMenuItem.

For example, to add a link to google to the bottom of the People submenu, locate the relevant collection of statements for People and add this statement to the list:

The example below shows where it has been moved and the result.

Usage:

  • Clicking the link takes Users to a new webpage outside the CLS
  • The url address is within quotation marks and is the full http address of the external webpage.
  • The menu label for the new entry is specified by caption.
  • Target has several options. If you select “_self” as above, the new web page replaces the current one. If you select “_new” or “_blank” then the new web page opens in a separate, independent window.
  • If you insert the highlighted statement so that it is first in the list, i.e. immediately after the item tag, then it replaces the entire subMenu. If that was the case in the example above, then clicking Manage People in the hamburger would take Users straight to google.

Add a Custom Page link

To add a menu item that links to a Custom Page, first create the Page in a Custom Pages Module and make a note of its Identifier.

The next steps and options are the same as for Add an external item link with these differences:

  • The url address is the address of the page and is relative to the CLS.
    The url address is “/pages/IDENTIFIER”, where IDENTIFIER is the Identifier of the Custom Page.
  • Clicking the link takes Users to this Custom Page within the CLS and surrounded by the hamburger and secondary menu at the left, etc, regardless of whether it is in a separate window or not.

For example, to add a link to a custom page at the bottom of the People submenu, locate the relevant collection of statements for People and add the statement below to the end of the list. Here cells is the identifier of the custom page and /pages/cells is its relative address: