Rendering Tabs Issue

  • 1
  • Problem
  • Updated 4 years ago
  • (Edited)
I am trying to have a Tab Set and change the Icon based on if the tab section has been marked completed with a boolean field and have a Complete and Save Button within each Tab that toggles the field. I will have a lot of sections and want to track each tab being completed and allow hopping around with visual completion indicators. The user fills in the tab contents and click save&complete section button.

I then set rendered conditions on 2 tabs one has a Checkmark icon and one has a warning icon. I hide one and show one based on the completed field being marked true/false. (If there is a better way to display icons based on a field in a tab?)

The problem:
When I click on a button inside my Tab, (buttons are within a Page Title within the Tab) to Save&Complete which updates the boolean field and saves the model. This causes the tabs to Hide and the other to show. The issue is that the next tab in line is then selected and it contains it's content plus the content from the Tab that was just UnHidden due to the conditional render.

Is this a bug or is there a better way to do this?

Thanks for any help, I am new to Skuid and trying get this POC working so I can get purchase approval.
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
  • Stuck

Posted 4 years ago

  • 1
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
I am trying to use Mustache on the Icon for the tabs and it isn't working also. Like this {{#ROS_Completed__c}}sk-icon-mark-completed{{/ROS_Completed__c}}
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Tabs aren't associated to any model. You'll have to put in the model and row for the mustache.

{{#$Model.YOURMODEL.data.0.ROS_Completed__c}}sk-icon-mark-completed{{/$Model.YOURMODEL.data.0.ROS_Completed__c}}

Also, since the tab is a component that isn't associated to a model, it won't be dynamic to the changes happening.

You'll have to use javascript to update these values. Here is a post about it. 
https://community.skuidify.com/skuid/topics/associate-tabs-to-models-so-merge-fields-become-dynamic-ie-model-modelname-data-length
(Edited)
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
This works for the Label on the Tab but not seeming to work for the Icon. Weird, this would be so nice to have! I am going to have find another way to show what sections (tabs) have been marked complete. 
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Seems similar to a ordering system of sorts where you can go back and forth in the process if you'd like. Almost like a wizard would be ideal, but not sure about it's ability to go back and forth as I haven't yet used the component.

I like the approach you're taking though, if only a few of the things would work as intended. 
  1. The icon thing should work.
  2. Dynamic Tab labels can be achieved using javascript. Not that complex really. Do you do javascript?
Not sure what else would be needed to make this feel polished. Care to share a video and I'll take a look.
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
Wizard would work if there were a way to have a button toolbar of sorts that would take you directly to certain steps in the wizard.

If the icons would work that would be ideal.

I tried popups but i have way too much data for a popup and I would still have to have icons for progress per section.

I know JQuery fairly well and Javascript enough to get by and manipulate to make it work. Do you have an example of Adding/Removing a class on tabs dynamically based on a model field?
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Well. Have you looked at this post? JD Bell describes something similar to what you are asking for. I'm not at all sure if it's a match as my coding skills are limited to javascript beginner.
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
Found something that will probably work for this!

I added this into my Mustache and it outputs a checkmark! 

✔
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
Ahhh - simple HTML code to the rescue! 
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
A few notes on the conversation above. 

1.  The tab lable does not currently accept HTML,  so you cannot add the icon divs conditionally using merge syntax. 

2.  The conditional rendering approach should work,  I have not been able to reproduce the "doubling up" of your contents.  Are you sure the field editor contents are inside the tab? 





Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
I don't follow on the icon divs part. How does that relate 
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
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?
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
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?
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
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.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Found this post. Zach describes some work arounds on how to get the desired effects. Rather long work arounds though. Duplicate tab. Set Conditional Rendering so that icon from each tab represent that state you'd like.

https://community.skuidify.com/skuid/topics/skuid_should_process_merge_syntax_in_button_icons_to_all...
(Edited)
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
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.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Huh ... what .... who's on first?
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
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
(Edited)
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
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....
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Yup. Mustache values don't update dynamically unless they are within a component which uses the same model.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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. 
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
If it were possible I'd piggy back you to see what's going on. :D
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
Ok, I provided Skuid with login rights. I will shoot an email to support and see if someone can look at it. Thanks Rob!
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
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.
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
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.... 
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
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 );
Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
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?

Photo of Jarrod Hinson

Jarrod Hinson

  • 2,310 Points 2k badge 2x thumb
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.