Enable Previews in a Tabular View

About SmartHub Tabular Views

To enable the Previews in a tabular view, specific code (at bottom of the page) must be added to your page's custom settings file (which is loaded at run-time).

See the example below and for information about creating and using a custom settings file, see How to Use the UI Editor.

  • SmartHub Tabular View settings are accessible through the UI Editor
Note: All the changes to the page settings should be done via the custom settings file created for the page.
For more information, see How to Create Custom Pages.

Tabular View Settings Section

How to Enable Previews in a Tabular View

To configure the TabularView component, edit the custom settings file that you are using for your SmartHub HTML pages.

  • For more information about using Custom Settings, see How to Use the UI Editor.

  • You can change the TabularView options by editing the TabularView code in your custom settings file.
  • You can override any setting by adding it to the SH.TabularView.CustomSettings namespace.

UI Editor

The easiest and fastest way to work with the TabularView component is via the SmartHub UI Editor.

For information about how to access the UI Editor as well as who can access it, see How to Use the UI Editor.

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

  2. Select (double-click) the page (Index.html, landing.html, etc.) you wish to modify.

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

    2. BA Insight recommends you create your own custom page (within its own folder) to modify. Leave the default files as templates.

  3. Click the Advanced link at the top right of the window to enter Advanced mode.

  4. Select the Advanced settings edit link at the top center of the page.

  5. Scroll down to around line 124 of the Advanced settings edit link from the top of the page.

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

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

  8. Search for the word "UserPreferences" on the page to quickly navigate to the User Preferences settings, shown below

    1. Copy the personalization settings you want to use.

    2. Paste the settings into the settings file for your HTML page in the former browser tab.

    3. Use the parameters in the "Personalization Sections Settings" table below to customize the code in this section..

  9. Click Save changes.

  10. Click the link Preview <html file>.html to view your updated HTML page in a new browser tab.

  11. Review the page and make any changes back in the code editor.

  12. Save changes and preview again until satisfied.

Tabular View Template

Tabular View 
{ field: "", title: "", template: function(dataItem) 
    {
       var result = JSON.parse(dataItem.SmartHubResult)[0];
       var newUri = result['clickUri'];
       if (result['escbasecrawlurl'] && result['escbasecrawlurl'] !== '') 
       {
       newUri = result['escbasecrawlurl'];
       }
       
       var el = document.querySelector(".CoveoSearchInterface");
       var searchInterface = Coveo.get(el, "SearchInterface");
       var keywords = searchInterface.queryStateModel.attributes.q ;
       var title = result['title'];
       var originalPath = result['clickUri'];
       return "<div class='CoveoOpenPreviewAction' title='Open preview' style='display:none' data-onclick=\"" + 'if(typeof BAInsight.DocumentViewer !== \'undefined\' && BAInsight.DocumentViewer._isMobile) {clearTimeout(BAInsight.LongitudePreview.HoverTimeoutId);} BAInsight.LongitudePreview.ShowPreview(\'' + encodeURI(newUri) + '\', { Mode: 1, Keywords: \'' + keywords + '\',exportFileHandler:    ControlHelper._exportFileHandler, pageContentHandler: ControlHelper._handlePageContent, cssContentHandler: ControlHelper._handleCSSLoad , startPageType : 2, Title: \'' + title + '\', OriginalPath: \'' + originalPath + '\' }, id );return false;' + "\" data-previewurl='" + newUri + "'>SmartPreviews</div>";
    }  
}