conditional tab icons based on field values

  • 1
  • Idea
  • Updated 1 year ago
  • Under Consideration
As the user progresses through the wizard, it would be nice to conditionally display a completion  icon for each tab.

The progress component bar is nice, but if the users want to hop around or close out and come back later (they do), there is currently no way to indicate how much they have already completed.

I've already built checkbox fields, which are updated as the user completes the info on each tab. Now I just need some nice way to display the status of those checkbox fields.


Something like this...except icons would be rendered dynamically instead of statically
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb

Posted 1 year ago

  • 1
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
I'm sure there's a solution via js. ;)
Photo of Bill McCullough

Bill McCullough, Champion

  • 12,436 Points 10k badge 2x thumb
Conlan,

How about a template component?  This example is based on check box fields.  You should be able to adapt it to your solution.

<skuidpage unsavedchangeswarning="" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="UIOnlyModel" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">
            <fields>
                <field id="Ind1" displaytype="BOOLEAN" label="Ind1" ogdisplaytype="TEXT" defaultvaluetype="fieldvalue" defaultValue="true"/>
                <field id="Ind2" displaytype="BOOLEAN" label="Ind2" ogdisplaytype="TEXT" defaultvaluetype="fieldvalue" defaultValue="false"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <template multiple="false" uniqueid="sk-1OJfGR-136" allowhtml="true" model="UIOnlyModel">
            <contents>&lt;style&gt;
table.GeneratedTable {
  width: 100%;
  background-color: #ffffff;
  border-collapse: collapse;
  border-width: 5px;
  border-color: #ffffff;
  border-style: solid;
  color: #000000;
  cellpadding="10";
}
table.GeneratedTable td, table.GeneratedTable th {
  border-width: 5px;
  border-color: #ffffff;
  border-style: solid;
  padding: 6px;
  font-size: 32px;
  color: #ffffff;
  valign: middle;
}
table.GeneratedTable thead {
  background-color: #ffffff;
}
&lt;/style&gt;
&lt;table class="GeneratedTable"&gt;
  &lt;tbody&gt;
    &lt;tr&gt;
      {{#Ind1}}&lt;td style="background-color: #000099"&gt;&lt;i class="sk-webicon  " aria-label="thumbs o up" role="img"&gt;&lt;svg viewBox="0 0 24 24"&gt;&lt;use xmlns:xlink="http://www.w3.org/1999/xlink"; xlink:href="/resource/skuid__IconsSVG/font-awesome/font-awesome.min.svg#thumbs-o-up"&gt;&lt;/use&gt;&lt;/svg&gt;&lt;/i&gt; Step 1&lt;/td&gt;{{/Ind1}}{{^Ind1}}&lt;td style="background-color: red"&gt;&lt;i class="sk-webicon  " aria-label="thumbs o down" role="img"&gt;&lt;svg viewBox="0 0 24 24"&gt;&lt;use xmlns:xlink="http://www.w3.org/1999/xlink"; xlink:href="/resource/skuid__IconsSVG/font-awesome/font-awesome.min.svg#thumbs-o-down"&gt;&lt;/use&gt;&lt;/svg&gt;&lt;/i&gt; Step 1&lt;/td&gt;{{/Ind1}}
      {{#Ind2}}&lt;td style="background-color: #000099"&gt;&lt;i class="sk-webicon  " aria-label="thumbs o up" role="img"&gt;&lt;svg viewBox="0 0 24 24"&gt;&lt;use xmlns:xlink="http://www.w3.org/1999/xlink"; xlink:href="/resource/skuid__IconsSVG/font-awesome/font-awesome.min.svg#thumbs-o-up"&gt;&lt;/use&gt;&lt;/svg&gt;&lt;/i&gt; Step 2&lt;/td&gt;{{/Ind2}}{{^Ind2}}&lt;td style="background-color: red"&gt;&lt;i class="sk-webicon  " aria-label="thumbs o down" role="img"&gt;&lt;svg viewBox="0 0 24 24"&gt;&lt;use xmlns:xlink="http://www.w3.org/1999/xlink"; xlink:href="/resource/skuid__IconsSVG/font-awesome/font-awesome.min.svg#thumbs-o-down"&gt;&lt;/use&gt;&lt;/svg&gt;&lt;/i&gt; Step 2&lt;/td&gt;{{/Ind2}}
    &lt;/tr&gt;
  &lt;/tbody&gt;
&lt;/table&gt;</contents>
        </template>
        <buttonset model="UIOnlyModel" uniqueid="sk-1OVIgr-731">
            <buttons>
                <button type="multi" label="Toggle Step 2" uniqueid="sk-1OVIxg-736" icon="sk-webicon-font-awesome:thumbs-o-up">
                    <actions>
                        <action type="branch" model="UIOnlyModel">
                            <formula>{{Ind2}}===true</formula>
                            <iftrueactions>
                                <action type="updateRow" fieldmodel="UIOnlyModel" affectedrows="context" field="Ind2" enclosevalueinquotes="true" value="false"/>
                            </iftrueactions>
                        </action>
                        <action type="updateRow" fieldmodel="UIOnlyModel" affectedrows="context" field="Ind2" enclosevalueinquotes="true" value="true"/>
                    </actions>
                </button>
            </buttons>
        </buttonset>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>

Thanks,

Bill
(Edited)
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Conlan, I don't think there's any straightforward declarative way to accomplish this right now. I've added it to our backlog as an Idea under consideration.
Photo of Zach McElrath

Zach McElrath, Employee

  • 49,056 Points 20k badge 2x thumb
Yes this is under consideration. 
We are working toward more transparency on release timelines for ideas under consideration.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Lol! Is there a timeline for this?
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb
Thanks for the input, Zach! This one would definitely be nice to have. It's currently not a must-have for the client, but would improve the UX. 

I was able to accomplish something similar on a table by simply rendering different row actions based on another checkbox field value in the row...but I can't think of how to do this in a non-table context...other than putting in a bunch of field editors tied to different models inside a responsive grid, but that feels very messy to me.

Pat, I'm going to try and hack away at this a little bit and take a look at Bill's example. If I get frustrated enough, I may ping you for that JS help.
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb
So demanding Pat! :)
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Always