Skip to content

Blades and navigation

Overview

UI is organized and divided into panels called blades. Blades are ordered from left to right on the screen and have parent-child relations. Parent blade possesses a collection of children blades and every child has a reference to it's parent. The hierarchy depth is unlimited.

3 blades: parent and a child blade having another child.

Blade structure and properties

Every blade is instantiated from a highly customizable template. The template has basic parts such as Maximize, Close buttons on the top and the title, toolbar, main content placeholders following down. We've created a "Blade constructor" page demonstrating all the customization possibilities and allowing to "construct a blade on the fly". Despite the completeness, "Blade constructor" is a useful resource for quick reference too. Check it out at https://virtocommerce.com/guides/blade-constructor.

The blade object has the following properties that VirtoCommerce platform respects:

Property Type Description
id string blade identifier. Required and should be unique in module level.
isLoading bool value indicating that loading indicator should be displayed in UI.
headIcon string icon to show on the blade header. A Font Awesome icon identifier. A default icon 'fa-folder' is used if value undefined.
title string blade title
subtitle string blade subtitle
toolbarCommands object [] toolbar commands. Check Blade toolbar documentation for details.
controller string angularJS controller id. Required.
template string angularJS template path. Required.
parentBlade object reference to parent blade. Platform sets the value automatically.
childrenBlades object [] children blades. Platform sets and manages the value automatically.
isClosingDisabled bool value indicating that the close botton (x) should be inactive in UI. This blade can be closed from script only.
onClose(callback) function action to call before closing the blade. Can prevent blade from closing if provided callback action not executed. onClose is usually used to show confirmation dialog.
isExpandable bool value indicating that the blade will open maximized and shrink when a child blade is opened.
onExpand() function action to call on maximizing the blade. onExpand is usually used to expand inner controls of the blade.

Blade instance can have any other additional properties like isNewcurrentEntity, etc., but you have to deal with those properties manually in the associated controller. 

Blade navigation

A VirtoCommerce platform service "platformWebApp.bladeNavigationService" is dedicated for blades management. Methods:

Method Description
showBlade(blade, parentBlade) Opens a new blade instance for provided parent blade. The blade parameter should have at least id, controller and template properties set.
closeBlade(blade, callback, onBeforeClosing) Tries to close the provided blade. If specified, the onBeforeClosing function is called before closing the blade. If provided, the callback function is called after it was closed.
closeChildrenBlades(blade, callback) Tries to close all blade's children. Callback function is called only if all children blades were closed successfully.
setError(msg, blade) Set an error message for the blade.
clearError(blade) Clears the error message for the blade.
angular.module('sampleApp')
.controller('sampleController', ['$scope', 'platformWebApp.bladeNavigationService', function ($scope, bladeNavigationService) {

...
  var newBlade = {
    id: "settingDetailChild",
    currentEntityId: node.name,
    title: $scope.blade.title,
    controller: 'platformWebApp.settingDictionaryController',
    template: 'Scripts/app/settings/blades/setting-dictionary.tpl.html'
  };
  bladeNavigationService.showBlade(newBlade, $scope.blade);

The blade instance is accessible in associated controller by $scope.blade property.


Last update: May 25, 2023