Rendering Tabs Issue

Ahhh - simple HTML code to the rescue! 

That was my first approach. To make 2 Tabs for each section and Hide/Show based on the field value. I ran into the issue of once the tab hides and the other one shows the contents of tab 1 shows on tab 3 and Tab 3 is then the selected tab instead of the replacement tab 2. It is like it switch’s to the 3rd tab since for a brief moment there is only Tab 3 and then Tab 2 is un-hidden and it gets it’s contents displayed.

Huh … what … who’s on first?

I tried the Divs first with Font Awesome syntax and it did not work. The simple HTML did though which is fine, although it would be nice to have control over the Icon and tab color with Mustache.

For my first approach, I definitely had them in separate tabs. I did the following:
– Created a page with a Tab Set
–Created Tab 1  (With Incomplete Icon) 
– Created a Page Title within Tab 1just to add a Button to “Save & Complete Section” and Added a Field Editor below it with 2 fields.
–Created Tab 2 which has the same thing except the Button does the opposite, it “Edit Section” and has a Field Editor with the same fields in read mode.
–Created Tab 3 which is a new section and added only a Field Editor with a couple fields.

When clicking Tab 1 “Save & Complete Section” it changes the Boolean Field to true indicating the section is completed and Saves the Model (Case).The Tab disappears and Tab 2 is un-hidden and Tab 3 is then the selected Tab but it has it’s contents plus the contents of Tab 2 that is un-hidden due to the Boolean being True now. So the Page Title from Tab 2 is now on the Tab 3.

Ideas Rob?

Now I am running into what Pat had issues with and that is when I click the “Complete Section” button within a Tab and set the Boolean field to true the Tab does not automatically display the CheckMark until I do a Page Refresh.

I even tried having the button do a Redirect to URL (Redirect to its same URL to try refresh) after updating the model and it doesn’t do it.
I put the URL like this:
/apex/skuid__ui?page=360Assessment&id={{Id}}

and tried this to swap Tabs, but it stays on that tab.
/apex/skuid__ui?page=360Assessment&id={{Id}}#ExamTab

Whats odd is that this Redirect Works perfect if I run it out of a Modal instead of from a Page Title. I made a Button to launch a modal that has a button that redirects to that URL above and it refresh’s. Obviously that wont work since it is intended to be a quick save button though…

Yup. Mustache values don’t update dynamically unless they are within a component which uses the same model.

hmmmm … 3 questions.
1. Is the contents of Tab 2 actually in Tab 2? I’ve placed components on a page before where I’ve placed it just below the tab set. When viewing the page I was dumbfounded as to how every tab now had this new component. 
2. Are the components that are supposed to be in Tab 2 conditionally rendered?
3. What shows up in Tab 2?

Once you refresh it clears up the Tabs and Tab 2 has it’s contents and Tab 3 is back to normal. It’s definitely some type of rendering issue.

Wow, what a thread.  I think there are a few items to be cleared up here. 

Pat is correct.  The Tab Set control is not tied to a model, and therefore does not listen for changes to the model.  You are not going to be able to use mustache syntax to make realtime updates to the contents of a tabset. They will only update on page refresh.  But your “redirect back to the same Id” strategy should have worked.  Make sure the Id is in your model.  Look at the resulting URL to see if the Id is not coming through. 

But back to the conditional rendering approach.  I have been able to make a similar page that conditionally renders tabs based on formula fields.  When the page is saved and the formula fields are updated server side - the conditional rendering works correctly.   Your experience is pretty completely mysterious. 

Maybe you could give us login rights and then send an email to support@skuidify.com with your OrgId and we can take a look. 


If it were possible I’d piggy back you to see what’s going on. :smiley:

Ok, I provided Skuid with login rights. I will shoot an email to support and see if someone can look at it. Thanks Rob!

Jarrod,  I can confirm your experience with the “tab 2” contents showing in “tab 3”  in strange ways.  This seems like a bug in the order of operations between exposing a new tab and hiding the contents that should be in the tab.  We’ll pass this by our dev team.  

I think there is a way you can work around this. 

I moved the “completed tab” before the “open tab”  and saved the page (this is how I left things).  Now when you complete the first section,  the “completed” tab is exposed and becomes active.  The material from the completed tab is NOT on the third tab.   However,  when you push the Edit section button you get the same scenario.  Tab 3 is exposed but it has the contents of Tab 1 present in it.  As this is a more “rare” scenario it may be acceptable in the near term. 

We can’t do this today, but we could write a bit of custom code that would appropriately activate the right tab and hide the contents that shouldn’t be there (correcting the order of operations). 

Sorry about the headache you’ve had… 

Just noticed that sometimes (seems like a timing thing) when I click the button to update the field that toggles the tabs to hide/show that Both tab 1 and tab 2 disappear leaving only tab 3. A page refresh then clears it all up.

No problems, I can probably for now throw the page refresh Snippet on the Edit section button and that will “clear” it up in the case that the user has to re-edit a section tab. Thanks for checking it out! Let me know if/when a patch/script or release will fix this and I can test it out. In your opinion, Is this the best way to go about doing this type of page?

Also,
One thing I found that might help is in my Edit Section and Complete Section button, I could add this snippet as the last action to take which switches the tab to the correct one. Only issue is it uses tab index not unique ID. Can this same JS function accept a Tab Unique ID instead of the 0 based index? 

skuid.$( “#AssessmentTabs” ).tabs( “option”, “active”, 1 );

Rob,
This is killing me, I cannot get the tabs to stay there at all now that I have completely added all my Tabs and set rendering on all of them, even using the Completed tab first for each tab. Now when I complete a section ALL the other tabs disappear and the only tab left should be a hidden tab. Of course full page refresh corrects the issue. Screen shots below.

Is there a quick fix that doesn’t involve me refreshing the page?

As soon as I removed the page includes from the tab contents the odd behavior stops. It seems that conditional rendering of tabs does not work well with the tab contents being page includes.