How do I filter multiple tables from the same model based on the same field?

  • 4
  • Question
  • Updated 2 years ago
We have a single object, which I will call "Things."

There is a field on Things called "Type", because we do not have record types. The "Type" field indicates what kind of "Thing" we are looking at.

We have a Skuid tab for Things.

We want to have a table for each type of Thing, because each type of Thing has its own separate need for columns.

I am having two problems with this:

1) The table filters will not apply automatically, even if there is no "filter off" option.

2) When I manipulate one table filter from the front-end dropdown, the other tables lose their filter.

Any help would be appreciated. Let me know if I need to explain further! My immediate solution is to make separate models for each type of thing, but with 7 types of Things, this would take a while.
Photo of Greg Huete

Greg Huete

  • 2,340 Points 2k badge 2x thumb
  • unsure

Posted 5 years ago

  • 4
Photo of Rob Hatch

Rob Hatch, Official Rep

  • 44,006 Points 20k badge 2x thumb
I'm pretty sure that you identified the solution we would reccomend. Make separate models for each type of thing, with the conditions set appropriately so that Table 1 only shows type 1 etc.

We have played with ways to use one model but have it filtered differently in separate tables. The problem is that search actions affect every instance of the model and that seems to be negative customer experience.

On the other hand, maybe that's exactly what you want.
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
The problem with the recommended approach is that if you really do have many conditions, you are creating a separate model, and thus a separate database query, for each condition. That isn't very efficient and slows down the page. I'd love to know of a solution where I could have five different tables all driven from the same model/query, each filtered on a different value. That way the models load in (theoretically) 1/5 the time.

Use case (we have many similar to this right now): A highly normalized SF object that requires data-entry. It has a picklist with five options, and will have a dozen records for each option, each record containing data in the same six fields. Users will get overwhelmed with a single table of dozens of records, so I want to create one for each option and visually separate them. Users also want to see subtotals for each option (in some cases).

Seems like I could potentially create a single master model, then an empty dummy model for each option, then populate the dummy models with records from the master via javascript, but that probably would take a similar amount (or more) of processing time, right?

Alternatively, I suppose, if there was a good way to group or break up a single table and provide a label for each option (on the side or above, say) while displaying subtotals for each option, that would work, too.
Photo of Bill McCullough

Bill McCullough, Champion

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

I think this is what you are after.  I have used a Tab Set with Skuid Actions to set model conditions on a single table.  The table is not inside of the tab set; it is just below it.  This makes it easy for the user to navigate and only uses 1 model and one table.

Here is a sample page that should work in your org.  It uses Opportunities.

Thanks,

Bill

<skuidpage unsavedchangeswarning="" personalizationmode="server" showsidebar="true" showheader="true" tabtooverride="Opportunity">    <models>
        <model id="Opportunity" limit="100" query="true" createrowifnonefound="false" adapter="salesforce" service="salesforce" sobject="Opportunity" type="">
            <fields>
                <field id="Name"/>
                <field id="CreatedDate"/>
                <field id="Type"/>
                <field id="ForecastCategory"/>
                <field id="Amount"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="New Customer" enclosevalueinquotes="true" field="Type" state="filterableon" inactive="false" name="Type"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="Opportunity" uniqueid="sk-2SC-1g-80">
            <maintitle>
                <template>{{Model.labelPlural}}</template>
            </maintitle>
            <subtitle>
                <template>Home</template>
            </subtitle>
            <actions>
                <action type="savecancel"/>
            </actions>
        </pagetitle>
        <tabset rememberlastusertab="true" defertabrendering="true" uniqueid="sk-2SDEuP-147" renderas="">
            <tabs>
                <tab name="New Customer">
                    <components/>
                    <oninitialshowactions/>
                    <onshowactions>
                        <action type="setCondition" model="Opportunity" condition="Type" value="New Customer"/>
                        <action type="requeryModel" model="Opportunity" behavior="standard"/>
                    </onshowactions>
                </tab>
                <tab name="Existing Customer - Upgrade" loadlazypanels="true">
                    <components/>
                    <oninitialshowactions/>
                    <onshowactions>
                        <action type="setCondition" model="Opportunity" condition="Type" value="Existing Customer - Upgrade"/>
                        <action type="requeryModel" model="Opportunity" behavior="standard"/>
                    </onshowactions>
                </tab>
                <tab name="Existing Customer - Downgrade" loadlazypanels="true">
                    <components/>
                    <oninitialshowactions/>
                    <onshowactions>
                        <action type="setCondition" model="Opportunity" condition="Type" value="Existing Customer - Downgrade"/>
                        <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" uniqueid="sk-2SC-1g-81">
            <fields>
                <field id="Type" valuehalign="" type=""/>
                <field id="Name" allowordering="true"/>
                <field id="ForecastCategory"/>
                <field id="Amount"/>
            </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/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of Peter Bender

