1. Using HTML/JavaScript/AJAX in Workflow Presented by: Mike Gostomski & Alison Nimura Portland State University March 21, 2011 Session ID 3742

2. 2 Assumptions About Our Audience HTML basics (tags, forms, styles, etc.) JavaScript basics (variables, functions, conditions, loops, etc.) What AJAX is, and how it works (in a typical web page) Workflow modeling basics (creating a basic “Custom Activity” form) Session ID 3742 To fit our presentation into the designated time slot and allow time for questions, we omit some of the basic concepts of HTML, JavaScript, and AJAX, and focus more on how to incorporate those technologies into your Workflow models. We are assuming our audience has at least a basic understanding of the following concepts, and therefore we will NOT be covering:

3. 3 How we came to use HTML in our workflow Users requested a Banner security access workflow. Users needed the ability to assign security classes via the workflow form. With the many security classes available, typing security class names into a Workflow text field would be inconvenient and error-prone. In exploring other ways of entering class names into the form we discovered we could display our own custom views over the workflow form. Session ID 3742

4. 4 How we get our HTML into Workflow forms By displaying our own HTML code over the basic Workflow custom activity, we can take advantage of all HTML features, not just the elements provided by the Workflow modeler Our HTML code is generated by a database procedure, allowing us to generate content dynamically with PL/SQL cursors JavaScript, AJAX code, and advanced style attributes can be included in these HTML views Our demo uses our own HTML code, displayed over a basic Workflow custom activity form: Session ID 3742

5. 5 Benefits of Using AJAX in Workflow Activities Information displayed on the form is current up to the minute the user opens the form, instead of up to the time the activity becomes available to the user. If an activity is not ready to be completed, a portion of the activity can be completed, or notes can be left that can be displayed to other users assigned to parallel activities. Create search functions within the Workflow activities so users will not need to navigate away from the form when more information is needed Allows a greater amount of customization and creativity in your Workflow models Session ID 3742

6. Live Demo Live demonstration of a Workflow using the HTML/JavaScript/AJAX features being discussed in this presentation

7. Code Samples Sample code illustrating the implementation of demonstrated HTML/JavaScript/AJAX features.

8. 8 Displaying Your HTML View in a Custom Activity Session ID 3742 *See fine print at end of presentation for legal disclaimer In the Workflow custom activity designer: Include a text field for every piece of data that you plan to pass back to the Workflow model to be saved in a context parameter. Create a local variable that will hold your HTML view code (and map it to the appropriate context parameter) Include a display area that references the local parameter containing your HTML view’s code Use an SQL procedure to generate any HTML code you want, which can include drop-down menus, checkboxes, JavaScript code, styles, and even AJAX calls. Load the HTML code into a context parameter using a Business Component div.my_html_view { position: relative; top: -130px; left: -20px; height: 100%; width: 800px; overflow:scroll; background-color: White; } This is the content that will be displayed in place of the Workflow fields defined in the Custom Activity Designer… I can use any HTML features I want, and use JavaScript to pass data back to the Workflow form Here’s a checkbox. Since this code is being generated in a database procedure, you can use cursors to generate content based on values in your database (ex. loop through a cursor to generate tags for a select menu)

9. 9 Copy values between Workflow form and HTML view Session ID 3742 function copy_from_workflow(){ var v_decision = document.forms['workItemForm'].elements['p_my_approval'].value; var v_note = document.forms['workItemForm'].elements['p_my_note'].value; document.getElementById('my_dec').value = v_decision; document.getElementById('my_txt').value = v_note; } function copy_to_workflow(){ var v_decision = document.getElementById('my_dec').value; var v_note = document.getElementById('my_txt').value; document.forms['workItemForm'].elements['p_my_approval'].value = v_decision; document.forms['workItemForm'].elements['p_my_note'].value = v_note; } Workflow form contains:HTML view contains: Text field named my_approval Text area named my_note Display area containing @html_view Approve Reject *See fine print at end of presentation for legal disclaimer JavaScript Code:

10. 10 Making AJAX Calls From Workflow Session ID 3742 A web-tailor entry must be created for the URL of the database procedure containing the AJAX action. (done by anyone with the web-tailor role) Some preparation is required before you can make an AJAX call: TIP: At PSU, we created a single database procedure (which we refer to as the AJAX Gateway) through which all Workflow AJAX requests must pass. This was done so that we would not need to define a web-tailor entry for every AJAX feature used in a Workflow model.

