Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

A Sidebar shows a column with multiple Entries (see below) which represent individual Pages. When selecting an Entry the corresponding content is displayed to the right of the Sidebar. There is always only 1 Page of the sidebar visible.

Image Removed

is an object in the repository that can load items on n-levels with the nested items lazy loaded.

The Sidebar control can also be collapsed/expanded by clicking on the icon in the bottom area of the sidebar control.

Image Added


In the same Layout container, (Window or Frame) and in combination with a PanelSwitcher control, the Sidebar can load different content areas depending on the selected item.

By specifying an event listener in the "EventAfterTabSelected" attribute, the developer can write custom client logic in order to switch views in the PanelSwitcher control.

For eg EventAfterTabSelected: "$ akioma.onDesktopSidebarItemSelect(self);"

Code Block
languagejs
titleEventAfterTabSelected to switch view in PanelSwitcher
linenumberstrue
collapsetrue
/**
 * Method executed on selection of sidebar to switch to the corresponding panel view in the panel switcher
 * @param {ak_sidebar} Sidebar Sidebar control
 */
akioma.onDesktopSidebarItemSelect = function(Sidebar) {
  const panelSwitcher = Sidebar.container.getFirstChildByType('panelSwitcher');
  const selectedItemAction = Sidebar.controller.event.selectedObj.Function;
  if (selectedItemAction)
    panelSwitcher.switchView(selectedItemAction.actionParameter);
  const options = { preventAction: true };
  return options;
};

Also by using the Sidebar "EventOnInitialize" attribute event, the developer can specify a custom client logic method in which he can set the menuStructure or menustructures to load.

For eg EventOnInitialize: "$ akioma.buildMainLayoutTabsSidebar(self);"

Code Block
languagejs
linenumberstrue
collapsetrue
/**
 * Method executed on initilize to retrieve the desktop menu structure items to be loaded as items in Sidebar
 * @param {ak_sidebar} Sidebar Sidebar control
 */
akioma.buildMainLayoutTabsSidebar = function(Sidebar) {
  Sidebar.controller.forceView = 'frame';
  return new Promise(resolve => {
    const oReturn = akioma.callServerMethod('Akioma/Swat/UiInteraction/getDesktops.p', [{ type: 'oCHAR', name: 'cDesktops' }]);
    Sidebar.controller.setMenu(oReturn.cDesktops);
    resolve();
  });
};

You can access the Sidebar Tutorial to have a better understanding on how it is to be usedcheck how a new Desktop item can be added.

For full description of attributes and events of this object please access the Client-Logic API