Setting button/select options from Salesforce quicklist options

Question

I would like to have two menus, where the choice in the first menu sets the options in the second menu. This is to be done on a Salesforce VisualForce page that is using Angular JS and specifically the UI-Grid module for it. Similar controls are using the Angular button classes for menus, but I don't see how to dynamically set the choices using a button.

My current design is using a select control and ng-options.

In the controller.js I have declared variables to be used by the menus and a function to swap out the array values for the second menu. Note that $scope.fieldOptions is set through a query to Salesforce to pull option values from quicklist fields. This array is used in the UI-Grid filter option that accepts in a format like "[ { value: '1', label: 'male' }, { value: '2', label: 'female' }...".

  $scope.editRows = 'all';
  $scope.editField = 'Program';
  $scope.editValue;
  $scope.editOptions = {};


$scope.setEditOptions = function(editField) {
  switch (editField) {
    case "Program" :
      $scope.editOptions = $scope.fieldOptions.Program_Enrolled__c;
      break;
    case "Appl. ASSET" :
      $scope.editOptions = $scope.fieldOptions.Applied_for_ASSET__c;
      break;
    case "4 Year Degree" :
      $scope.editOptions = $scope.fieldOptions.Has_Student_Completed_4_Year_Degree__c;
      break;
  }
}

On the VisualForce page I have the buttons defined in a button group with the select control just after.

        <div class="row" style="margin-bottom:10px;">   
          <div class="col-md-12">
            <div class="btn-group">
              <div class="btn-group" dropdown="true" dropdown-append-to-body="true">
                <button class="btn btn-default dropdown-toggle" dropdown-toggle="true" type="button">
                  {{editRows | capitalize}} Rows <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li ng-click="editRows = 'all'"><a href="#">All Rows</a></li>
                  <li ng-click="editRows = 'visible'"><a href="#">Visible Rows Only</a></li>
                  <li ng-click="editRows = 'selected'"><a href="#">Selected Rows Only</a></li>
                </ul>
              </div>
              <div class="btn-group" dropdown="true" dropdown-append-to-body="true">
                <button class="btn btn-default dropdown-toggle" ng-click="setEditOptions(editField)"
                        dropdown-toggle="true" type="button">
                  {{editField | capitalize}} <span class="caret"></span>
                </button>
                <ul class="dropdown-menu">
                  <li ng-click="editField = 'Program'"><a href="#">Program Enrolled</a></li>
                  <li ng-click="editField = 'Appl. ASSET'"><a href="#">Applied for ASSET</a></li>
                  <li ng-click="editField = '4 Year Degree'"><a href="#">4-year degree?</a></li>
                </ul>
              </div>
             <div>
                <select ng-model="editValue" ng-options="option.label for option.value in selectOptions">
                </select>  
             </div> 
                
              </div>
    
              <button id="split-button" type="button" class="btn btn-default" ng-click="massUpdate()">Modify</button>
            </div>
          </div>

Am I on the right track? If there is an easier method, or one that would use a button menu directly, please feel free to offer suggestions. Otherwise, is the issue how I am using ng-options?

Depending on how you are getting the data from Salesforce you might need a $scope.$apply() after setting your select. — Matthew Green
Sorry, took to long to edit that. My point was that the page is in the same scope and the calls that are connected use ng-click and ng-options so they should be wrapped in an $apply(). jimhoskins.com/2012/12/17/angularjs-and-apply.html — Kelly Logan

Kelly Logan Kelly Logan · Accepted Answer · 2016-11-08T16:22:40

Okay, easier than I thought. Two typos. First, I had the array declared with {} instead of []. And I misspelled it in the select statement ng-options section. Fixed that and it's working.

If anyone knows any tricks to get this working with a button so it would match the others though, that would be wonderful. Otherwise I'm thinking I'll go with all selects for consistency. Also, maybe bundle these options into an array with the primary menu choices as the keys so I can just reference without the case statement.

  $scope.editRows = 'all';
  $scope.editField = 'Program';
  $scope.editValue;
  $scope.editOptions = {};

Setting button/select options from Salesforce quicklist options

1 Answers