OrgChart Demo | <uif-org-chart>

In order for this demo to work you must first build the library in debug mode.

The orgchart comes with different features all demonstrated in the following eksemples.

Attention:

I order to show the items in the orgchart as selected you need to add following style to your css:

    .ms-Persona.is-selected {
        background-color: #c7e0f4;
    }

The style is suggested as change for the Office UI Fabric but is not yet part of the release.

Example 1: Simple list

This example shows the orgchart in it's most simple form without using any advanced features. Just a list with images and names.

This markup:


<uif-org-chart>
    <uif-org-chart-group>
        <uif-org-chart-persona-list>
            <uif-org-chart-persona ng-repeat="person in vm.items" >
                <uif-org-chart-image ng-src="person.imageUrl"></uif-org-chart-image>
                <uif-org-chart-details>
                    <uif-org-chart-primary-text>{{person.name}}</uif-org-chart-primary-text>
                </uif-org-chart-details>
            </uif-org-chart-persona>
        </uif-org-chart-persona-list>
    </uif-org-chart-group>
</uif-org-chart>

Renders this:

{{person.name}}

Example 2: Grouped multiple-select square-style

The example demonstrates how the orgchart can be grouped by the property of your choice by using the uifOrgChartGroupBy filter. The images is rendered with the 'square'-style. The uif-select-mode is set to multiple. The selected items can be retrieved from the vm.selectedItems1-array.

This markup:

    <uif-org-chart uif-select-mode="multiple" uif-selected-items="vm.selectedItems1">
        <uif-org-chart-group ng-repeat="group in vm.items | uifOrgChartGroupBy: 'team'">
            <uif-org-chart-group-title>{{group}}</uif-org-chart-group-title>
            <uif-org-chart-list>
                <uif-org-chart-persona uif-style="square" ng-repeat="person in vm.items | filter: {'team': group}"
                                        uif-item="person"
                                        uif-presence="person.presence">
                    <uif-org-chart-image  ng-src="person.imageUrl"></uif-org-chart-image>
                    <uif-org-chart-presence></uif-org-chart-presence>
                    <uif-org-chart-details>
                        <uif-org-chart-primary-text>{{person.name}}</uif-org-chart-primary-text>
                        <uif-org-chart-secondary-text>{{person.country}}</uif-org-chart-secondary-text>
                    </uif-org-chart-details>
                </uif-org-chart-persona>
            </uif-org-chart-list>
        </uif-org-chart-group>
    </uif-org-chart>

Renders this:

{{group}} {{person.name}} {{person.country}} Selected items from vm.selectedItem1:
Name Team
{{selitem.name}} {{selitem.team}}

Example 3: Grouped - single-select - pre-selected items - no presence

In this example the uif-select-mode is set to 'single' and presence is not used. The uif-selected on the uif-org-chart-persona-directive was used to pre-select the items when the data is applied to the chart. Please note that if multiple items has the 'selected' value set to true and the uif-select-mode is set to single, only the last item would be selected.

This markup:


    <uif-org-chart uif-select-mode="single" uif-selected-items="vm.selectedItems2">
      <uif-org-chart-group ng-repeat="group in vm.items | uifOrgChartGroupBy: 'team'">
          <uif-org-chart-group-title>{{group}}</uif-org-chart-group-title>
          <uif-org-chart-list>
              <uif-org-chart-persona ng-repeat="person in vm.items | filter: {'team': group}"
                                      uif-item="person"
                                      uif-presence="person.presence"
                                      uif-selected="person.selected2">
                  <uif-org-chart-image  ng-src="person.imageUrl"></uif-org-chart-image>
                  <uif-org-chart-details>
                      <uif-org-chart-primary-text>{{person.name}}</uif-org-chart-primary-text>
                      <uif-org-chart-secondary-text>{{person.country}}</uif-org-chart-secondary-text>
                  </uif-org-chart-details>
              </uif-org-chart-persona>
          </uif-org-chart-list>
      </uif-org-chart-group>
    </uif-org-chart>

Renders this:

{{group}} {{person.name}} {{person.country}} Selected items from vm.selectedItems2:
Name Team
{{selitem.name}} {{selitem.team}}