This example shows how you can use an external third party
library, such as jQuery, when creating a coach view.
About this task
This example provides steps for
completing the following tasks:
- Adding custom HTML code to a coach view
- Uploading a managed file with the external library assets
- Configuring the load method
event handler with a custom code
Procedure
- Add custom HTML code to a coach view:
- In the Layout page, drag the Custom
HTML Advanced item onto the canvas.
- In the HTML properties, select the Text option and then
provide your custom HTML code. For this example, you can use
the following code to define a jQuery button:
<input type="button" class="Jquerybutton" name="jbtnName" value="default"></input>
- Upload a compressed (.zip) file that contains the jQuery
library assets and style sheets and then select the individual files
to include:
- From the list of library assets, click the plus sign
next to Files and select Server
File from the list of components.
- Select your compressed jQuery library assets file (jQuery.zip for
this example) and then click Finish.
- After the upload is complete, go to the Behavior tab
of the coach view and click the plus sign next to Included
Scripts.
- In the list of server files, click the twistie next
to jQuery.zip to view the
contents of the uploaded file.
- Select a file to include. Each file to include
is selected individually. The .css files are
included in a specific order. For this example, the following files
are included in the order that they are listed:
- jquery-1.4.js
- jquery-ui-1.8.custom.min.js
- core.css
- jquery-ui-1.8.custom.css
- Under Event Handlers, select load and
then provide the custom script. For this example, you
can use the following script:
var _this = this;
$('.Jquerybutton', this.context.element).button(
{label: this.context.options._metadata.label.get("value")}).bind('click', function() {
_this.context.trigger(function() { console.log("jQuery button boundary event handled");})
});
Table 1. Notes about the scriptItem |
Description |
this.context.options._metadata.label.get("value") |
Retrieves the label value from the configuration
options. |
this.context.trigger(...) |
Triggers a boundary event when the button is
clicked. If the boundary event is wired to the next step in a Human
service diagram, clicking the button triggers a transition (to the
next step). |
- Save changes.
Results
The custom button will be available in the palette.