Custom Picklist на Visualforce странице

В этой статье мы поговорим о том, как отобразить записи какого-то объекта в виде picklist на Visualforce странице, а также разберём dependent picklist.

Иногда есть потребность передать записи на Visualforce (дальше VF) страницу в виде Picklist.
Например, у нас есть записи на каком-то объекте, которые нужно отобразить в picklist на VF странице.

Для отображения Picklist’а на VF странице используется компонент <apex:selectList>, внутри которого используется <apex:selectOptions> - для отображения значений в виде Picklist. Выбранное значение сохраняется в переменную, которую можно использовать дальше.

<apex:selectList size="1" value="{!selectedValue}">
       <apex:selectOptions value="{!OptionsValue}" >
       </apex:selectOptions>
</apex:selectList>

В контроллере объявим лист с типом данных selectOptions и переменную с типом данных String (выберите тип данных для ваших требований), которая будет содержать значение, выбранное из picklist.

List<selectOption> options {get;set;}
public String selectedValue {get;set;}

В контроллере создадим метод, который получит значения из базы данных и передаст их в selectOptions.

public List<selectOption> getSomeObjectValue(){
options = new List<selectOption>();
     for(SomeObject__c objectItem : [SELECT id, Name
    				                 FROM SomeObject__c
    			                     ORDER BY Name ASC]){
    options.add(new selectOption(objectItem.id,objectItem.name));     
    }
return options;
}

SOQL запрос получает значения в неотсортированном порядке. Чтобы в Picklist’е значения отображались в нужном вам порядке, отсортируйте их в SOQL запросе исходя из ваших требований. В примере будем использовать сортировку по Name в алфавитном порядке (ASC)

При добавлении значений, в сигнатуру передаётся 2 значения:

options.add(new selectOption(objectItem.id, objectItem.name));

1 значение (objectItem.id) это то, что будет передаваться в переменную selectedValue.
2 значение (objectItem.name) это «лейбл», который будет отображаться для пользователя.

Как будет выглядеть результат:

Также можно добавлять значения только для просмотра, без возможности выбора из Picklist’a, добавив 3 значение.

 options.add(new selectOption('Value', 'Label', BooleanValue));

BooleanValue — это логическое значение, которое, если оно равно true, указывает, что пользователь не может выбрать параметр, но все же может его просмотреть.

|477x233.64133034567817

Visualforce страница:

<apex:page controller="ExampleController">
    <apex:form id="form">
        <apex:pageBlock title="Get picklist">
              <apex:selectList size="1" value="{!selectedValue}">
                  <apex:selectOptions value="{!SomeObjectValue}" >
                  </apex:selectOptions>
               </apex:selectList>
        </apex:pageBlock>
    </apex:form>
</apex:page>

Apex controller:

public class ExampleController {
    List<selectOption> options {get;set;}
    public String selectedValue {get;set;}
    
    public List<selectOption> getSomeObjectValue(){
        options = new List<selectOption>();
        for(SomeObject__c objectItem : [SELECT id, Name
                                        FROM SomeObject__c
                                        ORDER BY Name ASC]){
        options.add(new selectOption(objectItem.id,objectItem.name));     
        }
    return options;
    }
}

В дополнение к теме — давайте разберём, как сделать Dependent Picklist.
Рассмотрим ситуацию, когда у объекта есть related рекорды, и во втором picklist нужно отобразить эти записи в зависимости от выбранной родительской записи.

Чтобы отобразить связанные записи, нужно создать метод в apex controller, который будет формировать лист selectOption в зависимости от выбранной родительской записи.

public List<selectOption> getRelatedObjectValue(){
    options = new List<selectOption>();
    for(Related_Object__c objectItem : [SELECT id, Name
                                    	FROM Related_Object__c
                                    	WHERE SomeObject__r.id = :selectedValue
                                        ORDER BY Name ASC
                                    ]){
       options.add(new selectOption(objectItem.id, objectItem.name));     
    }
    return options;
}

Метод похож на тот, с помощью которого мы создавали родительский picklist. Но здесь мы добавляем условие, что id родительской записи должен быть равным id, который мы передаем из родительского picklist.

Далее создадим второй компонент <apex:selectList>, чтобы отобразить зависимый picklist.

<apex:selectList size="1" id="relatedList">
         <apex:selectOptions value="{!RelatedObjectValue}" >
         </apex:selectOptions>
 </apex:selectList>

В <apex:selectList> добавили параметр id и присвоили название “relatedList”.
Теперь, чтобы всё это взаимодействовало, нужно немного изменить родительский <apex:selectList> на Visualforce странице.

<apex:selectList size="1" value="{!selectedValue}" >
       <apex:selectOptions value="{!SomeObjectValue}" >
       </apex:selectOptions>
       <apex:actionSupport event="onchange" reRender="relatedList" />
</apex:selectList>

Добавим компонент <apex:actionSupport> и зададим его параметру event “onchange” и параметру reRender “relatedList”. Event = “onchange” мы указываем, что при изменении выбранного значения нужно сделать reRender компонента с id “relatedList”. <apex:actionSupport> поддерживает и другие параметры event, более подробно можно ознакомиться тут

Как будет выглядеть результат:

1.Не выбрано никакое значение.

2. Выбираем запись, dependent picklist отображает соответствующие значения.

3. Dependent picklist меняется, когда изменяем значение родительского picklist.
|380x192.7409261576969

Этот способ предоставляет возможность отобразить значение записей в виде picklist, а также очень просто сделать dependent picklist, если нужно отобразить related записи в зависимости выбранного родительского рекорда. Например это могут быть страны и города, марки и модели автомобилей и так далее.

Как видим, отобразить данные в виде picklist или dependent picklist очень просто: достаточно понимать несколько базовых вещей apex и visualforce и четко знать алгоритм их создания.
Если у вас остались какие-то вопросы, то пишите их в комментариях, мы всегда рады помочь.

Visualforce page
<apex:page controller="ExampleController">
    <apex:form id="form">
        <apex:pageBlock title="Get picklist">
            <apex:selectList size="1" value="{!selectedValue}" >
                	<apex:selectOptions value="{!SomeObjectValue}" >
                    </apex:selectOptions>
                <apex:actionSupport event="onchange" reRender="relatedList" />
            </apex:selectList>
            <p></p>
            <apex:selectList size="1" id="relatedList">
                	<apex:selectOptions value="{!RelatedObjectValue}" >
                    </apex:selectOptions>
             </apex:selectList>
        </apex:pageBlock>
    </apex:form>
</apex:page>
Apex controller
public class ExampleController {
    List<selectOption> options {get;set;}
    public String selectedValue {get;set;}
    
    public List<selectOption> getSomeObjectValue(){
        options = new List<selectOption>();
        options.add(new selectOption('--None--','--None--'));
        for(SomeObject__c objectItem : [SELECT id, Name
                                        FROM SomeObject__c
                                        ORDER BY Name ASC
                                        ]){
            options.add(new selectOption(objectItem.id,objectItem.name));     
        }
        return options;
    }
    
    public List<selectOption> getRelatedObjectValue(){
        options = new List<selectOption>();
        for(Related_Object__c objectItem : [SELECT id, Name
                                        	FROM Related_Object__c
                                        	WHERE SomeObject__r.id = :selectedValue
                                            ORDER BY Name ASC
                                        ]){
            options.add(new selectOption(objectItem.id,objectItem.name));     
        }
        return options;
    }
}
7 Likes