Create an Example Human Task Activity

Screen

Prerequisites

• Install AgilePoint NX Developer.

Procedure

1. In Microsoft Visual Studio, click File > New > Project.
2. On the New Project screen, click AgileWork.
3. In the Name field, enter AutoCancelAgileWork.
4. In the Location field, click the Browse, and select the location to create the project.
5. Click OK.

Example Configuration Screen

Good to Know

• Make sure the value of the control ID attribute specified in your HTML file must match with the property name specified in the AgilePartDescriptor.cs file.
• The name of your HTML file, JavaScript file, and JSON file must be same.

Procedure

1. In the AgileWorkDescriptor.cs, replace all MyAgileWorkDescriptor with AutoCancelAgileWorkDescriptor.
2. Replace the Exposed Properties code section with this code.

   This code creates a property to accept the variable name at design time for the human task activity.

   [
     Category("Approval"),
     Description("Variable to store approval result")
   ]
     public string ApprovalVariable
     {
       get
       {
         return base["ApprovalVariable"] as string;
       }
       set
       {
         base["ApprovalVariable"] = value;
       }
    }

3. Replace the code in the InitializeShapeProperties() method with this code:

   WFActivityMasterProperties ApprovalVariable= new WFActivityMasterProperties()
   {
     Browsable = true,
     Id = "ApprovalVariable"
   };
   AddActivityProperties(ApprovalVariable);

4. To create your HTML page to design the configuration screen for your custom human task activity, do this procedure.
   1. In the project folder Design Time>WebUI, right-click HTML.
   2. In the item menu, click Add>New Item.
   3. On the Add New Item screen, in the left pane of Visual C# menu list, select AgilePoint.
   4. Select AgilePoint html.
   5. In the Name field, enter AutoCancelWork.html.
   6. Click Add.
5. To design the configuration screen, open the file AutoCancelWork.html.
6. On the AutoCancelWork.html file, within the <div class="marginLeft15px"> tags, enter this code to show a text box for ApprovalVariable.

   <!-- Textbox Approval variable -->
   <div class="detailsFieldWrapper marginTop15px oneColSpan">
           
     <!-- Label to display the field name (Ex: Approval Variable) -->
     <label class="lblPadding" data-i18n="labelApprovalVariable"></label>
           
     <!-- To show the '*' symbol, which denotes the mandatory mark for the field -->
     <span class="star"> *</span>
           
     <!-- To show a delimiter ':' which separates the field text and the textbox control -->
     <label class="labelBold">:</label><br />
   
     <!-- Textbox control to get the user input -->
     <input name="txtTextBox" class="treeNode" id="textboxApprovalVariable" 
            type="text" style="width: 87.2%;" />
           
     <!-- To show the validation error messages -->
     <span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" 
           id="errorApprovalVariable" 
           role="alert" 
           style="display: none; width: auto !important"></span>
   	
   </div>

7. To create your JavaScript file for the client side validation, do this procedure.
   1. In the project folder Design Time>WebUI, right-click Scripts.
   2. In the item menu, click Add>New Item.
   3. On the Add New Item screen, in the left pane of Visual C# menu list, select AgilePoint.
   4. Select AgilePoint js.
   5. In the Name field, enter AutoCancelWork.js.
   6. Click Add.
8. On the AutoCancelWork.js file, in the OnValidate method, enter this script.

   This script does the validation for the mandatory fields when the user enters the input in the text box. This script calls the ValidateTextBox JavaScripts function and passes it in the text box ID, error span ID and label ID as the parameters. These IDs are picked from the HTML page you created such as AutoCancelWork.html.

   validflag = validflag ? ValidateTextBox("textboxApprovalVariable", 
                                           "errorApprovalVariable", 
                                           "labelApprovalVariable") : false;

