LinkListView

The Linklist view

Description

The LinkList view displays a horizontal list with a set of choices. The list can be bound to a search manager, but can also be used as a clickable list that emits change events.

Library path

Simple XML wrapper

Properties

Name

Default value

Description

id Required. The unique ID for this control.
choices[]A static dictionary of options for the link 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.
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.
valueThe value of the current choice.
valueField""The value or search field for each choice.

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",
    "splunkjs/mvc/searchmanager",
    "splunkjs/mvc/linklistview",
    "splunkjs/mvc/simplexml/ready!"
], function(
    mvc,
    SearchManager, 
    LinkListView
) {
        
    // Use this search to populate the link list with index names
    new SearchManager({
        id: "example-search",
        search: "| eventcount summarize=false index=* index=_* | dedup index | fields index",
    });

    var myLinkListView = new LinkListView ({
        id: "linklist1",
        selectFirstChoice: false,
        searchWhenChanged: true,
        managerid: "example-search",
        value: mvc.tokenSafe("$mychoice$"),
        default: "main",
        labelField: "index",
        valueField: "index",
        el: $("#mylinklist")
    }).render();

    // Fired when the list value changes
    myLinkListView.on("change", function(e) {
        // Displays the value of the list in the console
        console.log(myLinkListView.settings.get("value"));
    });

});