Skip to content

Setup

Configuration of Hierarchies

In Lime Admin-> Hierarchy Picker -> Hierarchies you can configure your different hierarchies.

  1. Start by giving your hierarchy a unique name.
  2. Select what Limetype the hierarchy picker should be used on.
  3. Start by adding your first hierarchy property. This is the lowest in your hierachy, meaning that you will add this property's parent after this.
  4. Add hierarchy parents according to your data structure. Hierarchy property and Source property should normally be the same.
  5. Configure option queries for each of your hierarchy properties. See Examples for how a setup could look.

Hierarchy structure configuration

Name Type Default value Description
Unique name String - A name that needs to be unique among all Hierarchies you have configured.
Limetype LimeType - The Limetype your Hierarchy-picker is placed on.
Hierarchy Properties LimeProperty - The relation property on the child hierarchy.
Source Properties LimeProperty - The relation property on the Limetype hierarchy.
Option Query Filter clause - The filter part of a Lime query to filter out some hierarchy items. See details and examples here

Option query

A query filter that will filter out unwanted items, for example inactive items.

Example of cascading inactive ticket categorization

This example is using a hierarchy configuration that represents ticket categorization with 3 levels of hierarchies.

  1. Ticket type
  2. Ticket category
  3. Business unit

This example will hide all Business units, Ticket categories and Ticket types that is inactive. It will also hide a limeobject if it's parent or grandparent is inactive, so if Ticket type A is active, but it's parent Ticket category B is inactive, A will not show up.

Example of option queries

Option query example to copy/paste

{
    "op": "AND",
    "exp": [
        {
            "key": "helpdeskcategory.businessunit.inactive",
            "op": "=",
            "exp": false
        },
        {
            "key": "businessunit.inactive",
            "op": "=",
            "exp": false
        },
        {
            "key": "inactive",
            "op": "=",
            "exp": false
        }
    ]
}

Add picker to view configuration

  1. Go to wanted Card view in Lime admin.
  2. Add one of the fields in your hierarchy (Which one depends on required, explained here)
  3. Add a Web component to the field with the name: 
    lwc-limepkg-hierarchy-picker-card

Properties you can set:

Name Required Type Default value Description
name X string - Unique name of the configured Hierarchy
propertyLabel X string - What label to use
addFieldSuffixToLabel bool false If the label should contain the hierarchy fields in paranthesis after the label
inheritColor bool true If the visualization color should be inherited from parent hierarchy items
inheritIcon bool false If the visualization icon should be inherited from parent hierarchy items. See Item visualization for more details
searchResultLimit number 50 How many items to show for each hierarchy
includeAllInSearch bool false If the search should get hits on ALL hierarchy levels or just the current and last one
searchUnderParentItemOnly bool false When searching, you can only get search hits that is related to the parent values you've set in the picker

Info

The picker usually needs some space because it contains multiple values at once.

So we recommend to set "Number of columns to occupy" to at least 2.

What field to use

You will add the hierarchy picker on a property that belongs to the hierarchy. Which field depends on where in the hierarchy you consider be required.

For example if you have the example hierarchy:

Using a ticket categorization with 3 levels of hierarchies.

  1. Ticket type
  2. Ticket category
  3. Business unit

And you only need to set the Business unit to complete the categorization you should use that field.

If you need to set all 3 levels to complete the categorization you should use the Ticket type as field instead.

This is only applicable if the field should be required at some point.

Warning

If you use a recursive setup then you have to put lwc-limepkg-hierarchy-picker-card on the top most hierarchy relation field in the card view.

[Optional] Item Visualization

This part is completely optional, but is at least recommended when using the hierarchy picker for categorization. By default It will use the Limetype icon and color to visualize each hierarchy.

You can visualize each hierarchy item individually or inherit from its parents.

Each hierarchy limetype can contain the fields color and/or icon (Can be added using the Addon installer) You select what limetypes you want to add the fields to.

Then go to the view config for each affected limetype and add the view config stated here

[Optional] Installing icon and color fields

  1. Go to Lime Admin-> Hierarchy Picker -> Setup.
  2. Choose the limetype where you want to add an icon and a color field. If you have a normal setup where hierarchies equals several limetypes, add the required fields on all limetypes.

Using these fields you can then configure a specific icon and color for each limeobject of that type.

How it works

You can configure the hierachy picker to inherit icon and/or color using the properties inheritColor and inheritIcon.

Icon and color will be inherited on custom icon/color configured on a limeobject not from the limetype config.

Examples of visualization

This is a series of examples of different visualization on hierarchy items. Using a ticket categorization with 3 levels of hierarchies.

  1. Ticket type
  2. Ticket category
  3. Business unit

No visualization config

Empty visualization config on a hierarchy item

Inherits the icon/color from the Limetype

Inheritance of visualization

Filled visualization config on a business unit

No inheritance

Inherit icon

Inherit color

Inherit icon & color

Custom Visualization config on all levels

Custom visualize on all hierarchy items

Add visualization to View configuration on Hierarchy item

Card view

Add the following section:

{
    "title": "Visualization",
    "collapsed": true,
    "visible": true,
    "visibleOnCreate": true,
    "layout": {
        "columns": 5,
        "dense": true
    },
    "controls": [
        {
            "property": "icon",
            "visible": true,
            "visibleOnCreate": true,
            "layout": {},
            "component": {
                "name": "limec-icon-picker",
                "props": {}
            }
        },
        {
            "property": "color",
            "visible": true,
            "visibleOnCreate": true,
            "layout": {},
            "component": {
                "name": "limel-color-picker",
                "props": {}
            }
        }
    ]
}

Table view

Add the following table columns:

{
    "property": "icon",
    "isDefault": true,
    "component": {
        "name": "lwc-icon-preview-table",
        "props": {}
    }
},
{
    "property": "color",
    "isDefault": true,
    "component": {
        "name": "lwc-color-preview-table",
        "props": {}
    }
}