locked
Use tab as button in HTML RRS feed

  • Question

  • Hello comunnity!

    I would like to use tabs as buttons (overriding the by default behaviour of tab navigation when tapping the tab element). 

    Imagine that we have a screen with a tab1 where we have a list of data, I would like to have a tab2 and tab3 on that screen that I could use like buttons for filtering the tab1 list with some custom code.



    From the user point of view it would be something like:

    LIST (Tab1) - TODAY(Tab2) - UPCOMING (Tab3)

    But the idea is to remain all the time in tab1

    Please, excuse my poor english, any ideas on how to achieve that?
    Thanks in advance,
    Jesús Sanntin

    Friday, May 19, 2017 2:51 PM

Answers

  • Some options:

    1. Create the three tabs, where you put a different query with a different list/table control on each tab and let the user select which tab they want to view by clicking the appropriate tab. The advantage of this approach is that you do not need anything special and can use everything out of the box. Note that tabs use lazy loading by default which should be good in your case.

    2. As per option 1 above, but make the second and third tab invisible so that only the first tab is displayed by default. Add three buttons above the tabs in their own group control and implement the click event behind each button to make the selected tab visible and hide the other two tabs, you using code like the following (example for button click to select and display first tab):

    // make first tab visible and select it
    screen.findContentItem("TabOne").isVisible = true;
    screen.showTab("TabOne");
    
    // hide other two tabs
    screen.findContentItem("TabTwo").isVisible = false;
    screen.findContentItem("TabThree").isVisible = false;
    Hopefully the above provides you with some pointers.


    Regards, Xander | filebus.io | Blog

    • Marked as answer by Jesus77 Tuesday, June 6, 2017 3:47 PM
    Tuesday, June 6, 2017 4:54 AM

All replies

  • Hi Jesus77,

    Here is the sample to create a tab in html:

    https://www.w3schools.com/howto/howto_js_tabs.asp

    Note: This response contains a reference to a third party World Wide
    Web site. Microsoft is providing this information as a convenience to
    you. 

    Microsoft
    does not control these sites and has not tested any software or information
    found on these sites;

    Therefore,
    Microsoft cannot make any representations regarding the quality, safety, or
    suitability of any software or information found there.

    There
    are inherent dangers in the use of any software found on the Internet, and
    Microsoft cautions you to make sure that you completely understand the risk
    before retrieving any software from the Internet.

    Best Regards,

    Yuk Ding

    Tuesday, May 23, 2017 8:32 AM
  • Thank you very much, but my question is related with a particular behaviour of the tabs that lightswitch brings out of the box.

    Kind regards,

    Jesús Santnin


    • Edited by Jesus77 Wednesday, May 24, 2017 11:19 PM
    Wednesday, May 24, 2017 11:19 PM
  • Some options:

    1. Create the three tabs, where you put a different query with a different list/table control on each tab and let the user select which tab they want to view by clicking the appropriate tab. The advantage of this approach is that you do not need anything special and can use everything out of the box. Note that tabs use lazy loading by default which should be good in your case.

    2. As per option 1 above, but make the second and third tab invisible so that only the first tab is displayed by default. Add three buttons above the tabs in their own group control and implement the click event behind each button to make the selected tab visible and hide the other two tabs, you using code like the following (example for button click to select and display first tab):

    // make first tab visible and select it
    screen.findContentItem("TabOne").isVisible = true;
    screen.showTab("TabOne");
    
    // hide other two tabs
    screen.findContentItem("TabTwo").isVisible = false;
    screen.findContentItem("TabThree").isVisible = false;
    Hopefully the above provides you with some pointers.


    Regards, Xander | filebus.io | Blog

    • Marked as answer by Jesus77 Tuesday, June 6, 2017 3:47 PM
    Tuesday, June 6, 2017 4:54 AM
  • Thank you very much :)
    Tuesday, June 6, 2017 3:47 PM