Qlik Community

Ask a Question

Integration, Extension & APIs

Discussion board where members can learn more about Integration, Extensions and API’s for Qlik Sense.

Announcements
Our May 2021 end-to-end product release from Data Integration to Data Analytics is out! READ DETAILS
cancel
Showing results for 
Search instead for 
Did you mean: 
jesper_snihs
Partner
Partner

LUI Tab View set active tab

I'm having an issue with the lui-tab-view component with setting which tab to be active when the application is being loaded.

According to the documentation on Angular leonardo-ui components ‒ Qlik Sense Developers

You can set a parameter, acitve-tab, on the lui-tabset, but I don't get this to work.

My example looks like this:

<lui-tab-view>

        <lui-tabset active-tab="tab2">

            <lui-tab ref="tab1">Tab1</lui-tab>

            <lui-tab ref="tab2">Tab2</lui-tab>

            <lui-tab ref="tab3">Tab3</lui-tab>

        </lui-tabset>

        <lui-tab-content ref="tab1">Tab1 content</lui-tab-content>

        <lui-tab-content ref="tab2">Tab2 content</lui-tab-content>

        <lui-tab-content ref="tab3">Tab3 content</lui-tab-content>

    </lui-tab-view>

What am I doing wrong here?

Regards

Jesper

1 Solution

Accepted Solutions
rav
Employee
Employee

You have two options.

1. Declare a scope variable scope.activeTab = "tab2" and send that into the active-tab attribute: active-tab="activeTab". This way, if you change the activeTab scope variable the tabs will automatically update to the correct tab and content which could be useful later on.

2. If you just want to control what tab is initially active you can just send in a string like so:

<lui-tab-view> 

        <lui-tabset active-tab=" 'tab2' "> 

            <lui-tab ref="tab1">Tab1</lui-tab> 

            <lui-tab ref="tab2">Tab2</lui-tab> 

            <lui-tab ref="tab3">Tab3</lui-tab> 

        </lui-tabset> 

        <lui-tab-content ref="tab1">Tab1 content</lui-tab-content> 

        <lui-tab-content ref="tab2">Tab2 content</lui-tab-content> 

        <lui-tab-content ref="tab3">Tab3 content</lui-tab-content> 

</lui-tab-view>


Hope this helps.


 

View solution in original post

2 Replies
rav
Employee
Employee

You have two options.

1. Declare a scope variable scope.activeTab = "tab2" and send that into the active-tab attribute: active-tab="activeTab". This way, if you change the activeTab scope variable the tabs will automatically update to the correct tab and content which could be useful later on.

2. If you just want to control what tab is initially active you can just send in a string like so:

<lui-tab-view> 

        <lui-tabset active-tab=" 'tab2' "> 

            <lui-tab ref="tab1">Tab1</lui-tab> 

            <lui-tab ref="tab2">Tab2</lui-tab> 

            <lui-tab ref="tab3">Tab3</lui-tab> 

        </lui-tabset> 

        <lui-tab-content ref="tab1">Tab1 content</lui-tab-content> 

        <lui-tab-content ref="tab2">Tab2 content</lui-tab-content> 

        <lui-tab-content ref="tab3">Tab3 content</lui-tab-content> 

</lui-tab-view>


Hope this helps.


 

View solution in original post

jesper_snihs
Partner
Partner
Author

Thank you Rikard, that works perfectly!