This section covers how to customise the back office UI.

During a transition period the different areas in the back office UI are customised in different ways. In future versions of Litium all customisations will be done with Angular.

Products (AngularJS 1.6)

Customers and Media (Angular)

Products (AngularJS 1.6)

All the common dialogs (see table below) in the back office interface can be reached with the directive select-dialog to make it easy to create an extension that link two different entities together.

Usage example to add a button to select a group.

<button select-dialog dialog-callback="addGroup(item, formData, dialogResult)" dialog-type="group">Add</button>

Attribute clarification

Name Mandatory Description
select-dialog Yes Directive that transforms the button to open a dialog instead of the standard action.
dialog-callback Yes Defines the callback method on the scope that should be invoked when the dialog is closed. Use the parameter name dialogResult for the parameter that should contain the selected result when the dialog is closed.
dialog-type Yes Defines the type of dialog to open, see the dialog types table below for more information.
multi-select No Defines if the dialog should enable selection of multiple items, valid values are true and false (missing attribute is the same as false). All types of the dialogs are not supporting the option.


Example of a callback function:

$scope.addGroup = function(param1, param2, param3){
    // param1 is item from current $scope
    // param2 is formData from current $scope
    // param3 will contain the dialogResult

The dialogResult (param3 in the above example) is an array of the selecetd item. The array item contains at least the id, systemId and title properties.

    { id: "id", systemId: "system id as guid", title: "item title" },
    { id: "id", systemId: "system id as guid", title: "item title" },
    { id: "id", systemId: "system id as guid", title: "item title" },

Dialog types

Area Name Multiselect support Description From version
Customers group Yes Select groups 5.0.0
Customers organization Yes Select organizations 5.0.0
Customers person Yes Select persons 5.0.0
Customers role Yes Select roles 5.0.0
Customers person-template Yes Select person templates 5.0.0
Customers group-template Yes Select group templates 5.0.0
Customers organization-template Yes Select organization templates 5.0.0
Customers user Yes Select users 5.0.0
Customers target-group Yes Select target groups 5.0.0
Media file No Select files 5.2.0
Media image No Select images 5.2.0
Products variant Yes Select variants 5.0.0
Products baseproductandvariant Yes Select base products and variants 5.0.0
Products product Yes Select base products or variants depend on the settings use variant url on display template 5.0.0
Products baseproduct Yes Select base products. 5.0.0
Products assortment Yes Select assortments 5.0.0
Products category Yes Select categories 5.0.0
Products productlist Yes Select product lists 5.2.0
Products relationshiptype Yes Select relationship types 5.0.0
Products pricelist Yes Select price lists 5.0.0
Products inventory Yes Select inventories 5.0.0
Websites website Yes Select websites 5.2.0
Websites page No Select pages 5.2.0


Customers and Media (Angular)

This describes how to display dialogs in the Customers and Media areas, which were rebuilt using Angular. To display dialogs with elements from Customers and Media in the other areas, please refer to the sections above. All existing dialogs in the other areas will work as normal without any code updates. They have been migrated to use the new Angular component.

To display the dialog in the Customers and Media areas in back office, and to select a value, add the following into the template:

<a class="base__fake__link" (click)="showDialog = true"> {{ 'general.action.add' | translate}}</a>
    (onClose)="showDialog = false">

And add the following into the code file:

showDialog = false;
submit(ids: string[]) {
    // process the list item's id here

The anchor tag is for the Add link, which will open the entity selector dialog when you click on it. The dialog will display a list of groups, in which you can select a single group.


  • entityType: Configure the type you want to select. Check the list below for supported types.
  • entityMultiSelect: Configure whether the user should be able to select single or multiple items. Set to true by default.
  • onSubmit: Configure the callback for the OK button in the dialog is clicked. In the callback, you receive the list of selected ID's.
  • onClose: Configure the callback for the Cancel button in the dialog. Usually nothing is done. Set the value for showDialog to false if you want the dialog to be closed when clicking Cancel.

Supported entity types

Area Name Description From
Customers group Select groups, both static, smart and target groups 6.0.0
Customers staticGroup Select static groups 6.0.0
Customers targetGroup Select target groups 6.0.0
Customers organization Select organization 6.0.0
Customers person Select person, exclude system users 6.0.0
Customers allPerson Select person, include system users 6.0.0
Customers role Select role 6.0.0
Customers addressType Select address type 6.0.0
Customers Grouptemplate Select group template 6.0.0
Customers Organizationtemplate Select organization template 6.0.0
Customers persontemplate Select person template 6.0.0