Custom Components: Filter for autocomplete property?

  • 1
  • Question
  • Updated 1 year ago
  • Answered
How can I filter the rows that are returned to an autocomplete property field in my custom component?

I have this:
{
    id: "sid",
    type : 'autocomplete',
    sobject : 'Signature_Type__c',
    fieldsToReturn : ['Name','Title__c', 'Active__c','Id'],
    fieldsToSearch : ['Name', 'Title__c'],
    displayTemplate : '{{Name}} ({{Title__c}})',
    valueTemplates : {
            'sid' : '{{Id}}',
            'name' : '{{Name}}'
    },
    order : 'Name',
    label : 'Signature Type (autocomplete)',
    required : true,
    helptext : 'Begin typing the Name or Title to select the signature type you wish to display with this component.',
    onChange : function() {
            component.refresh();
    }
}

I want to only return rows where the Active__c boolean field is true.

How do I do that?
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb

Posted 1 year ago

  • 1
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Here are the docs: https://docs.skuid.com/v10.0.4/en/skuid/javascript/component-property-ref.html

But they don't have any help for me.
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,060 Points 10k badge 2x thumb
Hi Matt. It doesn't appear that there's a documented way to pre-filter the autocomplete options that are returned. However, a simple alternative would be to use the order property to sort the inactive records to the bottom of the list. 

The best match I can think of, as far as declarative approaches go, is to set up a UI-only picklist field, whose options are taken from another model. An example of this would be a Contacts model that has a UI-only picklist allowing users to select the Account associated with that contact. The picklist would grab rows from a model on the Account object, which could have whatever conditions you'd need (like filtering for active records only). Perhaps there's a way to link up your custom component to this model-based solution?

On a similar vein, you can also override the metadata on the Contact model's AccountId field, and set that up to be a combobox (which is actually more similar to an autocomplete than a picklist), which gets its options from the Account model. 
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Mark,

There's not a documented way. That's why I'm asking... Is there an undocumented way to do this?


I'm not following your 'declarative' options. The only way I know to get a model's data into a custom component's properties on the builder side is to dynamically build that model with javascript in the custom component's definition.

Am I missing something?
Photo of Mark DeSimone

Mark DeSimone, Official Rep

  • 11,060 Points 10k badge 2x thumb
Hi Matt. Unfortunately, there is not any built-in method to pre-filter the autocomplete options, documented or otherwise. 

Regarding the declarative suggestion - in short, I'm imagining that you could build a model on your "Signature_Type__c" object with whatever conditions you need (like one that filters Active__c = true, for example), to pull in the records that represent the autocomplete choices you want to offer. You could then set up a ui-only combobox field that offers that pre-filtered list of Signature_Type__c records from the model. 

Here is a basic example XML page that should hopefully demonstrate what I tried to describe. My thought is that perhaps you could use an approach like this in your solution. I'm not sure what your custom component will be like, but this at least offers a way to easily control a list of options - and my example page has a filter, which shows how you could let the user have some control of that list too. 

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="Account" limit="" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Account">
            <fields>
                <field id="Name"/>
                <field id="Id"/>
                <field id="AnnualRevenue"/>
            </fields>
            <conditions>
                <condition type="fieldvalue" value="0.0" enclosevalueinquotes="false" field="AnnualRevenue" state="filterableoff" inactive="true" name="AnnualRevenue"/>
                <condition type="fieldvalue" field="AnnualRevenue" operator="gte" inactive="true" enclosevalueinquotes="false" name="__autofilter__nstart__AnnualRevenue" state="filterableoff" value=""/>
                <condition type="fieldvalue" field="AnnualRevenue" operator="lte" inactive="true" enclosevalueinquotes="false" name="__autofilter__nend__AnnualRevenue" state="filterableoff" value=""/>
            </conditions>
            <actions/>
        </model>
        <model id="Contact" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" type="" sobject="Contact">
            <fields>
                <field id="FirstName"/>
                <field id="LastName"/>
                <field id="AccountCombobox" uionly="true" displaytype="COMBOBOX" label="AccountCombobox" ogdisplaytype="TEXT" picklistsource="rowsinmodel" picklistmodel="Account" defaultvaluetype="fieldvalue" defaultValue="">
                    <picklistentries/>
                </field>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <pagetitle model="Contact" uniqueid="sk-1WFS-f-608">
            <maintitle>{{Model.label}}</maintitle>
            <actions/>
        </pagetitle>
        <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="Contact" buttonposition="" mode="edit" allowcolumnreordering="true" responsive="true" uniqueid="sk-1WDk9M-297">
            <fields>
                <field id="FirstName" hideable="true" uniqueid="fi-1WDpn--312"/>
                <field id="LastName" hideable="true" uniqueid="fi-1WDpo0-313" valuehalign="" type=""/>
                <field id="AccountCombobox" hideable="true" uniqueid="fi-1WD_At-367" valuehalign="" type="">
                    <label>Account Combobox</label>
                </field>
            </fields>
            <rowactions>
                <action type="edit"/>
                <action type="delete"/>
            </rowactions>
            <massactions usefirstitemasdefault="true">
                <action type="massupdate"/>
                <action type="massdelete"/>
            </massactions>
            <views>
                <view type="standard"/>
            </views>
            <filters/>
        </skootable>
        <pagetitle model="Account" uniqueid="sk-1WFS2--605">
            <actions/>
            <maintitle>{{Model.label}}</maintitle>
        </pagetitle>
        <filterset model="Account" searchmethod="server" searchbox="true" uniqueid="sk-1WEHEs-471" position="right">
            <filters>
                <filter type="numericrange" filteroffoptionlabel="New Filter" createfilteroffoption="true" affectcookies="true" autocompthreshold="25" conditionsource="auto" labelmode="auto" conditionfield="AnnualRevenue"/>
            </filters>
            <searchfields/>
        </filterset>
        <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="Account" buttonposition="" mode="read" allowcolumnreordering="true" responsive="true" uniqueid="sk-1WEq59-520">
            <fields>
                <field id="Name" hideable="true" uniqueid="fi-1WEs6l-536"/>
                <field id="AnnualRevenue" hideable="true" uniqueid="fi-1WEs6m-537" decimalplaces="" valuehalign="" type=""/>
            </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>
    <resources>
        <labels/>
        <javascript/>
        <css/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of Matt Sones

Matt Sones, Champion

  • 31,478 Points 20k badge 2x thumb
Mark,

How would you suggest that I implement this into my custom component so that the filtered autocomplete box shows up in the component's properties here: