Implementing On-Click Functionality With the HTML Layout Painter

1. Implementing On-Click Functionality With the HTML Layout Painter Larry J Braun Education Specialist June, 2008

2. Contents • Talking to the WebFOCUS client • Controlling the output target • Controlling procedure execution • Adding validation

3. Talking to the WebFOCUS client

4. Talking to the WebFOCUS client with a “Run Button” (no variables) • The HTML Layout Painter • Includes IB proprietary JavaScript in HTML page • Writes Event Handler in the HTML code • Writes Event Hander Function (onClick) which calls OnExecute() • The name of the Event Hander Function is based on the name of the button • Writes XML section • The OnExecute() function uses attributes from the XML section

5. Talking to the WebFOCUS client with a “Run Button” (no variables) • The value of the requests_list attribute of the button matches the value of the requestid attribute of one of the <request> tags in the XML section • Some of the other attributes of the <request> tag include the following • sourcetype (procedure, URL, HTML page) • targettype (window or frame) • ibif_ex (procedure to execute) • ibic_server (report server to use) • ibiapp_app (application file folder) • Launch page use in the MR environment would have attributes with domain information

6. Talking to the WebFOCUS client with a “Run Button” (with variables – with form) • Notice, there is no submit button on the form • The interaction with WebFOCUS client is still done through the OnExecute() function • HTML Layout Painter created forms are merely design elements • There is no real difference between the function of the launch with a form and the launch page without a form

7. Talking to the WebFOCUS client with a “Run Button” (with variables – with form) • HTML Layout Painter adds one control to the page for each of the variables in the procedure. (Adding of the controls can be overridden) The control names MUST be the same as the report variable names • The XML section has a <variables> tag for each <request> tag • Within each <variables> tag there is a <variable> tag for each report variable • The values for dynamic controls are loaded by the call to the UpData() (proprietary function) from the onLoad event handler function

8. Talking to the WebFOCUS client with a frame (no variables) • The Auto Execute property is set to true • The frame is loaded by the call to the UpData() (proprietary function) from the onLoad event handler function • The targettype attribute value is iframe • The targetname attribute value is the ID of the frame (iframe1)

9. Talking to the WebFOCUS client with a frame (with variables) • A “Run Button” is added by the HTML Layout Painter • The frame is loaded by a call to the OnExecute() function from the onClick event handler of the “Run Button” • <variables> tag information is added to the XML section just as it was in the example for a “Run Button”

10. Controlling the output target

11. Controlling the output target • Add an “unbound” control to receive user’s output target selection • Use JavaScript in the run button’s onClick event handler to capture the user’s input • Use JavaScript in the run button’s onClick event handler to alter the XML section

12. Controlling procedure execution

13. Controlling procedure execution All of the available reports have exactly the same variables • Add an “unbound” control to get user’s output report selection • Use JavaScript in the run button’s onClick event handler to capture the user’s input • Use JavaScript in the run button’s onClick event handler to alter the XML section - ibif_ex (procedure to execute)

14. Controlling procedure execution Some of the available reports don’t have exactly the same variables • Add an “unbound” control to get the user’s output report selection • Use JavaScript in the run button’s onClick event handler to capture the user’s input • Use JavaScript to disable unneeded controls • Use JavaScript in the run button’s onClick event handler to alter the XML section - ibif_ex (procedure to execute)

15. Adding validation

16. Adding validation Why? • Client-side validation lessens the work load of the web server and possibly, the report server • Validation provides immediate feedback to the user and can enrich the user’s experience • Client-side validation just saves time

17. Adding validation How? • Write or find the appropriate validation functions • Before writing any validations, Google each validation you want. There are many sites that have “canned” routines. (Always make sure you know how a function works before putting it into your code.) • Determine if you want to do all validation at once, using calls for the onClick event handler of the run button. • Alternately, perform validation individually for each input control, using calls from the control's onChange or onBlur event handler

18. Adding validation How • Determine how you will notify users of error • Disabled text input boxes which are altered using JavaScript • Use of JavaScript to alter the text within <span> tags • Do not have the OnExecute() function execute unless all validations tests are passed