Documentation Center

Extending JavaScript

Properly extending JavaScript components allows you to modify existing functionality with the lowest impact to the skin.

About this task

ContentDelivery_home refers to ContentDelivery_InstallDir\WEB-INF on Windows and ContentDelivery_InstallDir/WEB-INF on Linux.

Procedure

  1. Legacy Content Delivery provides an empty JavaScript file specifically for custom modifications. Create or modify ContentDelivery_home/db/LiveContent/ui/skins/<your skin>/js/extensions.js.
    If you have additional JavaScript files, you can add these to the HTML templates after the other <script> elements.
  2. Identify the JavaScript component that you need to extend. The Legacy Content Delivery JavaScript functionality is organized around components, which are JavaScript prototypes containing variables and functions related to a specific part of the application. For example, the lcContent component is located in the lcContent.js file and specifically deals with the loading, rendering, and filtering of content (TOC, indexes, topics).
  3. Modify skin/<your skin>/js/extensions.js.
  4. Add an extension prototype for each JavaScript component you need to modify. You must add both a properly named function and prototype. The name of the extension class is the name of the original component with an _extension appended, such as lcContent_extension.
    
    function lcContent_extension() {
       // initialize flags or variables here
    };
    
    lcContent_extension.prototype = {
      	extensionInit: function() {
    		    // this function is execute on page load - adding a simple alert here to confirm the extension is being loaded.
          alert("I am lcContent_extension and I am in my init routine");
    	  }
    };
  5. Modify your new extension class to provide the required JavaScript functionality. You can create new functionality, or override existing functionality in the parent JavaScript component. For example, the lcContent includes a function loadDoc which is responsible for loading HTML documents in the viewing pane. If you created the lcContent_extension and added a loadDoc function, this override function would be executed in place of the parent component's function.
    
    function lcContent_extension() {
       // initialize flags or variables here
    };
    
    lcContent_extension.prototype = {
      	extensionInit: function() {
    		    // this function is execute on page load
    	  },
    
       loadDoc: function(event, obj) {
          // instead of loading a document as normal, I will post a JavaScript alert
          alert("I am alerting instead of loading a document!");
       }
    };
  6. In order to minimize the amount of JavaScript customization required, you can use the parent component's prototype to get access to the parent's original functions. This allows you to easily create custom JavaScript which is executed before and after the core function, instead of completely overriding the core function. By using the standard JavaScript prototype, you can execute custom code before and after the function call as shown below.
    
    function lcContent_extension() {
       // initialize flags or variables here
    };
    
    lcContent_extension.prototype = {
      	extensionInit: function() {
    		    // this function is execute on page load
    	  },
     
       loadDoc: function(event, obj) {
    		    alert("pre super function");
    		    lcContent.prototype.loadDoc.call(this, event, obj);
    		    alert("post super function");
      	}  
    };
  7. Upload the new skin customization into the database.
    • You can upload the resources using the web UI, as described by Adding a Skin and Resources.
    • You can also update the skins via the command line using the loaddb tool. Copy the updated skin resources from the source code repository to ContentDelivery_home/db/LiveContent/ui/skins/<your_skin>/.
      • On Windows, to load the most recent changes into the database run this command:

        loaddb.bat UPGRADE

      • On Linux, run this command:

        loaddb.sh UPGRADE