Using HTML/JavaScript/AJAX

in Workflow

Presented by: Mike Gostomski & Alison Nimura Portland State University

March 21, 2011

Session ID 3742

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

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

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

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

Live Demo

Live demonstration of a Workflow using the HTML/JavaScript/AJAX features being discussed in

this presentation

Code Samples

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

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

<style> div.my_html_view { position: relative; top: -130px; left: -20px; height: 100%; width: 800px; overflow: scroll; background-color: White; }</style><div class=“my_html_view"> This is the content that will be displayed in place of the Workflow fields defined in the Custom Activity Designer…<br> <br> I can use any HTML features I want, and use JavaScript to pass data back to the Workflow form<br> <input type=“checkbox” value=“Yes” id=“my_checkbox” onclick=“my_js_function();” /> Here’s a checkbox.</div>

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 <option> tags for a select menu)

9

Copy values between Workflow form and HTML view

Session ID 3742

<script language="javascript">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; }

</script>

Workflow form contains: HTML view contains:

Text field named my_approvalText area named my_noteDisplay area containing @html_view

<select id=“my_dec”> <option value=“Approve”>Approve</option> <option value=“Reject”>Reject</option></select>

<textarea id=“my_txt”></textarea>

*See fine print at end of presentation for legal disclaimer

JavaScript Code:

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

Adding an AJAX Call to a Custom Activity

Session ID 3742

<script language="javascript"> 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://<your self-service URL and port number>’; var url_str += ‘<database package>.<database procedure>’; var url_str += ‘?<first variable>=<value>’; var url_str += ‘&<next variable>=<value>’; 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!'); } } </script>

*See fine print at end of presentation for legal disclaimer

Hit this button to load the notes: <input type=“button” onclick=“load_notes();” />

Notes will be displayed here:<div id=“note_container” style=“display:none;”></div>

Notes can also load automatically as page is loading:<script language="javascript"> load_notes();</script>

HTML Code:

PROCEDURE ajax_notes ISBEGIN FOR notes IN( SELECT my_notes FROM my_table ) LOOP htp.print(my_notes || ‘<br>’); END LOOP;END;

SQL Code (the AJAX action):JavaScript Code:

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:

<script language=“javascript”> function hide_complete_button() { var btn = document.forms['workItemForm'].elements['button_complete']; btn.style.display='none'; }

window.onload = function(){hide_complete_button};</script>

<input type=“button” value=“Validate and Submit” onclick=“validate_form();” />

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:

Problems Encountered

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

14Session 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

15Session 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://<Workflow URL>/home/newLaunch.do?workItemPK=51387 may not load data from https://<self-service URL>/<database procedure>?variable_txt=12345

Problem

Making AJAX Calls From Workflow

16

Modeler Hangs When Trying to Validate Model

ProblemLarge 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

“Fine Print” Regarding Code Samples

Session ID 3742

© 2010 Portland State UniversityAll 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

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 Gostomskimjg@pdx.edu

Alison Nimura

animura@pdx.edu

Please complete the online Session evaluation form

Session ID 3742