Create a list of attendees from account contacts

  • 1
  • Question
  • Updated 11 months ago
  • Answered
Hello Skuid Community! 

I am looking to populate a text area with a list of meeting attendees using an account's contacts. Something along the lines of:

The user could search for a contacts name that attended their meeting; when the contact pops up in drop-down search results they click it and the contacts name would be appended to a text area. 

Does anyone have an idea on how this could be accomplished? I am not very familiar with javascript but I feel this may be required to create the on-click action that would then append the contact name to the text area. 

Beside that idea, any way to create a selectable contact list to be stored on another record would also work fine. 

Thanks!
Photo of Michael Schniepp

Michael Schniepp

  • 1,808 Points 1k badge 2x thumb

Posted 11 months ago

  • 1
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
Hi Michael,

Below is XML for a page I've built to demonstrate 3 possible approaches. I only know some basics about your use-case but hopefully this is a general enough demo to be useful for you and others.

Option 1 and 2 both use a Queue to list the Contacts. Queues let you define what actions take place when clicking on an item in the queue.

I've set up option 1 to take that contact's row in the Contacts model and adopt it in another model. The other model, Attendees, is shown to the right in a template field. These are separate records, not one text field with all names.

For Option 2, clicking on a contact in the lefthand queue appends the names of each contact you click on to one single text field, in the Attendees2 model. Check out the action sequence on the Queue to see how this works. 

Option 3 is different, but it demonstrates the built-in function that tables have for mass-updates. Here you can either click the row action I added on each row for each contact who attended this fabled meeting, or you can select several with the checkboxes at the left, then either click Mass Update Selected Rows, OR click the dropdown to the left of "Mass Update Selected Rows," to see a mass action I built to update a datetime field. The action doesn't have to target a date field, but I chose that field type here for variety's sake.

Please let me know if you have any questions about these options.


<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="Contacts" limit="200" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Contact">
            <fields>
                <field id="Name"/>
                <field id="Attended" uionly="true" displaytype="DATETIME" label="Attended" ogdisplaytype="TEXT"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
        <model id="Attendees" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">
            <fields>
                <field id="Name" displaytype="TEXT" label="Name"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
        <model id="Attendees2" query="true" createrowifnonefound="true" datasource="Ui-Only" processonclient="true">
            <fields>
                <field id="AttendeeList" displaytype="TEXT" label="Attendee List"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <buttonset model="Contacts" uniqueid="sk-2QU-bW-4958" position="center">
            <buttons>
                <button type="multi" label="Reload Contacts" uniqueid="sk-2QU-t4-4964">
                    <actions>
                        <action type="requeryModel" model="Contacts" behavior="standard">
                            <onerroractions>
                                <action type="blockUI" message="There was an error" timeout="3000"/>
                            </onerroractions>
                        </action>
                    </actions>
                </button>
            </buttons>
        </buttonset>
        <tabset rememberlastusertab="false" defertabrendering="true" uniqueid="sk-2QPmFL-1069" renderas="">
            <tabs>
                <tab name="Option 1 - Queue + Template (Adopt Rows separately into new model)">
                    <components>
                        <template multiple="false" uniqueid="sk-2QU6DQ-4164">
                            <contents>Below on the left is a queue listing contacts. Clicking a contact will copy that contact's whole row to another model. This model's rows are listed on the right. The example is using a UI-only model for the attendee list, but a model pointing to a real object or field on the contacts object could be used instead. </contents>
                        </template>
                        <grid uniqueid="sk-2QO6rE-444" columngutter="25px">
                            <divisions>
                                <division behavior="flex" minwidth="100px" ratio="1" verticalalign="top">
                                    <components>
                                        <queue tagrendertype="template" searchbox="true" tokenizesearch="true" showsearchbydefault="true" uniqueid="sk-2QOTV3-646" model="Contacts" title="Contacts">
                                            <rendertemplate>{{Name}}</rendertemplate>
                                            <interactions>
                                                <interaction type="tap">
                                                    <action type="adoptRows" sourcemodel="Contacts" targetmodel="Attendees" affectedrows="context"/>
                                                    <action type="abandonRows" model="Contacts" affectedrows="context"/>
                                                </interaction>
                                            </interactions>
                                            <searchfields/>
                                        </queue>
                                    </components>
                                </division>
                                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                                    <components>
                                        <pagetitle model="Attendees" uniqueid="sk-2QPY6e-1015">
                                            <actions/>
                                            <maintitle>{{Model.label}}</maintitle>
                                        </pagetitle>
                                        <template multiple="false" uniqueid="sk-2QOSfi-636" model="Attendees">
                                            <contents>{{Name}}
