Hierarchical – Tree Table
Hi there,
I developed a Tree table, using SAPUI5 and Design Studio SDK.
Since it’s one of my first SDK components, I’d love to get some feedback.
Here is the code.
olafecorcam/com.leandro.gp.uitable · GitHub
I few things must be done for it to work,
1, Create a data source
2. Remove any hierarchy that it might have.
Uncheck the compact display inside the edit initial view
3. Hide all the totals (i’m working on showing it now)
That’s it.
Here is what it does. The sequence that you put the results inside the Rows panel, is the hierarchy the table will attempt to create.
I’m working now on formatting the results.
Note that I used the SimpleCrostable from SAP SDK examples.
For some reason, the SAPUI5 that is included on the DS, the scroll bars of the table does not work on Chrome, so use IE to see if for now.
Any comments would be appreceated.
Inside the project there’s a deployable feature (uitable.zip)
Best
Leandro
Great first blog and thank you for sharing. I am not an SDK developer so hopefully others will chime in with their comments and feedback.
Hi Leandro,
thanks for sharing! I tried out your code, and the component looks pretty good. I am seeing an additional empty column on the left, but that might be due to the datasource I am using. Could you show what your datasource's initial view looks like?
Ideas (if you want to keep working on the component):
- You could calculate totals for tree nodes with children (or support datasource totals)
- More styling options that can be set in the DS component panel (CSS classes for rows, cells)
- Make the component more robust (for example, I get JS errors when datasource has totals, or if I use the wrong datasource structure)
- Show info when no datasource is connected, similar to standard DS components
- Instead of using placeAt(), use handlerType="sapui5" (Check out the comments to this article: Design Studio 1.2 SDK - Building a SAPUI5 Toolbar and Michael's implementation here: Design Studio 1.2 SDK - New approach to a toolbar component using SAPUI5 Handler).
- Fancy component additional properties sheet
- Work around the scrolling problem in Chrome (seems to be a SAPUI5 thing).
Cheers!
Christoph
Hi Christoph,
Thanks for your input.
Here is the initial view for my data source.
I'm using a bex query as my source.
Yes, i'm still working on the component, and as soon i have some spare time i will add your ideas to it.
And now on i'll develop my components using the SAPUI5 approach, i tried implementing it now, but it's too much work, the next one I'll deffinatly use it.
Best
Leandro
Totals are working now.
Leave the resultset without totals, and the table will do the math =D
Hopefully one of you can apply this to the real world.
Best
Leandro
do you have any sample codes for the attached Heart beat chart and text cloud chart?
No I don't, But Michael Howles has some interesting code to flatten the data, so all you need to do is point the data to the chart code.
If you have the code for that chart, I can give it a try.
Best
Leandro
Hi Leandro,
Thanks for sharing this wonderful blog.