How to 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 Builder.

  • SmartHub Tabular View settings are accessible through the UI builder
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 Builder.

  • 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 Builder

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

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

  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
Copy 
{ 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>";
    }  
}