Skip to main content

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!

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>

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. 


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. 


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



























































{{Name}}


{{Model.label}}






NewMeeting













NewMeeting















NewMeeting






































Contacts














&nb

Bill’s answer is by far the most lightweight! 


This is brilliant! It works perfectly for what I need, I had no idea about the metadata override feature. Thanks a bunch!