Peter Bender, Champion

  • 6,246 Points 5k badge 2x thumb
This changes the model conditions and filters one table that adjusts as you click from one "tab" to the next, which is a good idea. I wanted multiple tables to all be visible and editable at the same time, and I still don't think we have a scalable solution for that. Not sure which type the users would prefer, though, in my case, so I'll see, thanks.
Photo of and thorough

and thorough

  • 736 Points 500 badge 2x thumb
I am looking for a similar solution.  I would like to display 16 separate tables on one page, all based on the same model, all filtered on the same field (but with a different filter value for each table).  Right now, I have a filterable condition on the model, default off, and then a toggle filter on each table, with an "Activate and Set Value" effect, setting the desired filter value per table.  But is there a way to lock those filters in the toggled-on position and/or auto-activate the filters on load?  For my use case, the user should not need to turn the filters on, as this is meant to be a way to organize a record set into different categories.  The alternative seems to be either 16 separate models or pulling the rows into dummy models, as Peter suggested.  I just feel like the table filters are so close to being right...I just need a way for the filters to always be on.
Photo of and thorough

and thorough

  • 736 Points 500 badge 2x thumb
Never mind, I just realized the filter option won't work, since it sets the condition on the model, so all tables based on that model show the same data as the last toggled filter.  So much for that.
Photo of mB Pat Vachon

mB Pat Vachon, Champion

  • 42,714 Points 20k badge 2x thumb
Stole this yet to be supported idea from Zach here.

Manually add the conditions as shown by Zach and make sure you have the Type field in the model or this won't work.

Works like setting a context but you're setting which records you'd like to see in the table to a fixed value. ie. by Type.

Weeee!!!

Here's what it should look like in your page.



Here's a sample page using the Opportunity object.
<skuidpage unsavedchangeswarning="yes">
    <models>
        <model id="Opportunity" limit="100" query="true" createrowifnonefound="false" adapter="salesforce" service="salesforce" sobject="Opportunity" type="">
            <fields>
                <field id="Name"/>
                <field id="CreatedDate"/>
                <field id="Type"/>
                <field id="ForecastCategory"/>
                <field id="Amount"/>
                <field id="StageName"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <pageregioncontents>
        <pageregioncontent regionid="sk-1uFo3V-67" uniqueid="sk-3Y8KxD-135">
            <components>
                <pagetitle model="Opportunity" uniqueid="sk-2SC-1g-80">
                    <maintitle>
                        <template>{{Model.labelPlural}}</template>
                    </maintitle>
                    <subtitle>
                        <template>Home</template>
                    </subtitle>
                    <actions>
                        <action type="savecancel"/>
                    </actions>
                </pagetitle>
                <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Opportunity" mode="read" uniqueid="sk-2SC-1g-81">
                    <fields>
                        <field id="Name" allowordering="true"/>
                        <field id="StageName"/>
                    </fields>
                    <rowactions>
                        <action type="edit"/>
                        <action type="delete"/>
                    </rowactions>
                    <massactions usefirstitemasdefault="true">
                        <action type="massupdate"/>
                        <action type="massdelete"/>
                    </massactions>
                    <views>
                        <view type="standard"/>
                    </views>
                    <conditions>
                        <condition type="fieldvalue" field="StageName" operator="=" value="Closed Won" enclosevalueinquotes="false"/>
                    </conditions>
                    <renderconditions logictype="and"/>
                </skootable>
                <skootable showconditions="true" showsavecancel="false" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" createrecords="true" model="Opportunity" mode="read" uniqueid="sk-2SC-1g-81">
                    <fields>
                        <field id="Name" allowordering="true"/>
                        <field id="StageName"/>
                    </fields>
                    <rowactions>
                        <action type="edit"/>
                        <action type="delete"/>
                    </rowactions>
                    <massactions usefirstitemasdefault="true">
                        <action type="massupdate"/>
                        <action type="massdelete"/>
                    </massactions>
                    <views>
                        <view type="standard"/>
                    </views>
                    <conditions>
                        <condition type="fieldvalue" field="StageName" operator="=" value="Negotiation/Review" enclosevalueinquotes="false"/>
                    </conditions>
                    <renderconditions logictype="and"/>
                </skootable>
            </components>
        </pageregioncontent>
    </pageregioncontents>
    <resources>
        <labels/>
        <css/>
        <javascript/>
    </resources>
</skuidpage>