View Query Results in a Tabular View

About

The Tabular View component is used to display the SmartHub results in a tabular view.

Activate and Configure Tabular View

UI Editor

  • The easiest and fastest way to insert and customize a ContentContainer that uses the tabular view feature is via the SmartHub UI Editor.

  • For more information, see Use the UI Editor.

Procedure:

  1. SmartHub administrators can simply click the UI Editor link from the SmartHub Administration page.

  2. Click the Select a page link from the top menu.

  3. Select (double-click) an HTML page such as Results.html page.

    1. Below, the Results.html page is shown for sample purposes.

    2. BA Insight recommends you use a custom folder/page for modifications. Leave the default files as templates.

      1. Example: CustomPages/CustomResults.html.

      2. Default Results.html is under the top most SmartHub directory.

  4. Select the Advanced mode from the top right of the page.

  5. Select Advanced settings edit.

  6. Locate the text "SH.TabularView.CustomSettings"

    7. SH.TabularView = SH.TabularView || {};
    SH.TabularView.CustomSettings = {
        /*
         "TabularResultList":{
             groupable:true,
             columns: 
             [
                 { field: "title", title: "Title", filterable:false},
                 { field: "author", title: "Author"},
                 { field: "filetype", title: "File Type"},
                 { field: "Rank", title: "Rank", filterable:false},
                 { field: "Size", title: "Size"},
                 { field: "ContentSource", title: "Content Source"}
             ]
         }
         */
    };
    SH.TabularView.PathsToExclude = [
        /*
            ['ProviderSettings', 'PeopleSuggestions', 'ShowMoreButtonLabel']
        */
    ]

  7. To access the available TabularView settings, click the See Default Settings link in the top right corner.

  8. A new browser tab opens with all available SmartHub module settings.

  9. Search for the word "TabularView" on the page to quickly navigate to the TabularView default settings, shown below:

Available TabularView Settings
    SH.TabularView = SH.TabularView || {};
    SH.TabularView.DefaultSettings = {
        Enabled: false,
        MainResults: {
            "ColumnsPreferencesProfilePropertyName": "columnPreferences",
            "KendoGridSettings": {
                dataSource: {
                    type: "odata"
                },
                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: "FileExtension",
                    title: "File Type"
                },
                {
                    field: "Rank",
                    title: "Rank",
                    filterable: false
                },
                {
                    field: "Size",
                    title: "Size"
                },
                {
                    field: "ContentSource",
                    title: "Content Source"
                }
                ]
            }
        }
    }
  1. Copy the TabularView settings section from SH.TabularView.DefaultSettings.
  2. Go back to your Advanced settings edit tab.
  3. Paste the copied settings inside section SH.TabularView.CustomSettings.

  4. Change the Enabled value to "true."

  5. Modify additional settings as desired.

  6. Locate the section SH.ContentContainers.CustomSettings .

  7. For the ContentContainer to have the TabularView display, add the following setting:

    1. DeferredRendering: true

  8. Click Save changes.

  9. Click the link Preview <html> file.html at the top of the code editor.

  10. Review your HTML page in the new tab that opens.

  11. Make any necessary changes back in the code editor.

  12. Click Save changes.

Note: TabularView changes the display template for a specified ContentContainer.
In the default example the MainResults corresponds to the ContentContainer called MainResults.
Ensure the ContentContainer used is configured to show on the page.
Tip: If a Tabular View column is set as filterable (filterable: true) and the field used for that column is also a SmartHub facet, the facet is rendered as a Tabular View filter.
Important! This functionality is available only when TabularView is based on a ContentContainer that is configured as MainResults.
  • SmartHub and Tabular View do not support duplicate facets.
  • Additional templates like the detail templates do not support SmartHub facets.

Tabular View Settings

The Tabular View settings are built on the KendoGrid settings. 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

Changing the Default Details Template

To change the default Details Template perform either of the following options:

  • The value to the detailInit settings option can be changed to the desired function name

  • The function SH.TabularView.DetailInit can be overridden

Show Different Metadata in the Detail Template

To show different metadata in the detailTemplate:

  • The corresponding ContentContainer must have those metadata as FieldsToInclude

Enable Previews in a Tabular View

TabularView will change the display template for a specified ContentContainer, therefore to enable SmartPreviews, you need to use the UI Editor to enable SmartPreviews on the desired ContentContainer:

  1. SmartHub administrators can simply click the UI Editor link from the SmartHub Administration page.

  2. Click the Select a page link from the top menu.

  3. Select (double-click) an HTML page such as Results.html page.

    1. Below, the Results.html page is shown for sample purposes.

  4. BA Insight recommends you use a custom folder/page for modifications.

  5. Leave the default files as templates.

    1. Example: CustomPages/CustomResults.html.

    2. Default Results.html is under the top most SmartHub directory.

  6. Select Advanced mode from the top right of the page.

  7. Select Advanced settings edit.

  8. Locate the section SH.ContentContainers.CustomSettings.

  9. For the ContentContainer that has the TabularView display enabled, add the following setting:

    1. EnableSmartPreviews: true

  10. Click Save changes.

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.

UpdateTabularView parameter 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 eventSH.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);
    })
}