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}}

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.skuid.com/t/associate-tabs-to-models-so-merge-fields-become-dynamic-ie-model-modelname-data-length

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. 

Wait. You can get the label to change dynamically without javascript?
What works on the label?

no, not dynamically but at least it interprets the mustache syntax. Using mustache in the Icon setting for the Tabs isn’t applying at all, it puts the full mustache text in the Class for the tab in the raw HTML.

hmmmm… can paste the text here to see if there is something small missing.

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

Check to see if putting this into the tab label works to display the text “sk-icon-mark-completed”.

it does, if i put that exact thing in the Label it outputs correctly the words “sk-icon-mark-completed”.

er … uh … seems like a bug to me then.

What other ways would you recommend to do what I am trying to do? I am trying to have section by section for the user to fill in and then have a complete section button and the user can hop around between sections. The icons were there for visually displaying if the section is marked completed.

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?

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?

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.

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? 

I don’t follow on the icon divs part. How does that relate 

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.skuid.com/t/skuid-should-process-merge-syntax-in-button-icons-to-all…

Found something that will probably work for this!

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

✔

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…