DropdownView

The Dropdown view

Description

The Dropdown view displays a dropdown list with a set of choices. The list can be bound to a search manager, but can also be used as a standard HTML dropdown list that emits change events.

Library path

Simple XML wrapper

Properties

Name

Default value

Description

id Required. The unique ID for this control.
allowCustomValuesfalseIndicates whether to allow custom values to be entered.
choices[]A static dictionary of options for the dropdown list. If bound to a managerid, the static choices specified here are prepended to the dynamic choices from the search.
For example:
var mychoices = [
    {label:"text1", value: "value1"},
    {label:"text2", value: "value2"},
    {label:"text3", value: "value3"}
];
defaultThe default choice.
disabledfalseIndicates whether to disable the view.
initialValueThe initial value of the input. If defaultis specified, it overrides this value.
labelField""The UI label to display for each choice.
manageridnullThe ID of the search manager to bind this view to.
minimumResultsForSearch8The minimum number of results.
selectFirstChoice"false"Indicates whether to use the first available choice when the user has not made a selection. If the default property has been set, that value is used instead.
settingsThe properties of the view. See the methods below to get and set values.
showClearButtontrueIndicates whether to display that "x" next to choices, allowing a selection to be cleared.
valueThe value of the current choice.
valueField""The value or search field for each choice.
width200The width of the view, in pixels.

Methods

Name

Description

renderDraws the view to the screen. Called only when you create the view manually.
valReturns the view's value if passed no parameters. Sets the view's value if passed a single parameter.
settings.get( property )Returns the value of property for the current component.
settings.set( propertyvalue )Sets the value of property to the specified value for the current component.

Events

Name

Description

changeFired when the value of the view changes.

Example

require([
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/dropdownview",
    "splunkjs/mvc/simplexml/ready!"
], function(SearchManager, DropdownView) {

    // Use this search to populate the dropdown with index values
    new SearchManager({
        id: "example-search",
        search: "| eventcount summarize=false index=* index=_* | dedup index | fields index" 
    });

    // Instantiate components
    new DropdownView({
        id: "example-dropdown",
        managerid: "example-search",
        default: "main",
        labelField: "index",
        valueField: "index",
        el: $("#mydropdownview")
    }).render();

});