Hiring tutorial > Create the user interface >

In this lesson, you create the client-side human service that contains the user interface that the hiring manager uses to create and submit the position request.

This lesson uses the following concepts:

Procedure

1. Create the client-side human service for the Submit position request activity:
   1. Make sure that the My Hiring Sample process application is open in Process Designer.
   2. In the Standard HR Open New Position process, select the Submit position request activity. In the Properties, select the Implementation tab.
   3. Create the client-side human service by clicking New in the Implementation section.
      

      The client-side human service that you create replaces the default human service.

   4. Type Create Position Request CSHS and click Finish. The Create Position Request CSHS human service opens. In the Variables page, the private variables of the process are automatically added as input and output variables for the human service.
2. Add elements to the client-side human service diagram to create its flow:
   1. Select the Diagram tab.
   2. To create a script to initialize the variables that the human service uses, drag a client-side script item from the palette onto the diagram.
   3. Rename the server script to Initialize output.
   4. Select the script item and then add the following code to its Script properties:
      

      tw.local.requisition = {};
tw.local.requisition.date = new Date(new Date().getTime() + 1000*60*60*24*7);

      tw.local.currentPosition = {};
      tw.local.currentPosition.replacement = {};

      tw.local.requisition.reqNum = "1141";
      tw.local.requisition.requester = "Tom Miller";
      tw.local.requisition.department = "Finance";
      tw.local.requisition.approvalNeeded = false;
      tw.local.requisition.location = "Chicago";
      tw.local.requisition.empType = "Full-time";

      tw.local.currentPosition.jobTitle = "";
      tw.local.currentPosition.replacement.lastName = "Smith";
      tw.local.currentPosition.replacement.firstName = "Bob";
      tw.local.currentPosition.replacement.supervisor = "Ann Fisher";
      tw.local.currentPosition.replacement.payLevel = "8";
      tw.local.currentPosition.replacement.payType = "Exempt";
      tw.local.currentPosition.positionType = "New";
      tw.local.currentPosition.replacement.notes = "";

      /* Populate lists for selection*/
      tw.local.requisition.empTypeList = [];
      tw.local.requisition.empTypeList[0] = "Full-time";
      tw.local.requisition.empTypeList[1] = "Part-time";
      tw.local.requisition.empTypeList[2] = "Contract";

      tw.local.requisition.departmentList = [];
      tw.local.requisition.departmentList[0] = "Finance";
      tw.local.requisition.departmentList[1] = "Marketing";
      tw.local.requisition.departmentList[2] = "Product Development";
      tw.local.requisition.departmentList[3] = "Human Resources";
      tw.local.requisition.departmentList[4] = "Sales";
      tw.local.requisition.departmentList[5] = "Customer Service";
      tw.local.requisition.departmentList[6] = "Business Partner Service";
      tw.local.requisition.departmentList[7] = "Business Strategies";
      tw.local.requisition.departmentList[8] = "Software Engineering";

      tw.local.requisition.locationList = [];
      tw.local.requisition.locationList[0] = "Atlanta";
      tw.local.requisition.locationList[1] = "Boston";
      tw.local.requisition.locationList[2] = "Chicago";

      tw.local.currentPosition.positionTypeList = [];
tw.local.currentPosition.positionTypeList[0] = "New";
tw.local.currentPosition.positionTypeList[1] = "Existing";

      When you run the sample, the fields in the requisition form contain this data.

      Tip: If you see warnings, check for typos in the business object parameters.
      

   5. Rename the coach, which is included in the diagram by default, to Create position request. Add two more coaches and rename them:
      • Specify existing position
      • Confirm position details
   6. Add a decision gateway to the diagram.
   7. Rename the decision to Position type?. The implementation for the decision does not contain any paths. The Process Designer adds these paths when you connect the decision to other nodes in the diagram.
3. Create the flow for the human service:
   1. Select the flow line between the Start event and the Create position request coach. A blue dot displays at the end of the arrow head. Drag this blue dot onto a connection point on the Initialize output script. The connection points display when pointer hovers over the script.
      
   2. In the Initialize output script, hover over a selection point to display a sequence flow arrow. Drag the arrow to the Create position request coach. When the coach displays its selection points, drag the sequence flow onto one of them.
   3. Select the flow that exits the Create position request coach and change it to connect to the Position type decision. This connection has an OK label.
   4. Connect the top selection point of the Position type decision to the Specify existing position coach. Although you can use any selection point, use the top selection point for a tidier diagram.
   5. Connect the bottom selection point of the Position type decision to the Confirm position details coach. Having different selection points for the two paths makes it easier to see the two flows in the diagram.
   6. Connect the Specify existing position coach to the Confirm position details coach.
   7. Connect the Confirm position details coach to the End event.
   8. Rearrange the elements in the diagram to make it easier to read.

   
   The flow lines that exit from the coaches use the OK button that is provided in the default coaches.

4. Define the branches for the decision. In the process requirements, the direction the flow takes depends on whether the position is new or exists. If the position exists, the hiring manager must provide information about the existing position. The hiring manager then reviews the job requisition and submits it. To implement the split paths, you use the decision control.
   1. Select the line that flows from the bottom of the Position type decision to the Confirm position details coach. In the General properties, change its name to New. Labeling the line helps you identify the branches in the decision and in the diagram.
      
   2. In the same way, rename the other flow line to Existing. The lines now have labels.
      
   3. Select the Position type decision and open its Implementation properties.
      
   4. For the New branch, click the variable icon and select the currentPosition.positionType variable. The first field contains the variable name.
      

      The tw.local part of the name is the namespace that the system uses to store values.

   5. Because you want the flow to take this line only if the position is new (or currentPosition.positionType =="New"), set the operation to == and the second field to “New”. Because currentPosition.positionType is a string, include the quotation marks to turn the value into a string.
      
5. Save your work.

Summary

You created a client-side human service to implement the submit job requisition activity in the process. You created most of its flow.

In the next lesson, you implement the coaches that provide the user interface for the Create Position Request CSHS client-side human service.

< Previous | Next >