Adding Tabs to your App

Hire a Developer
1

So we were developing an application for a client and discovered that the amount of information on a single page was extensive. The page contained 11 tables that were set to only show 10 records. While this seemed to work for the project initially we discovered as records were created in the tables that the page became very long and you had to scroll through lots of information.

So we researched an option which was listed in the docs.tadabase.io that referred to using tabs within your app. While the information was definitely helpful we discovered that the documentation provided only a limited solution and did not fit our specific need.

So here we go with our version of tabs in an application that will allow you to have more data in a single page within your app and still look clean and simple.

Before:

Tabs-001
Tabs-0011253×936 75.5 KB

After:

Tabs-002
Tabs-0021253×936 52 KB

For the Complete List of instructions you can email connect@brandglobal.us

Please note that we charge for our services.

5 Likes
2

Hi @bgedevteam

Thank you for sharing this. Your page looks really good.

I have the same problem, I have one page with so many tables and sections, however my customer doesn’t want the Tabs solution, so I thought of implementing Achor instead, so having the menu similar to the tabs however the sections continue to appear on the page if you scroll down, and the click on the menu takes the end user to the section on the page.

I was not yet able to achieve this yet. My page requires a header section that is always on the top, the menu should also be at the top of the page. And the remaining sections should scroll.

Do you have any suggestions to could assist me?

Thank you in advance
Cheers

3

@sahiraz what about using something like buttons that toggle the visibility?

Something like this: Show / Hide Search Component except each button hides everything but the selection chosen?

Otherwise you can use a simple JS to scroll to a particular ID:

For example:
At the top of you page add custom HTML as follows:

image
image1334×453 25.8 KB

Then in your Javascript:

$(".scroll-to-1").click(function() {
    $('html, body').animate({
        scrollTop: $("#x_element_page_4_41").offset().top
    }, 0);
});

$(".scroll-to-2").click(function() {
    $('html, body').animate({
        scrollTop: $("#x_element_page_4_35").offset().top
    }, 0);
});

Just replace the x_element_page_4_42 with the ID of your component.

image
image1555×967 83.6 KB

Add this to your CSS to make the scroll feel smoother:

html {
  scroll-behavior: smooth;
}

scrolltosection
scrolltosection800×404 649 KB

Here’s another article that might be of assistance:

3 Likes
4

Hi @moe
Thank you for this. I will take a look at your suggested approach.

I dont need the sections to be shown/hidden on the page, I just need a shortcut at the top of the page to take the end user to the section on the same page when they click.

Thanks

5

They will charge you for this. Not very community!!

6

Hi @adrian.peck, welcome to the community!

While this is an important distinction to be made here, I can assume the intention of this topic was not to deceive.

With that said, two comments here…

  1. I will move this to #showcase because it is better suited there.

  2. As this community grows, maybe there could be a separate category to showcase paid solutions/services such as customizations.

1 Like