LinkListView

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
splunkjs/mvc/linklistview
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"}
];
|
default | | The default choice. |
disabled | false | Indicates whether to disable the view. |
initialValue | | The initial value of the input. If defaultis specified, it overrides this value. |
labelField | "" | The UI label to display for each choice. |
managerid | null | The 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. |
settings | | The properties of the view. See the methods below to get and set values. |
value | | The value of the current choice. |
valueField | "" | The value or search field for each choice. |
Methods
Name | Description |
render | Draws the view to the screen. Called only when you create the view manually. |
val | Returns 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( property, value ) | Sets the value of property to the specified value for the current component. |
Events
Name | Description |
change | Fired 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"));
});
});