Sorting picklist values: External objects with skuid

To Order/Sort the results that show up in the Reference field Picklist renderer, you should do 2 things:

1. Add a Model to the page to load in your Regions. With the Model’s properties, you can set the Order By clause directly, e.g. ordering them by “RegionID__c”. 
2. Set your field’s “Option Source” to Model, and select your Regions model as the Option Model.

This community post describes this approach in more detail.  In this post the goal is to be able to show more than 200 picklist values, which is another reason / use case for using Model as your field’s Option Source.

Zach,

Won’t Goutham still have the same problem?

Ordering by a text field will always be alphabetical, and return
region 1, region 10, region 11…region 2, region 21…

rather than
region 1, region 2, region 3…region 10, region 11

Right? I could actually be totally wrong here… but I guess it seems to me that using the advanced properties of the field to set the Order By clause and using a new model to set the order by clause would have the same result.


Assuming that’s the case…

Goutham, if you can create a formula field on your object that returns a number (simply strip out 'region ’ from your RegionID__c), you could order by that new field.

I appreciate you reply.

Zach McElrath- What ever you have mentioned above is something that I am already having now.

Matt Sones - Yeah still I am having the same problem now, Here I am dealing with Lightning connect external objects, as of now external objects doesn’t support any formula fields.


Please let me now if there are any other possibilities.

If there aren’t any fields on your External Object to order by that will work, since you can’t create Formula Fields, you probably need to use a Custom Field Renderer to reorder the values in the picklist.

Sure will do that Zach.

Thanks,
Goutham

Zach,

Can you please share any sample snippet (Custom Field Renderer) to do this? I am getting started with skuid.


Thanks,
Goutham

Goutham,

This thread should provide you with more than enough fodder to create your snippet:

https://community.skuid.com/t/how-do-i-render-custom-picklist-values

In particular, this code from Moshe is stripped down to the basics:

var field = arguments[0],

value = skuid.utils.decodeHTML(arguments[1]); var picklistEntries = field.metadata.picklistEntries; picklistEntries.length = 0; // if you don't do this, then the "real" values are already in the picklist and the code below will add duplicate values picklistEntries.push( { value: 'Fixed', label: 'Fixed', defaultValue: false, active: true }, { value: 'Indexed', label: 'Indexed', defaultValue: false, active: true } ); // Run the standard picklist renderer for the given mode skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);

Oops, the first line got left our of the

 tag…

var field = arguments[0],
 value = skuid.utils.decodeHTML(arguments[1]); var picklistEntries = field.metadata.picklistEntries; picklistEntries.length = 0; // if you don't do this, then the "real" values are already in the picklist and the code below will add duplicate values picklistEntries.push( { value: 'Fixed', label: 'Fixed', defaultValue: false, active: true }, { value: 'Indexed', label: 'Indexed', defaultValue: false, active: true } ); // Run the standard picklist renderer for the given mode skuid.ui.fieldRenderers[field.metadata.displaytype][field.mode](field,value);

Matt,

I appreciate you reply, above mentioned code will work for standard pick-lists.
In my case, I am dealing with custom pick-list. Let me put it this way.

we have two external objects “Events” and “Region”, having an external look-up between “Events” and "“Region”. At the time of event creation we are displaying the “Regions” as pick-list for which I have created a model in the events skuid page called “Regions model” and by using the custom snippet (Field rendering) for those regions I am able to display them in the pick-list. Here is the code I have for that.

var regions = ;    regions.push({
         active: true
        ,defaultValue: true
        ,label : ‘–None–’
        ,value : ‘’
    });
    
    skuid.$.each(skuid.model.getModel(‘Regions’).getRows(), function(i,row) {
        regions.push({
            active: true
            ,defaultValue: false
            ,label : row.RegionCode__c
            ,value : row.RegionID__c
        });
    });
    
    var customSelect = skuid.ui.renderers.PICKLIST.edit({
        entries : regions,
        required : true,
        value : value
    }).change(function(newValue) {
        var selectedOptions = ‘’;
        for(i = 0; i < newValue.target.selectedOptions.length; i++) {
            //There will only be one selected option since it’s rendered as a picklist
            //But I wrote this originally to do something similar with multiselects
            selectedOptions += newValue.target.selectedOptions[i].value;
        }
        console.log(‘selectedOptions=’ + selectedOptions);
        //Update the row in the target object
        field.row[field.id] = selectedOptions;
        //field.model.updateRow(field.row, field, selectedOptions);
    })
    //Append the MULTIPICKLIST to the DOM element
    field.element.append(customSelect).addClass(‘requiredField’);
});


In the “Region” model I am ordering regions by “RegionCode__c”. But no help, since “RegionCode__c” is the combination of ‘Text’ and ‘numeric’. Could you please suggest me anything, that can help me.

Goutham,

The only thing I can thing to do is to create an object or array with the values from your Regions model, sort that array, and then use the sorted array to push your picklist values.

Here’s a stab at it… not sure if this will work?

var regionsSortArray= [];<br />skuid&#46;$&#46;each(skuid&#46;model&#46;getModel('Regions')&#46;getRows(), function(i,row) {<br />&nbsp; &nbsp; &nbsp; &nbsp;&nbsp;regionsSortArray&#46;push(row&#46;RegionID__c);<br />});<br />var regionsSortObject = {};<br />skuid&#46;$&#46;each(regionsSortArray, function(i, regionId) {<br />&nbsp; &nbsp; &nbsp; &nbsp;&#47;&#47;Put just the number from the string "region n" into the keys, and the whole string into the value<br />&nbsp; &nbsp; &nbsp; &nbsp;regionsSortObject[regionId&#46;slice(7)] = regionId; <br />}); 

From there you should be able to sort regionsSortObject by its keys, and then push its values into your picklist. Does that make sense?

Thanks Matt, Yeah It makes sense. I will give it a shot:-).


Thanks,
Goutham