UI Widgets
Components
Search Widget
The Search widget displays the standard Search bar and has a custom placeholder and optional Clear button.
| SearchWidget([options]) | Example |
|---|---|
Description: constructor for search widget.
|
new SearchWidget({
placeholder: 'What are you looking for?',
showClearButton: true,
searchButtonClickEventListeners: [function (element, options) {
console.log('Search button clicked')
}]
}).render();new SearchWidget({
placeholder: 'Type your question',
showClearButton: false
}).render(); |
| .render(): SearchWidget | |
| Description: renders the view template and updates this.el with the new HTML. | |
Result Widget
The Result widget displays the search results and has optional pagination and optional embedded blocks of categories. this widget is dependent on the _gka.search() method in Knowledge Agent.
| ResultWidget([options]) | Example |
|---|---|
Description: constructor for results widget.
|
new ResultWidget({
size: 2,
showAnswer: true,
charactersInAnswer: 250,
pagination: true,
highlighting: false,
moreLinkClickEventListeners: [function (element, options) {
console.log('Document selected')
}]
}).fire().done(function(response, widget) {
widget.render()
});new ResultWidget({
size: 2,
showAnswer: false,
showCategories: false
}).fire().done(function(response, widget) {
widget.render()
}); |
| .fire(): Promise | |
Description: fetch data from the server according to passed options.
| |
| .render(): ResultWidget | |
| Description: renders the view template from fetched data and updates this.el with the new HTML | |
Categories Widget
The Categories widget displays categories and is similar to the categories block in the Result widget or the Document widget however, in the Categories widget, only the categories are stored. The Categories widget is dependant on the _gka.getCategories() method in Knowledge Agent.
| CategoriesWidget([options]) | Example |
|---|---|
Description: constructor for categories widget.
|
new CategoriesWidget({
numberOfColumns: 2,
categoryClickEventListeners: [function (element, options) {
console.log(options.id)
}]
}).fire().done(function(response, widget) {
widget.render()
}); |
| .fire(): Promise | |
| Description: fetch data from the server. | |
| .render(): CategoriesWidget | |
| Description: renders the view template from fetched data and updates this.el with the new HTML. | |
Document Widget
The Document widget displays documents and can have an optional feedback block, a help button, and an embedded block of categories that are associated to the document. The Document widget is dependant on _gka.getFullContent() and _gka.like() methods in Knowledge Agent.
| DocumentWidget([options]) | Example |
|---|---|
Description: constructor for document widget.
|
new DocumentWidget({
documentId: 'knowledgefaq_4',
feedbackType: 'BINARY',
feedbackText: 'Whether I found it relevant',
showHelpButton: true,
helpButtonText: 'I need more help',
feedbackSelectEventListeners: [function (element, options) {
console.log(options.feedbackType);
console.log(options.rate);
}],
helpButtonClickEventListeners: [function (element, options) {
console.log(options.document.id);
}]
}).fire({
kbId: 'knowledgefaq',
docId: 'knowledgefaq_66'
}).done(function(response, widget) {
widget.render()
})new DocumentWidget({
documentId: 'knowledgefaq_4',
feedbackType: 'NONE',
showHelpButton: false
}).fire({
kbId: 'knowledgefaq',
docId: 'knowledgefaq_66'
}).done(function(response, widget) {
widget.render()
})<br>
[[File:Document3.png|thumb|center|400px|
Document Widget Example 3]]<br>
new DocumentWidget({
documentId: 'knowledgefaq_4',
feedbackType: 'RATING',
feedbackText: '',
showHelpButton: true,
helpButtonText: 'Help me'
}).fire({
kbId: 'knowledgefaq',
docId: 'knowledgefaq_66'
}).done(function(response, widget) {
widget.render()
}) |
| .fire(options): Promise | |
Description: fetch data from the server according to passed options.
| |
| .render(): DocumentWidget | |
| Description: renders the view template from fetched data and updates this.el with the new HTML. | |
Filter Widget
The filter widget displays one single filter item depending on the passed configuration options and can be configured for visualization (timepicker, string input, number input).
| FilterWidget(options) | Example | ||||||
|---|---|---|---|---|---|---|---|
Description: constructor for filter widget.
|
// Example (1)
var filterWidget = new FilterWidget({
type: 'INPUT',
field: 'created',
fieldAlias: 'Date',
options: {
inputType: 'DATE',
operator: 'GREATER_EQUAL',
},
valueChangeEventListeners: [function (element) {
console.log('date changed')
}]
})//Example (2)
var filter2 = new FilterWidget({
type: 'BETWEEN',
field: 'confidence',
fieldAlias: 'Confidence',
options: {
separator: 'to',
inputType: 'NUMERIC',
from: 0.4,
to: 0.9
},
valueChangeEventListeners: [function (element, options) {
console.log('one of two values changed')
}]
}) | ||||||
| .render(): FilterWidget | |||||||
| Description: renders the view template and updates this.el with the new HTML. | |||||||
| .filterJSON(): Filter | |||||||
| Description: returns compiled filter object related to current widget that can be used in /search API. | |||||||
This page was last edited on July 11, 2018, at 13:58.
Comments or questions about this documentation? Contact us for support!