function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Angela StratmanAngela Stratman 

Change the order of a picklist on a Visualforce page

We have a Create New Work Order page in Field Service Lightning (FSL), as a Visualforce page.  One of the fields is a Work Type (picklist), but the order of the picklist is crazy, and I would like it to be in alphabetical order.  I have no idea if this is even possible or what order it is even pulling in.  Below are the only 2 parts of the code that contain Work Order Type.  I am not a developer, so any help is GREATLY appreciated!

  <tr>
                                    <td>
                                        <div class="slds-form-element">
                                            <label class="slds-form-element__label">Work Type *</label>
                                        </div>
                                    </td>
                                    <td>
                                        <div class="slds-form-element__control">
                                            <select id="work-type" class="slds-input" data-api="WorkTypeId">
                                                <option value=""></option>
                                            </select>
                                        </div>
                                    </td>
                                </tr>
_________________________________________________________________________________
var getPicklistOptions = function() {
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.Kappus_NewWorkOrderButtonController.getWorkTypes}',
            function(workTypes, event) {
                if (event.statusCode === 200) {                   Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.Kappus_NewWorkOrderButtonController.getOptions}',
                    function(options, event) {
                        if (event.statusCode === 200) {
                            var options1 = '',
                                options2 = '',
                                options3 = '';
                            workTypes.forEach(function(workType) {
                                options1 += '<option value="' + workType['Id'] + '">' + workType['Name'] + '</option>';
                            });

 
Dushyant SonwarDushyant Sonwar
Hi Angela,

1) Could you post code of the controller Kappus_NewWorkOrderButtonController  , the getOptions method is creating the list we can do sorting at that place , it would be better approach.

2) Other option we can do is , do sorting on vf page once data is returned from controller by visualforce remoting 
I am assuming from the piece of code you shared

This will do the comparison and sorting on alphabet basis 
function compare(a, b) {
  // Use toUpperCase() to ignore character casing
  const NameA = a.Name.toUpperCase();
  const NameB = b.Name.toUpperCase();

  let comparison = 0;
  if (NameA > NameB) {
    comparison = 1;
  } else if (NameA < NameB) {
    comparison = -1;
  }
  return comparison;
}

call this method  
workTypes.sort(compare);



Final code output be some thing like this 
function compare(a, b) {
  // Use toUpperCase() to ignore character casing
  const NameA = a.Name.toUpperCase();
  const NameB = b.Name.toUpperCase();

  let comparison = 0;
  if (NameA > NameB) {
    comparison = 1;
  } else if (NameA < NameB) {
    comparison = -1;
  }
  return comparison;
}

var getPicklistOptions = function() {
Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.Kappus_NewWorkOrderButtonController.getWorkTypes}',
            function(workTypes, event) {
                if (event.statusCode === 200) {       
                workTypes.sort(compare);               
 Visualforce.remoting.Manager.invokeAction('{!$RemoteAction.Kappus_NewWorkOrderButtonController.getOptions}',
                    function(options, event) {
                        if (event.statusCode === 200) {
                            var options1 = '',
                                options2 = '',
                                options3 = '';
                            workTypes.forEach(function(workType) {
                                options1 += '<option value="' + workType['Id'] + '">' + workType['Name'] + '</option>';
                            });

Hope this helps!
Angela StratmanAngela Stratman
Here is the  Kappus_NewWorkOrderButtonController code:  I appreciate all of the help! 

    
    @RemoteAction
    @ReadOnly
    global static List<WorkType> getWorkTypes() {

        List<WorkType> workTypes = new List<WorkType>();

        workTypes.addAll([SELECT Id, Name FROM WorkType]);

        return workTypes;
    }
Dushyant SonwarDushyant Sonwar
Hi Angela,

use order by clause for sorting

[SELECT Id, Name FROM WorkType order by Name ASC]
  
@RemoteAction
    @ReadOnly
    global static List<WorkType> getWorkTypes() {

        List<WorkType> workTypes = new List<WorkType>();

        workTypes.addAll([SELECT Id, Name FROM WorkType order by name asc]);

        return workTypes;
    }

Hope this helps!