11. 11 Adding an AJAX Call to a Custom Activity Session ID 3742 function cr_req_obj() { var browser = navigator.appName; if(browser == "Microsoft Internet Explorer") return new ActiveXObject("Microsoft.XMLHTTP"); else return new XMLHttpRequest(); } var http_req = cr_req_obj(); /** This function initiates the AJAX request **/ function load_notes() { var url_str = ‘https:// ’; var url_str += ‘. ’; var url_str += ‘? = ’; var url_str += ‘& = ’; http_req.open(‘POST', url_str); http_req.onreadystatechange = load_notes_response; http_req.send(null); } /** This function handles the server`s response **/ function load_notes_response() { if (http_req.readyState == 4) { var response = http_req.responseText; if(response.indexOf('|' != -1)) { document.getElementById('note_container').innerHTML = response; document.getElementById('note_container').style.display='block'; } else alert('There was a problem with your AJAX request!'); } *See fine print at end of presentation for legal disclaimer Hit this button to load the notes: Notes will be displayed here: Notes can also load automatically as page is loading: load_notes(); HTML Code: PROCEDURE ajax_notes IS BEGIN FOR notes IN( SELECT my_notes FROM my_table ) LOOP htp.print(my_notes || ‘ ’); END LOOP; END; SQL Code (the AJAX action): JavaScript Code:

12. 12 Form Validation Session ID 3742 *See fine print at end of presentation for legal disclaimer In your database procedure, create some JavaScript code to hide the Workflow “Complete” button. Since, the buttons do not yet exist when this code runs, you will need to call this code from the page’s “onload” attribute: function hide_complete_button() { var btn = document.forms['workItemForm'].elements['button_complete']; btn.style.display='none'; } window.onload = function(){hide_complete_button}; function validate_form(){ if( … ) alert(‘You must fix this!’); else document.forms['workItemForm'].elements['button_complete'].click(); } In your HTML view, create a new button that will launch your validation code before submitting the form:

13. Problems Encountered Some problems encountered while developing our Workflow, and how we solved them.

14. 14 Session ID 3742 Problem If JavaScript is entered directly into an activity, even a small change requires dropping and re-creating the entire activity Solution 1.Use a database procedure to generate the JavaScript code 2.Save the generated code into a context parameter 3.Create a local parameter in the custom activity, and map the JavaScript code (context parameter) to the local parameter 4.Display the local parameter on your custom activity form Using JavaScript in Custom Activities

15. 15 Session ID 3742 Solution We were in violation of the “Same-Origin Policy” Workflow was trying to use the database access descriptor (DAD) on our Oracle server. One of our DBAs had to create an additional DAD on our Workflow server Google “Same-Origin Policy” for more information Security Error: Content at https:// /home/newLaunch.do?workItemPK=51387 may not load data from https:// / ?variable_txt=12345 Problem Making AJAX Calls From Workflow

16. 16 Modeler Hangs When Trying to Validate Model Problem Large Workflow with many activities cause the validator to hang Solutions Increase memory allocations in the Workflow configuration script This helped temporarily… but not a permanent solution Reduce the number of activities in the model Move as much processing as possible to database procedures Save results into temporary tables Load resulting data into context parameters using one Workflow activity Use AJAX features to query your database, instead of creating dedicated Workflow activities that do nothing but call an SQL query Session ID 3742

17. 17 “Fine Print” Regarding Code Samples Session ID 3742 © 2010 Portland State University All rights reserved. Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met:  Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.  Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.  Neither the name of Portland State University nor the names of its contributors may be used to endorse or promote products derived from this software without specific prior written permission. THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.

18. 18 SunGard or its subsidiaries in the U.S. and other countries is the owner of numerous marks, including “SunGard,” the SunGard logo, “Banner,” “PowerCAMPUS,” “Advance,” “Luminis,” "DegreeWorks," "fsaATLAS," “Course Signals,” and “Open Digital Campus.” Other names and marks used in this material are owned by third parties. © 2010 SunGard. All rights reserved. Session ID 3742 Session Sponsor Thank You! Mike Gostomski mjg@pdx.edu mjg@pdx.edu Alison Nimura animura@pdx.edu Please complete the online Session evaluation form Session ID 3742