# How to Work with Hierarchies

It seems that everybody understand hierarchies but it is sometimes difficult to handle them, be it

• Defining them,
• Building them or
• Rearranging them,
• Not to speak about the whole stuff in the UI.

This document want to shed some light on these tasks. 😀

Let’s first spent some words on “What is a Hierarchy”

## Hierarchy as a Tree in Graph Theory

We will focus here on those special hierarchies in which the vertices have one or zero parents and one or many children which in turn are called Tree.

Second no cycles are permitted. Therefore following the Parent relationship we will reach some vertex without a parent which we will call Root. If we follow the Children relationship to the vertices without children these are the Leaves.

All vertices which can be reached starting from the Root vertex via the Children relationship are belonging to the same Tree (= Hierarchy).

## Defining a Tree Hierarchy in BODL

Of course the vertexes are the nodes and the relationships are the associations. 😀

As the Children association has the multiplicity “to-many” we cannot use the normal Alternative Key based associations as these have the multiplicity “to-one”. Instead we had to use the addition “valuation”. As result we can only target nodes from the own Business Object.

There are two different ways to implement such a Tree Hierarchy:

1. You can define the associations on the root node of the Business Object.
This means that the target is also the root node, but of another Business Object instance.
So the vertexes are different Business Object instances like the hierarchy defined by the Business Object InstallationPoint.
2. You can define the associations on a sub-node of the Business Object.
Here the Business Object itself represents the hierarchy as a whole and all the sub-nodes define the hierarchy like in the Business Object ProductCategoryHierarchy.

For the sake of convenience we will work with the second approach here.

So here’s the BODL for the Tree hierarchy:

At the Root node of the Business Object we define some information about the root of Tree hierarchy like the association which can be used later as the entry point for traversing the hierarchy.

The node Vertex defines the hierarchy itself:

• The own identifier of the Vertex node.
Please note that we did not use this identifier as Alternative Key because in that case we cannot use this value in any other hierarchy. We would need to combine it with the identifier of the whole Tree hierarchy.
• The identifier of the own parent node.
This value will be empty for the Root vertex of the hierarchy
• The element HasKidsIndicator is needed later in the UI to determine if the expand / collapse icon shall be displayed for this entry.
• Of course the associations Parent and Children based on the relationship between the own parent identifier and the identifier of the target node realizes in the valuation clause.

## Adding some ABSL Code to Ensure Consistency

We will add an AfterModify script to the Root node of the Business Object to ensure that the root vertex of the Tree hierarchy is existing

And we add also an AfterModify script to the Vertex node to ensure the correct setting of the own HasKidsIndicator which is needed after removing children and also of the parent indicator which in turn is needed after re-arranging of a sub part of the hierarchy.

## Define the List as Hierarchy in the UI

First you define the list of the Vertex node instances via an AdvancedListPane, but you add the “HierarchicalExtension” to this list

Second you need to define the bindings for this special structure

This is the result if there are already some vertices maintained. You notice the triangles which tells you that this vertex has children and if the children are visible. Technically spoken: The vertex is collapsed or expanded.
The vertex has no children if there is only a square shown.

You should not show the technical fields like “HasKidsIndicator” or “ParentId”, because this information is already shown via the graphics.

It may be useful not only to expand or collapse the current vertex by clicking on the triangle but to show or hide the complete hierarchy. This can be achieved by some EventHandlers with List operations, for example “ExpandAll”.

## Add a Vertex

Adding an vertex is best done via a modification structure in own pop-up and not inside the hierarchical list.

Please use a data operation before starting the modifications structure which sets the current node as the new parent.

Inside the modification structure let the user only chose the ID and the description of the new vertex

This will prevent such issues like more than one Root vertex.

## Delete a Vertex

If you would simple delete the current row, then exact only this would happen. As consequence all children of the current row would lose their parent.

So you need to ensure that on the deletion of a vertex all children (and the children of the children and so on) are deleted too.

This can easily achieved with a small action:

So add the line

action DeleteChildren;

to your BO definition and add this ABSL coding:

Which will delete in a recursive call (depth-first approach) the children and finally the current vertex.

## Reorganizing Hierarchical Structure

If you want to re-arrange the hierarchy some precautionary measures should be taken:

• Never allow a new parent for the Root vertex
• Ensure that no circles are created
• Verify if the new parent really exists.
Otherwise you would decouple the sub-hierarchy from the rest.

The best way to ensure the later topic is to allow the user to select the new parent from a dropdown listbox. Just define a second list in the data model VertexList which is also bound to the Vertex node