</contents>
                                        </template>
                                    </components>
                                </division>
                            </divisions>
                            <styles>
                                <styleitem type="background" bgtype="none"/>
                            </styles>
                        </grid>
                    </components>
                </tab>
                <tab name="Option 2 - Queue + Template (append names to one text field)" loadlazypanels="true">
                    <components>
                        <template multiple="false" uniqueid="sk-2QTxm4-3767">
                            <contents>Below on the left is a queue listing contacts. Clicking a contact will append that contact's name to a UI-only text field in another model, which is shown on the right.</contents>
                        </template>
                        <grid uniqueid="sk-2QPxSj-1175" columngutter="25px">
                            <divisions>
                                <division behavior="flex" minwidth="100px" ratio="1" verticalalign="top">
                                    <components>
                                        <queue tagrendertype="template" searchbox="true" tokenizesearch="true" showsearchbydefault="true" uniqueid="sk-2QPxSj-1176" model="Contacts" title="Contacts">
                                            <rendertemplate>{{Name}}</rendertemplate>
                                            <interactions>
                                                <interaction type="tap">
                                                    <action type="updateRow" sourcemodel="Contacts" targetmodel="Attendees" affectedrows="context" fieldmodel="Attendees2" field="AttendeeList" enclosevalueinquotes="true" value="{{$Model.Attendees2.data.0.AttendeeList}} {{Name}}; "/>
                                                    <action type="abandonRows" model="Contacts" affectedrows="context"/>
                                                </interaction>
                                            </interactions>
                                            <searchfields/>
                                        </queue>
                                    </components>
                                </division>
                                <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
                                    <components>
                                        <pagetitle model="Attendees2" uniqueid="sk-2QPxSj-1177">
                                            <actions/>
                                            <maintitle>{{Model.label}}</maintitle>
                                        </pagetitle>
                                        <template multiple="false" uniqueid="sk-2QPxSj-1178" model="Attendees2">
                                            <contents>{{AttendeeList}}</contents>
                                            <renderconditions logictype="and"/>
                                        </template>
                                    </components>
                                </division>
                            </divisions>
                            <styles>
                                <styleitem type="background" bgtype="none"/>
                            </styles>
                        </grid>
                    </components>
                </tab>
                <tab name="Option 3 - Table Row Actions or Mass Action" loadlazypanels="true">
                    <components>
                        <template multiple="false" uniqueid="sk-2QTRTS-2675">
                            <contents>Below each row has a row action that can be used to update a field. Also, selecting one or more of the rows via checkbox allows a Mass Action in the dropdown that appears above the table. You can use this action to update the AttendedToday field for all selected rows. This example uses a UI-only field that won't be saved to Salesforce, but a real date field could be used, or any other kind of field like a text field. </contents>
                        </template>
                        <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="client" searchbox="true" showexportbuttons="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="Contacts" buttonposition="" mode="read" allowcolumnreordering="true" responsive="true" uniqueid="sk-2QSIvC-2351">
                            <fields>
                                <field id="Name" hideable="true" uniqueid="fi-2QSKTP-2369" valuehalign="" type=""/>
                                <field id="Attended" hideable="true" uniqueid="fi-2QSsgB-2561" valuehalign="" type=""/>
                            </fields>
                            <rowactions>
                                <action type="edit"/>
                                <action type="delete"/>
                                <action type="multi" label="Attended Today" icon="sk-icon-calendar">
                                    <actions>
                                        <action type="updateRow" fieldmodel="Contacts" affectedrows="context" field="Attended" enclosevalueinquotes="true" value="NOW"/>
                                    </actions>
                                </action>
                            </rowactions>
                            <massactions usefirstitemasdefault="true">
                                <action type="massupdate"/>
                                <action type="massdelete"/>
                                <action type="multi" label="Attended today" icon="sk-icon-calendar">
                                    <actions>
                                        <action type="updateRow" fieldmodel="Contacts" affectedrows="context" field="Attended" enclosevalueinquotes="false" value="NOW"/>
                                    </actions>
                                </action>
                            </massactions>
                            <views>
                                <view type="standard"/>
                            </views>
                        </skootable>
                    </components>
                </tab>
            </tabs>
        </tabset>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
        <actionsequences uniqueid="sk-2QNh8m-266"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
I should add that my action sequences are removing a contact from the Contacts model once they've been clicked, to help clarify for the user which contacts haven't been selected as attendees. This remove 'row from model' action is not necessary if you don't want it. There's a Reload Contacts button on the page to let you refresh this model while you experiment. 
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
You may also be able to use a deck instead of a queue, if you want to be fancy about how you display your contacts. I think the functionality would be very similar. 
Photo of Bill McCullough

Bill McCullough, Champion

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

