Component Condition

  • 4
  • Idea
  • Updated 5 months ago
  • (Edited)
New post to get additional comments since this other post is closed for comments. ;)

Here's a simple example of this mornings use of this requested feature.

Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb

Posted 7 months ago

  • 4
Photo of Bill McCullough

Bill McCullough, Champion

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

Would something like this work?



I have a page with 1 model, 1 page title, 2 tabs, and 1 table.  The table is BELOW the tab component.  I use the tab actions to set any filters on the model that I want.  Clicking the tabs can change the filter conditions and re-query the single model/table.  With conditional rendering of columns, you can adjust the columns that appear for each tab.

Here is a sample page so you can see it in action.

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" useviewportmeta="true" showsidebar="true" showheader="true" tabtooverride="Opportunity">
    <models>
        <model id="Opportunity" limit="100" query="false" createrowifnonefound="false" datasource="salesforce" sobject="Opportunity">
            <fields>
                <field id="Name"/>
                <field id="CreatedDate"/>
                <field id="StageName"/>
                <field id="Amount"/>
                <field id="CloseDate"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="StageName" state="filterableoff" inactive="true" name="StageName"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="Opportunity" uniqueid="sk-2Sc1-199">
            <maintitle>
                <template>{{Model.labelPlural}}</template>
            </maintitle>
            <subtitle>Single Model/MultiTab</subtitle>
            <actions>
                <action type="savecancel" uniqueid="sk-2Sc1-197"/>
            </actions>
        </pagetitle>
        <tabset rememberlastusertab="true" defertabrendering="true" uniqueid="sk-2Sc1-314">
            <tabs>
                <tab name="Qualification">
                    <components/>
                    <oninitialshowactions/>
                    <onshowactions>
                        <action type="setCondition" model="Opportunity" condition="StageName" value="Qualification"/>
                        <action type="requeryModel" model="Opportunity" behavior="standard"/>
                    </onshowactions>
                </tab>
                <tab name="Proposal/Price Quote" loadlazypanels="true">
                    <components/>
                    <oninitialshowactions/>
                    <onshowactions>
                        <action type="setCondition" model="Opportunity" condition="StageName" value="Proposal/Price Quote"/>
                        <action type="requeryModel" model="Opportunity" behavior="standard"/>
                    </onshowactions>
                </tab>
            </tabs>
        </tabset>
        <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Opportunity" mode="read" allowcolumnreordering="true" uniqueid="sk-2Sc1-213">
            <fields>
                <field id="Name" hideable="true" allowordering="true" uniqueid="fi-2Sbw-940"/>
                <field id="StageName" hideable="true" uniqueid="fi-2Sc1-257"/>
                <field id="CreatedDate" hideable="true" allowordering="true" uniqueid="fi-2Sbw-941"/>
                <field id="Amount" hideable="true" uniqueid="fi-2Sc1-295"/>
                <field id="CloseDate" hideable="true" uniqueid="fi-2Sc1-296"/>
            </fields>
            <rowactions>
                <action type="edit"/>
                <action type="delete"/>
            </rowactions>
            <massactions usefirstitemasdefault="true">
                <action type="massupdate"/>
                <action type="massdelete"/>
            </massactions>
            <views>
                <view type="standard"/>
            </views>
        </skootable>
    </components>
    <resources>
        <labels/>
        <css/>
        <javascript/>
        <actionsequences uniqueid="sk-2Sc1-254"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>


Thanks,

Bill
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Hey Bill,

In some circumstances this will work. In others not so much. This multiple related lists example works. User would be subject to waiting for a query but it would work.

I have other use cases which need to display multiple components at the same time.

Thanks,

Pat
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
^^^ bump ^^^

Came up again. I have multiple models that are exactly the same except for 1-2 static conditions.

This option would reduce the number of models by 10 at this point of the page development.

I could add the condition via xml to the component, but then managing this in the future would require remembering the condition is there as it's not something I could see in the page builder. I would be ok with this if I could include developer notes specifically on the component and/or model.
Photo of Bill McCullough

Bill McCullough, Champion

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

I see why your request is so valuable.  Being able to declaratively set component conditions will make your pages load faster and easier to maintain.

Thanks,

Bill
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
I just used component conditions for the first time. So awesome!

Best part is you can actually write conditions on ui-only fields this way...