Create a “NewParentId” element which is typed as a Code and bind the code list to this new VertexList using the ID and the Name.

I’ve added an EventHandler to “OnValueChanged” which updates the ParentId of the current selected line and does a Refresh on the VertexHierarchy.

After entering the new parent ID the hierarchy refreshes itself and shows the vertex under the new parent.

Sadly, this worked for me only in HTML5.

Now you should be able to create and modify hierarchies.

That’s all, folks.

Horst

### Assigned Tags

You must be Logged on to comment or reply to a post.

Thank you Horst Schaude for sharing this information....

Regards,

Mithun

Thanks for sharing 🙂

THank you struggled a lot for this earlier.. Really appriciated. Merry christmas

Regards

Debasis

Thanks for your tutorial. Do you have any idea why after deleting 3rd level of the hierarchy, an empty entry would be shown on the table?

Thanks.

Victor Silva

Horst Schaude
Blog Post Author

Hello Victor,

Maybe the ChildField indicator is still set to true?

Bye,

Horst

Thanks for the post.

I have done all this but I'm not sure how to add the fields on the designer.

Maybe on an advancedlistpane but I'm confused with how to use add the root node elements and child node elements. I'm trying to do this over an EC.

Can you please help me with the design or a screenshot for it.

Regards

Praveen Dwivedi

Horst Schaude
Blog Post Author

Hello Praveen,

Are you able to add a list in the EC?

And map the list to your vertex node?

Bye,

Horst

Thanks for the reply.

Yes I am able to add it. It is a multinode structure.

[AlternativeKey] element ZAccountExternalID :NOCONVERSION_ObjectID;

.

.

.

node ZBillHighlights [0,n]{

[Label("Invoice No.")]element ZINVOICE_NO:LANGUAGEINDEPENDENT_EXTENDED_Text;

.

..

.

element ZBillHighlightsID:ID;

association RootofHierarchy[0,1] to ZBillHighlightsTree valuation ( ZINVOICE_NOParent == ZBillHighlightsID);

node ZBillHighlightsTree [0,n]{

[Label("Invoice Tree")]element ZINVOICE_NOTree:ID;

[Label("Invoice Parent")]element ZINVOICE_NOParent:ID;

element HasChildIndicator:Indicator = false;

[Label("Bill Doc")]element ZBILL_DOC:LANGUAGEINDEPENDENT_EXTENDED_Text;

.

.

.

association ToChildEntry[0,n] to ZBillHighlightsTree valuation (ZINVOICE_NOTree == ZINVOICE_NOParent);

association ToParentEntry[0,1] to ZBillHighlightsTree valuation (ZINVOICE_NOParent == ZINVOICE_NOTree);

}

}

}

Need to get the tree view for the node ZBillhighlights and ZBillHighlightsTree.

Now, in datamodel I did something like this. But I'm not sure which fields to add to the designer and how i.e. in advancedlistpane which node's fields to add.

The Datalist is bound to ZBillHighlights.

Thanks & Regards

Praveen

Horst Schaude
Blog Post Author

Hello Praveen,

The DataList seems to be well defined.

Now you simply add the elements as you would do it for a normal list with a ALP.

Bye,

Horst

Is the datamodel as required? I might have missed something.

On the designer, I am not sure how to implement this over an Advanced List Pane, i.e. which fields to add to the ALP.

If I add only the tree elements or only the datalist elements to the ALP, it is not working. It appears as a normal table, I am not getting the tree type view.

And If I add both the datalist and Tree elements to the ALP, it goes for a dump.

Horst Schaude
Blog Post Author

Hello Praveen,

You will not need the tree elements.

Let's start with a normal list, no HierachicalExtension.

Is this working? As a flat list?

If Yes, just add the HierarchicalExtension and map the elements.

That's all. Nothing more.

HTH,

Horst

Hi Horst,

If I wanted a hierarchy that is "linked" to a code list and looked something similar to:

-> Type 1

- Product 1 (Code list: Type 1)

- Product 2 (Code list: Type 1)

-> Type 2

- Product 3 (Code list: Type 2)

- Product 4 (Code list: Type 2)

Would I be able to do this just using 1 vertex and using a valuation on the association like ProductType == ParentType

Not really sure what the best approach would be...

Thanks,

Will

Horst Schaude
Blog Post Author

Hello Will,

This sounds feasable in the first place.

But you must define all branches in your BO via associations with a valuation.

Bye,

Horst

Hi Horst and everybody,

Firstly, thX for the blog.