9. Enter this script in the OnSubmit method.

   This script accesses the text box control and get the value in it. It binds this value to the JSON object when you click Finish on the configuration screen.

   JSONDATA = { Data: { Properties: [] } };
     var approvalVariable = $("#textboxApprovalVariable").val();
     Utility.AddDataToJSONOnSubmit(JSONDATA, "approvalvariable", approvalVariable);
     Utility.AddDataToJSONOnSubmit(JSONDATA, "textboxApprovalVariable", approvalVariable);
   return JSONDATA;

10. Enter this script within the OnLoad method.

    This script loads the data when the configuration screen opens in the Process Builder.

    Utility.BindDataToControls(t);

11. To create your JSON file to set the locale and label text for the fields of your human task activity, do this procedure.
    1. In the project folder Design Time>WebUI>Locale, right-click the language folder to create the project item.
    2. In the item menu, click Add>New Item.
    3. On the Add New Item screen, in the left pane of Visual C# menu list, select AgilePoint.
    4. Select AgilePoint json.
    5. In the Name field, enter AutoCancelWork.json.
    6. Click Add.
    7. On the Select Activity Language Group screen, in the Language list, select a language for your activity — English in this example.
12. In the file AutoCancelWork.en-US.json, replace the code with this code.
    Note: This JSON code example includes comments to help explain the purpose of the code snippets. However, comments are not supported by the JSON standard, or the JSON parser within the AgilePoint NX software. You must delete these comments before you use this code in AgilePoint NX.

    {
      // data-i18n id of the configuration window header label. 
      // Displays the localized title of the wizard screen 
      // (refer the id in AutoCancelAgileWork.html).
      "SampleConfiguration": "Auto Cancel Agile Work Configuration",
      
      // data-i18n id of the Approval Variable label, where the localized 
      // value "Approval variable" will be displayed on the 
      // configuration screen (refer the id in AutoCancelAgileWork.html).
      "labelApprovalVariable": "Approval Variable",
      
      // Localized message prefix for the not null or required field 
      // validation (refer the id in AutoCancelAgileWork.js).
      "TextBoxNullExceptionPrefix": "Please enter "
    }

13. To see the preview of your configuration screen, do this procedure.
    1. On the Microsoft Visual Studio, in the toolbar, click the green play button.
    2. On the Preview Details screen, click Choose File.
    3. Select AutoCancelWork.html file.
    4. Click Preview.

Procedure

1. In the AgileWork.cs file, replace all MyAgileWork within the MyAgileWork class with AutoCancelAgileWork.
2. Change the AgileWork through AgileWork attribute. In this case, name it to AutoCancelAgileWork.

   [AgileWork("AutoCancelAgileWork", typeof(AutoCancelAgileWorkDescriptor))]

3. In the AutoCancelAgileWork class, replace this code in the constructor of this class.

   public AutoCancelAgileWork (WFProcessInstance instance, WFManualActivityInstance activity) : 
                                          base(instance, activity)
   {
     base.CompleteWorkItem += new EventHandler(AutoCancelAgileWork_CompleteWorkItem);
   }

4. Enter this code within the AutoCancelAgileWork_CompleteWorkItem method in TODO placeholder.

   This code creates the complete work item event handler. The event handler checks the approval status. If the status is rejected, it automatically selects the task Cancelled.

   private void AutoCancelAgileWork_CompleteWorkItem(Object sender, System.EventArgs e)
   {
     WFManualWorkItemEventArgs args = e as WFManualWorkItemEventArgs;
   
     // TODO
     IWFAPI api = base.m_ProcessInstance.WFApi; 
     NameValue[] parameters = api.GetAgileWorkParameters(base.m_ProcessInstance.DefID, 
                                                         base.m_ActivityInstance.Name);
     Hashtable properties = ToHashtable(parameters);
     string approvalVariable = properties["ApprovalVariable"].ToString(); 
     bool approved = Convert.ToBoolean(api.GetCustomAttr(base.m_ProcessInstance.WorkObjectID, 
                                                         approvalVariable, false));
   
     if (!approved)
     {
       string sql = "wf_manual_workitems.ACTIVITY_INST_ID = '" + base.m_ActivityInstance.ID 
                                                                + "'";
       WFManualWorkItem[] workItems = api.QueryWorkList(sql);
       foreach (WFManualWorkItem item in workItems)
       {
         if (item.Status != "Completed")
         {
           api.CancelWorkItem(item.WorkItemID, "");
         }
       }
     }
     Logger.WriteLine(base.m_ProcessInstance.WFApi.TenantID, MessageType.Information, 
                     "MyAgileWork_CompleteWorkItem, Activity Instance={0}", 
                      base.m_ActivityInstance.DisplayName);
   }

