Need input on displaying multiple addresses scenario

  • 1
  • Question
  • Updated 3 years ago
Hi,

I have a use case as below:

I have an
1. account Model
2. Address__c (custom Object) Model (Has condition where address__c = accountModel_ID)


The scenario is , if we have multiple addresses for the account , how do we display all these addresses as a picklist (using the addressLine-1 field values of all address records as picklist entries)

and based on this picklist entry selected, need to display the address details in the address field editor.







How can we achieve this ?
Photo of KVin

KVin

  • 1,158 Points 1k badge 2x thumb

Posted 3 years ago

  • 1
Photo of Bill McCullough

Bill McCullough, Champion

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

Here is a sample page that loads child contact records for an Account.  The only thing that I had to add is a Contact lookup field to my Account object.  This lets me use that field as a 'contact selector' for the page.  You'll need to do the same if you want to try this page in your org.  Do this in a sandbox or developer org.


The way this works is that I have a 'ProtoAccount' model to act as my contact selector.  When the 'Contact__c' field on the ProtoAccount model changes, I have a model action to query that Contact's details.  This loads the data in the 'Contact Details' section above.  The Contact lookup field is also uses a model to filter the results seen in the lookup field to the Contacts who are 'children' to the Account.  You can do the same for your Address__c object.

Here is my sample page (that requires a contact lookup be added to the Account object with the API name 'Contact__c' and label 'Contact'.

<skuidpage unsavedchangeswarning="" personalizationmode="server" showsidebar="true" showheader="true" tabtooverride="Account">   <models>
      <model id="Account" limit="1" query="true" createrowifnonefound="false" sobject="Account">
         <fields>
            <field id="Name"/>
            <field id="CreatedDate"/>
         </fields>
         <conditions>
            <condition type="param" enclosevalueinquotes="true" operator="=" field="Id" value="id"/>
         </conditions>
         <actions/>
      </model>
      <model id="Contacts" limit="1" query="false" createrowifnonefound="false" adapter="" type="" sobject="Contact">
         <fields>
            <field id="AccountId"/>
            <field id="Account.Name"/>
            <field id="Phone"/>
            <field id="Name"/>
            <field id="MailingStreet"/>
         </fields>
         <conditions>
            <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="Id" state="filterableoff" inactive="true" name="ContactId"/>
         </conditions>
         <actions/>
      </model>
      <model id="ContactFilter" limit="20" query="true" createrowifnonefound="false" adapter="" type="" sobject="Contact">
         <fields>
            <field id="Phone"/>
            <field id="Name"/>
            <field id="MailingStreet"/>
         </fields>
         <conditions>
            <condition type="modelmerge" value="" field="AccountId" operator="=" model="Account" enclosevalueinquotes="true" mergefield="Id" novaluebehavior="noquery"/>
         </conditions>
         <actions/>
      </model>
      <model id="ProtoAccount" limit="1" query="false" createrowifnonefound="true" adapter="" type="" sobject="Account">
         <fields>
            <field id="Contact__c"/>
            <field id="Contact__r.Name"/>
            <field id="Contact__r.MailingStreet"/>
         </fields>
         <conditions/>
         <actions>
            <action>
               <actions>
                  <action type="setCondition" model="Contacts" condition="ContactId" value="{{Contact__c}}"/>
                  <action type="requeryModel" model="Contacts" behavior="standard"/>
               </actions>
               <events>
                  <event>row.updated</event>
               </events>
               <fields>
                  <field>Contact__c</field>
               </fields>
            </action>
         </actions>
      </model>
   </models>
   <components>
      <pagetitle model="Account" uniqueid="sk-15_O7I-76">
         <maintitle>
            <template>{{Name}}</template>
         </maintitle>
         <subtitle>
            <template>{{Model.label}}</template>
         </subtitle>
         <actions>
            <action type="delete"/>
            <action type="clone"/>
            <action type="share"/>
            <action type="savecancel" window="self"/>
         </actions>
      </pagetitle>
      <basicfieldeditor showsavecancel="false" showheader="true" model="Account" mode="read" uniqueid="sk-15_O7J-77">
         <columns>
            <column width="50%">
               <sections>
                  <section title="Basics">
                     <fields>
                        <field id="Name"/>
                     </fields>
                  </section>
               </sections>
            </column>
            <column width="50%">
               <sections>
                  <section title="System Info">
                     <fields>
                        <field id="CreatedDate"/>
                     </fields>
                  </section>
               </sections>
            </column>
         </columns>
      </basicfieldeditor>
      <panelset type="custom" uniqueid="sk-15-sFg-188" scroll="">
         <panels>
            <panel width="50%">
               <components>
                  <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="ProtoAccount" buttonposition="" uniqueid="sk-15-qcW-178" mode="edit">
                     <columns>
                        <column width="100%">
                           <sections>
                              <section title="Proto Account" collapsible="no">
                                 <fields>
                                    <field id="Contact__c" valuehalign="" type="REFPICK" optionsource="model" tokenizesearch="true" optionmodel="ContactFilter" displaytemplate="{{Name}} - {{MailingStreet}}" searchtemplate="{{Name}} - {{MailingStreet}}">
                                       <searchfields/>
                                       <filters/>
                                    </field>
                                 </fields>
                              </section>
                           </sections>
                        </column>
                     </columns>
                  </basicfieldeditor>
               </components>
            </panel>
            <panel width="50%">
               <components>
                  <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Contacts" buttonposition="" uniqueid="sk-1608fK-230" mode="readonly">
                     <columns>
                        <column width="100%">
                           <sections>
                              <section title="Contact Details" collapsible="no">
                                 <fields>
                                    <field id="Name" valuehalign="" type=""/>
                                    <field id="Phone"/>
                                    <field id="MailingStreet"/>
                                 </fields>
                              </section>
                           </sections>
                        </column>
                     </columns>
                  </basicfieldeditor>
               </components>
            </panel>
         </panels>
      </panelset>
   </components>
   <resources>
      <labels/>
      <css/>
      <javascript/>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>
Thanks,

Bill
Photo of KVin

KVin

  • 1,158 Points 1k badge 2x thumb
Hi Bill,

So happy to see you tried this and posted your solution.

I have in fact tried similar,

Here is what I tried :

1. Have a UI-Only pick list to show list of addresses (Using only addressline-1 field)
2. whenever this ui-only picklist changes , run a snippet to update a model called selectedAccount which is used to populate the selected account field editor.








Here is the XML of page:

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="false" showheader="true" theme="Modern">   <models>
      <model id="Account" limit="1" query="true" createrowifnonefound="false" adapter="" type="" sobject="Account">
         <fields>
            <field id="Name"/>
            <field id="Id"/>
            <field id="RelatedAddress__c"/>
            <field id="RelatedAddress__r.Name"/>
            <field id="RelatedAddress__r.Addr2__c"/>
            <field id="RelatedAddress__r.Addr3__c"/>
            <field id="RelatedAddress__r.Address_Type__c"/>
         </fields>
         <conditions>
            <condition type="param" value="id" field="Id" operator="=" enclosevalueinquotes="true" novaluebehavior="deactivate"/>
         </conditions>
         <actions/>
      </model>
      <model id="Address" limit="" query="true" createrowifnonefound="true" adapter="" type="" sobject="Address__c" doclone="">
         <fields>
            <field id="Name"/>
            <field id="Addr2__c"/>
            <field id="Addr3__c"/>
            <field id="Address_Name__c"/>
            <field id="Address_Type__c"/>
            <field id="City__c"/>
            <field id="County__c"/>
            <field id="Postal_Code__c"/>
            <field id="Primary__c"/>
            <field id="Id"/>
            <field id="AddressList_ui" uionly="true" displaytype="PICKLIST" label="Addresses" helptext="List of Addresses">
               <picklistentries/>
            </field>
            <field id="selectedAddressID_ui" uionly="true" displaytype="TEXT" label="Selected Address ID"/>
         </fields>
         <conditions>
            <condition type="modelmerge" value="" field="Account__c" operator="=" model="Account" enclosevalueinquotes="true" mergefield="Id" novaluebehavior="deactivate" state=""/>
         </conditions>
         <actions>
            <action>
               <actions>
                  <action type="custom" snippet="selAddrModelUtil"/>
                  <action type="setCondition" model="selectedAddress" condition="selectedAddressIDCondition" value="{{selectedAddressID_ui}}"/>
                  <action type="requeryModel" model="selectedAddress" behavior="standard"/>
               </actions>
               <events>
                  <event>row.created</event>
                  <event>row.updated</event>
               </events>
               <fields>
                  <field>AddressList_ui</field>
               </fields>
            </action>
         </actions>
      </model>
      <model id="selectedAddress" limit="1" query="false" createrowifnonefound="true" adapter="" type="" sobject="Address__c">
         <fields>
            <field id="Name"/>
            <field id="Addr2__c"/>
            <field id="Addr3__c"/>
            <field id="Address_Name__c"/>
            <field id="Address_Type__c"/>
            <field id="City__c"/>
            <field id="County__c"/>
            <field id="Primary__c"/>
            <field id="Postal_Code__c"/>
            <field id="Id"/>
            <field id="State__c"/>
         </fields>
         <conditions>
            <condition type="fieldvalue" value="" enclosevalueinquotes="true" field="Id" state="filterableoff" inactive="true" name="selectedAddressIDCondition"/>
         </conditions>
         <actions/>
      </model>
   </models>
   <components>
      <grid uniqueid="sk-glPwC-158">
         <divisions>
            <division behavior="flex" minwidth="100px" ratio="1">
               <components>
                  <pagetitle model="Address" uniqueid="sk-gpkGQ-302">
                     <actions/>
                     <maintitle>Address to Pick</maintitle>
                  </pagetitle>
                  <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="Address" buttonposition="" uniqueid="sk-glUM9-167" mode="edit" layout="">
                     <columns>
                        <column width="65%">
                           <sections>
                              <section title="" collapsible="no" showheader="false">
                                 <fields>
                                    <field id="AddressList_ui" showhelp="true" valuehalign="" type="CUSTOM" snippet="populatePickList">
                                       <renderconditions logictype="and" onhidedatabehavior="keep"/>
                                       <enableconditions logictype="and"/>
                                    </field>
                                 </fields>
                              </section>
                           </sections>
                        </column>
                     </columns>
                     <renderconditions logictype="and"/>
                  </basicfieldeditor>
               </components>
            </division>
            <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
               <components>
                  <pagetitle model="Address" uniqueid="sk-gq8qx-324">
                     <maintitle>Selected Address Details</maintitle>
                     <actions/>
                  </pagetitle>
                  <basicfieldeditor showheader="true" showsavecancel="false" showerrorsinline="true" model="selectedAddress" buttonposition="" uniqueid="sk-goQ48-260" mode="readonly">
                     <columns>
                        <column width="100%">
                           <sections>
                              <section title="Address Details" collapsible="no" showheader="false">
                                 <fields>
                                    <field id="Name"/>
                                    <field id="Addr2__c"/>
                                    <field id="City__c"/>
                                    <field id="State__c" valuehalign="" type=""/>
                                    <field id="County__c"/>
                                    <field id="Postal_Code__c"/>
                                    <field id="Primary__c"/>
                                 </fields>
                              </section>
                           </sections>
                        </column>
                     </columns>
                     <renderconditions logictype="and"/>
                  </basicfieldeditor>
               </components>
            </division>
            <division behavior="flex" verticalalign="top" minwidth="100px" ratio="1">
               <components/>
            </division>
         </divisions>
         <styles>
            <styleitem type="background" bgtype="none"/>
         </styles>
      </grid>
   </components>
   <resources>
      <labels/>
      <javascript>
         <jsitem location="inlinesnippet" name="populatePickList" cachelocation="false">var field = arguments[0],
    value = arguments[1],
$ = skuid.$;

var addressModel = skuid.$M('Address');
var addrRows = addressModel.getRows();

console.log('field = ',field);
console.log('value = ',value);


var picklistEntries = field.metadata.picklistEntries;

console.log('addresses ==== ',addrRows);

picklistEntries.length = 0;

$.each(addrRows, function(){
    
    picklistEntries.push(
        { 
            value: this.Name+this.Id, 
            label: this.Primary__c ? "Primary Address-"+this.Name : this.Name, 
            defaultValue: this.Primary__c ? true : false, 
            active: true 
            
        });  //add Name field i.e. Address Line-1 Field Value as pick list entry
            });

console.log('picklistEntries ===',picklistEntries);
if(picklistEntries.length){
skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);
}


</jsitem>
         <jsitem location="inlinesnippet" name="selAddrModelUtil" cachelocation="false">var params = arguments[0],
$ = skuid.$;

var selAddrModel = skuid.$M('Address');
var selAddrRow = selAddrModel.getFirstRow();  //selectedAddressID_ui

var pickListValue = selAddrModel.getFieldValue(selAddrRow,'AddressList_ui');

console.log('FROM UTIL pickListValue = ',pickListValue);
console.log('pickListValue.substr(pickListValue.length-18) ====== ',pickListValue.substr(pickListValue.length-18));
if(pickListValue){
selAddrModel.updateRow(selAddrRow,
                            {
                                selectedAddressID_ui : pickListValue.substr(pickListValue.length-18)
                            });
    
}</jsitem>
      </javascript>
      <css/>
   </resources>
   <styles>
      <styleitem type="background" bgtype="none"/>
   </styles>
</skuidpage>




But as you can see above, I got the ui-only pick list rendered twice.

Any ideas on how to get rid of this ?