Its very helpful, though we have encountered an issue with doubling the lines while adding a new one.

When I try to add a line you can see that the process of it is going on in the background:

but then when I click to Add it adds that line plus an extra empty one:

Does anybody have an idea why it is happening like that?

Horst Schaude
Blog Post Author

Hello Marcin,

Are you sure that the create on the vertex node is triggered only once?

Maybe you hav a second DataList (no hierarchy) beside to control that.

Bye,

Horst

Hi Horst,

Thank you for such prompt reply.

I just checked it. There is just one create:

this.RelatedAccount.Create(RootRelated);

in root's AfterModify and theh data structure look's like this:

Additionally, the event handler looks like:

Any thoughts?

Horst Schaude
Blog Post Author

Hello Marcin,

I am quite sure that in your code is only one Create 😉

But the framework may trigger anyother on direct. 😕

Therefore: Add a second flat list for the RelatedAccount and show the content in a second non-hierachical list.

Bye,

Horst

Hi Horst,

Firstly, thank you for trying to help me with this nut.

Hope you are ok.

I have done it, didnt solve the issue. Spent some time trying to figure out what is causing it. Atm I got to the point where Im quite sure that extra lines are extra parents that are added while adding the child, a parent to particular child that has been added.

In short, everytime I want to add a child I get a parent to this child extra.

Any thoughts?

P.s.

Weird thing as well, it only happens after adding third child:

(ROOT ---> CHILD(PARENT) ---> from here CHILD(PARENT) ---> etc)

If you know what I mean...?

Also, it's not happening ever time?!?

Additionally, after I save the hierarchy and view it again it looks perfect, as if those lines aren't there. But as soon as I want to add another they appear and again after save disappear...

What would you make of this?

Horst Schaude
Blog Post Author

Hello Marcin,

If they are "ghost" lines then the buffer seems to have a malfunction. 🙁

I would suggest to create an incident for this.

Sorry,

Horst

Hi Horst,

Firstly, thank you for all your support.

I think I'd follow your suggestion and create a ticket for it.

Again, cheers for your time

and have a great weekend.

Kind regards,

MC.

Hi Marcin,

Maybe you should set the list's property "Appearance --> TableRowCreator" to false.

I have encountered it before, and solved it using this solution. 🙂

Hope this be helpful.

Thanks & Regards,

Frankie

Hi Frankie,

Worked like a charm!

Thank you greatly for that.

Regards,

MC.

Hi Horst,

Incorrect data in exported excel from Hierarchies

Best Regards,

Fred

Horst Schaude
Blog Post Author

Hello Fred,

Already on the way. 😀

Bye,

Horst

Thanks, Horst. 🙂

Hi Horst,

Still SAP have not solved the issue yet.

I raised the incident a long time ago and still not yet fixed.

I already provided a lot of information, screenshots, scenarios with easy examples.

Is this not even possible to fix?

The exported excel is terribly incorrect and cannot be used.

Best Regards,

Fred

Horst Schaude
Blog Post Author

Hello Fred,

Excel does not know something like a hierarchy naturally. Therefore I assume the Excel is not prepared to handle the results from the hierarchy expansion.

Would it be a solution to have a flat OWL filled by the current hierarchy selection in which the Excel download happens?

Sorry,
Horst

Hi Horst,

I tried to download the excel from standard Product Categories table which is also a hierarchy structure.

Product and Service Portfolio -> Product Categories

Best Regards,

Fred

Horst Schaude
Blog Post Author

Hello Fred,

Sure, the PCH excel is hand-made. 🙂

Bye,
Horst

Hi Mimo

there is only one datalist (the one which you add as the ALP). In the ALP just add the vertex node elements.

Now, the key here is to assign "haschildindicator" and "parent id" fields.

i.e. if haschildindicator is true, it will be displayed as parent of tree and if parentid has the value of vertex id of any other line item, it will be displayed under the tree of that line item.

Regards

Praveen

Hello Horst & other experts,

I tried a similar hierarchical list and I have problem in displaying the list as hierarchy.

I have attached all my screens, Please support me to identify whats the issue

Horst Schaude
Blog Post Author

Hello Gayathri,

What UI technology are you using:

• Silverlight
• HTML 5
• RUI

Bye,
Horst

Hello Horst,

Thanks for the response. I resolved it, when i marked the Lazy load property in UI Designer.

Hello Horst,

thank you for that great How-To Tutorial.

I have developed a similar hierarchie, but without the functionality of 'Reorganizing the Hierarchical Structure'.

