Tabs

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
Pratibha
Posts: 15
Joined: Wed Oct 31, 2018 6:53 pm

Tabs

Post by Pratibha » Wed Jan 15, 2020 7:28 pm

Hello,

I want to show the underline color of the tab . Please see the screenshot. How is it possible?
screen1.PNG
screen1.PNG (49.04 KiB) Viewed 1912 times

JamesDuignan
Posts: 81
Joined: Thu Nov 26, 2015 1:43 pm

Re: Tabs

Post by JamesDuignan » Thu Jan 16, 2020 8:10 am

Hi,

Make sure 'ShowSelection' property is set and the 'SelectionColor' will allow you to select the colour of the line the tab container (#prim_md.tab) the viewstyle property should also be set to 'TopNavigation''

https://docs.lansa.com/14/en/lansa016/p ... ection.htm
https://docs.lansa.com/14/en/lansa016/p ... ncolor.htm

Regards,
James

Pratibha
Posts: 15
Joined: Wed Oct 31, 2018 6:53 pm

Re: Tabs

Post by Pratibha » Fri Jan 17, 2020 9:03 pm

I am using the component #PRIM_TBSH in Prim.tab. How is it possible to show underline colour in tabsheets.

regards,
Pratibha

JamesDuignan
Posts: 81
Joined: Thu Nov 26, 2015 1:43 pm

Re: Tabs

Post by JamesDuignan » Tue Jan 21, 2020 8:07 am

Hi Pratibha,

This cannot be done with prim_tab. It can only be achieved with PRIM_MD.tab.

Regards,
James

Pratibha
Posts: 15
Joined: Wed Oct 31, 2018 6:53 pm

Re: Tabs

Post by Pratibha » Tue Jan 21, 2020 7:08 pm

Hi James,

I have tried to use #PRIM_MD.TAB but was unable to show drag the list in #PRIM_MD.TAB. Don't know was it een error or bug in LANSA.

Regards,
Pratibha

JamesDuignan
Posts: 81
Joined: Thu Nov 26, 2015 1:43 pm

Re: Tabs

Post by JamesDuignan » Wed Jan 22, 2020 8:10 am

Hi Pratibha,

I am not sure what you mean.
PRIM_MD.tab is just a container to display prim_md.TabItems, these can be linked to tabs or views to open them upon clicking on the item.

here is an example of using it with tabsheets:

Code: Select all

Begin_Com Role(*EXTENDS #PRIM_WEB) Theme(#SYS_THEME<MaterialDesignBlue>) Layoutmanager(#LayoutMain)

Define_Com Class(#PRIM_VS.Style) Name(#Style1) Borderbottom(0) Borderleft(0) Borderright(0) Bordertop(0) Textcolor(3DMediumShadow)

Define_Com Class(#PRIM_VS.Style) Name(#Style2) Borderbottom(1) Borderleft(1) Borderright(1) Bordertop(1)

Define_Com Class(#PRIM_TBLO) Name(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Column) Name(#LayoutMainColumn1) Displayposition(1) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow1) Displayposition(1) Parent(#LayoutMain) Height(50) Units(Content)
Define_Com Class(#PRIM_TBLO.Row) Name(#LayoutMainRow2) Displayposition(2) Parent(#LayoutMain)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem1) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Tab) Parent(#LayoutMain) Row(#LayoutMainRow1) Sizing(None)
Define_Com Class(#PRIM_TBLO.Item) Name(#LayoutMainItem2) Alignment(TopCenter) Column(#LayoutMainColumn1) Manage(#Tab1) Parent(#LayoutMain) Row(#LayoutMainRow2) Marginbottom(8) Marginleft(8) Marginright(8)
* Md tab controls. This contains the Tab items linked to the Tab sheets using property Tabsheet
Define_Com Class(#PRIM_MD.Tab) Name(#Tab) Displayposition(1) Height(50) Left(420) Parent(#COM_OWNER) Tabposition(1) Themedrawstyle('DarkTitle') Width(360) Selectioncolor(ThemeAccentDark)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem1) Caption('Open Tab Sheet 1') Displayposition(1) Height(50) Left(0) Parent(#Tab) Tabposition(1) Tabstop(True) Top(0) Tabsheet(#Sheet1) Width(120)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem2) Caption('Open Tab Sheet 2') Displayposition(2) Height(50) Left(120) Parent(#Tab) Tabposition(2) Tabstop(True) Top(0) Tabsheet(#Sheet2) Width(120)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem3) Caption('Open Tab Sheet 3') Displayposition(3) Height(50) Left(240) Parent(#Tab) Tabposition(3) Tabstop(True) Top(0) Tabsheet(#Sheet3) Width(120)


* The definition of the tab container and the tabsheets contained in them. Note property Showpagetabs is set to false
Define_Com Class(#PRIM_TAB) Name(#Tab1) Bottomlayoutpriority(4) Componentversion(2) Displayposition(2) Height(742) Leftlayoutpriority(1) Parent(#COM_OWNER) Rightlayoutpriority(2) Tabposition(2) Top(50) Toplayoutpriority(3) Width(1184) Showpagetabs(False) Left(8) Style(#Style1)
Define_Com Class(#PRIM_TBSH) Name(#Sheet1) Caption('ITEM 1') Displayposition(1) Height(742) Left(0) Parent(#Tab1) Tabposition(1) Tabstop(False) Top(0) Width(1184) Style(#Style2)
Define_Com Class(#PRIM_TBSH) Name(#Sheet2) Caption('ITEM 2') Displayposition(2) Height(742) Left(0) Parent(#Tab1) Tabposition(2) Tabstop(False) Top(0) Width(1184) Style(#Style2)
Define_Com Class(#PRIM_TBSH) Name(#Sheet3) Caption('ITEM 3') Displayposition(3) Height(742) Left(0) Parent(#Tab1) Tabposition(3) Tabstop(False) Top(0) Width(1184) Style(#Style2)

* Labels to be shown in each tab
Define_Com Class(#prim_md.Label) Name(#LabelSheet1) Parent(#Sheet1) Caption('I am Tab Sheet 1') Displayposition(1) Tabposition(1) Top(0) Left(0) Width(250) Height(60) Themedrawstyle('ForegroundMediumError')
Define_Com Class(#prim_md.Label) Name(#LabelSheet2) Parent(#Sheet2) Caption('I am Tab Sheet 2') Displayposition(1) Tabposition(1) Top(0) Left(0) Width(250) Height(60) Themedrawstyle('ForegroundMediumAccent')
Define_Com Class(#prim_md.Label) Name(#LabelSheet3) Parent(#Sheet3) Caption('I am Tab Sheet 3') Displayposition(1) Tabposition(1) Top(0) Left(0) Width(250) Height(60) Themedrawstyle('ForegroundMediumSuccess')

End_Com
Regards,
James

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

Re: Tabs

Post by soa » Wed Jan 22, 2020 9:39 am

James

I've posted earlier about MD Tabs

viewtopic.php?f=3&t=2207&p=6051&hilit=tabs#p6051

They do not seem to be intuitively working from the IDE (i.e. drag and drop a tabsheet on the surface, then drop one or more sheets on to it which then act like standard panels). There is a single example available but as this is code only it does not explain how one uses this control in the IDE to build a UI.

Since this poster had the same problem I had perhaps a walk-through or a video example would be useful.

Cheers
Jim

Pratibha
Posts: 15
Joined: Wed Oct 31, 2018 6:53 pm

Re: Tabs

Post by Pratibha » Wed Jan 22, 2020 7:56 pm

Hello James,

I am using currently only #PRIM_TAB component and not using #PRIM_MD.Tab at all. Is it possible to show another color or text bold only in PRIM.TAb component . At this position I cannot go back to component #PRIM_MD.TAB as I have to change lot of code and that will take time. Please see the snapshot...

If there is any solution in this #PRIM.Tab component, would like to hear please.

Regards,
Pratibha
SCR1.PNG
SCR1.PNG (22.63 KiB) Viewed 1781 times

JamesDuignan
Posts: 81
Joined: Thu Nov 26, 2015 1:43 pm

Re: Tabs

Post by JamesDuignan » Fri Jan 24, 2020 12:44 pm

Hi Pratibha,

No, unfortunately, there is not a way to change the style on individual tab buttons.

But, I would like to stress there is not much of a code change for adding in the prim_md.tab component, you can still keep your prim_tab and tabsheets, the prim_md.tab is just control that contains buttons for the tab sheet selection.

1. In your current example, it would be the addition of 4 define_com statements
2. placing it in the layout appropriately and
3. Setting the ShowPageTabs to false on the on prim_tab component.

Code: Select all

Define_Com Class(#PRIM_MD.Tab) Name(#Tab) Displayposition(1) Height(50) Left(420) Parent(#COM_OWNER) Tabposition(1) Themedrawstyle('DarkTitle') Width(360) Selectioncolor(ThemeAccentDark)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem1) Caption('Lastdrager Geleverd') Displayposition(1) Height(50) Left(0) Parent(#Tab) Tabposition(1) Tabstop(True) Top(0) Tabsheet(#<Add Tabsheet for Lastdrager Geleverd>) Width(120)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem2) Caption('Lastdrager Retour') Displayposition(2) Height(50) Left(120) Parent(#Tab) Tabposition(2) Tabstop(True) Top(0) Tabsheet(#<Add tabsheet for Lastdrager Retour>) Width(120)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem3) Caption('Emballage') Displayposition(3) Height(50) Left(240) Parent(#Tab) Tabposition(3) Tabstop(True) Top(0) Tabsheet(#<Add Tab Sheet for Emballage>) Width(120)
Regards,
James

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

Re: Tabs

Post by soa » Fri Jan 24, 2020 3:45 pm

So the MD Tab control just provides the bit at the top but an old school tab control is used to provide the tabsheets. I've just tried it and it works but I would never have guessed that!

Thanks.

Pratibha
Posts: 15
Joined: Wed Oct 31, 2018 6:53 pm

Re: Tabs

Post by Pratibha » Thu Jan 30, 2020 1:43 am

JamesDuignan wrote:
Fri Jan 24, 2020 12:44 pm
Hi Pratibha,

No, unfortunately, there is not a way to change the style on individual tab buttons.

But, I would like to stress there is not much of a code change for adding in the prim_md.tab component, you can still keep your prim_tab and tabsheets, the prim_md.tab is just control that contains buttons for the tab sheet selection.

1. In your current example, it would be the addition of 4 define_com statements
2. placing it in the layout appropriately and
3. Setting the ShowPageTabs to false on the on prim_tab component.

Code: Select all

Define_Com Class(#PRIM_MD.Tab) Name(#Tab) Displayposition(1) Height(50) Left(420) Parent(#COM_OWNER) Tabposition(1) Themedrawstyle('DarkTitle') Width(360) Selectioncolor(ThemeAccentDark)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem1) Caption('Lastdrager Geleverd') Displayposition(1) Height(50) Left(0) Parent(#Tab) Tabposition(1) Tabstop(True) Top(0) Tabsheet(#<Add Tabsheet for Lastdrager Geleverd>) Width(120)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem2) Caption('Lastdrager Retour') Displayposition(2) Height(50) Left(120) Parent(#Tab) Tabposition(2) Tabstop(True) Top(0) Tabsheet(#<Add tabsheet for Lastdrager Retour>) Width(120)
Define_Com Class(#PRIM_MD.TabItem) Name(#TabItem3) Caption('Emballage') Displayposition(3) Height(50) Left(240) Parent(#Tab) Tabposition(3) Tabstop(True) Top(0) Tabsheet(#<Add Tab Sheet for Emballage>) Width(120)
Regards,
James


Thank you So much for your advice James. It is working now.

Post Reply