Overriding the metadata for your field will get you a declarative solution.  I changed the field type of the Description field on the Event object to 'Multi-select Picklist' and then used the Contacts model to 'feed it' the options.

Take a look at this page.  This was done on Skuid 11.  I am pretty sure that this will work in Skuid 9 and 10.

Thanks,

Bill

<skuidpage unsavedchangeswarning="" personalizationmode="server" useviewportmeta="true" showsidebar="true" showheader="true" tabtooverride="Account">
    <models>
        <model id="Account" limit="1" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Account" type="">
            <fields>
                <field id="Name"/>
                <field id="CreatedDate"/>
                <field id="Id"/>
            </fields>
            <conditions>
                <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
            </conditions>
            <actions/>
        </model>
        <model id="Contacts" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Contact">
            <fields>
                <field id="RecordTypeId"/>
                <field id="AccountId"/>
                <field id="Account.Name"/>
                <field id="Name"/>
                <field id="Phone"/>
                <field id="Email"/>
            </fields>
            <conditions>
                <condition type="modelmerge" value="" field="AccountId" fieldtargetobjects="Account" operator="=" model="Account" enclosevalueinquotes="true" mergefield="Id" novaluebehavior="noquery"/>
            </conditions>
            <actions/>
        </model>
        <model id="NewMeeting" limit="1" query="false" createrowifnonefound="false" datasource="salesforce" type="" sobject="Event">
            <fields>
                <field id="Description" overridemetadata="true" ogdisplaytype="TEXTAREA" displaytype="MULTIPICKLIST" picklistsource="rowsinmodel" picklistmodel="Contacts" entryvalue="{{Name}}"/>
                <field id="EndDateTime"/>
                <field id="WhatId"/>
                <field id="What.Name"/>
                <field id="StartDateTime"/>
            </fields>
            <conditions>
                <condition type="modelmerge" value="" field="WhatId" fieldtargetobjects="Account,Asset,AssetRelationship,Campaign,Case,ChannelProgram,ChannelProgramLevel,Contract,Ghost__c,Goal,LiveAgentSession,LiveChatTranscript,Metric,Opportunity,Order,PartnerFundAllocation,PartnerFundClaim,PartnerFundRequest,PartnerMarketingBudget,Product2,Quote,Solution,Store__c,WorkCoaching" operator="=" model="Account" enclosevalueinquotes="true" mergefield="Id" novaluebehavior="noquery"/>
            </conditions>
            <actions/>
        </model>
        <model id="Meetings" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Event">
            <fields>
                <field id="Description" overridemetadata="true" ogdisplaytype="TEXTAREA" displaytype="MULTIPICKLIST" picklistsource="rowsinmodel" picklistmodel="Contacts" entryvalue="{{Name}}"/>
                <field id="EndDateTime"/>
                <field id="WhatId"/>
                <field id="What.Name"/>
                <field id="StartDateTime"/>
            </fields>
            <conditions>
                <condition type="modelmerge" value="" field="WhatId" fieldtargetobjects="Account,Asset,AssetRelationship,Campaign,Case,ChannelProgram,ChannelProgramLevel,Contract,Ghost__c,Goal,LiveAgentSession,LiveChatTranscript,Metric,Opportunity,Order,PartnerFundAllocation,PartnerFundClaim,PartnerFundRequest,PartnerMarketingBudget,Product2,Quote,Solution,Store__c,WorkCoaching" operator="=" model="Account" enclosevalueinquotes="true" mergefield="Id" novaluebehavior="noquery"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="Account" uniqueid="sk-2QWWAR-202">
            <maintitle>
                <template>{{Name}}</template>
            </maintitle>
            <subtitle>
                <template>{{Model.label}}</template>
            </subtitle>
            <actions>
                <action type="multi" label="New Meeting" uniqueid="sk-2QXIzI-572" icon="sk-icon-calendar">
                    <actions>
                        <action type="emptyModelData">
                            <models>
                                <model>NewMeeting</model>
                            </models>
                        </action>
                        <action type="createRow" model="NewMeeting" appendorprepend="prepend" defaultmodefornewitems="edit" affectedrows="context"/>
                        <action type="showPopup">
                            <popup title="New Meeting for {{$Model.Account.data.0.Name}}" width="70%">
                                <components>
                                    <pagetitle model="Meetings" uniqueid="sk-2QYLSx-1070">
                                        <actions>
                                            <action type="multi" label="Save" uniqueid="sk-2QYOdC-1083" icon="sk-icon-save">
                                                <actions>
                                                    <action type="blockUI" message="Saving new meeting..."/>
                                                    <action type="save" rollbackonanyerror="true">
                                                        <models>
                                                            <model>NewMeeting</model>
                                                        </models>
                                                        <onerroractions>
                                                            <action type="blockUI" message="There was an error" timeout="3000"/>
                                                            <action type="unblockUI" message="There was an error" timeout="3000"/>
                                                        </onerroractions>
                                                    </action>
                                                    <action type="requeryModel" model="Meetings" behavior="standard"/>
                                                    <action type="closeTopmostPopup"/>
                                                    <action type="unblockUI"/>
                                                </actions>
                                            </action>
                                            <action type="multi" label="Cancel" uniqueid="sk-2QYOjy-1087" icon="sk-icon-cancel">
                                                <actions>
                                                    <action type="cancel">
                                                        <models>
                                                            <model>NewMeeting</model>
                                                        </models>
                                                    </action>
                                                    <action type="closeTopmostPopup"/>
                                                </actions>
                                            </action>
                                        </actions>
                                    </pagetitle>
                                    <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="NewMeeting" buttonposition="" uniqueid="sk-2QXk4G-824" mode="edit">
                                        <columns>
                                            <column width="50%">
                                                <sections>
                                                    <section title="Section A" collapsible="no">
                                                        <fields>
                                                            <field uniqueid="sk-2QXsBq-876" id="Description"/>
                                                        </fields>
                                                    </section>
                                                </sections>
                                            </column>
                                            <column width="50%">
                                                <sections>
                                                    <section title="Section B" collapsible="no">
                                                        <fields>
                                                            <field uniqueid="sk-2QXnRl-852" id="StartDateTime" valuehalign="" type=""/>
                                                            <field uniqueid="sk-2QXnRk-851" id="EndDateTime"/>
                                                            <field uniqueid="sk-2QXpHs-866" id="WhatId"/>
                                                        </fields>
                                                    </section>
                                                </sections>
                                            </column>
                                        </columns>
                                    </basicfieldeditor>
                                </components>
                            </popup>
                        </action>
                    </actions>
                </action>
                <action type="savecancel" window="self" uniqueid="sk-2QWWAQ-200">
                    <models>
                        <model>Contacts</model>
                    </models>
                </action>
            </actions>
        </pagetitle>
        <tabset rememberlastusertab="true" defertabrendering="true" uniqueid="sk-2QWXyN-243" renderas="">
            <tabs>
                <tab name="Details">
                    <components>
                        <basicfieldeditor showsavecancel="false" showheader="true" model="Account" mode="read" uniqueid="sk-2QWWB0-218" buttonposition="">
                            <columns>
                                <column width="50%">
                                    <sections>
                                        <section title="Basics">
                                            <fields>
                                                <field id="Name" uniqueid="sk-2QWWAd-210"/>
                                            </fields>
                                        </section>
                                    </sections>
                                </column>
                                <column width="50%">
                                    <sections>
                                        <section title="System Info">
                                            <fields>
                                                <field id="CreatedDate" uniqueid="sk-2QWWAr-216"/>
                                            </fields>
                                        </section>
                                    </sections>
                                </column>
                            </columns>
                        </basicfieldeditor>
                    </components>
                </tab>
                <tab name="Contacts" loadlazypanels="true">
                    <components>
                        <skootable showconditions="true" showsavecancel="false" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="Contacts" buttonposition="" mode="read" allowcolumnreordering="true" responsive="true" uniqueid="sk-2QWmiR-411">
                            <fields>
                                <field id="Name" hideable="true" uniqueid="fi-2QWrEA-445" valuehalign="" type=""/>
                                <field id="Phone" hideable="true" uniqueid="fi-2QWrE9-443"/>
                                <field id="Email" hideable="true" uniqueid="fi-2QWrE9-444"/>
                            </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>
                </tab>
                <tab name="Meetings" loadlazypanels="true">
                    <components>
                        <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="Meetings" buttonposition="" mode="read" allowcolumnreordering="true" responsive="true" uniqueid="sk-2QYCTE-997">
                            <fields>
                                <field id="Description" hideable="true" uniqueid="fi-2QYEC--1017" selectedlist="3" valuehalign="" type=""/>
                                <field id="EndDateTime" hideable="true" uniqueid="fi-2QYEC--1016"/>
                                <field id="StartDateTime" hideable="true" uniqueid="fi-2QYED0-1018"/>
                            </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>
                </tab>
            </tabs>
        </tabset>
    </components>
    <resources>
        <labels/>
        <css/>
        <javascript/>
        <actionsequences uniqueid="sk-2QWfch-360"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,050 Points 10k badge 2x thumb
Bill's answer is by far the most lightweight! 
Photo of Michael Schniepp

Michael Schniepp

  • 1,808 Points 1k badge 2x thumb
This is brilliant! It works perfectly for what I need, I had no idea about the metadata override feature. Thanks a bunch!