Group cards in a deck by date

  • 1
  • Question
  • Updated 2 weeks ago
  • Answered
I have a custom object called "mobilizations" which are deployments to job sites.  On a page with a calendar we display these as events.  Our goal is to display a card for each event showing the information about each mobilization in rows beneath the calendar.  We want a row for each day in the calendar included the view.  This works for the day view but for the week all the card showing without a grouping or separation.   The attached screenshot shows what we have this far.  The question is how to group the displayed cards by calendar day?

Week View

Day View

Month View
Photo of Chad Gill

Chad Gill

  • 1,194 Points 1k badge 2x thumb

Posted 3 weeks ago

  • 1
Photo of Chad Gill

Chad Gill

  • 1,194 Points 1k badge 2x thumb
any thoughts?

Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
Hi Chad, there's probably more to your scenario that I don't know yet, but to start with the basics, are you able to sort the deck's model by the date? 
Photo of Chad Gill

Chad Gill

  • 1,194 Points 1k badge 2x thumb
yes we can do that.  The last screen shot shows the cards going from left to right in increasing start date/time.  That is how I ordered the model data.  The problem is I want a row(s) for monday and the a space and a new row for teusday and on down based on the calendar view.
Photo of Chad Gill

Chad Gill

  • 1,194 Points 1k badge 2x thumb
preferably each row would have the date as the title.
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
That makes sense. Building that out might require some additional page-level logic. The deck component doesn't have a way to sort data row by rows, so if you wanted all Monday events on Monday, and Tuesday events on Tuesday, etc., you would need separate Decks for each day of the week. There's also a handy Salesforce formula that lets you return the day of the week for any datetime field. If you add that as a formula field on your Mobilizations object, you can filter & events by day of the week, which gives you a lot more flexibility on the Skuid end. Skuid does have a Day Name formula function, but formula fields can't be used for filtering, so I haven't found a declarative way to use these for sorting or filtering, like you're asking.

  • DAY_OF_WEEK_UTC: Returns a Number corresponding with the day of the week from a Date or DateTime field. This day is calculated according to UTC (Universal Coordinated Time) rather than local time.

  • DAY_OF_WEEK: Returns a Number corresponding with the day of the week from a Date or DateTime field - in local time

https://docs.skuid.com/latest/en/skuid/models/ui-only-models-fields.html#ui-only-functions

Here's the custom Salesforce formula field I added to my Activity object (which I called StartDateName__c), and below that is the XML for a simple test page I built while researching this. Hopefully, this gives you some ideas on what you can do. 

CASE(WEEKDAY(ActivityDate), 
1,"Sunday", 
2,"Monday", 
3,"Tuesday", 
4,"Wednesday", 
5,"Thursday", 
6,"Friday", 
7,"Saturday", 
"")



