From this information I would say the left part can be built using three side-by-side listviews, with per item the top and bottom margin extralarge in the first, large in the second and normal in the third. maybe a column in between containing a background picture for the connecting lines.
The right seems a normal data-grid listening to the third listview.
There are a lot of buttons, dropdowns and features that might complicate things
Can you give some more information on:
- which parts contain static data and which contain dynamic data.
- how are the dropdowns Loream1 used
- which parts of the page are most essential.
- add your best attempt so far and the problems you ran into.
Hi Sairam, I think it's time for your (first?) own widget…
As far as I know there isn't a widget available doing what you want to have. Side by side listviews is also a lot of work to style and I think it is a challenge to show the connecting lines without an interuption through all the generated divs and lists.
It is relatively easy to setup your own widget. And there is a lot of React source to show a diagram, like this one: https://reactjsexample.com/a-no-nonsense-diagramming-library-written-in-react/
Good luck!