Updated: May 21, 2020 12:57pm

Prism Custom HTML Files

Prism enables retailers to customize the UI and workflow via customizations. For example, retailers can incorporate company logos or a coloring scheme that matches the company's colors. Retailers can also add buttons or other custom UI elements that trigger customizations when clicked. This document provides information about a new Prism feature that leaves custom .html pages unchanged when installing a Prism update. Previously, installing a Prism update would overwrite custom .html pages, resulting in an adverse impact on customizations.
To make use of this feature, retailers will have to manually create a \customizations folder at each workstation that uses the customization and copy the specific .html files used by the customization to that folder.  When installing a Prism update, any file that is in the \customizations folder with the same directory structure and file name of the Prism default .html file will be served in lieu of the default file.
Example: WebClient\customizations\views\default\customer-history.htm

When it is time to load the customer-history.htm file, Prism will use the copy in the \customizations folder instead of the copy in the views\default folder.
This document assumes that you already have a customization and know which .html files in the \views\default folder are used by the customization. For information about creating and registering a customization, see the Prism Admin Console Guide document.

The following instructions apply to a new install of Prism.

  1. Create a \customizations folder at each workstation
  2. Open Windows Explorer and navigate to the \WebClient folder.    
  3. Open Windows Explorer and create a new folder called \customizations in the \WebClient folder.    
  4. Copy the specific .html file from the \views\default folder that you want to modify. Paste the copy to the \customizations folder. Do not change the file name. Modify the custom .html file as needed for your customization.   
  5. Install the next Prism update as an "over-the-top" installation. The update will leave the files in the \customizations folder. After the update, you can launch Prism and see that your custom .html file is still being loaded from the \customizations folder (instead of the default version that was installed by the update).     

About the Prism Default Views

The \WebClient\views\default folder has a number of individual .html files. Each file is used in a specific area of the program. It is beyond the scope of this document to explain the use of each of these files.  If your customization uses a certain .html file and you want to make sure that the file is left unchanged during Prism updates, simply copy that file to the \WebClient\customizations folder. It is important that the copy in the \customizations folder has the same name as the file in the WebClient\views\default folder. Note: The files in the \views\default folder have an .htm extension .htm is used as an alternate to .html for some operating systems and servers that do not accept four-letter extensions.

Extend Default Layouts by Customizing UI
This section explains how to extend the default Prism layouts by adding your own custom HTML elements. This process is useful for adding a button or table to the UI.
Add custom html elements (like buttons, tables etc.) directly in a Prism default Layout file in a

element with ng-controller directive.  Alternatively, you can wrap all the custom elements into a separate .htm file as required and include that file in the default layout. The example below extends default ‘nav-landing-partial.htm' using the ng-include directive in a
.

nav-custom-button.htm


   

                
   

 

The specified custom controller (ng-controller in the extended .htm file) takes control over the custom elements and also extends the default layout controller and will get access of the default controller scope. In our scenario, ‘navLandingExtended' Custom Controller provides functionality for nav-custom-button.htm and can access the ‘nav-landing-partial' scope.

Custom Controllers are injected into prismApp and declared as specified:

prismApp.controller('navLandingExtended', ['$scope','$modal','$q',
    function($scope,$modal,$q){
      'use strict';
      $scope.agreementLookup = function() {
        var deferred = $q.defer();
          $scope.agreementLookupModalPromise = $modal.open({
            backdrop:'static',
            keyboard:false,
            windowClass : 'full',
            templateUrl:'/customizations/views/custom/nav-landing-agreement-lookup-partial.htm',
            controller:'agreementManagement'          
          });
          $scope.agreementLookupModalPromise.result.then(function(){
            deferred.resolve();
          });
        return  deferred.promise;        
      };
    }    
]);

Adding the Script Reference
In the customizations.html file, add a script reference to the custom Javascript files. You can locate the customization.html file on your Prism server in the default directory C:\ProgramData\RetailPro\Server\WebClient. The Javascript files go under the ‘\WebClient\customizations\js\' folder. The default extended .htm files always reside in ‘\WebClient\customizations\views\default\' path. The remaining custom layouts can be placed in a different folder. The following screenshot shows a recommended structure.
customizations directory structure