Deploying extensions created by the web UI framework extensibility workbench and designer workbench using a Java server page

You can deploy extensions that are created by the web UI framework Extensibility and Designer Workbench Java™ Server page.

1. Install the application and build a WAR file for it.
   1. Deploy the WAR file on the server in the exploded format.
   2. After the deployment finishes, start the application server.
2. Make sure that the changes made using the Extensibility Workbench or the new screen created using the Designer Workbench have all the relevant JSON and JavaScript files generated and saved.
3. In the INSTALL_DIR/extensions folder, create the following subdirectory:

   application package name/webpages

4. In the webpages subdirectory, replicate the directory structure of the screen that you want to extend (relative to your deployment) and copy in all of the script files generated by the workbench.

   For example, if you extend the Manage Flight Route screen (which uses the file path application package name/flightRoute), you would copy all of the extension script files into the INSTALL_DIR/extensions/application package name/webpages/application package name/flightRoute directory.

5. Create a new JSP file with the same name as the base JSP file to launch these newly generated files in the same folder.
   Sample code for the original JSP:

   <%@ taglib uri="/WEB-INF/scui.tld" prefix="scuitag" %>
   <jsp:include page="/stk/include.jsp">
       <jsp:param name="title" value="manage flight route" />
   </jsp:include>
   <script>
       Ext.ns("sc.stk");
       sc.stk.fn = function() {
           var fr = new sc.stk.flightRoute();
           sc.plat.ScreenTitle.setText(fr.Header, null, "sc-panel-belowmenu-text");
           sc.plat.ScreenTitle.setText(fr.Header, null, "sc-panel-belowmenu-desc");
           fr.render("mainBodyPanel");
       }
   <scuitag:includeJS
   name="['/stk/flightRoute/flightRouteList_config.js','/stk/flightRoute/flightRouteList.js',
   '/stk/flightRoute/flightRouteList_bundle.js']"
   callBack="sc.stk.fn"/>
   </script>
   <jsp:include page="/stk/footer.jsp">
   

   Sample code for the new JSP (differential extensibility):

   <%@ taglib uri="/WEB-INF/scui.tld" prefix="scuitag" %>
   <jsp:include page="/stk/include.jsp">
       <jsp:param name="title" value="manage flight route" />
   </jsp:include>
   <script>
       Ext.ns("sc.stk");
       sc.stk.fn = function() {
           var fr = new sc.stk.flightRoute();
           sc.plat.ScreenTitle.setText(fr.Header, null, "sc-panel-belowmenu-text");
           sc.plat.ScreenTitle.setDescription(fr.Header, null, "sc-panel-belowmenu-desc");
           fr.render("mainBodyPanel");
       }
   <scuitag:includeJS
   name="['/stk/flightRoute/flightRouteList_config.js','/stk/flightRoute/flightRouteList.js',
   '/stk/flightRoute/flightRouteList_bundle.js','/stk/flightRoute/test_overlays.js'
   ,'/stk/flightRoute/test.js']"
   callBack="sc.stk.fn"/>
   //The new JSP also includes the newly generated files: test_overlays.js and test.js
   </script>
   <jsp:include page="/stk/footer.jsp">
   

   Sample code for the new JSP (override extensibility):

   <%@ taglib uri="/WEB-INF/scui.tld" prefix="scuitag" %>
   <jsp:include page="/stk/include.jsp">
       <jsp:param name="title" value="Custom Screen" />
   </jsp:include>
   <script>
       Ext.ns("sc.stk");
       sc.stk.fn = function() {
           var fr = new sc.stk.flightRoute();
   /*
   sc.extn.CustomScreen is the className for the new screen.  It is available
   as a property for a screen in the designer and defaulted to
   sc.module.ClassName.  The user can change it.
   */
           sc.plat.ScreenTitle.setText(fr.Header, null, "sc-panel-belowmenu-text");
   /*
   Here, the setText(arg1, arg2, arg3) method has been used to set arg1 as
   title for a page as arg3="sc-panel-belowmenu-text".  Here, a bundle entry in
   the file: newScreen_bundle.js corresponding to Header would be picked up.
   */
           sc.plat.ScreenTitle.setDescription(" ", null, "sc-panel-belowmenu-desc");
           fr.render("mainBodyPanel");
       };
   <scuitag:includeJS
   name="['/extn/stk/flightRoute/newScreen_config.js', 
   '/extn/stk/flightRoute/newScreen.js', '/stk/flightRoute/newScreen_bundle.js']"
   callBack="sc.stk.fn"/>
   //This JSP includes the files generated through the designer:
   newScreen_config.js, newScreen.js and the localization file:
   newScreen_bundle.js
   </script>
   <jsp:include page="/stk/footer.jsp">
   

6. Rebuild the WAR file.

   The contents of the INSTALL_DIR/extensions/application package name/webpages directory are copied to the following directory:

   INSTALL_DIR/external_deployments/application package name/extn

   This directory structure exists only if a WAR file is created and then exploded in the same INSTALL_DIR/external_deployments directory.

   Any JSP file within this directory that has the same name and at the same relative directory structure as the base JSP would override the out-of-the-box JSP file.

7. Relaunch the application to display the extended changes.