Link the project to a Web interaction

Now that you have created a Web interaction JSP file that uses input and output parameters, you need to customize the JSP file so that it also works with the WebFacing component. You need to enter code to create a link from your WebFacing application to invoke this Web interaction. To do this you need to add a JavaScript function in the webface.js file so that you can call the DetailPageServlet servlet with the PRODNO parameter in a new window.

To create the link:

  1. In the Navigator view, expand Project501 > Web Content > ClientScript.
  2. Double-click webface.js to open it in an editor.
  3. Scroll to the bottom of the file and enter the following lines:
    var mywindow
    	function next(app)
    {
    mywindow = window.open(app,"Details","RESIZABLE=YES, HEIGHT=700, WIDTH=800");
    }
    
  4. Click the save icon or click File > Save webface.js.

If you want to create an application similar to SV000501 in the future, you also need to change a Web setting in your DDS source to enable the image you added, and also enable the close-window link for the JavaScript function.

The RPG code included in this application is altered to show the change, however, you would need to manually make the change in future applications. Furthermore, after changing the Web settings, you would need to reconvert the DDS source.

You can check the code to duplicate the result.

To view the DDS source:

  1. Switch to the WebFacing perspective.
  2. In the WebFacing projects view, expand Project501 > DDS.
  3. Right-click <iSeriesserver > RETAILSTOR/QDDSSRC(QUERY) and select Open With > CODE Designer.
  4. After CODE Designer opens, expand SCREEN1 > ITEMSUB.
  5. Click IMAGESRC to select it.
  6. Click the Source tab.
  7. Click the Web Settings tab on the bottom-right part of the window.
    Note:
    Check the Web setting properties such as the width in pixels and the file name. In future, you have to make the same changes to your DDS source and then re-convert the source.
  8. Note the following lines in the source:
    A					PRODNO		R			0	5	6
    A					PRODNAME		R			0	5	16
    A					IMAGESRC			19A	0	5	33
    A*%%WB	13	FLD 100|100|&{IMAGESRC}
    A*%%WB	12	FLD 1 javascript:next('/Project501/DetailPageServlet?PRODNO=&{PRODNO}')
    

    Note especially that Project501 is specified in the last line. As mentioned earlier, if you want to run the SV000501 application again, you would need to change the Project501 value back to SV000501.

  9. Save the file by clicking the save icon or by clicking File > Save from the menu bar.
  10. Close the file and close CODE Designer.

For more information on how to work with DDS Source, switch to the Help perspective of the workbench and see the IBM WebFacing Tool documentation.


[ Top of Page | Previous Page | Next Page | Table of Contents ]