BizFlow WebMaker Tutorial

Transcription

BizFlow WebMaker Tutorial
BizFlow 12.1
WebMaker Tutorial
© 1999–2013 BIZFLOW CORP. ALL RIGHTS RESERVED. THIS DOCUMENTATION IS PROTECTED BY COPYRIGHT AND DISTRIBUTED
UNDER A LICENSE THAT RESTRICTS ITS USE, COPYING, AND DISTRIBUTION. NO PART OF THIS DOCUMENTATION MAY BE
REPRODUCED IN ANY FORM OR BY ANY MEANS WITHOUT THE PRIOR WRITTEN AUTHORIZATION OF BIZFLOW CORP. WHILE
EVERY PRECAUTION HAS BEEN TAKEN IN THE PREPARATION OF THIS DOCUMENTATION, BIZFLOW CORP. ASSUMES NO
REPSONSIBILITY FOR ERRORS OR OMISSIONS. THIS DOCUMENTATION AND THE FEATURES DESCRIBED HEREIN ARE SUBJECT TO
CHANGE WITHOUT NOTICE.
BIZFLOW CORP. ASSUMES NO RESPONSIBILITY REGARDING THE ACCURACY OF THE INFORMATION THAT IS PROVIDED BY
BIZFLOW CORP. AND USE OF SUCH INFORMATION IS AT THE RECIPEINT’S OWN RISK.
BizFlow and OfficeEngine are registered trademarks and/or trademarks of BizFlow Corp. in the United States and/or other
countries.
All other trademarks are the property of their respective owners.
The example organizations, companies, persons, server and object IDs, and email addresses depicted herein are
fictitious. No association with any real or actual entity is intended or should be inferred.
This document may contain suggested guidelines that can be followed in order to implement integration with a thirdparty software product. As such, any files that accompany this document are templates that can be used to quick-start
the integration. Because BizFlow Corp. has no control over the evolution of the third-party software, we cannot be held
responsible for any modifications that may need to be made in order to fully implement this integration as a result. As the
third-party software evolves, full integration may require additional procedures and may require alteration or additions to
the template files.
This guide is intended for use with BizFlow 12.1 and BizFlow WebMaker 5.
WBMKR121_03012013
BizFlow WebMaker Studio
Tutorial
Contents
Overview ............................................................................................................................................................. 1
Prerequisites ........................................................................................................................................................ 1
Change Web Browser Settings ................................................................................................................... 2
Install Adobe SVG Viewer at First WebMaker Studio Use ...................................................................... 4
How to use BizFlow Process Variables in a WebMaker Form .................................................................... 7
Step 1— Create a Process Definition ........................................................................................................ 8
Step 2— Launch BizFlow WebMaker Studio ........................................................................................... 10
Step 3— Create a Workspace ................................................................................................................. 11
Step 4— Create a Project ......................................................................................................................... 12
Step 5— Design the Project....................................................................................................................... 13
Step 6— Define Form Controllers for Process Variables ....................................................................... 15
Step 7— Set Form Field Visibility ................................................................................................................ 19
Step 8— Make Fields Mandatory ............................................................................................................. 25
Step 9— Validate Field Values ................................................................................................................. 27
Step 10— Add Events ................................................................................................................................. 30
Step 11— Perform a Functional Test ........................................................................................................ 31
Step 12— Verify BizFlow Web Service URLs ............................................................................................. 36
Step 13— Publish Your WebMaker Form to BizFlow .............................................................................. 38
Step 14— Register Your WebMaker Application in BizFlow ................................................................ 39
Step 15— Initiate Your Process in the BizFlow Web Client ................................................................... 45
How to use a BizFlow Web Service in a WebMaker Form ....................................................................... 50
Step 1―Create a Process Definition ........................................................................................................ 51
Step 2―Launch BizFlow WebMaker Studio ............................................................................................. 55
Step 3―Create a Workspace ................................................................................................................... 57
Step 4―Create a Project ........................................................................................................................... 58
Step 5―Design the Project......................................................................................................................... 59
Step 6― Modify BizFlow Web Service URLs ............................................................................................. 76
Step 7―Perform a Functional Test ............................................................................................................ 77
Step 8―Publish Your Form to BizFlow........................................................................................................ 80
Step 9―Register Your WebMaker Application in BizFlow..................................................................... 81
Step 10―Initiate Your Process in the BizFlow Web Client ..................................................................... 88
i
BizFlow WebMaker Studio
Tutorial
Accessing a Database from WebMaker Forms ........................................................................................ 91
Step 1―Create a Process Definition ........................................................................................................ 92
Step 2―Launch BizFlow WebMaker Studio ............................................................................................. 93
Step 3―Create a Workspace ................................................................................................................... 94
Step 4―Create a Project ........................................................................................................................... 95
Step 5―Design the Project......................................................................................................................... 96
Step 6―Perform a Functional Test of Your New Application ............................................................102
Step 7―Design a Form to Add Accounts .............................................................................................103
Step 8―Perform a Functional Test for Adding an Account ..............................................................115
Step 9―Design a Form to Update Accounts .......................................................................................117
Step 10―Perform a Functional Test for Updating Accounts .............................................................127
Step 11―Design a Form to Delete an Account...................................................................................128
Step 12―Perform a Functional Test for Deleting an Account...........................................................132
Step 13―Publish Your Form to BizFlow ...................................................................................................133
Step 14―Register Your WebMaker Application in BizFlow ................................................................135
Step 15—Initiate Your Process in the BizFlow Web Client ..................................................................141
ii
BizFlow WebMaker Studio
Tutorial
Overview
This Tutorial provides instructions on how to use various features of BizFlow when creating Webbased forms using BizFlow WebMaker.
This guide contains three separate tutorials:
•
Using BizFlow Process Variables in WebMaker Forms
•
Using a BizFlow Web Service in WebMaker Forms
•
Accessing a Database from WebMaker Forms
Prerequisites
Important!
This tutorial is designed for BizFlow 12.1 and WebMaker 5.
Verify that you are using the correct tutorial for your
version of BizFlow.
•
You will need both a Designer and WebMaker Designer license to perform the tasks in this
tutorial.
•
This tutorial assumes that you know how to use BizFlow Process Studio and other features
of BizFlow.
1
BizFlow WebMaker Studio
Tutorial
Change Web Browser Settings
When you’re using WebMaker, you need to set your browser settings to make pop-up windows
open in a new tab. Instructions in this section are given for Internet Explorer.
1. In Internet Explorer, select the Tools menu and then select Internet Options.
2. Click Settings in the Tabs section of the General tab.
2
BizFlow WebMaker Studio
Tutorial
3. Select Let Internet Explorer decide how pop-ups should open and then click OK twice to
save your settings.
3
BizFlow WebMaker Studio
Tutorial
Install Adobe SVG Viewer at First WebMaker Studio Use
Note: Complete this step if you are using Internet Explorer 7 or 8 as your
default browser. Firefox, Safari, and Chrome support SVG rendering, so you
do not need to install the Adobe SVG Viewer.
If this is the first time you are using WebMaker Studio and you have never used the Adobe SVG
Viewer, WebMaker will ask you to install the Adobe SVG Viewer.
1. Click OK to download Adobe SVG Viewer.
2. Click the Click here hyperlink to begin installing the Adobe SVG Viewer.
3. Click Run.
4. Click the top yellow toolbar and select Run ActiveX Control from the pop-up menu.
4
BizFlow WebMaker Studio
Tutorial
5. Click Run.
6. Click OK.
5
BizFlow WebMaker Studio
Tutorial
Chapter 1.
How to use BizFlow Process Variables in a WebMaker Form
6
BizFlow WebMaker Studio
Tutorial – Chapter 1
How to use BizFlow Process Variables in a WebMaker Form
BizFlow uses Process Variables to allow you to store simple business data. It is easy and
convenient to use process variables because you don’t need external storage such as a
database. They can even be used to control the flow of a process, allowing you to control the
flow of your process easily by just changing the value of process variables.
This section explains how to use a BizFlow process definition with process variables in a
WebMaker form application.
BizFlow WebMaker Studio must be launched from BizFlow Process Studio. You will need a BizFlow
account that has both BizFlow Designer and WebMaker Designer licenses.
The BizFlow WebMaker form you will be creating will look like the following:
7
BizFlow WebMaker Studio
Tutorial – Chapter 1
Step 1—Create a Process Definition
For this tutorial you will need a published process definition in BizFlow.
1. Launch BizFlow Process Studio.
2. Log in to BizFlow as a user who has both Designer and WebMaker Designer licenses.
3. Create a project or select an existing project.
4. Navigate to the Process Definitions folder, then do one of the following:
•
Go to File | New | Process Definition
•
Right-click the Process Definitions folder, then select New Process Definition from
the pop-up menu.
5. Draw a process like the one shown below:
•
•
Use Initiator as the participant of the activities.
No application needs to be assigned.
6. Open the Process Variable tab of Process Property.
Right-click a blank area on your process definition and select Process Variable from the
pop-up menu.
8
BizFlow WebMaker Studio
Tutorial – Chapter 1
7. Create five process instance variables as shown above and click OK when you’re done.
To add a new process variable, follow the steps below:
a. Click Process Instance Variables.
b. Click Add.
c. Enter the variable name.
d. Click the Type field to change the data type. The default type is String.
e. Add a description if you’d like.
f.
Click Add again to confirm your selections.
8. Add the process definition to the server:
a. Click the Add to Server icon
in the Process Modeler toolbar.
b. Expand your project and select Process Definitions.
c. Enter WMTutorial1 for the name of the process definition.
d. Change the status to Publishable.
e. Click OK.
9. Publish the process definition:
a. Right-click the project name (not the process definition name) and select
Publish… from the pop-up menu.
b. Expand the Process Definitions folder.
c. Select the process definition you just created and click >.
d. Click Next.
e. Select the process definition from the Objects to publish list and click >.
f.
Click Finish.
9
BizFlow WebMaker Studio
Tutorial – Chapter 1
Step 2—Launch BizFlow WebMaker Studio
1. Click the BizFlow WebMaker
in the BPS toolbar to launch BizFlow WebMaker Studio.
Notes:
•
•
If the WebMaker
icon is not enabled, make sure that you have selected your
project in the BizFlow Explorer pane.
If there is no icon, make sure that your user account has WebMaker Designer
license and authority.
2. You will be prompted for your login information. Click OK.
3. Once WebMaker has initialized, a new browser window will open:
Note:
If you see a message asking you to install the Adobe SVG Viewer installation,
see Install Adobe SVG Viewer at First WebMaker Studio Use.
10
BizFlow WebMaker Studio
Tutorial – Chapter 1
Step 3—Create a Workspace
The next step is to create a WebMaker Workspace. You can also use an existing Workspace and
skip this step.
1. If necessary, click Close to close the Getting Started with WebMaker window.
2. Select New Project from the Design menu.
By default, WebMaker will open the first Workspace in the list.
3. To create a new Workspace, enter a name in the text box.
This tutorial uses a Workspace called “WebMakerTutorial”.
4. Click Create New Workspace.
5. The new Workspace you just created appears in the Workspaces list.
11
BizFlow WebMaker Studio
Tutorial – Chapter 1
Step 4—Create a Project
The next step is to create a WebMaker project. A project can contain Web applications.
1. If you have not already done so, open the Workspace you created in the previous step.
This tutorial uses a Workspace called “WebMakerTutorial”.
2. To create a new project, enter a name in the text box.
This tutorial uses a Workspace called “AppTutorial1”.
3. Click Create New Project.
Be patient. It may take a few minutes to create the project.
4. The new project you just created will open to the Application Map.
12
BizFlow WebMaker Studio
Tutorial – Chapter 1
Step 5—Design the Project
Next, you will design your WebMaker project.
1. Go to the Application Map to begin designing your form application.
2.
Click Page Design in the toolbar to begin designing your Web form application.
The Page Design area will open in a new tab.
3. Go to the Data Source tab on the left and choose BizFlow as the data source type.
4. Enter WMTutorial1 for Definition Name and click the Search link.
13
BizFlow WebMaker Studio
Tutorial – Chapter 1
Note:
If the process definition does not appear in the search results, make sure that the
process definition was published in BizFlow Process Studio.
5. Click the Process Name or Process ID of the process definition.
You will then see the schema of the process definition including the process variables
that were created in BizFlow Process Studio.
14
BizFlow WebMaker Studio
Tutorial – Chapter 1
Step 6—Define Form Controllers for Process Variables
You need to define form controls such as an input box or a combo box to handle the process
variables.
1. Move your mouse over Process Variables in the process definition schema, then clickand-drag it onto the Page View canvas.
•
If you only want to create form controls for some of the process variables, drag
each process variable to the Page View area individually.
2. Make sure the saveNewForm action is selected, then click OK. This is only asked the very
first time.
15
BizFlow WebMaker Studio
Tutorial – Chapter 1
3. The Page View Tab shows a preview of the form.
By default, WebMaker arranges the process variables in alphabetical order.
4. You can change the order of the form controllers by clicking and dragging them.
For example, click the Name field and place it above the Address field.
Right now all of the form controllers are text fields, except for DOB.
5. Select Gender in the Page View tab. Go to the Palette tab on the left, drag a Select Box
control from the Palette tab onto the Gender field.
This will change the Gender field from a textbox to a drop-down list.
16
BizFlow WebMaker Studio
Tutorial – Chapter 1
6. Expand Data Constraints on the Properties tab.
•
We will need to remove the existing Select Box Options before adding new values.
7. Select ListItem1 in the Data Value box, then click X to remove it from the list.
Repeat for all remaining values.
17
BizFlow WebMaker Studio
Tutorial – Chapter 1
8. To add Select Box Options, enter values in the input boxes for Data Value and
Display Text, then click the Add link. Enter the following values:
To see the values in the drop-down list, preview the page.
9. Click Preview in the toolbar. The preview will open in a new tab. Click the Gender page
control.
The first list item should be a blank space, followed by the two values in the order they
were entered.
18
BizFlow WebMaker Studio
Tutorial – Chapter 1
Step 7—Set Form Field Visibility
In many cases, you may need to disable form fields. For example, you may want to make them
read-only or hide runtime values. In this tutorial we disable the Name field and hide the Gender
field when the activity name of a workitem is Review Data.
1. Go to the page View tab of the Page Design area.
2. Right-click the Name control and select Disable field based on server data.
19
BizFlow WebMaker Studio
Tutorial – Chapter 1
3. Go to the Bindings Tab for the Name field.
We want to create a ‘Disable If’ statement that will use the Name of an Activity.
20
BizFlow WebMaker Studio
Tutorial – Chapter 1
4. Drag Name under Activity from the process definition schema to the Disable If field.
You can see that “/mvc:eForm/mvc:Data/WorkitemContext/Activity/Name” is inserted in
the Disable If field.
Next, we need to specify the value of the Activity Name.
5. Change the ‘Disable If’ statement to:
/mvc:eForm/mvc:Data/WorkitemContext/Activity/Name[. = "Review Data"]
This changes the statement to read “Disable the current field when the activity name
equals ‘Review Data’”.
6. Next, you will hide a field. Click the Page View tab.
21
BizFlow WebMaker Studio
Tutorial – Chapter 1
7. Right-click the Gender control and select Remove field based on server data.
22
BizFlow WebMaker Studio
Tutorial – Chapter 1
8. Go to the Bindings tab for the Gender field.
We want to create a ‘Remove If’ statement that will use the Name of an Activity.
23
BizFlow WebMaker Studio
Tutorial – Chapter 1
9. Drag Name under Activity from the process definition schema to the Remove If field.
You can see that “/mvc:eForm/mvc:Data/WorkitemContext/Activity/Name” is inserted in
the Remove If field.
Next, we need to specify the value of the Activity Name.
10. Change the ‘Remove If’ statement to:
/mvc:eForm/mvc:Data/WorkitemContext/Activity/Name[. = "Review Data"]
This changes the statement to read “Remove the current field when the activity name
equals ‘Review Data’”.
11. Click Save in the toolbar.
Note:
After saving, you can check the status in the lower left corner:
24
BizFlow WebMaker Studio
Tutorial – Chapter 1
Step 8—Make Fields Mandatory
This step explains how to make a field mandatory and display a mandatory mark for a form field.
By default, all fields are mandatory. To make a field optional, you have to turn off the
mandatory option for that field.
1. Select the
icon on to the Page View Tab to display Page Level Properties.
2. Select Properties Tab in the right panel.
3. Select Error Display Details from the available controls.
4. Check the Show Local Error Message check box.
5. Uncheck the Show Popup Alert for Errors check box.
6. Expand Mark Mandatory Fields.
7. Check the Apply Marker to Mandatory Fields check box.
25
BizFlow WebMaker Studio
Tutorial – Chapter 1
8. Change Marker Location to After Label.
The Marker Text “*” is displayed next to the mandatory fields:
9. Click Address on the Page View tab.
10. Expand Data Constraints on the Properties tab.
11. Uncheck the Mandatory checkbox.
The mandatory field marker will be removed from the Page View.
12. Click Save.
26
BizFlow WebMaker Studio
Tutorial – Chapter 1
Step 9—Validate Field Values
Next, you will set up field validation for the form fields: the Name field value should only allow
alphabetic characters and spaces; the DOB field value should display date only (not date and
time); and, the Telephone field value should be shown in a standard U.S. format.
1. Select Name on the Page View tab.
2. Expand Data Constraints on the Properties tab.
3. Locate the Pattern (Regular Expression) field. Select Letters and Spaces Only from the
drop-down list.
27
BizFlow WebMaker Studio
Tutorial – Chapter 1
4. Select DOB on the Page View tab.
5. Expand Value Conversions on the Properties tab.
6. Locate the Data Date Format field. Select Standard Date from the drop-down list.
7. Locate the Display Date Format field. Select US Date from the drop-down list.
28
BizFlow WebMaker Studio
Tutorial – Chapter 1
8. Select Telephone on the Page View tab.
9. Expand Data Constraints on the Properties tab.
10. Locate the Pattern (Regular Expression) field. Select US Phone Number from the
drop-down list.
11. Expand Value Conversions on the Properties tab.
12. Locate the Display Mask field. Select US Phone Number from the drop-down list.
13. Click Save.
29
BizFlow WebMaker Studio
Tutorial – Chapter 1
Step 10—Add Events
Next, you will set up form events. Your WebMaker form will open in the BizFlow Work Item
Handler, which needs controls to capture certain events (such as saving form data).
1. Go to the Page Design tab.
2. Select Work Item Handler Controls from the Palette.
3. Drag Complete Requested, Save Requested, and Exit Requested to the Page View.
Note:
Work Item Handler Controls do not display as visible controls on the form during
runtime.
4. Click Save.
30
BizFlow WebMaker Studio
Tutorial – Chapter 1
Step 11—Perform a Functional Test
1. Click Run Test in the toolbar to test your Web form application.
Be patient; it may take a few moments to launch the test environment. The test area will
open in a new tab.
The test area shows parameters that will be passed from the BizFlow Workitem Handler
when your application runs within it. However, in this case we are working in a local
testing environment, so there is no need to change these values.
2. Click Call WebMaker Application to test your form. The form will display, similar to the
Preview, however in the test environment you can interact with the form.
3. Enter data in the form, then click Save.
4. The form refreshes but the data was not saved. Let’s find out why.
5. Click View Debugger in the toolbar.
The debugger will open in a new tab. WebMaker maintains detailed logs to assist with
troubleshooting. For example, you can view your form’s incoming and outgoing data.
31
BizFlow WebMaker Studio
Tutorial – Chapter 1
6. By investigating the logs, you can see that only two process variables are being updated:
NumericPV and StringPV.
32
BizFlow WebMaker Studio
Tutorial – Chapter 1
7. By going further back in the log history, you can see that only two process variables are
returned to the WebMaker form: NumericPV and StringPV.
We need to create process variables in the local test environment to store the form data.
8. Click Run Test in the toolbar again. The test area will reopen.
33
BizFlow WebMaker Studio
Tutorial – Chapter 1
9. Click the Workitem Context Administration link.
10. The Workitem Context Details page will display in a new browser tab (outside of
WebMaker Studio).
In the Workitem Context Details window you can create a simulated environment for
your web application to run. You can change the process name, add process variables
with specific values, change user information to suit your application needs and test
different application behaviors.
The updated Workitem Context is saved locally on your computer and will be available
in your next testing session.
34
BizFlow WebMaker Studio
Tutorial – Chapter 1
11. To store the form data in your local testing environment, add process variables for each
of the process variables you defined in the process definition.
Note:
This does not affect the process definition or the live BizFlow environment.
a. Click a blank field in the Name column (beneath the Process Variables tab).
b. Enter the process variable name.
c. Select the value type from the drop-down list.
d. Enter a value for the process variable.
e. Click Insert to add the process variable to the test environment.
12. Click Save Workitem Context.
13. Go back to the WebMaker tab.
14. Click Call WebMaker Application to test your form again.
15. The values you entered for each of the process variables should be displayed in the form.
Note the following changes between the process variable input values and the runtime
display values:
•
DOB displays as MM/DD/YYYY instead of YYYY/MM/DD.
•
Gender displays as Male whereas the value is M.
•
Telephone is formatted with a display mask even though the value is numerals
only.
35
BizFlow WebMaker Studio
Tutorial – Chapter 1
Step 12—Verify BizFlow Web Service URLs
BizFlow WebMaker Studio automatically creates BizFlow Web Service objects for your project
when you create a project but the URL of the services may not point to your BizFlow server
correctly, so it’s a good practice to verify the URLs before you publish.
1. Go to the Publish menu and select Publish Settings.
2. Click Edit.
3. Click External Calls. Verify the URL for each Web Service.
You can test whether the URL of a Web Service is valid using a Web browser with the URL
of the Web Service together with the parameter “?wsdl”.
For example, if you want to test the URL of HWActivityService_Proxy-HWActivity, copy the
URL from the Publish Settings Details, then add ?wsdl to the end of the URL:
http://qa-bf12:8080/bizflow/webservice/HWActivity.hws?wsdl
Call the URL in a Web browser and you should see WSDL xml in the browser:
36
BizFlow WebMaker Studio
Tutorial – Chapter 1
4. If you made changes to the publication environment, click Save, then click Close to
exit the Publish Settings dialog.
37
BizFlow WebMaker Studio
Tutorial – Chapter 1
Step 13—Publish Your WebMaker Form to BizFlow
You must publish a WebMaker form to BizFlow before you can use it. You will use BizFlow
WebMaker Studio to publish an application to the place where the bizflowwebmaker Web
application is deployed on the BizFlow Web server.
1. Click Publish in the toolbar to publish to the default publication environment.
All active WebMaker tabs will be disabled while the publish is in progress.
•
Publish to BizFlow should be the default publication environment.
2. When the publish has finished, WebMaker will re-enable the current tab.
Note:
The status will display in the lower left corner of the WebMaker window.
3. To verify that the publish was successful, call the application in a web browser.
The URL of your application is:
http://YOUR_BIZFLOW_WEB_SERVER:PORT/
bizflowwebmaker/YOUR_WEBMAKER_PROJECT_NAME/bizflowEntry.do
Where:
YOUR_BIZFLOW_WEB_SERVER: The BizFlow Web server name.
PORT: The port number of your BizFlow Web server.
YOUR_PROJECT_NAME: The name of your project, in this case AppTutorial1.
For example:
http://qa-bf12:8080/bizflowwebmaker/AppTutorial1/bizflowEntry.do
38
BizFlow WebMaker Studio
Tutorial – Chapter 1
Step 14—Register Your WebMaker Application in BizFlow
After creating a WebMaker form application, you must add it to BizFlow in order to use it as an
application in your process definition.
This step involves registering your WebMaker application in BizFlow, adding the application to a
process definition, and then publishing the project to the Operational Environment.
1. Return to your project in BizFlow Process Studio.
2. Navigate to the Application folder, then do one of the following:
•
Go to File | New | New Application
•
Right-click the Application folder, then select New Application from the pop-up
menu.
3. Enter the name of your application. It is strongly recommended that you use the same
name as your WebMaker project name. This tutorial uses “AppTutorial1”.
4. Select BizFlow WebMaker as the application type.
5. Click Next.
39
BizFlow WebMaker Studio
Tutorial – Chapter 1
6. If necessary, select your WebMaker server from the drop-down list and verify the URL.
The URL should look like the following:
http://YOUR_BIZFLOW_WEB_SERVER:PORT/bizflowwebmaker
/YOUR_WEBMAKER_PROJECT_NAME/bizflowEntry.do
Where:
YOUR_BIZFLOW_WEB_SERVER: The BizFlow Web server name.
PORT: The port number of your BizFlow Web server.
YOUR_WEBMAKER_PROJECT_NAME: The name of your project.
For example:
http://qa-bf12:8080/bizflowwebmaker/AppTutorial1/bizflowEntry.do
7. Click Next.
40
BizFlow WebMaker Studio
Tutorial – Chapter 1
8. Check to be sure all information is correct and that the Status is Publishable;
then click Finish.
9. Next, you will add your WebMaker application to a process definition.
Open the process definition (“WMTutorial1” in this example).
10. Add the WebMaker application you just registered:
a. Right-click the background of your process definition and select Application from the
pop-up menu.
b. Select the folder that contains the desired application from the Global Application
List. This will display the available applications in the lower left box.
c. Locate the desired application from the list that displays.
d. Click the name of the application to add and then click the right arrow button.
e. The application will appear in the Process Application List.
f.
Double-click the Mandatory field and select Don’t care.
Note:
This will prevent the BizFlow web client from displaying certain warning
messages during runtime.
g. Click OK.
41
BizFlow WebMaker Studio
Tutorial – Chapter 1
Tip:
To quickly add a registered application to a process definition, locate the
application in the BizFlow Explorer pane, then click-and-drag it onto the process
definition design area, or directly onto an activity.
11. Now that the application is associated with your process definition, assign the
application to each normal activity:
a. Double-click the Enter Data activity to open the Normal Activity Property dialog
box and go to the Application tab.
b. Select AppTutorial1 from the Application List, and then click the right arrow button.
c. Click OK.
12. Perform the same steps to add the application to the Review Data activity.
42
BizFlow WebMaker Studio
Tutorial – Chapter 1
13. Check in the process definition.
14. Publish the process definition:
a. Right-click your project name (not the process definition) and select Publish…
from the pop-up menu.
b. Expand Process Definitions in the Publish dialog.
c. Select WMTutorial1 under Process Definitions and click >.
Note:
Because you have associated the application AppTutorial1 with the process
definition WMTutorial1, they both appear in the Objects to Publish list.
d. Click Next.
43
BizFlow WebMaker Studio
Tutorial – Chapter 1
e. Go to the Application tab at the second step.
f.
Select AppTutorial1 under Applications and click >.
g. Click Finish.
44
BizFlow WebMaker Studio
Tutorial – Chapter 1
Step 15—Initiate Your Process in the BizFlow Web Client
After publishing the project to the Operational Environment you can initiate the process in the
BizFlow Web Client.
1. Log in to BizFlow.
2. Initiate the process definition you just published:
a. In the main navigation bar, click Start New.
b. Locate WMTutorial1 in the Standard Processes section.
c. Click Start to initiate a new process instance.
d. Select Open Work Item as soon as initiated.
e. Click Initiate.
45
BizFlow WebMaker Studio
Tutorial – Chapter 1
3. The process opens to the first activity in the process definition.
46
BizFlow WebMaker Studio
Tutorial – Chapter 1
4. Do NOT fill out the form and click Complete.
When you try to complete the workitem without filling out the mandatory fields,
the form displays an error indicator next to mandatory fields.
5. Fill out the form and click Complete. The complete dialog displays.
6. Click Send. The first workitem is marked complete and the process moves to the second
activity in the process definition.
7. Go to the My Work tab and locate the second workitem, Review Data.
47
BizFlow WebMaker Studio
Tutorial – Chapter 1
8. Click the name or ID to open the workitem.
•
The Name field is not editable because it was disabled.
•
The Gender field does not display because it was hidden.
48
BizFlow WebMaker Studio
Tutorial
Chapter 2.
How to use a BizFlow Web Service in a WebMaker Form
49
BizFlow WebMaker Studio
Tutorial – Chapter 2
How to use a BizFlow Web Service in a WebMaker Form
This section explains how to use a BizFlow Web Service in a WebMaker form application.
BizFlow WebMaker Studio must be launched from BizFlow Process Studio. You will need a BizFlow
account that has both BizFlow Designer and WebMaker Designer licenses.
In this exercise, you will be creating a BizFlow WebMaker Form that uses a BizFlow Web service to
search for user names, then assign the selected user name to the next activity in a process.
50
BizFlow WebMaker Studio
Tutorial – Chapter 2
Step 1―Create a Process Definition
For this tutorial you will need a published process definition in BizFlow.
1. Launch BizFlow Process Studio.
2. Log in to BizFlow as a user who has both Designer and WebMaker Designer licenses.
3. Create a new project or select an existing project.
4. Navigate to the Process Definitions folder, then do one of the following:
•
Go to File | New | Process Definition in the BPS toolbar
•
Right-click the Process Definitions folder, then select New Process Definition from
the pop-up menu.
5. Draw a process like the one shown below:
6. Go to the Process Variable tab of Process Property by doing one of the following:
•
Go to File | Process Property in the Process Modeler toolbar
•
Right-click a blank area on your process definition and select Process Variable
from the pop-up menu.
51
BizFlow WebMaker Studio
Tutorial – Chapter 2
7. Select Process Instance Variables, then click Add.
a. Enter participant as the variable name.
b. Select Participant as the variable type.
c. Click OK.
52
BizFlow WebMaker Studio
Tutorial – Chapter 2
8. Set the Participant of <Activity 1> to Initiator:
a. Right-click <Activity 1> and select Participant from the pop-up menu.
b. Click the right arrow button to add Initiator to the participant list.
c. Click OK.
53
BizFlow WebMaker Studio
Tutorial – Chapter 2
9. Set the Participant of <Activity 2> to Defined by Variable:
a. Right-click <Activity 2> and select Participant from the pop-up menu.
b. Select Defined by Variable from the Type drop-down list.
c. Click Modify and select participant as the Process Instance Variable.
d. Click OK.
e. Click the right arrow button to add the participant variable to the list.
f.
Click OK.
10. Add the process definition to the server:
a. Click the Add to Server icon
in the Process Modeler toolbar.
b. Expand your project and select Process Definitions.
c. Enter WMTutorial2 for the name of the process definition.
d. Change the status to Publishable.
e. Click OK.
54
BizFlow WebMaker Studio
Tutorial – Chapter 2
11. Publish the process definition.
a. Right-click your project name (not the process definition) and select Publish…
from the pop-up menu.
b. Expand the Process Definitions folder.
c. Select the process definition you just created and click >.
d. Click Next.
e. Select the process definition from the Objects to publish list and click >.
f.
Click Finish.
Step 2―Launch BizFlow WebMaker Studio
1. Click the BizFlow WebMaker icon
Studio.
in the BPS toolbar to launch BizFlow WebMaker
Notes:
•
•
If the WebMaker
icon is not enabled, make sure that you have selected your
project in the BizFlow Explorer pane.
If there is no icon, make sure that your user account has WebMaker Designer
license and authority.
2. You will be prompted for your login information. Click OK.
55
BizFlow WebMaker Studio
Tutorial – Chapter 2
3. Once WebMaker has initialized, a new browser window will open:
Note:
If you see a message asking you to install the Adobe SVG Viewer installation,
see Install Adobe SVG Viewer at First WebMaker Studio Use.
56
BizFlow WebMaker Studio
Tutorial – Chapter 2
Step 3―Create a Workspace
The next step is to create a WebMaker Workspace.
1. If necessary, click Close to close the Getting Started with WebMaker window.
2. Select New Project from the Design menu.
By default, WebMaker will open the first Workspace in the list.
Note:
If you have already created a Workspace as directed in Tutorial 1,
click WebMakerTutorial in the Workspaces list to open the Workspace.
Proceed to Step 4―Create a Project.
3. To create a new Workspace, enter a name in the text box.
This tutorial uses a Workspace called “WebMakerTutorial”.
4. Click Create New Workspace.
5. The new Workspace you just created appears in the Workspaces list.
57
BizFlow WebMaker Studio
Tutorial – Chapter 2
Step 4―Create a Project
The next step is to create a WebMaker project. A project can contain Web applications.
1. If you have not already done so, open the Workspace you created in the previous step.
This tutorial uses a Workspace called “WebMakerTutorial”.
2. To create a new project, enter a name in the text box.
This tutorial uses a Workspace called “AppTutorial2”.
3. Click Create New Project.
Be patient. It may take a few minutes to create the project.
4. The new project you just created will open to the Application Map.
58
BizFlow WebMaker Studio
Tutorial – Chapter 2
Step 5―Design the Project
Next, you will design your WebMaker project.
1. Go to the Application Map to begin designing your form application.
59
BizFlow WebMaker Studio
Tutorial – Chapter 2
2. Add a Partial Page component to the Application Map:
a. Click-and-drag the Partial Page object from the palette to the application map.
b. Double-click the component name (Partial_Page1) and rename it
SelectionList.
c. Press Enter.
3. Add an Action line from NewForm to SelectionList:
a. Select NewForm on the application map.
b. Click-and-drag Action from the palette to the target component.
c. Hover over SelectionList on the application map and release the mouse button to
connect the action line.
Note:
When drawing an action line, make sure that the cursor points to the target
component, not the end of the action line itself.
d. Double-click the action name (Action_1) and rename it SearchName.
e. Press Enter.
4. Click Save in the toolbar.
Note:
After saving, you can check the status in the lower left corner:
5. Select NewForm on the Application Map and then click Page Design in the toolbar.
The Page Design area will open in a new tab.
60
BizFlow WebMaker Studio
Tutorial – Chapter 2
6. Go to the Data Source tab on the left.
7. Click the icon labeled Use a WSDL to design page.
8. Select the HWSessionBinding.wsdl file from the list. Click Select File.
9. Select getUsersByName as the Operation.
61
BizFlow WebMaker Studio
Tutorial – Chapter 2
10. Drag sessionInfoXML onto the Page View.
11. Select saveNewForm (to NewFormDataReceiver Controller).
12. Select SearchName (to SelectionList Page) and click OK.
13. Drag name (under getUsersByName) to the Page View.
14. Click Save.
62
BizFlow WebMaker Studio
Tutorial – Chapter 2
15. Click Use BizFlow to design page as the Data Source.
16. Enter the name of the process definition you created and click Search.
This tutorial uses “WMTutorial2”.
17. Click WMTutorial2 under Process Definitions to load the schema.
63
BizFlow WebMaker Studio
Tutorial – Chapter 2
18. Locate the Process Variables section. Drag the participant field to the Layout View.
19. Select saveNewForm (to NewFormDataReceiver Controller).
20. Select SearchName (to SelectionList Page) and click OK.
21. Select the following objects from the Palette tab and add them to the Layout View:
•
Layout Grid (under Layout Groups)
•
Partial Page Group (under Layout Groups)
•
Standard Button (under Basic Form Controls)
64
BizFlow WebMaker Studio
Tutorial – Chapter 2
22. Arrange the objects in the Layout View as shown below:
a. Place Name in the top left cell of the layout grid.
b. Place the Button in the top right cell of the layout grid.
c. Place the Partial Page Group in the lower left cell of the layout grid.
d. Place Session Info XML above the layout grid.
e. Place Participant below the layout grid.
23. Add the Work Item Handler Controls for Complete, Save, Exit, Forward, and Reply,
as shown below:
24. Click Save.
65
BizFlow WebMaker Studio
Tutorial – Chapter 2
25. Select the sessionInfoXML field in the Layout View, then do the following:
a. Select the Properties tab on the right.
b. Under Label Details, deselect Do you want a label?.
c. Under Field Style Details, enter hidden in the Control Styling drop-down list.
26. Select the name field in the Layout View, then do the following:
a. Select the Properties tab on the right.
b. Under Field Details, select Static for Value is.
c. Under Label Details, enter Search User Name.
66
BizFlow WebMaker Studio
Tutorial – Chapter 2
27. Select the button field in the Layout View, then do the following:
a. Select the Properties tab on the right and expand Field Details.
b. Under Caption, enter Search.
c. Select the Events tab and expand Field Events.
d. Click Add Event and add an onclick event.
e. Select Ajax Submission for the Action.
f.
Change the Target Group to partial_page_container_group as shown below.
28. Select the participant field in the Layout View, then do the following:
a. Select the Properties tab on the right.
b. Under Label Details, deselect Do you want a label?.
c. Under Field Style Details, enter hidden in the Control Styling drop-down list.
67
BizFlow WebMaker Studio
Tutorial – Chapter 2
29. Select the sessionInfoXML field in the Layout View, then do the following:
a. Select the Bindings tab on the right.
b. Drag SessionInfoXML (under WorkitemContext) into the Field Value.
30. Click Save.
31. Go to the Application Map tab.
32. Select the SelectionList object.
33. Click Page Design in the toolbar.
Note:
You can have multiple Page Design tabs open at the same time; in this case one
for SelectionList and another for NewForm.
34. Click the Select Box object in the Palette tab (under Basic Form Controls)and add it to
the Layout View.
35. Change the field name to resultList.
a. Double-click the field to rename it, or right-click it and select Rename from the
contextual menu.
b. Press Enter to accept the changes.
68
BizFlow WebMaker Studio
Tutorial – Chapter 2
36. Go to the Data Source tab.
37. Click the icon labeled Use a WSDL to design page.
38. Select the HWSessionBinding.wsdl file from the list. Click Select File.
39. Select getUsersByName as the Operation.
69
BizFlow WebMaker Studio
Tutorial – Chapter 2
40. Drag the R: item and drop it onto the resultList control.
41. Select id for Data Value and select name for Display Text, then click OK.
70
BizFlow WebMaker Studio
Tutorial – Chapter 2
Note:
The Bindings for the resultList control should now be set as follows:
42. Right-click the resultList field, then uncheck Do you want a label?.
71
BizFlow WebMaker Studio
Tutorial – Chapter 2
43. Go to the Events tab and expand Field Events.
a. Click Add Event and add an onchange event.
b. Select Perform Custom Script as the Action.
c. In the Script field, enter selectUser().
44. Now, add a page event to populate the Participant field:
a. Click
to view the Page Level properties.
b. Go to the Events tab and expand Page Events.
c. Click Add Event and add an onload event.
d. Select Perform Custom Script as the Action.
e. In the Script field, enter selectUser().
45. Click Save.
46. Next, you will add a JavaScript file that defines selectUser().
72
BizFlow WebMaker Studio
Tutorial – Chapter 2
47. Go to the Application Map tab.
48. Click Include remote file under Included JavaScript Files.
73
BizFlow WebMaker Studio
Tutorial – Chapter 2
49. Enter js/search.js in the field, then click Insert remote file reference.
50. Click Save.
51. Return to the Page Design tab for SelectionList.
52. Click the JavaScript tab.
53. Click the js/search.js link.
The search.js file will open in a new tab.
74
BizFlow WebMaker Studio
Tutorial – Chapter 2
54. Add the following script:
function selectUser()
{
var o = document.getElementById("resultList");
document.getElementById("participant").value =
'[U]'+o.options[o.selectedIndex].value;
}
55. Click Save and then close the js/search.js tab.
75
BizFlow WebMaker Studio
Tutorial – Chapter 2
Step 6― Modify BizFlow Web Service URLs
BizFlow WebMaker Studio automatically creates BizFlow Web Service objects for your project
when you create a project but the URL of the services may not point to your live BizFlow server
and port number. To view and edit the Web Service URLs, do the following:
1. Go to the Test menu and select Test Settings.
2. Click External Calls.
By default the Web Service URLs are set to localhost. In this case, we want to connect
to a BizFlow server to test the WebMaker form using live data.
3. Change the Web Service URL for HWSessionSevice_Proxy-HWSession:
a. Click the Edit icon for the row to be changed.
b. Replace the default value localhost:8080 with your server name and port
number, e.g.
http://localhost:8080/bizflow/webservice/HWSession.hws
http://qa-bf12:8080/bizflow/webservice/HWSession.hws
c. Click the Accept Changes icon.
4. Click Save.
76
BizFlow WebMaker Studio
Tutorial – Chapter 2
Step 7―Perform a Functional Test
1. Click Run Test in the toolbar to test your Web form application.
Be patient; it may take a few moments to launch the test environment. The test area will
open in a new tab.
The above screen shot shows parameters that will be passed from the BizFlow Workitem
Handler when your application runs within it.
2. In order to test the form using live data, you will need to get the live session Info XML
value.
3. Go to the BizFlow WebMaker browser tab and copy the URL.
4. Open a blank document in a text editor (such as Notepad) and paste the URL.
Locate the SESSIONINFO string as shown below:
77
BizFlow WebMaker Studio
Tutorial – Chapter 2
5. Open another blank document and paste the SESSIONINFO string.
6. Use Find and Replace to transform the SESSIONINFO string:
a. Replace all instances of +(plus) with a single space.
b. Replace all instances of %3D with =.
c. Replace all instances of %22 with ".
d. Replace all instances of %3C with <.
e. Replace all instances of %2F%3E with />.
7. Copy the transformed SESSIONINFO string and return to the BizFlow to WebMaker
Application Workitem Context Parameters page.
8. Paste the SESSIONINFO string into the Session Info - XML field, then click Call WebMaker
Application.
78
BizFlow WebMaker Studio
Tutorial – Chapter 2
9. Your form should display. Enter a letter or string in the search field and click Search.
Note:
Work Item Handler Controls do not display as visible controls on the form during
runtime.
79
BizFlow WebMaker Studio
Tutorial – Chapter 2
Step 8―Publish Your Form to BizFlow
You must publish a WebMaker form to BizFlow before you can use it. You will use BizFlow
WebMaker Studio to publish an application to the place where the bizflowwebmaker Web
application is deployed on the BizFlow Web server.
1. Click Publish in the toolbar to publish to the default publication environment.
All active WebMaker tabs will be disabled while the publish is in progress.
•
Publish to BizFlow should be the default publication environment.
2. When the publish has finished, WebMaker will re-enable the current tab.
Note:
The status will display in the lower left corner of the WebMaker window.
3. To verify that the publish was successful, call the application in a web browser.
The URL of your application is:
http://YOUR_BIZFLOW_WEB_SERVER:PORT/
bizflowwebmaker/YOUR_WEBMAKER_PROJECT_NAME/bizflowEntry.do
Where:
YOUR_BIZFLOW_WEB_SERVER: The BizFlow Web server name.
PORT: The port number of your BizFlow Web server.
YOUR_PROJECT_NAME: The name of your project, in this case AppTutorial2.
For example:
http://qa-bf12:8080/bizflowwebmaker/AppTutorial2/bizflowEntry.do
80
BizFlow WebMaker Studio
Tutorial – Chapter 2
Step 9―Register Your WebMaker Application in BizFlow
After creating a WebMaker form application, you must add it to BizFlow in order to use it as an
application in your process definition.
This step involves registering your WebMaker application in BizFlow, adding the application to a
process definition, and then publishing the project to the Operational Environment.
1. Return to your project in BizFlow Process Studio.
2. Navigate to the Application folder, then do one of the following:
•
Go to File | New | New Application
•
Right-click the Application folder, then select New Application from the pop-up
menu.
3. Enter the name of your application. It is strongly recommended that you use the same
name as your WebMaker project name. This tutorial uses “AppTutorial2”.
4. Select BizFlow WebMaker as the application type.
5. Click Next.
81
BizFlow WebMaker Studio
Tutorial – Chapter 2
6. If necessary, select your WebMaker server from the drop-down list and verify the URL.
The URL should look like the following:
http://YOUR_BIZFLOW_WEB_SERVER:PORT/bizflowwebmaker
/YOUR_WEBMAKER_PROJECT_NAME/bizflowEntry.do
Where:
YOUR_BIZFLOW_WEB_SERVER: The BizFlow Web server name.
PORT: The port number of your BizFlow Web server.
YOUR_WEBMAKER_PROJECT_NAME: The name of your project.
For example:
http://qa-bf12:8080/bizflowwebmaker/AppTutorial2/bizflowEntry.do
7. Click Next.
82
BizFlow WebMaker Studio
Tutorial – Chapter 2
8. Check to be sure all information is correct and that the Status is Publishable;
then click Finish.
9. Next, you will add your WebMaker application to a process definition.
Open the process definition you created earlier (“WMTutorial2” in this example).
10. Assign the application to <Activity 1>:
a. Expand the Application folder.
b. Click-and-drag AppTutorial2 onto <Activity 1>.
83
BizFlow WebMaker Studio
Tutorial – Chapter 2
c. Right-click <Activity 1> and select Application from the contextual menu.
d. Double-click the Mandatory field, then change the value to Don’t care.
Note:
This will prevent the BizFlow web client from displaying certain warning
messages during runtime.
e. Click OK.
84
BizFlow WebMaker Studio
Tutorial – Chapter 2
11. Open the Process Property dialog by right-clicking the background of the process
definition and select Process Variable… from the pop-up menu.
a. Select Process Instance Variables, then click Add.
b. Enter wihmode as the variable name.
c. Select String as the variable type.
d. Enter BASIC_NOAPPBTN as the value.
e. Click OK.
Note:
wihmode can be used to control several aspects of the workitem handler.
In this example, it will suppress the application toolbar so that only the standard
workitem handler toolbar will appear at runtime.
12. Check in the process definition.
13. Publish the process definition:
a. Right-click your project name (not the process definition) and select Publish…
from the pop-up menu.
b. Expand Process Definitions in the Publish dialog.
c. Select the process definition (“WMTutorial2” in this example) and click >.
85
BizFlow WebMaker Studio
Tutorial – Chapter 2
Note:
Because you have associated the application AppTutorial2 with the process
definition WMTutorial2, they both appear in the Objects to Publish list.
d. Click Next.
86
BizFlow WebMaker Studio
Tutorial – Chapter 2
e. Go to the Application tab at the second step.
f.
Select the application (“AppTutorial2” in this example) and click >.
g. Click Finish.
87
BizFlow WebMaker Studio
Tutorial – Chapter 2
Step 10―Initiate Your Process in the BizFlow Web Client
After publishing the project to the Operational Environment you can initiate the process in the
BizFlow Web Client.
1. Log in to BizFlow.
2. Initiate the process definition you just published:
a. In the main navigation bar, click Start New.
b. Locate WMTutorial2 in the Standard Processes section.
c. Click Start to initiate a new process instance.
d. Select Open Work Item as soon as initiated.
e. Click Initiate.
3. Enter a letter or string in the search field and click Search.
4.
Select a name from the result list.
5. Click Complete in the toolbar. The complete dialog displays.
6. Click Send. The first workitem is marked complete and the process moves to the second
activity in the process definition.
88
BizFlow WebMaker Studio
Tutorial – Chapter 2
7. In the main navigation bar, click My Monitor.
8. Click the Process Name (in this example “WMTutorial2”).
9. In the Process Instance Detail dialog, confirm that the participant for <Activity 2> is the
person you selected from the drop-down list.
89
BizFlow WebMaker Studio
Tutorial
Chapter 3.
Accessing a Database from WebMaker Forms
90
BizFlow WebMaker Studio
Tutorial – Chapter 3
Accessing a Database from WebMaker Forms
This tutorial explains how to access and update the BizFlow database or another database from
a WebMaker Form application.
This tutorial has two exercises. The second exercise is an extension of the first.
Display Customer Account Database Information
In the first exercise, you will create a WebMaker form that displays customer account information
from a database. The end result will look like this:
Modify Customer Account Database Information
In the second exercise, you will create a WebMaker form that allows users to add, update, and
delete customer account information in the database. The end result will look like this:
91
BizFlow WebMaker Studio
Tutorial – Chapter 3
Step 1―Create a Process Definition
For this tutorial you will need a published process definition in BizFlow.
1. Launch BizFlow Process Studio.
2. Log in to BizFlow as a user who has both Designer and WebMaker Designer licenses.
3. Create a new project or select an existing project.
4. Navigate to the Process Definitions folder, then do one of the following:
•
Go to File | New | Process Definition
•
Right-click the Process Definitions folder, then select New Process Definition from
the pop-up menu.
5. Draw a process like the one shown below:
•
•
Use Initiator as the participant for the activities.
You don’t need to assign an application yet.
6. Add the process definition to the server:
a. Click the Add to Server icon
in the Process Modeler toolbar.
b. Expand your project and select Process Definitions.
c. Enter Request Account for the name of the process definition.
d. Change the status to Publishable.
e. Click OK.
7. Publish the process definition:
a. Right-click the project name (not the process definition name) and select
Publish… from the pop-up menu.
b. Expand the Process Definitions folder.
c. Select the process definition you just created and click >.
d. Click Next.
e. Select the process definition from the Objects to publish list and click >.
f.
Click Finish.
92
BizFlow WebMaker Studio
Tutorial – Chapter 3
Step 2―Launch BizFlow WebMaker Studio
1. Click the BizFlow WebMaker icon
Studio.
in the BPS toolbar to launch BizFlow WebMaker
Notes:
•
If the WebMaker
icon is not enabled, make sure that you have selected your
project in the BizFlow Explorer pane.
•
If there is no icon, make sure that your user account has WebMaker Designer
license and authority.
2. You will be prompted for your login information. Click OK.
3. Once WebMaker has initialized, a new browser window will open:
Note:
If you see a message asking you to install the Adobe SVG Viewer installation,
see Install Adobe SVG Viewer at First WebMaker Studio Use.
93
BizFlow WebMaker Studio
Tutorial – Chapter 3
Step 3―Create a Workspace
The next step is to create a WebMaker workspace.
1. If necessary, click Close to close the Getting Started with WebMaker window.
2. Select New Project from the Design menu.
By default, WebMaker will open the first Workspace in the list.
Note:
If you have already created a Workspace as directed in Tutorial 1,
click WebMakerTutorial in the Workspaces list to open the Workspace.
Proceed to Step 4―Create a Project.
3. To create a new Workspace, enter a name in the text box. This tutorial uses a Workspace
called “WebMakerTutorial”.
4. Click Create New Workspace.
5. The new Workspace you just created appears in the Workspaces list.
94
BizFlow WebMaker Studio
Tutorial – Chapter 3
Step 4―Create a Project
The next step is to create a WebMaker project. A project can contain web applications.
1. If you have not already done so, open the Workspace you created in the previous step.
This tutorial uses a Workspace called “WebMakerTutorial”.
2. To create a new project, enter a name in the text box.
This tutorial uses a Workspace called “Account”.
3. Click Create New Project.
Be patient. It may take a few minutes to create the project.
4. The new project you just created will open to the Application Map.
95
BizFlow WebMaker Studio
Tutorial – Chapter 3
Step 5―Design the Project
Next, you will design your WebMaker project.
1. Go to the Application Map to begin designing your form application.
2. Right-click NewForm and then select Rename from the pop-up menu.
Rename the form ManageAccountForm.
3. Right-click NewFormDataReceiver and select Delete from the pop-up menu.
4. Click Save in the toolbar.
96
BizFlow WebMaker Studio
Tutorial – Chapter 3
5. To begin designing the form that will display a list of accounts, select
ManageAccountForm on the Application Map and then click Page Design in the toolbar.
The Page Design area will open in a new tab.
6. Expand Rich Composite Controls in the Palette tab on the left. Add a Paging Table by
dragging-and-dropping it onto the canvas.
7. On the left, choose the Data Source tab.
8. Click the SQL button to choose an RDBMS Data Source.
97
BizFlow WebMaker Studio
Tutorial – Chapter 3
9. Click Setup New Database on the pop-up window.
10. Enter the information for the BizFlow database. For Oracle database, change Isolation
Level to ‘TRANSACTION READ COMMITTTED’.
11. Click Test Database Connection and correct any errors until the test is successful.
12. After a successful test is achieved, click Create Database Connection.
98
BizFlow WebMaker Studio
Tutorial – Chapter 3
13. Click Select to complete database setup.
14. Select account from the Select Database Table drop-down list and then select
List Records from the Select Usage drop-down list.
99
BizFlow WebMaker Studio
Tutorial – Chapter 3
15. Before adding table columns, delete Column 1 and Column 2 from added Paging Table.
Select Column 1; right-click and select Delete from the pop-up menu. Do the same for
Column 2.
16. Switch to the Layout View tab, then drag the record from the Data Source tab on the left
and drop it onto the paging table.
100
BizFlow WebMaker Studio
Tutorial – Chapter 3
The Layout View should now look like this:
17. Click Save in the toolbar.
101
BizFlow WebMaker Studio
Tutorial – Chapter 3
Step 6―Perform a Functional Test of Your New Application
1. Click Run Test in the toolbar to test your Web form application.
Be patient; it may take a few moments to launch the test environment. The test area will
open in a new tab.
The test area shows parameters that will be passed from the BizFlow Workitem Handler
when your application runs within it. However, in this case we are working in a local
testing environment, so there is no need to change these values.
2. Click Call WebMaker Application to test your form. Your form is displayed with the data
retrieved from the account table:
102
BizFlow WebMaker Studio
Tutorial – Chapter 3
Step 7―Design a Form to Add Accounts
This step begins the second database exercise. This exercise expands on the first exercise in
which you set up access to the database.
1. Return to the Application Map tab.
2. Drag Full Page onto the canvas and
rename it AddAccountForm.
3. Drag Controller onto the canvas and
rename it GetStates.
4. Select ManageAccountForm, then dragand-drop Action onto GetStates to add
an action from ManageAccountForm to
GetStates.
5. Rename the action GetStates.
6. Select the GetStates controller and add an
action to AddAccountForm. Rename it
AddAccountForm.
103
BizFlow WebMaker Studio
Tutorial – Chapter 3
7. Add another controller named AddAccount
and an action from AddAccountForm to the
controller. Rename it AddAccount.
8. Select AddAccountForm and add an action
to PrepareForm.
9. Rename it AddAccountForm2PrepareForm.
10. Select AddAccount and add an action to
PrepareForm.
11. Rename it AddAccount2PrepareForm.
12. Your Application Map should look similar to the
one pictured here.
13. Click Save.
14. Select ManageAccountForm in the diagram and then click Page Design.
15. Expand Layout Groups from the Palette tab on the left. Select Layout Group then dragand-drop it above Records to insert it at the top of the form. The canvas should look like
the one pictured here.
16. Click the Details link of the layout_group.
17. Select Horizontal for Display Method.
104
BizFlow WebMaker Studio
Tutorial – Chapter 3
18. In the Palette tab, select Basic Form Controls, then drag a Button into the layout_group.
19. Double click Button Caption to change the caption to “Add…“.
Press Enter.
20. Double click (button) on the button to change the field name to “add”.
Press Enter.
105
BizFlow WebMaker Studio
Tutorial – Chapter 3
21. With the button selected, click the Events tab on the right. Click Add Event and select
onclick for the event. Select Form Submission for the event type and GetStates as the
action.
22. Select the Data Source tab on the left and choose BizFlow as the data source type.
23. Enter the definition name “Request Account” and click Search.
24. Click the Name or Process ID of the definition to load the schema.
106
BizFlow WebMaker Studio
Tutorial – Chapter 3
25. Scroll down the schema, select Name (under Activity) then drag-and-drop it onto the
canvas to add it to bottom of the form. This is to add the WorkitemContext schema into
the current form’s document element. We are going to delete this field in a later step.
26. You will then be asked to choose an action to update any modifications to the
WorkitemContext during runtime. Don’t select an action. Just click OK to close the
window.
27. Click Save to update the input document with the WorkitemContext information.
107
BizFlow WebMaker Studio
Tutorial – Chapter 3
28. Right-click the Add button and choose Disable field based on server data.
29. Go to the Bindings tab and make sure the add button is selected.
30. Drag Name (under Activity) onto the “Disable If” field. It will be changed to
/mvc:eForm/mvc:Data/WorkitemContext/Activity/Name.
108
BizFlow WebMaker Studio
Tutorial – Chapter 3
31. Manually change the Disable If statement by adding [. = "Review Account"] to the end.
/mvc:eForm/mvc:Data/WorkitemContext/Activity/Name[. = "Review Account"]
By doing this, the Add button will be disabled in the second activity (Review Account) of
the BizFlow process Instance.
32. Click Save.
33. Select the Name field and then select Delete from the menu. This field was temporarily
added in order to include the WorkItemContext structure.
34. Click Save.
109
BizFlow WebMaker Studio
Tutorial – Chapter 3
35. Return to the Application Map and select AddAccountForm, then click Page Design in
the toolbar.
36. Go to the Data Source tab. Click the SQL button and then click AccountDB. Click Select.
37. Select database table account and then select Edit Single Record for usage.
110
BizFlow WebMaker Studio
Tutorial – Chapter 3
38. Drag record from the Database Table tree and drop it onto the canvas. You will then be
asked to choose an Action and SQL Operation.
39. Check the AddAccount action and then select Insert under SQL Operation. Click OK.
40. Delete the Id field from the canvas because it will be assigned by the database when
a record is added.
111
BizFlow WebMaker Studio
Tutorial – Chapter 3
41. In order to use a combo box for the State field, drag a Select Box from Basic Form
Controls on the Palette tab and drop it onto the State form control.
Note:
The icon in the state field will change from a text icon to a list icon.
42. Return to the Data Source tab. Choose the states table from AccountDB and then select
List Records for usage.
43. Drag R: record from the Database Table and drop it onto the State form control.
44. You will then be asked to choose Data Value and Display Text. Select state for Data
Value and select state for Display Text. Click OK.
112
BizFlow WebMaker Studio
Tutorial – Chapter 3
45. Expand Layout Groups and add Layout Group to the bottom of the AddAccountForm
and set the Display Method to Horizontal.
46. Expand Basic Form Controls and add two buttons to the layout_group and change
captions to Add and Back, then change the field names to add and back, respectively.
(Captions and field names become editable when you double-click them.)
47. Select the Add button, then click the Events tab on the right.
48. Click Add Event. Add an onclick event. The action should be AddAccount.
113
BizFlow WebMaker Studio
Tutorial – Chapter 3
49. Select the Back button and add an onclick event. The action should be
AddAccountForm2PrepareForm.
50. Click Save.
114
BizFlow WebMaker Studio
Tutorial – Chapter 3
Step 8―Perform a Functional Test for Adding an Account
1. Click Run Test.
2. Click Call WebMaker Application to test your form. Your form is displayed:
3. Click the Add… button to test adding a record to the database.
4. Enter a Name, State, Phone Number, Account Number, and Date of Birth. Click Add to
insert the record.
5. Click Add… again. Click Back to return to the list with the new record added.
6. Close the form testing page and click Run Test again.
7. Click the Workitem Context Administration link at the top of the page.
The Workitem Context Details page opens in a new browser tab.
115
BizFlow WebMaker Studio
Tutorial – Chapter 3
8. Go to the Activity tab.
9. In the Name field, change the activity name to Review Account.
10. Click the Save Workitem Context button at the bottom of the page.
11. Return to the WebMaker browser tab. Click Call WebMaker Application again.
12. When the form loads, the Add… button should be disabled:
13. Return to the Workitem Context Details browser tab.
14. Rollback the activity name to Activity Name to enable the Add… button again.
15. Click Save Workitem Context.
116
BizFlow WebMaker Studio
Tutorial – Chapter 3
Step 9―Design a Form to Update Accounts
1. Go to the Application Map tab in your Account project.
2. Add a full page named UpdateAccountForm, a controller named GetAccount, and
another controller named UpdateAccount.
3. Add an action from ManageAccountForm to GetAccount, and name it GetAccount.
4. If you are asked to choose a schema, click OK without making a selection.
5. Add an action from GetAccount to UpdateAccountForm, and name it
UpdateAccountForm.
6. Add an action from UpdateAccountForm to UpdateAccount, and name it
UpdateAccount.
7. Add an action from UpdateAccountForm to PrepareForm, and name it
UpdateAccountForm2PrepareForm.
117
BizFlow WebMaker Studio
Tutorial – Chapter 3
8. Your application map should look like the one pictured below.
9. Click Save.
10. Select ManageAccountForm in the Application Map and then click Page Design.
11. Add a button next to the Add button and name it update.
12. With the Update button selected, click the Properties tab on the right and change the
caption to Update….
13. Select the Events tab and add an onclick event for the update button. The action
should be GetAccount.
118
BizFlow WebMaker Studio
Tutorial – Chapter 3
14. From the Palette tab, choose Basic Form Controls then drag a checkbox control and
drop it in the paging table in front of the ID field.
15. Double-click the label of the Check control and change the label to Select.
Double-click the Check control and change the field name to select.
119
BizFlow WebMaker Studio
Tutorial – Chapter 3
16. Add a Hidden control from Basic Form Controls to the bottom of the
ManageAccountForm. Double-click the control and change the field name to selected.
17. Select the checkbox you added and go to the Events tab on the right. Add an onclick
event. Set the Action to Set Field Value. Choose selected as the Target Field. Determine
Value should be From another field: id
18. Click Save.
19. Return to the Application Map tab and select UpdateAccountForm, then click
Page Design.
120
BizFlow WebMaker Studio
Tutorial – Chapter 3
20. Go to the Data Source tab. Click the SQL button and then click AccountDB. Click Select.
21. Select the database table account and then select Edit Single Record for usage.
22. Drag record from the Database Table tree and drop it onto the canvas. You will then be
asked to choose an Action and SQL Operation.
121
BizFlow WebMaker Studio
Tutorial – Chapter 3
23. Check the UpdateAccount action and then select Update under SQL Operation.
Click OK.
24. Drag a Select Box from the Basic Form Controls onto the state field.
122
BizFlow WebMaker Studio
Tutorial – Chapter 3
25. Return to the Data Source tab. Choose the states table from AccountDB and then select
List Records for usage.
26. Drag R: record from the Database Table and drop it onto the State form control.
27. Select state for Data Value and select state for Display Text. Click OK.
28. Add a Layout Group to the bottom of the UpdateAccountForm and set the
Display Method to Horizontal.
123
BizFlow WebMaker Studio
Tutorial – Chapter 3
29. Add two buttons to the layout_group and change captions to Update and Back,
change field names to update and back, respectively.
30. Select the Update button, then click the Events tab on the right.
31. Click Add Event. Add an onclick event. The action should be UpdateAccount.
124
BizFlow WebMaker Studio
Tutorial – Chapter 3
32. Select the Back button and add an onclick event. The action should be
UpdateAccountForm2PrepareForm.
33. Click Save.
34. Return to the Application Map and select GetAccount.
35. Right-click GetAccount, then select Controller Rules from the contextual menu.
36. You should now see three defined rules:
37. Expand the rule Retrieve_account_database_entry and then expand the SQL_Statement.
125
BizFlow WebMaker Studio
Tutorial – Chapter 3
38. Drag selected from Input Data and drop it onto the SQL Parameter $id. It will then
change to /mvc:eForm/mvc:Data/mvc:formData/mvc:selected.
39. Click Save.
126
BizFlow WebMaker Studio
Tutorial – Chapter 3
Step 10―Perform a Functional Test for Updating Accounts
1. Click Run Test.
2. Click Call WebMaker Application to test your form. The form with an Update button is
displayed.
3. Check the checkbox of a record and click Update…. The selected record should be
populated in the update form.
4. Make changes to the record and then click Update. Then click Back to return to the
management form. You should see the list with the updated record.
127
BizFlow WebMaker Studio
Tutorial – Chapter 3
Step 11―Design a Form to Delete an Account
1. Return to the Application Map tab.
2. Add a controller called DeleteAccount.
3. Add an action from ManageAccountForm to DeleteAccount and name it
DeleteAccount.
4. If you are asked to choose a schema, click OK without making a selection.
5. Add an action from DeleteAccount to PrepareForm, and name it
DeleteAccount2PrepareForm.
6. Click Save.
7. Return to the Page Design tab for ManageAccountForm.
128
BizFlow WebMaker Studio
Tutorial – Chapter 3
8. Add a button next to the Update button and rename the new button del. Note that
“delete” is not an allowed field name. Change the caption to Delete.
9. With the del button selected, choose the Events tab on the right. Add an onclick event.
Select DeleteAccount for the action.
10. Go to the Application Map tab.
11. Select the controller DeleteAccount and open Controller Rules. You should see one
defined rule.
12. Click Add Rule. A new empty rule displays.
13. Enter Delete_account_statement as the rule name.
14. Click Add Action within the Delete_account_statement rule.
15. Select SQL Statement for action and name it delete_account.
129
BizFlow WebMaker Studio
Tutorial – Chapter 3
16. Expand Action and click Select to select the database.
17. Select the existing database AccountDB. Click Select.
18. Change the SQL Statement to:
DELETE FROM account WHERE id = $id;
19. Drag selected from Input Data and drop it onto the SQL Parameter for $id.
20. Collapse the Delete_account_statement rule.
130
BizFlow WebMaker Studio
Tutorial – Chapter 3
131
21. Add another rule by clicking Add Rule.
22. Enter Commit_database_modifications_to_AccountDB as the rule name and set the
priority to 12 to assure this rule will follow the Delete_account_statement rule.
23. Click Add Condition in the Commit_database_modifications_to_AccountDB rule.
24. Enter check_no_errors as the condition name; enter the following in the Check Field:
not(/mvc:eForm/mvc:Data//sql_result/statement/status[@outcome = 'fail'])
25. Click Add Action and select SQL Statement for the action and name it commit.
26. Expand the Action. Click Select to select the database.
27. Select the existing database AccountDB. Click Select.
28. Update the SQL Statement to:
COMMIT;
29. Click Save.
BizFlow WebMaker Studio
Tutorial – Chapter 3
Step 12―Perform a Functional Test for Deleting an Account
1. Click Run Test.
2. Click Call WebMaker Application to test your form. The form with a Delete button is
displayed.
3. Check the checkbox of a record and click Delete.
4. The selected record should be removed from the list.
132
BizFlow WebMaker Studio
Tutorial – Chapter 3
Step 13―Publish Your Form to BizFlow
You must publish a WebMaker form to BizFlow before you can use it. You will use BizFlow
WebMaker Studio to publish an application to the place where the bizflowwebmaker Web
application is deployed on the BizFlow Web server.
1. Click Publish in the toolbar to publish to the default publication environment.
All active WebMaker tabs will be disabled while the publish is in progress.
•
Publish to BizFlow should be the default publication environment.
2. When the publish has finished, WebMaker will re-enable the current tab.
Note:
The status will display in the lower left corner of the WebMaker window.
3. To verify that the publish was successful, call the application in a web browser.
The URL of your application is:
http://YOUR_BIZFLOW_WEB_SERVER:PORT/
bizflowwebmaker/YOUR_WEBMAKER_PROJECT_NAME/bizflowEntry.do
Where:
YOUR_BIZFLOW_WEB_SERVER: The BizFlow Web server name.
PORT: The port number of your BizFlow Web server.
YOUR_PROJECT_NAME: The name of your project, in this case Account.
For example:
http://qa-bf12:8080/bizflowwebmaker/Account/bizflowEntry.do
133
BizFlow WebMaker Studio
Tutorial – Chapter 3
134
BizFlow WebMaker Studio
Tutorial – Chapter 3
Step 14―Register Your WebMaker Application in BizFlow
After creating a WebMaker form application, you must add it to BizFlow in order to use it as an
application in your process definition.
This step involves registering your WebMaker application in BizFlow, adding the application to a
process definition, and then publishing the project to the Operational Environment.
1. Return to your project in BizFlow Process Studio.
2. Navigate to the Application folder; right-click Application and select New Application
from the pop-up menu.
3. Enter the name of your application. It is strongly recommended that you use the same
name as your WebMaker project name. This tutorial uses “Account”.
4. Select BizFlow WebMaker as the application type.
5. Click Next.
135
BizFlow WebMaker Studio
Tutorial – Chapter 3
6. If necessary, select your WebMaker server from the drop-down list and verify the URL.
The URL should look like the following:
http://YOUR_BIZFLOW_WEB_SERVER:PORT/bizflowwebmaker
/YOUR_WEBMAKER_PROJECT_NAME/bizflowEntry.do
Where:
YOUR_BIZFLOW_WEB_SERVER: The BizFlow Web server name.
PORT: The port number of your BizFlow Web server.
YOUR_WEBMAKER_PROJECT_NAME: The name of your project.
For example:
http://qa-bf12:8080/bizflowwebmaker/Account/bizflowEntry.do
7. Click Next.
136
BizFlow WebMaker Studio
Tutorial – Chapter 3
8. Check to be sure all information is correct and that the Status is Publishable;
then click Finish.
9. Next, you will add your WebMaker application to a process definition.
Open the process definition you created earlier (“Request Account” in this example).
10. Locate the application in the BizFlow Explorer pane, then click-and-drag it onto the
process definition design area.
137
BizFlow WebMaker Studio
Tutorial – Chapter 3
11. Assign the application to each normal activity:
a. Double-click the Manage Account activity to open the Normal Activity Property
dialog box and go to the Application tab.
b. Select Account from the Application List, and then click the right arrow button.
c. Double-click the Mandatory field and select Don’t care.
Note:
This will prevent the BizFlow web client from displaying certain warning
messages during runtime.
d. Click OK.
12. Perform the same steps to add the application to the Review Account activity.
13. Check in the process definition.
138
BizFlow WebMaker Studio
Tutorial – Chapter 3
14. Publish the process definition:
a. Right-click your project name (not the process definition) and select Publish… from
the pop-up menu.
b. Expand Process Definitions in the Publish dialog.
c. Select Request Account under Process Definitions and click >.
Note:
Because you have associated the application Account with the process
definition Request Account, they both appear in the Objects to Publish list.
d. Click Next.
139
BizFlow WebMaker Studio
Tutorial – Chapter 3
e. Go to the Application tab at the second step.
f.
Select Account under Applications and click >.
g. Click Finish.
140
BizFlow WebMaker Studio
Tutorial – Chapter 3
Step 15—Initiate Your Process in the BizFlow Web Client
After publishing the project to the Operational Environment you can initiate the process in the
BizFlow Web Client.
1. Log in to BizFlow.
2. Make sure that your Workitem Handler option is set to Web WIH in the BizFlow Preferences
dialog box show below:
141
BizFlow WebMaker Studio
Tutorial – Chapter 3
3. Initiate the process definition you just published:
a. In the main navigation bar, click Start New.
b. Locate Request Account in the Standard Processes section.
c. Click Start to initiate a new process instance.
d. Select Open Work Item as soon as initiated.
e. Click Initiate.
4. The process opens to the first activity in the process definition.
5. You can add, update, or delete an account. When finished, click Complete.
142
BizFlow WebMaker Studio
Tutorial – Chapter 3
6. Enter a comment in the text field if you’d like, then click Send.
7. Go to the My Work tab and open the second workitem, Review Account.
Note:
The Add button is disabled in the “Review Account” activity.
143