How to Add/Edit Page Components

About the Results and Index Files

Defaults Files

• DO NOT MODIFY THESE FILES!
• The default Results page source is Results.html
• The default landing page (Index.html) source is Index.html
• The default Results.html and Index.html files are located at the root of your SmartHub site. For example, C:\Program Files\BAInsight\SmartHub\

Custom Files

• The custom Results page source is ResultsCopy.html
• The custom landing page source is IndexCopy.html
• The custom Results.html and Index.html files are located in the /CustomerCustomization/pages folder in the root of your SmartHub site.
• Copy and rename the CustomerCustomization directory before modifying the files within it.
• In the example below, the customization directory has been renamed to "MyCustomerCustomization"

How to Find and Modify Results and Index HTML Files

• To modify a field or setting in your Results.html or Index.html files, BA Insight recommends you use the provided custom files and settings associated with these pages. 

• The Results.html and Index.html files each have their own respective sister customization files with their own setting counterparts:

  Default HTML File	Default HTML File Path	Customization HTML File	Default Customization File Path	Customization Settings File	Customization Settings File Path	Recommended Customization Path
  Index.html	SmartHub root directory	IndexCopy.html	/CustomerCustomization/pages Note: "CustomerCustomization" directory is overwritten at upgrade time	IndexCopyCustomSettings.js	/CustomerCustomization/settings	/"MyCustomerCustomization" Note: This directory is NOT overwritten at upgrade time
  Results.html		ResultsCopy.html		ResultsCopyCustomSettings.js

• In these files, you can find every .css and .js file that is loaded by SmartHub.
• The path to the settings files you modify can be found in their respective HTML pages.
• Note: You can load multiple settings files - they will be combined at run time.
• Your HTML page contains multiple paths to different multiple settings files, described below

Default Custom Settings Path

SmartHub can load multiple settings files.

Use the secondary, or "Additional Custom Settings Path" below to load your own custom settings.

Note: The /modules/SmartHubResourceLoader/ directory is overwritten at upgrade time.

In the graphic "IndexCopy.html File" below, the default settings file is specified in the line of code:

const customSettingsFile = "/modules/SmartHubResourceLoader/CustomSettingsTemplate.js"

Additional Custom Settings Path

SmartHub can load multiple settings files.

Use the path described below to load your own custom settings.

• In the graphic "IndexCopy.html File" below, an additional path for a custom settings file is specified.

• In this example, the path references the customization directory, copied and renamed "MyCustomerCustomization."

• This new directory will NOT be overwritten at upgrade time.

See the following code:

   const neverCachedJS = [

        "/MyCustomerCustomization/settings/IndexCopyCustomSettings.js",

IndexCopy.html File

Using a Custom Settings File: Examples

Use the corresponding settings file to see which files SmartHub loads by default.

To make changes to your SmartHub components, use the provided templates located in <SmartHub_root>/CustomerCustomization/ to create your own custom settings files.

• In the template file, see the examples that show how to add/modify the loaded files and how to add/modify/exclude attributes on existing files.

This file should also include the changes you want to make to the default settings of SmartHub components such as TypeAhead or How to Collect and Use Analytic Information.

• /modules/SmartHubResourceLoader/CustomSettingsTemplate.js

When you add a file to your custom settings file, use globalAlias to inject a CommonJS compliant module. In other words, we recommend that your module use modules.exports to expose itself.

Make the custom settings file accessible under window.SH.<globalAlias>.

For example, globalAlias:myLib would make the exported object accessible through window.SH.myLib.

The SmartHub components that are loaded using the settings file include:

• • SmartHub Pages:
    • Display templates
    • Page components
  • ANALYTICS: If you installed SmartHub Analytics, make changes here.
  • Smart Previews: If you have installed Smart Previews for SmartHub, install the Smart Previews for SmartHub component into these pages.
  • SmartHub

How to Add a New Module

Use globalAlias to inject a CommonJS compliant module and expose this module under window.SH.<globalAlias>.

• /modules/SmartHubResourceLoader/ResultsPageSettings.js
  
  
  
  
• /modules/my-module/my-module.js
  
  
  
  
• Browser console