For Adding a new child I execute an action. Sometimes everything works fine, but sometimes the new child isn't diplayed at the right place. After manually editing this child, the window is refreshed and the child switches at the right place.
And I have another problem: Sometimes I get some "ghost"-lines after child-creation.

Do you have any idea to solve that problems?

Thank you.

Best regards, Cordula

Horst Schaude
Blog Post Author

Hello Cordula,

Just one question in front of:

• Why can't you use a Modification Structure?
Is it necessary to have this "mark a line" & "press a button" feature?

Bye,
Horst

Hello Horst,

I firstly had a Modification Structure, but it didn't work in HTML5. The window didn't open. With Silverlight it worked but I had this problems with the "ghost"lines.

I realized the 'Opening Modification Structure - Add Child' with a button ("mark a line" & "press a button") in the toolbar of the hierarchie too, like I'm now calling the Action to Create a New Child.

It's not necessary for me to have this "mark a line" & "press a button" feature. Is there another way to realize it?

Thank you for your support.

Best regards
Cordula

Horst Schaude
Blog Post Author

Hello Cordula,

A Modification Structure is the standard in our HTML5 UIs.
It should work. And it di in my example above 🙂

So, I suggest to try the Modif Structure with an normal list and then try it again with a hierarchy.

HTH,
Horst

Hi Cordula,

I'm also facing the same issue as yours, I raised an incident and waiting for their reply. In the meantime, have you succeded with list modification structure on HTML5 view.. or Ghost line issue in Silverlight view?

Kind Regards,

Senthil

hi Horst

i make like you do exactly , but when add Hierarchical Extension in the OWL of BO i get error

another question

the error

Horst Schaude
Blog Post Author

Hello  Basem,

Did you tried to add it also in a TI?

Bye,
Horst

dear horst ,
it now working but when i refresh the OWL it appear like the attached image
when refresh again it be correct

Horst Schaude
Blog Post Author

Hello Basem,

If it works sometimes and sometime not it is an UI issue and you need to create an incient for this.

Sorry,
Horst

Can you let me know if there is an alternate way of implementing hierarchies without using list modification form? I have received the information from SAP Incident saying, list modification form was never meant for the ByD as below

Dear Senthil,

We received development team statement about the issue.

List Modification Forms were built for C4C and was never meant to be used in ByD. Currently, this is out of the roadmap for ByD HTML UI as we do not have any other standard or partner scenario in ByD requiring the same yet and we believe there are alternative ways to achieve the same via say - BO Action.

So we recommend that you change the modeling of this UI.

You can also submit your feature request on our Ideas Place at https://ideas.sap.com/SAPByDesign that is the official tool to propose new functions and share scenarios like this.

In case of any issue or question, please let me know.

Best Regards,

Senthil

Horst Schaude
Blog Post Author

Hello Senthil,

You may also use a Modal Form triggered via an action.

I guess even a simple new line would be possible if only the parent can be determined.

HTH,
Horst

Horst Schaude
Blog Post Author

Hello all,

I've got some questions if the approach described above is still working in HTML5, RUI, ...

As I am not an UI expert 🙁 here is how you can simple check by yourself:

• As long as the Product Category is shown in a hierarchy this approach should work too

HTH,
Horst

Hi,

I'm currently trying to build up a hierarchical extension for a custom BO. So far, I was able to implement everything with a common query (an OWL is correctly displaying the hierarchy and an ALP as well).

When I try to do the same using a SADL Query in an OWL, the system is behaving strange: First of all, when I set the Loading Property to "Standard", the EC containing the OWL won't load and will be loading until the user closes the window. For that reason I've chosen "Lazy" as loading property for the hierarchical extension.

When I now try to expand a parent node in the UI, the line will disappear from the table and I have to re-execute the default set. When I trigger the ExpandAll Action the same behavior as before (infinite loading) occurs.

Anyone who faced such a behavior before? Unfortunately we can't use a common query because we want to fetch all objects by a customer ID which is stored in a party subnode. That would also work with a custom generated query, but with that query I'm not able to bind the hierarchical extension fields.

Kind regards,

Heiko

Horst Schaude
Blog Post Author

Hello Heiko,

The query should not react on data selection / display / change.
Except there is a direct dependency / binding from data selection to the query.
You should check this.

Furthermore, from any query ( be it a common one or SADL or from the QueryBuilder) the result should / can lead to the root of the hierarchy. From there you can traverse the hierarchy independent of the query.
So, you should be able to use any of the mentioned queries. 🙂

HTH,
Horst