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.
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.
- The icon thing should work.
- 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!
✔
