Application extensions are JavaScript code snippets that modify and extend the behavior of the Jacada client applications. Extensions do not need to be made up of Jacada Interact specific code. They can contain any JavaScript code, e.g., plug-in code of a third party. When the extension invokes special code supported by the Jacada Interact framework, the code can be used by the framework to extend or override the default behavior of the client.

As extensions are very powerful, they should be written and managed only by experienced developers who are familiar with Jacada Interact client architecture. Authors of extensions should also be knowledgeable in JavaScript, CSS, HTML, jQuery library, Ajax calls, and browser inspection and debugging.

Note: For detailed information about extension architecture, extension points that can be overridden, and recommendations for extension programming, refer to Using Application Extensions.

The following tutorial provides an example of how to write an application extension and apply it to the Mobile Web application. By default, the tables rendered in a Collection Display page do not support display of images. Therefore, the URL path to an image is shown instead of the image itself. The application extension we will write uses a JavaScript code snippet to substitute the image for the text that is displayed by default. The figure below shows how the Interaction page (My New Order) looks in runtime before and after the extension is activated in the application. 


Note that for this extension to behave as expected, the Interaction that you run needs to contain a collection display. The page shown above (Your New Order) is taken from the Sample Call Intent Interaction, which is one of the sample Interactions provided to get you started.

To create an application extension:

  1. From the Resources menu of the Admin Console, select Extensions.
    The Extensions page opens. Any previously added extensions are listed in the grid. For example: 
  2. At the upper right corner of the Extensions page, click Add.
    The New Extension page opens. In the code editor, there are placeholders for the following items that are used by every application extension:
    • initExtensions function: This function initializes the extension, so it can be used by an application. When the extensions file is loaded, it will be called with a callback function passing the app argument, which is the handle to the application. Through the app argument you can access everything in the running client.
    • registerExtension method: This method registers the extension point. The method is called with the name of the extension point and a callback function. This causes the callback to be called when the framework is about to create the DOM element for the relevant page element.

    Note: For more information and code examples about registering extensions and extension points , refer to Creating Application Extensions.
  3. In the Name field at the top of the page, enter a relevant name for your extension. (This field is mandatory.) Then, in the Description field, enter notes or comments about the extension.

  4. If desired, in line 1 of the code editor, replace the word sample with the name of your extension. (Although this action is not necessary, it is recommended so you can later easily locate the extension's code for debugging purposes. For more information, refer to Extensions: Tips and Best Practices.)
    Then, since we are not registering the loaded event as part of this extension (we will register a specific renderer instead), remove the sample code relevant to the loaded event.

  5. To register the extension, replace the default pageRenderer with the name of the relevant extension point, and change the code so the extension receives the element as a parameter. Then, modify the sample code to return the element after it is extended.
  6. Now you are ready to write the extension code. First, the extension will check for the page title. If (and only if) the page title is Your New Order, the extension is run.

  7. Next, the extension loops through all the rows in the Collection Display.
  8. In each row, the extension performs the following sequence of actions:
    • Takes the first cell of a row.
    • Gets the cell text, and stores it in a variable.
    • Empties the cell.
    • Appends an image into the cleared cell. The source of the image is set from the cell's text, which was stored in a variable.

  9. To save the extension, at the upper right corner of the page, click Save.
    A confirmation message is displayed, and the new extension is listed in a new row in the grid on the Extensions page. Your extension is now available for use in Agent, Mobile Web, and Web Self Service applications.

Activating Extensions in Applications
By default, all defined application extensions are available for use in all Jacada Interact clients. However, for an extension to actually affect the behavior of an application, the extension needs to be activated for use in that application. This is done by applying the extension to the application, from the application's Client Settings tab.
The following procedure explains how to apply your new extension to the Web Self Service application. (By default, a similar extension is already applied to the Mobile Web application.)

To apply an extension to the Web Self Service application:

  1. From the Extensions page, at the left side of the grid, select the checkbox of the imageUrl extension.
    The Apply To list is enabled. 

  2. To apply the extension, from the Apply To list, select Web Self Service.
    The Client Settings tab of the relevant application opens in Edit mode. In the Extensions section at the bottom of the page, the imageUrl extension is listed in the Selected Extensions frame. (The extensions listed in this frame are the ones that are activated in the application.)
    Note: For more information about the Extensions frame and editing the Selected Extensions list, refer to Working with Extensions in the Admin Console.
  3. At the upper right corner of the page, click Save.
    A confirmation message is displayed, and the Applications page opens.
  4. To test your extension, run the Sample Call Intent Interaction in the Web Self Service application, and navigate to the Your New Order page.