Tabs

[Pratibha]

Hello,

I want to show the underline color of the tab . Please see the screenshot. How is it possible?

screen1.PNG (49.04 KiB) Viewed 26043 times

[JamesDuignan]

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]

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

regards,
Pratibha

[JamesDuignan]

Hi Pratibha,

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

Regards,
James

[Pratibha]

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]

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]

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]

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 (22.63 KiB) Viewed 25912 times

[JamesDuignan]

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]

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]

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.