<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="eventsMonday" limit="100" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Event" processonclient="true">
            <fields>
                <field id="StartDateTime"/>
                <field id="StartDateName__c"/>
                <field id="Subject"/>
                <field id="EndDateTime"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="Monday" enclosevalueinquotes="true" inactive="false" operator="=" field="StartDateName__c"/>
            </conditions>
            <actions/>
        </model>
        <model id="eventsTuesday" limit="100" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Event" processonclient="true">
            <fields>
                <field id="StartDateTime"/>
                <field id="StartDateName__c"/>
                <field id="Subject"/>
                <field id="EndDateTime"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="Tuesday" enclosevalueinquotes="true" inactive="false" operator="=" field="StartDateName__c"/>
            </conditions>
            <actions/>
        </model>
        <model id="eventsWednesday" limit="100" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Event" processonclient="true">
            <fields>
                <field id="StartDateTime"/>
                <field id="StartDateName__c"/>
                <field id="Subject"/>
                <field id="EndDateTime"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="Wednesday" enclosevalueinquotes="true" inactive="false" operator="=" field="StartDateName__c"/>
            </conditions>
            <actions/>
        </model>
        <model id="eventsThursday" limit="100" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Event" processonclient="true">
            <fields>
                <field id="StartDateTime"/>
                <field id="StartDateName__c"/>
                <field id="Subject"/>
                <field id="EndDateTime"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="Thursday" enclosevalueinquotes="true" inactive="false" operator="=" field="StartDateName__c"/>
            </conditions>
            <actions/>
        </model>
        <model id="eventsFriday" limit="100" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Event" processonclient="true">
            <fields>
                <field id="StartDateTime"/>
                <field id="StartDateName__c"/>
                <field id="Subject"/>
                <field id="EndDateTime"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="Friday" enclosevalueinquotes="true" inactive="false" operator="=" field="StartDateName__c"/>
            </conditions>
            <actions/>
        </model>
        <model id="eventsSaturday" limit="100" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Event" processonclient="true">
            <fields>
                <field id="StartDateTime"/>
                <field id="StartDateName__c"/>
                <field id="Subject"/>
                <field id="EndDateTime"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="Saturday" enclosevalueinquotes="true" inactive="false" operator="=" field="StartDateName__c"/>
            </conditions>
            <actions/>
        </model>
        <model id="eventsSunday" limit="100" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Event" processonclient="true">
            <fields>
                <field id="StartDateTime"/>
                <field id="StartDateName__c"/>
                <field id="Subject"/>
                <field id="EndDateTime"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="Sunday" enclosevalueinquotes="true" inactive="false" operator="=" field="StartDateName__c"/>
            </conditions>
            <actions/>
        </model>
        <model id="NewEvent" limit="1" query="false" createrowifnonefound="false" datasource="salesforce" sobject="Event">
            <fields>
                <field id="Subject"/>
                <field id="StartDateTime"/>
                <field id="EndDateTime"/>
                <field id="Description"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <buttonset uniqueid="sk-31ok-415">
            <buttons>
                <button type="multi" label="New Event" uniqueid="sk-31ol-422">
                    <actions>
                        <action type="createRow" model="NewEvent" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context">
                            <defaults/>
                        </action>
                        <action type="showPopup">
                            <popup title="New Event" width="90%">
                                <components>
                                    <buttonset model="NewEvent" uniqueid="sk-31pO-622">
                                        <buttons>
                                            <button type="multi" label="Save &amp; Close" uniqueid="sk-31pO-627">
                                                <actions>
                                                    <action type="save">
                                                        <models>
                                                            <model>NewEvent</model>
                                                        </models>
                                                    </action>
                                                    <action type="requeryModels" behavior="standard">
                                                        <models>
                                                            <model>eventsMonday</model>
                                                            <model>eventsTuesday</model>
                                                            <model>eventsWednesday</model>
                                                            <model>eventsThursday</model>
                                                            <model>eventsFriday</model>
                                                            <model>eventsSaturday</model>
                                                            <model>eventsSunday</model>
                                                        </models>
                                                    </action>
                                                    <action type="abandonRows" model="NewEvent" affectedrows="all"/>
                                                    <action type="closeAllPopups"/>
                                                </actions>
                                            </button>
                                            <button type="cancel" label="Cancel" uniqueid="sk-31pW-673" window="self"/>
                                        </buttons>
                                    </buttonset>
                                    <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="NewEvent" uniqueid="sk-31p1-513" mode="edit">
                                        <columns>
                                            <column width="50%" uniqueid="sk-31p1-509">
                                                <sections>
                                                    <section title="Section A" uniqueid="sk-31p1-510" collapsible="no" showheader="false">
                                                        <fields>
                                                            <field uniqueid="sk-31p4-536" id="Subject"/>
                                                            <field uniqueid="sk-31pB-571" id="Description"/>
                                                        </fields>
                                                    </section>
                                                </sections>
                                            </column>
                                            <column width="50%" uniqueid="sk-31p1-511">
                                                <sections>
                                                    <section title="Section B" uniqueid="sk-31p1-512" collapsible="no" showheader="false">
                                                        <fields>
                                                            <field uniqueid="sk-31pB-569" id="StartDateTime"/>
                                                            <field uniqueid="sk-31pB-570" id="EndDateTime"/>
                                                        </fields>
                                                    </section>
                                                </sections>
                                            </column>
                                        </columns>
                                        <renderconditions logictype="and"/>
                                    </basicfieldeditor>
                                </components>
                                <afterclose>
                                    <action type="cancel">
                                        <models>
                                            <model>NewEvent</model>
                                        </models>
                                    </action>
                                </afterclose>
                            </popup>
                        </action>
                    </actions>
                </button>
            </buttons>
        </buttonset>
        <grid uniqueid="sk-31h4-314">
            <divisions>
                <division behavior="specified" verticalalign="top" width="14%">
                    <components>
                        <deck searchmethod="server" searchbox="false" columngutter=".75em" rowgutter=".75em" model="eventsMonday" filtersposition="top" filterswidth="150px" showsavecancel="false" behavior="flex" verticalalign="top" ratio="1" minwidth="350px" hideheader="false" hidefooter="true" uniqueid="sk-31hY-773" pagesize="10" heading="Monday" emptysearchbehavior="query">
                            <components>
                                <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="eventsMonday" uniqueid="sk-31hY-774" mode="read" layout="above">
                                    <columns>
                                        <column width="100%" uniqueid="sk-31hY-775">
                                            <sections>
                                                <section title="Section A" uniqueid="sk-31hY-776" collapsible="no" showheader="false">
                                                    <fields>
                                                        <field uniqueid="sk-31hY-777" id="Subject"/>
                                                        <field uniqueid="sk-31hY-778" id="StartDateTime"/>
                                                        <field uniqueid="sk-31hY-779" id="StartDateName__c"/>
                                                    </fields>
                                                </section>
                                            </sections>
                                        </column>
                                    </columns>
                                </basicfieldeditor>
                            </components>
                            <massactions/>
                            <interactions/>
                            <actions/>
                            <styles>
                                <styleitem type="border"/>
                            </styles>
                            <filters/>
                            <searchfields/>
                        </deck>
                    </components>
                </division>
                <division behavior="specified" verticalalign="top" width="14%">
                    <components>
                        <deck searchmethod="server" searchbox="false" columngutter=".75em" rowgutter=".75em" model="eventsTuesday" filtersposition="top" filterswidth="150px" showsavecancel="false" behavior="flex" verticalalign="top" ratio="1" minwidth="350px" hideheader="false" hidefooter="true" uniqueid="sk-31hc-845" pagesize="10" heading="Tuesday" emptysearchbehavior="query">
                            <components>
                                <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="eventsTuesday" uniqueid="sk-31hc-846" mode="read" layout="above">
                                    <columns>
                                        <column width="100%" uniqueid="sk-31hc-847">
                                            <sections>
                                                <section title="Section A" uniqueid="sk-31hc-848" collapsible="no" showheader="false">
                                                    <fields>
                                                        <field uniqueid="sk-31hc-849" id="Subject"/>
                                                        <field uniqueid="sk-31hc-850" id="StartDateTime"/>
                                                        <field uniqueid="sk-31hc-851" id="StartDateName__c"/>
                                                    </fields>
                                                </section>
                                            </sections>
                                        </column>
                                    </columns>
                                </basicfieldeditor>
                            </components>
                            <massactions/>
                            <interactions/>
                            <actions/>
                            <styles>
                                <styleitem type="border"/>
                            </styles>
                            <filters/>
                            <searchfields/>
                        </deck>
                    </components>
                </division>
                <division behavior="specified" verticalalign="top" width="14%">
                    <components>
                        <deck searchmethod="server" searchbox="false" columngutter=".75em" rowgutter=".75em" model="eventsWednesday" filtersposition="top" filterswidth="150px" showsavecancel="false" behavior="flex" verticalalign="top" ratio="1" minwidth="350px" hideheader="false" hidefooter="true" uniqueid="sk-31he-945" pagesize="10" heading="Wednesday" emptysearchbehavior="query">
                            <components>
                                <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="eventsWednesday" uniqueid="sk-31he-946" mode="read" layout="above">
                                    <columns>
                                        <column width="100%" uniqueid="sk-31he-947">
                                            <sections>
                                                <section title="Section A" uniqueid="sk-31he-948" collapsible="no" showheader="false">
                                                    <fields>
                                                        <field uniqueid="sk-31he-949" id="Subject"/>
                                                        <field uniqueid="sk-31he-950" id="StartDateTime"/>
                                                        <field uniqueid="sk-31he-951" id="StartDateName__c"/>
                                                    </fields>
                                                </section>
                                            </sections>
                                        </column>
                                    </columns>
                                </basicfieldeditor>
                            </components>
                            <massactions/>
                            <interactions/>
                            <actions/>
                            <styles>
                                <styleitem type="border"/>
                            </styles>
                            <filters/>
                            <searchfields/>
                        </deck>
                    </components>
                </division>
                <division behavior="specified" verticalalign="top" width="14%">
                    <components>
                        <deck searchmethod="server" searchbox="false" columngutter=".75em" rowgutter=".75em" model="eventsThursday" filtersposition="top" filterswidth="150px" showsavecancel="false" behavior="flex" verticalalign="top" ratio="1" minwidth="350px" hideheader="false" hidefooter="true" uniqueid="sk-31hg-1018" pagesize="10" heading="Thursday" emptysearchbehavior="query">
                            <components>
                                <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="eventsThursday" uniqueid="sk-31hg-1019" mode="read" layout="above">
                                    <columns>
                                        <column width="100%" uniqueid="sk-31hg-1020">
                                            <sections>
                                                <section title="Section A" uniqueid="sk-31hg-1021" collapsible="no" showheader="false">
                                                    <fields>
                                                        <field uniqueid="sk-31hg-1022" id="Subject"/>
                                                        <field uniqueid="sk-31hg-1023" id="StartDateTime"/>
                                                        <field uniqueid="sk-31hg-1024" id="StartDateName__c"/>
                                                    </fields>
                                                </section>
                                            </sections>
                                        </column>
                                    </columns>
                                </basicfieldeditor>
                            </components>
                            <massactions/>
                            <interactions/>
                            <actions/>
                            <styles>
                                <styleitem type="border"/>
                            </styles>
                            <filters/>
                            <searchfields/>
                        </deck>
                    </components>
                </division>
                <division behavior="specified" verticalalign="top" width="14%">
                    <components>
                        <deck searchmethod="server" searchbox="false" columngutter=".75em" rowgutter=".75em" model="eventsFriday" filtersposition="top" filterswidth="150px" showsavecancel="false" behavior="flex" verticalalign="top" ratio="1" minwidth="350px" hideheader="false" hidefooter="true" uniqueid="sk-31hp-1143" pagesize="10" heading="Friday" emptysearchbehavior="query">
                            <components>
                                <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="eventsFriday" uniqueid="sk-31hp-1144" mode="read" layout="above">
                                    <columns>
                                        <column width="100%" uniqueid="sk-31hp-1145">
                                            <sections>
                                                <section title="Section A" uniqueid="sk-31hp-1146" collapsible="no" showheader="false">
                                                    <fields>
                                                        <field uniqueid="sk-31hp-1147" id="Subject"/>
                                                        <field uniqueid="sk-31hp-1148" id="StartDateTime"/>
                                                        <field uniqueid="sk-31hp-1149" id="StartDateName__c"/>
                                                    </fields>
                                                </section>
                                            </sections>
                                        </column>
                                    </columns>
                                </basicfieldeditor>
                            </components>
                            <massactions/>
                            <interactions/>
                            <actions/>
                            <styles>
                                <styleitem type="border"/>
                            </styles>
                            <filters/>
                            <searchfields/>
                        </deck>
                    </components>
                </division>
                <division behavior="specified" verticalalign="top" width="14%">
                    <components>
                        <deck searchmethod="server" searchbox="false" columngutter=".75em" rowgutter=".75em" model="eventsSaturday" filtersposition="top" filterswidth="150px" showsavecancel="false" behavior="flex" verticalalign="top" ratio="1" minwidth="350px" hideheader="false" hidefooter="true" uniqueid="sk-31e4-338" pagesize="10" heading="Saturday" emptysearchbehavior="query">
                            <components>
                                <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="eventsSaturday" uniqueid="sk-31e5-357" mode="read" layout="above">
                                    <columns>
                                        <column width="100%" uniqueid="sk-31e5-353">
                                            <sections>
                                                <section title="Section A" uniqueid="sk-31e5-354" collapsible="no" showheader="false">
                                                    <fields>
                                                        <field uniqueid="sk-31eC-388" id="Subject"/>
                                                        <field uniqueid="sk-31eC-386" id="StartDateTime"/>
                                                        <field uniqueid="sk-31eC-387" id="StartDateName__c"/>
                                                    </fields>
                                                </section>
                                            </sections>
                                        </column>
                                    </columns>
                                </basicfieldeditor>
                            </components>
                            <massactions/>
                            <interactions/>
                            <actions/>
                            <styles>
                                <styleitem type="border"/>
                            </styles>
                            <filters/>
                            <searchfields/>
                        </deck>
                    </components>
                </division>
                <division behavior="specified" verticalalign="top" width="14%">
                    <components>
                        <deck searchmethod="server" searchbox="false" columngutter=".75em" rowgutter=".75em" model="eventsSunday" filtersposition="top" filterswidth="150px" showsavecancel="false" behavior="flex" verticalalign="top" ratio="1" minwidth="350px" hideheader="false" hidefooter="true" uniqueid="sk-31ht-1217" pagesize="10" heading="Sunday" emptysearchbehavior="query">
                            <components>
                                <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="eventsSunday" uniqueid="sk-31ht-1218" mode="read" layout="above">
                                    <columns>
                                        <column width="100%" uniqueid="sk-31ht-1219">
                                            <sections>
                                                <section title="Section A" uniqueid="sk-31ht-1220" collapsible="no" showheader="false">
                                                    <fields>
                                                        <field uniqueid="sk-31ht-1221" id="Subject"/>
                                                        <field uniqueid="sk-31ht-1222" id="StartDateTime"/>
                                                        <field uniqueid="sk-31ht-1223" id="StartDateName__c"/>
                                                    </fields>
                                                </section>
                                            </sections>
                                        </column>
                                    </columns>
                                </basicfieldeditor>
                            </components>
                            <massactions/>
                            <interactions/>
                            <actions/>
                            <styles>
                                <styleitem type="border"/>
                            </styles>
                            <filters/>
                            <searchfields/>
                        </deck>
                    </components>
                </division>
            </divisions>
            <styles>
                <styleitem type="background" bgtype="none"/>
            </styles>
        </grid>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
        <actionsequences uniqueid="sk-31dn-258"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>