Tab menu to hide and show objects on 1 page

API & Customization Show & Tell
1

This menu is pretty awesome menu and works pretty much like the field options menu in knack. You can use the menu to show and hide multible forms, lists, tables based on the active tab. This means you can have multible objects on one page without having to have additional pages.

Works well with modals and pages and resizes for mobiles and tablests etc

I 've added a link to show you this and test it yourself

https://johnparsons.knack.com/knack-feature-test#home/

You can keep the javascript down to an absolute minimum by adding a Rich text to a page view and then adding the HTMLinto.

<main>

<input id="tab1" type="radio" name="tabs" checked>
<label for="tab1">Messages</label>

<input id="tab2" type="radio" name="tabs">
<label for="tab2">Documents</label>

<input id="tab3" type="radio" name="tabs">
<label for="tab3">Tasks</label>

<input id="tab4" type="radio" name="tabs">
<label for="tab4">Events</label>

<section id="content1">
<p>

</p>
<p>

</p>
</section>

<section id="content2">
<p>

</p>
<p>

</p>
</section>

<section id="content3">
<p>

</p>
<p>

</p>
</section>

<section id="content4">
<p>

</p>

<p>

</p>
</section>

</main>

You will need to change the classes. I have also added paragraph tabs so you can add text if you wanted to.

CSS

You will need to add your view this will be the rich text view

#view_ *, *:before, *:after {
margin: 0;
padding: 0;
box-sizing: border-box;
}

#view_ #html, body {
height: 100vh;
}

#view_ body {
font: 14px/1 'Open Sans', sans-serif;
color: #555;
background: #eee;
}

#view_ h1 {
padding: 50px 0;
font-weight: 400;
text-align: center;
}

#view_ p {
margin: 0 0 20px;
line-height: 1.5;
}

#view_ main {
min-width: 320px;
max-width: 800px;
margin: 0;
background: #fff;
}

#view_ section {
display: none;
padding: 20px 0 0;
border-top: 1px solid #ddd;
}

#view_ input {
display: none;
}

#view_ label {
display: inline-block;
margin: 0 0 -1px;
padding: 15px 25px;
font-weight: 600;
text-align: center;
color: #bbb;
border: 1px solid transparent;
}

#view_ label:before {
font-family: fontawesome;
font-weight: normal;
margin-right: 10px;
}

#view_
label[for*='1']:before { content: '\f075'; }
label[for*='2']:before { content: '\f15b'; }
label[for*='3']:before { content: '\f0ae'; }
label[for*='4']:before { content: '\f073'; }
}

#view_ label:hover {
color: #888;
cursor: pointer;
}


#view_ input:checked + label {
color: #555;
border: 1px solid #ddd;
border-top: 2px solid orange;
border-bottom: 1px solid #fff;
}

#view_
#tab1:checked ~ #content1,
#tab2:checked ~ #content2,
#tab3:checked ~ #content3,
#tab4:checked ~ #content4 {
display: block;
}

#view_
@media screen and (max-width: 650px) {
label {
font-size: 0;
}
label:before {
margin: 0;
font-size: 18px;
}
}

#view_
@media screen and (max-width: 400px) {
label {
padding: 15px;
}
}

Javascript

This will need to be repeated for each button for a menu but very clean without having to add any HTML at all.

$(document).on('knack-page-render.any', function (event, view, data) {
$('#tab1').click(function(){
$('#view_3210').show(300);
$('#view_3232').show(300);
$('#view_3678').hide(300);
$('#view_3679').hide(300);
$('#view_3681').hide(300);
$('#view_3682').hide(300);
$('#view_3683').hide(300);
});
});

2

This works great, but I have a question. How do you make all of the views except for the selected one hide on initial load? When I first load the page, or refresh, the first tab is selected but all the views show. Once you start clicking other tabs, everything hides and shows correctly.

3

@johnathan

This looks like a nice GUI option. Your UTL link is broken now though.

Do you have another sample?

Thanks in advance

Phil

4

Hi kim, can do a side scroller for views. But wouldnt recomend utalising it as a sidenav main menu. Willing to offer some help ping me a email jonathan.mart.parsons@gmail.com

5

Hi Kim,

Thanks for the kind words! Yes of course you can do many things with this. I did make an accordian if this was thetype of thing you was looking for.

Perhaps you could show me a link to an example you had in mind.

6

Hi Jonathon

This is great - brilliant in fact! I don't suppose you know how to make it a vertical tab/menu rather than horizontal (down the left side)?

7

Thanks Guy, if you need any help just let me know.

8

I like the look of this. I have an app where there are communities, each with several buildings, each with products they use, and then there are contacts from different companies that play a role across these locations. All of these items are separate connected objects.

so i have menu items for each of the above objects, and under each is the primary object info as per menu, but then the associated connected info below it. Ties everything to gether so the user can access info quickly from any location, but makes the pages a little long. I do not have the CSS knowledge (or time to learn) to make the page look organised. This would help me bring this detail into a more organised format (and better UX).

I will have a go at applying this and see how i go

9

Hi marc. This should work you will need tol simply set up a user with a password

10

Hi Jonathan,

This seems like a really great find!

Would love to check the link: https://johnparsons.knack.com/knack-feature-test#home/, but it seems to be password protected.

Thanks ,

Marc

11

Hi Ryan,

You can change the scene render from any to the active page scene.

Example code:
$(document).on(‘knack-scene-render.scene_1354’, function(event, scene) {

$(’#view_3332’).hide(300); /-------------MULTIFILE UPLOAD --------------/
$(’#view_3297’).show(300); /-------------VIEW CLAIM INFORMATION -----------------/
$(’#view_3334’).hide(300); /-------------DOCUMENT TABLE ------------------/
$(’#view_3335’).hide(300); /-------------ADD CLAIM NOTES ----------------/
$(’#view_3336’).hide(300); /-------------CLAIM NOTE TABLE --------------/
$(’#view_3338’).hide(300); /-------------CLAIM INVOICING ADD --------------/
$(’#view_3339’).hide(300); /-------------CLAIM INVOICING TABLE --------------/

12

This is great, but the code still loads the views, and then hides them after.

As a certain scene starts getting loaded, is there a way to prevent specific views from loading and starting off default hidden?

And then, only when the user triggers the “show” event, the scene will be loaded.

The purpose is to reduce the initial scene load time.

In the Knack documentation, it says the ‘knack-scene-render’ event runs after the scene gets rendered.

Thanks!!

13

@ivan, you can use CSS to hide the views you don’t want appearing upon the scene rendering: it should fire before the JS.

1 Like
14

Agree with @JD_Zappfy and we use this a lot, CSS to hide he views, and JS to show them after manipulation. Hides the messy page rendering from the user.

1 Like