HierarchyView

Hierarchy View is designed to present a hierarchy of parent and child relationships. It allows users to track an object and its relationship within the hierarchy, which may range in depth from one level to several levels.

Anatomy

HierarchyView has a different anatomy for tablet and phone versions.

Tablet Version Anatomy

Following is an example of Hierarchy View on a tablet: HierarchyView Example

A. Object Cell: Follows the same design as the standard Object Cell except that we recommend using only:

  • Title Area
  • Description (optional)
  • Attribute (optional)

B. Hierarchy View Accessory:

The whole Hierarchy View Accessory is tappable to expand to another level of the hierarchy to show the children of that Object Cell.

C. Hierarchy View Icon:

This is a new icon to indicate whether this object has any parent/child relationships. When it’s inactive, it is an outlined icon, but when it’s selected, it turns into a filled icon to show the different states.

D. Hierarchy View Accessory - Children Count (Optional):

This count shows how many direct children are under a particular object. It does not count grandchildren, great grandchildren, etc. If the object has no direct children, this count can be shown as 0 or blank. We recommend that any number greater than 100 be represented as '99+' in order to avoid taking up too much space.

E. Divider:

Use the full-width divider to separate the cells.

F. Parent Overflow:

Shows a preview of the next parent level up the hierarchy. Only visible if there are more than three columns expanded.

G. Children Overflow:

Shows a preview of the children level down the hierarchy. Only visible if there are more than three columns expanded.

Phone Version Anatomy

Following is an example of Hierarchy View on a phone: HierarchyView Example

A. Navigation Bar:

Due to the limitations of a small device, it can only show one level at a time. This Navigation Bar allows the user to navigate to a parent or child level, if available. If there is no parent or child level to navigate to, the arrow that corresponds with the direction of the navigation is disabled.

B. Object Cell:

Follows the same design as the standard Object Cell except that we recommend using only the following content types: * Title Area * Description (optional) * Attribute (optional)

C. Hierarchy View Accessory:

The whole Hierarchy View Accessory is tappable to expand to another level of the hierarchy to show the children of that Object Cell.

D. Hierarchy View Icon:

This is a new icon to indicate whether this object has any parent/child relationships. When it’s inactive, it is an outlined icon, but when it’s selected, it turns into a filled icon to show the different states.

E. Hierarchy View Accessory - Children Count (optional):

This count shows how many direct children are under that particular object. It does not count grandchildren, great grandchildren, etc. If the object has no direct children, this count can be shown as 0 or blank. We recommend that any number greater than 100 be represented as '99+' in order to avoid taking up too much space.

F. Divider:

Use the divider to separate the cells.

Construction

HierarchyView can be created either by the constructor in code or by declaring a HierarchyView element in XML like this:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
        <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
            xmlns:app="http://schemas.android.com/apk/res-auto"
            android:id="@+id/linearLayout"
            android:layout_width="match_parent"
            android:layout_height="match_parent"
            android:background="@color/white"
            android:orientation="vertical">

            <com.sap.cloud.mobile.fiori.hierarchy.HierarchyView
                android:id="@+id/hierarchyView"
                android:layout_width="match_parent"
                android:layout_height="match_parent"
                app:layoutType="unspecified" />        
        </LinearLayout>

The above XML declaration creates a HierarchyView with the following attributes:

  • app:layoutType="unspecified"HierarchyView supports different layouts for tablet and phone. The unspecified layoutType attribute allows HierarchyView to adapt to available screen sizes and change the layout from phone to tab or vice-versa if the available width changes. By default, layoutType is set to be unspecified.

See HierarchyObjectCell XML attributes for all the XML attributes supported by HierarchyView.

HierarchyObjectCell

To present a cell, HierarchyView utilizes HierarchyObjectCell. HierarchyObjectCell is a subtype of ObjectCell and also supports the SupportsHierarchyAccessory interface.

ObjectCell

ObjectCell details are here.

HierarchyAccessoryView

Each HierarchyObjectCell has an accessory panel, which consists of the following:

Accessory Icon

Accessory icon is used to present the state of the HierarchyObjectCell. An outlined icon presents the unselected/unexpanded HierarchyObjectCell, while a filled icon presents a selected/expanded HierarchyObjectCell. Selected/Expanded HierarchyObjectCell is a cell for which the children objects are visible.

Hierarchy View Accessory - Children Count (optional):

An optional TextView for presenting the number of children objects of a given HierarchyObjectCell.

1
2
3
4
...
HierarchyObjectCell objectView = new HierarchyObjectCell(context);
HierarchyAccessoryView hierarchyAccessoryView = objectView.getAccessoryView();
hierarchyAccessoryView.setAccessoryText(text);

Layout Variations

HierarchyView allows users to force a particular layout irrespective of available width. You can force a specific layout by either calling forceLayoutType(LayoutType) or by using XML attribute app:layoutType="layout".

LayoutType is an enum with the following constants:

PHONE

Always use the phone layout.

TABLET

Always use the tablet layout.

UNSPECIFIED

Change the layout as per the available width.

Binding Data to HierarchyView

So far we have seen the construction and anatomy of HierarchyView. In this section we focus on binding the data into a HierarchyView. In order to bind data to HierarchyView, HierarchyView requires an object of HierarchyViewItemAdapter.

HierarchyViewItemAdapter

HierarchyViewItemAdapter is a data adapter designed along the lines of the RecyclerView Adapter. It is responsible for binding data into a HierarchyView. Please note that HierarchyView can call some of these methods multiple times in order to lay out the correct hierarchy.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
    /**
     * Get the id of the object which should be the root of the HierarchyView. This does not need to be the root of the HierarchyTree.
     */
    protected abstract T getRootId();

    /**
     * Given the id of the item, provide how many children it has.
     */
    protected abstract int getChildCountForParent(@Nullable T id);

    /**
     * Given the id of child, return the id of the parent.
     */
    protected abstract T getParentId(@NonNull T id);

    /**
     * Given the id of child, return the id of the parent.
     */
    protected abstract T getParentId(@NonNull T id);    

    /**
     * Get the id of the child at a given position in the parent/children hierarchy.
     */
    protected abstract T getChildId(T parentId, int pos);

    /**
     * In the phone layout there is a navigation bar. The navigation bar presents the title for the parent of the objects being presented. Get the title for the given parent id.
     */
    protected abstract CharSequence getTitle(T id);    

    /**
     * Create the View Holder to hold the HierarchyItemView and caching resources.
     */
    protected abstract K onCreateItemViewHolder();

    /**
     * Bind the item provided in ItemViewHolder w.th the given id
     */
    protected abstract void onBindItemViewHolder(@NonNull K holder, T id);