How to View Query Results in a Tabular View
The Tabular View component is used to display the SmartHub results as a tabular view.
How to Activate Tabular View
- Navigate to <SmartHub_install_Path>\modules\SmartHubResourceLoader\DefaultModuleSettings.js.
- Open ResultsPageSettings.js file.
- Uncomment the resources associated with the TabluarView module.
- In order to see the Tabular View on the page, the following HTML tag must be added to the Result.html page:
<div id="<TabularViewID>"></div>
If a Tabular View column is set as filterable and the field used for that column is also a SmartHub facet, the facet is rendered as a Tabular View filter.
- SmartHub and Tabular View do not support duplicate facets.
- Additional templates like the detail templates do not support SmartHub facets.
Note: The TabularView component already loads jQuery.
Ensure jQuery is notloaded via the Custom Settings file if TabularView is enabled.
How to Configure Tabular View
- The configuration settings can be found in \modules\SmartHubResourceLoader\DefaultModuleSettings.js.
- The configuration file must be used only as an example, and it should not be modified because it is overwritten at upgrade time.
- All the changes to the settings should be done via the custom settings file created for the page.
Tabular View Settings in a Custom File
In the example below, the Tabular View settings (from line 936) in the file DefaultModuleSettings.js have been inserted into a custom Results HTML page settings file (such as ResultsCustomSettings.js) at line 12 in the file.
- The Results HTML page has a placeholder for Tabular View settings around line 11, depending on other custom modules being implemented.
- By default, Tabular View is disabled. The value "Enabled" on line 13 below, is set to "false"
- In the example below the value "Enabled" on line 13, is set to "true"
Tabular View Settings Example
SH.TabularView = SH.TabularView || {};
SH.TabularView.DefaultSettings =
{
"Enabled": "true",
"AdvancedTabularResultList": {
"EnableSmartPreviews": "false",
"EnableContentIntelligence": "true" "ColumnsPreferencesProfilePropertyName": "columnPreferences",
"AdditionalFields": [{ field: "clickUri" }, { field: "date" }],
"KendoGridSettings": {
dataSource: {
type: "odata" },
height: 550,
filterable: true,
pageable: false,
groupable: true,
detailTemplate: SH.RootLevelURL + '/modules/TabularView/DetailsTemplate.html',
toolbar: SH.RootLevelURL + '/modules/TabularView/ToolbarTemplate.html',
detailInit: '',
dataBound: function (e) {
this.expandRow(this.tbody.find("tr.k-master-row").first());
var container = e.sender.wrapper.children(".k-grid-content");
container.scrollLeft(0);
container.scrollTop(0);
},
columns:
[
{ field: "title", title: "Title", filterable: false },
{ field: "filetype", title: "File Type" },
{ field: "Rank", title: "Rank", filterable: false },
{ field: "Size", title: "Size" },
{ field: "ContentSource", title: "Content Source" }
]
}The AdditionalFields settings option can be used to request additional metadata that are not used in the columns section.
-
For example, the user can request metadata that can be used in a Detail Template.
-
The Tabular View settings are build on the KendoGrid settings.
-
The users can add their existing KendoGrid settings inside the KendoGridSettings field.
The following grid settings are used different by TabularView:
- detailTemplate:
- Contains the path to the default details template.
- As values, it supports the SmartHub template path or the Kendo Grid template function:
(kendo.template($("#template").html() ) );
- datailInit:
- The function used to create and initialize the details template.
- If there is no value specified, it uses the TabularView function:
SH.TabularView.DetailInit.
In order to change the default Details Template the value to the detailInit settings option can be changed to the desired function name or the function SH.TabularView.DetailInit can be overridden.
Tabular View Helper Functions
Tabular View provides the following helping functions:
- SH.TabularView.PrelucrateDataSource: Transforms the SmartHub query results object intro a KendoGrid data source.
- SH.TabularView.GetTabularResultProperties: Provides access to all the SmartHub requested metadata.
- SH.TabularView.DetailInit: Function used to create and initialize the Details Template.
- SH.TabularView.UpdateTabularView: Function used to update the TabularView results with a new set of SmartHub query results.
Using the TabularView as a Custom Grid
The TabularView can be used to display additional SmartHub query results that come from a custom query.
In this case, a call to the UpdateTabularView function must be done.
Parameters UpdateTabularView uses include:
- target - Represents the id of the targeted TabularView component.
- results - Represents the results obtained from the custom SmartHub search
- numberOfResults - Represents the number of results from the custom query.
The call must be done after the event SH.TabularView.Loaded triggered.
Example of updating an independent TabularView component
HTML markup:
<div id="DataSheet"></div>
Custom JavaScript code snippet:
document.addEventListener('SH.TabularView.Loaded', function () {
initializeDatasheets();
});
var initializeDatasheets = function() {
var query = "newQuery";
var fields = [];
var TabularViewSettings = SH.utils.getMergedModuleSettings(SH.TabularView);
var key = 'DataSheet';
var gridColumns = TabularViewSettings[key]['AdditionalFields'].concat(TabularViewSettings[key]['KendoGridSettings']['columns']);
for (var i = 0; i < gridColumns.length; i++) {
var field = gridColumns[i].field;
if (field) {
fields.push(field);
}
}
var searchQuery = { q: query, cq: '{searchboxquery} FederatorBackends:"*"', groupBy: [], firstRow: 0, numberOfResults: 10, fieldsToInclude:fields};
SH.SearchProvider.SearchEndpoint.endpoints["default"].search(searchQuery, {}, {queryString:""}).then(function(results){
SH.TabularView.UpdateTabularView("#DataSheet",results,searchQuery.numberOfResults);
})
}