Group cards in a deck by date

Chad GillChad Gill ✭✭✭
edited February 4, 2020 in Questions
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
image
Day View
image
Month View
image

Tagged:

Comments

  • Chad GillChad Gill ✭✭✭
    edited October 29, 2018
    any thoughts?

  • Mark DeSimoneMark DeSimone 🛠️ 
    edited February 4, 2020
    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? 
  • Chad GillChad Gill ✭✭✭
    edited October 29, 2018
    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.
  • Chad GillChad Gill ✭✭✭
    edited October 29, 2018
    preferably each row would have the date as the title.
  • Mark DeSimoneMark DeSimone 🛠️ 
    edited February 4, 2020
    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", 
    "")


    image
    <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"/>
                                           
  • Rob CloughRob Clough ✭
    Quick update for anyone that stumbles across this post; you can re-order a Deck by using the Sort Model action
Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Sign In Register

Categories