How to include JavaScrpt in a Page Flow

From OpenQuote

Note: Requires OpenQuote 1.2 or later.

Note: This page is under construction

OpenQuote aims to include a complete set of reusable UI widgets from which you can build all the forms you need to support your product's life-cycle; and many of these widgets make use of JavaScript to improve user experiance. However, you may want to perform specific actions to further improve the user's experiance beyond those that OpenQuote offers by default. JavaScript injection provides product based support for just this type of requirement.

In this HOWTO we will look at how JavaScript can be placed into a web page generated by a product's PageFlow, and work through an example based on one of the demonstration products.

The key to adding JavaScript to a generated page in the PageFlow's PageScript element. This element may appear anywhere within a page, and it may refer to JavaScript stored as part of the product or simply by URL, or it may define the JavaScript inline. It also supports the option of placing the generated output into the HTML page's header, or into the body relative to the position of the PageScript element within the page.

A few examples of a PageScript and the output it generates will help make the point:

[edit] Including JavaScript defined within the product

In this example, the product includes the file "MyJavaScript.js" for which the PageFlow places a reference into the generated page header:

<pageFlow id="QuotationPageFlow" xsi:type="java:com.ail.openquote.ui.PageFlow" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    ...
    <questionPage id="Proposer" title="Proposer's Details">
         <pageScript url="product:~/MyJavaScript.js" pageHeader="true"/>
         ...
    </questionPage>
    ...
</pageFlow>

This will generate the following when the page in rendered:

<TBD>

[edit] Including JavaScript in the body of the generated page.

In both examples above, the pageHeader="true" attribute was used to force the reference to be included in the header of the generated page. To include the reference within the body, simply leave that attribute out:

<pageFlow id="QuotationPageFlow" xsi:type="java:com.ail.openquote.ui.PageFlow" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    ...
    <questionPage id="Proposer" title="Proposer's Details">
         <pageScript url="product:~/MyJavaScript.js" />
         ...
    </questionPage>
    ...
</pageFlow>

This will generate the following when the page in rendered:

<TBD>

Adding inline JavaScript

If you need to place the script itself directly into the body of the generated page use the following approach.

<pageFlow id="QuotationPageFlow" xsi:type="java:com.ail.openquote.ui.PageFlow" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance">
    ...
    <questionPage id="Proposer" title="Proposer's Details">
         <pageScript script="alert('Hello World!');" />
         ...
    </questionPage>
    ...
</pageFlow>

This will generate the following when the page in rendered:

<TBD>

[edit] Using JavaScript injection to add a totaling filed

In this section we will walk through the process of adding some JavaScript to the LifePlus demonstration product. The scenario is this: We have been asked to add three questions to the product so the Underwriter can asses how dangerous the proposer's pastimes are: "What percentage of your free time do you spend doing: a) really dangerous things; b) kinda dangerous things; c) really safe things." So, we are collecting three percentage values. To make the user's like a little easier we will add a fourth field to display the total and add JavaScript to total up the three values as the user types. We can also use this total field during page validation - so the user cannot move on unless the total value is "100%".

The first step is to add the new questions to the quotation, and to the PageFlow. Start by editing the product's Quotation.xml file, and adding the following new attributes to the "life asset":

<attribute id="reallyDangerousPastimes" value="0" format="number,percentage"/>
<attribute id="kindaDangerousPastimes" value="0" format="number,percentage"/>
<attribute id="reallySafePastimes" value="0" format="number,percentage"/>
<attribute id="totalPastimes" value="0" format="number,percentage"/>

Now edit the product's PageFlow, and update it to include the following lines:

<questionSection title="What percentage of your free time do you spend doing:" binding="asset[0]">
    <question title="a) really dangerous pastimes" binding="attribute[id='reallyDangerousPastimes']" />
    <question title="b) kinda dangerous pastimes" binding="attribute[id='kindaDangerousPastimes']" />
    <question title="c) really safepastimes" binding="attribute[id='reallySafePastimes']" />
    <question binding="attribute[id='totalPastimes']" />
</questionSection>

<TBD>