Screen

Good to Know

• For more information, refer to Change the Properties of an Activity Group and Activity.

Procedure

1. On the Activity Group screen, in the Activity Group Name field, enter AutoCancelAgileWork.
2. In the Activity Group Title field, enter AutoCancelAgileWork.
3. To configure the activity, in the Activity section, click Edit Configuration Wizard .
4. On the Activity Configuration Wizard Details screen, click the Activity Configuration tab.
5. To show the activity in the first place in the tab, on the Activity Configuration tab, in the Activity Display Order field, enter 1.
6. In the System Activity list, select AutoCancelAgileWork.
7. In the Activity field, enter AutoCancelAgileWork.
8. In the Title field, enter AutoCancelAgileWork.
9. Click the Activity Wizard Configuration tab.
10. On the Activity Wizard Configuration tab, in the HTML field, click Browse , and select the file DesignTime/WebUI/HTML/AutoCancelAgileWork.html file.
11. In the Script field, click Browse to browse DesignTime/WebUI/Scripts/AutoCancelAgileWork.js file.
12. On the Localization Resources section, in the Language list, select English.
13. In the File Location field, click Browse to browse DesignTime/WebUI/Locale/en-US/AutoCancelAgileWork.en-US.json file.
14. Click Add to add the activity properties to the activity list.
15. On the Activity Group screen, click Save to save the changes.

Good to Know

• The deployment package is created with the name [project folder]\bin\ AutoCancelAgileWork.zip.

Procedure

1. In Microsoft Visual Studio, on the Solution Explorer pane, right-click the project name AutoCancelAgileWork.
2. Click Create AgilePoint Deployment Package.

Screen

Screen

How to Start

1. On the AgilePoint Server machine, in Windows Explorer, right-click the file (AgilePoint Server installation folder) C:\Program Files\AgilePoint\AgilePoint Server\WCFConfigurationUtility.exe, and click Run as Administrator.

   
   
   

2. On the AgilePoint Server Manager screen, click Activity Deployment Utility .

   
   
   

Procedure

1. On the AgilePoint Activity Deployment screen, complete these fields.

   Field Name	Definition
   WSHTTP URL	Function: Specifies the WsHttp URL for your AgilePoint Server. For more information, refer to Find Your AgilePoint Service URL in AgilePoint NX. Accepted Values: A valid WsHttp URL in this format: https://[AgilePoint Server instance host name]:[WsHttp Port]/AgilePointServer Default Value: None Example: https://myapserver.com:1451/AgilePointServer
   REST URL	Function: Specifies the REST URL for your AgilePoint Server. For more information, refer to Find Your AgilePoint Service URL in AgilePoint NX. Accepted Values: A valid REST URL in this format: https://[AgilePoint Server instance host name]:[Rest Port]/AgilePointServer Default Value: None Example: https://myapserver.com:1541/AgilePointServer
   Domain	Function: The authentication domain for the AgilePoint Service Account. Accepted Values: An alphanumeric string with no spaces that represents an authentication domain in your environment. Default Value: None Example: Demo3
   User Name	Function: Specifies the user name for the AgilePoint Service Account. Accepted Values: A valid user name. Default Value: None
   Password	Function: The password for the authentication account. Accepted Values: An alphanumeric string that represents a password. Default Value: None

2. Click Next.
3. In the Select Activity Deployment Package field, click Browse .
4. Select AutoCancelAgileWork.zip package.
5. Click Deploy.
6. Click Finish.