Displaying Choice field

Choice field can be present as select, checkbox or radio input for editors.

The select, checkbox, and radio field types allow editors to choose one or several items from a predefined list. Behind the scenes, all of them function similarly but offer different user interfaces for editors.

Advanced Views natively supports the following choice types:

1. ACF: any Select, Checkbox, Radio, ButtonGroup field

2. MetaBox: any CheckboxList, Radio, Select, Autocomplete, ButtonGroup, ImageSelect, AdvancedSelect field

3. Pods: any Relationship field (with a custom list)

1. How to display a Choice field

1. Create a new Layout

2. Add any Choice field

3. Save the Layout, copy its embedding shortcode

4. Embed Layout: paste the shortcode inside the target place

By default, Advanced Views displays only the chosen options using the defined delimiter. You can customize the Layout template to use the render options:

2. Render options for Choice field

2.1) Values delimiter

Separate multiple values in the output with a delimiter.

Switch to the Field Options tab and fill out the Values delimiter.

2.2) Getting all available options

By default, the field's markup displays the title of the chosen option. The value is accessible under the '.value' property. You can also display the list of all options using the '.choices' property. This can be useful if you need to show a complete list or want to convert it into a form element.

Below is an example that demonstrates how to retrieve all the available information for a single select field. Similarly, you can work with a select field that allows choosing multiple options as well.

{% if select.value %}
    <div class="avf-layout__select">
        <div class="avf-layout__select-label">
            {{ select.label }}
        </div>
        <div class="avf-layout__select-choice">
            <div class="avf-layout__item">
                <div>
                    Chosen option title:
                </div>
                <div>
                    {{ select.title }}
                </div>
            </div>
            <div class="avf-layout__item">
                <div>
                    Chosen option value:
                </div>
                <div>
                    {{ select.value }}
                </div>
            </div>
            <div class="avf-layout__item">
                <div>
                    All available choices:
                </div>
                <div>
                    {% for choice_value, choice_title in select.choices %}
                        <p>
                            {{ choice_value }} : {{ choice_title}}
                        </p>
                    {% endfor %}
                </div>
            </div>
        </div>
    </div>
{% endif %}