VLWeb Tree as Accordion

This Q&A forum allows users to post and respond to "How Do I Do ....." questions. Please do not use to report (suspected) errors - you must use your regional help desk for this. The information contained in this forum has not been validated by LANSA and, as such, LANSA cannot guarantee the accuracy of the information.
Post Reply
soa
Posts: 320
Joined: Mon Dec 07, 2015 3:15 pm

VLWeb Tree as Accordion

Post by soa » Wed Dec 06, 2017 2:49 pm

Is it possible to style a VLWeb Tree as an accordion? It seems it should be but I'm not sure how to start. Has anyone done this?

User avatar
Stewart Marshall
Posts: 417
Joined: Thu Nov 05, 2015 5:25 pm

Re: VLWeb Tree as Accordion

Post by Stewart Marshall » Wed Dec 06, 2017 9:46 pm

Hi Jim

By accordion, are you referring to the items in the tree getting bigger/smaller based on a user action?

If so, have look at xDemoWebMoreLess. This shows/hides some labels based on a click and layout content sizing causes the item to resize accrodingly.

Regards
Stewart Marshall

Independent IT Consultant
www.marshallfloyd.com.au

soa
Posts: 320
Joined: Mon Dec 07, 2015 3:15 pm

Re: VLWeb Tree as Accordion

Post by soa » Thu Dec 07, 2017 10:16 am

I'm looking at something more like a material design expansion panel.

https://material.angular.io/components/ ... n/overview

I guess I could create a reusable part for the panel header and separate rps for each of the children (of which there will be more than one type) then use the tree's methods and events to manage the displaying etcetera.

This is a very common construct on the web (which is why google have a spec for it ) so I was hoping someone had done the work for me!

User avatar
Stewart Marshall
Posts: 417
Joined: Thu Nov 05, 2015 5:25 pm

Re: VLWeb Tree as Accordion

Post by Stewart Marshall » Thu Dec 07, 2017 9:36 pm

Yep, very common and all subtly different depending on whose library you look at.

As an expanding tree item isn't quite to your taste, how about a this.

This is a tab folder with a ViewStyle of Stacked

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Height(408) Width(809)

Define_Com Class(#PRIM_TAB) Name(#Tab1) BottomLayoutPriority(4) ComponentVersion(2) DisplayPosition(1) Height(283) Left(125) LeftLayoutPriority(1) Parent(#COM_OWNER) RightLayoutPriority(2) TabPosition(1) Top(54) TopLayoutPriority(3) Width(380) ViewStyle(Stacked)
Define_Com Class(#PRIM_TBSH) Name(#Sheet1) Caption('Page1') DisplayPosition(1) Height(0) Left(0) Parent(#Tab1) TabPosition(1) TabStop(False) Top(32) Width(380)
Define_Com Class(#PRIM_TBSH) Name(#Sheet2) Caption('Page2') DisplayPosition(2) Height(0) Left(0) Parent(#Tab1) TabPosition(2) TabStop(False) Top(64) Width(380)
Define_Com Class(#PRIM_TBSH) Name(#Sheet3) Caption('Page3') DisplayPosition(3) Height(0) Left(0) Parent(#Tab1) TabPosition(3) TabStop(False) Top(96) Width(380)
Define_Com Class(#PRIM_TBSH) Name(#Sheet4) Caption('Page4') DisplayPosition(4) Height(155) Left(0) Parent(#Tab1) TabPosition(4) TabStop(False) Top(128) Width(380)

End_Com
Stewart Marshall

Independent IT Consultant
www.marshallfloyd.com.au

Post Reply