Skip to content

Hierarchy View

HierarchyView 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 1 level to several levels.

Anatomy

HierarchyView has a different anatomy for tablet and phone versions.

Tablet Version Anatomy

Following is an example of HierarchyView on a tablet:

Hierarchy View 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. HierarchyView Accessory

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

C. HierarchyView 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. HierarchyView 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..

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 HierarchyView on a phone:

Hierarchy View 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. HierarchyView Accessory

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

D. HierarchyView 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. HierarchyView 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:

        <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:autoLoadSiblings="false"
                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. "unspecified" layoutType attribute allows HierarchyView to adapt to available screen sizes and change the layout from phone to tab or vice versa if available width changes. By default layoutType is set to be "unspecified";
  • app:autoLoadSiblings="false" – First column of the HierarchyView presents the Root object of the hierarchy. autoLoadSiblings attribute allows user to specify if the siblings of the root object and its ancestors should be loaded or not. By default autoLoadSiblings is set to be false;

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 deselected/collapsed HierarchyObjectCell, while a filled icon presents a selected/expanded HierarchyObjectCell. Selected/expanded HierarchyObjectCell is a cell for which the children objects are visible.

HierarchyView Accessory - Children Count (Optional)

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

...
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.

    /**
     * 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);
Last update: June 15, 2023