Create an Example System Activity

This topic gives an example of how to create a Calculator system activity with the AgilePart project template. The Calculator system activity adds two operands, and shows the result.

To create a Calculator system activity, do the procedure in this topic.

Create a New Project for the Example System Activity in AgilePoint NX Developer

To create a new project for the example Calculator, do the procedure in this topic.

Screen



Prerequisites

Procedure

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

Create an Example System Activity Configuration Screen

This topic gives an example of how to create a configuration screen for the example Calculator system activity with the AgilePart project template.

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 AgilePartDescriptor.cs project template, replace all MyAgilePartDescriptor with CalculatorDescriptor.
  2. Replace the Exposed Properties code section with this code.

    This code creates two properties for the two operands to store the values.

    [
      Category("First Operand"),
      Description("First Operand")
    ]
      public string FirstNumber
      {
      get
        {
          object obj = base["FirstNumber"];
          if (obj == null) obj = 0;
          return (string)obj;
        }
        set
        {
          base["FirstNumber"] = value;
        }
      }
    
    [
      Category("Second Operand"),
      Description("Second Operand")
    ]
      public string SecondNumber
      {
      get
        {
          object obj = base["SecondNumber"];
          if (obj == null) obj = 0;
          return (string)obj;
        }
        set
        {
          base["SecondNumber"] = value;
        }
      }
  3. On the InitializeShapeProperties() method, in the ShapeProperties Initialization region , replace the code with this code:
    WFActivityMasterProperties objFirstNumber = new WFActivityMasterProperties
    {
      Browsable = true,
      Id = "FirstNumber"
    };
    AddActivityProperties(objFirstNumber);
    
    WFActivityMasterProperties objSecondNumber = new WFActivityMasterProperties()
    {
      Browsable = true,
      Id = "SecondNumber"
    };
    AddActivityProperties(objSecondNumber);
  4. To create your HTML page to design the configuration screen for your custom system 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 Add.html.
    6. Click Add.
  5. To design the configuration screen, open the file Add.html.
  6. On the Add.html file, within the <div class="marginLeft15px"> tags, enter this code:
    <!-- Textbox First Operand -->
    <div class="detailsFieldWrapper marginTop15px oneColSpan">
    
    <!-- The label shows the field name. For example, First Number -->
    <label class="lblPadding" data-i18n="labelFirstNumber"></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="textboxFirstNumber" 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="errorFirstNumber" 
          role="alert" 
          style="display: none; width: auto ! important"></span>
    
    </div>
    
    <!-- Textbox Second Operand -->
    <div class="detailsFieldWrapper marginTop15px oneColSpan">
    
    <!-- The label shows the field name. For example, Second Number -->
    <label class="lblPadding" data-i18n="labelSecondNumber"></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="textboxSecondNumber" 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="errorSecondNumber" 
          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 Add.js.
    6. Click Add.
  8. On the Add.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 Add.html.

    validflag = validflag ? ValidateTextBox("textboxFirstNumber", 
                                            "errorFirstNumber", 
                                            "labelFirstNumber") : false;
    validflag = validflag ? ValidateTextBox("textboxSecondNumber", 
                                            "errorSecondNumber", 
                                            "labelSecondNumber") : 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.

    var firstNumber = $("#textboxFirstNumber").val();
      Utility.AddDataToJSONOnSubmit(JSONDATA, "firstnumber", firstNumber);
      Utility.AddDataToJSONOnSubmit(JSONDATA, "textboxFirstNumber", firstNumber);
    
    var secondNumber = $("#textboxSecondNumber").val();
      Utility.AddDataToJSONOnSubmit(JSONDATA, "secondnumber", secondNumber);
      Utility.AddDataToJSONOnSubmit(JSONDATA, "textboxSecondNumber", secondNumber);
  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 system 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 Add.json.
    6. Click Add.
    7. On the Select Activity Language Group screen, in the Language list, select a language for your activityEnglish in this example.
  12. In the Add.en-US.json file, 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 screen header label.
      // It shows the localized title of the screen (refer the id in Add.html). 
      "SampleConfiguration": "Add AgilePart Configuration",
    
      // data-i18n id of the first operand label, where the localized value "First Number" 
      // will be displayed on the wizard screen (refer the id in Add.html). 
      "labelFirstNumber": "First Number",
    
      // data-i18n id of the second operand label, where the localized value "Second Number"
      // will be displayed on the wizard screen (refer the id in Add.html).
      "labelSecondNumber": "Second Number",
    
      // Localized message prefix for the not null or required field validation
      // (refer the id in Add.js).
      "TextBoxNullExceptionPrefix": "Please enter the "
    }
  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 the Add.html file.
    4. Click Preview.

Configure the Runtime Functionality for an Example System Activity

To configure the runtime functionality for an example system activity called Calculator with the AgilePart project template, do the procedure in this topic.

Procedure

  1. In the AgilePart.cs file, replace the default class name MyAgilePart with CalculatorAgilePart.
  2. In the AgilePart.cs file, replace the default method name Method1 with Add.
    public void Add(
      WFProcessInstance pi,
      WFAutomaticWorkItem w, 
      IWFAPI api,
      NameValue[] parameters)
  3. Enter this code in TODO: Add implementation code placeholder:
    // TODO: Add implementation code
                    
      // Converting the NameValue array of parameters to hash table 
      Hashtable ht = ToHashtable(parameters);
                    
      // Access the values from hash table and store it in a local variable
        string firstNo = ht["FirstNumber"] as string;
                    
      // Access the values from Hashtable and store it in a local variable
      string secondNo = ht["SecondNumber"] as string;
                    
      // Do the required operation of adding two numbers
      int _result = Convert.ToInt32(firstNo) + Convert.ToInt32(secondNo);
                    
      // Update the custom attribute with the resultant data
      api.SetCustomAttr(pi.WorkObjectID, "Result", _result);
    
      if (w.Synchronous) MarkSuccess(api, pi, w, parameters);

Change the Properties of Activity Group and Activity for the Example System Activity

To change the properties of activity group and activity for the example Calculator system activity, do the procedure in this topic.

Screen



Good to Know

Procedure

  1. On the Activity Group screen, in the Activity Group Name field, enter Calculator.
  2. In the Activity Group Title field, enter Calculator AgilePart.
  3. To configure the activity, in the Activity section, click Edit Configuration Wizard Edit Configuration Wizard icon.
  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 CalculatorAgilePart.
  7. In the Activity Method list, select Add.
  8. In the Activity field, enter Add.
  9. In the Title field, enter Add.
  10. Click the Activity Wizard Configuration tab.
  11. On the Activity Wizard Configuration tab, in the HTML field, click Browse Browse icon, and select the file DesignTime/WebUI/HTML/Add.html.
  12. In the Script field, click Browse Browse icon to browse DesignTime/WebUI/Scripts/Add.js file.
  13. On the Localization Resources section, in the Language list, select English.
  14. In the File Location field, click Browse Browse icon to browse DesignTime/WebUI/Locale/en-US/Add.en-US.json file.
  15. Click Add to add the activity properties to the activity list.
  16. On the Activity Group screen, click Save to save the changes.

Create a Deployment Package for the Example System Activity

To create a deployment package for the example Calculator project, do the procedure in this topic.

Good to Know

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

Procedure

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

Deploy the Example System Activity Package in AgilePoint NX

To deploy a system activity package for the example Calculator activity in AgilePoint NX, do the procedure in this topic.

Screen



Screen



How to Start

  1. On the AgilePoint Server Manager screen, click AgilePoint Deployment Utility AgilePoint Deployment Utility icon.

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 Browse icon.
  4. Select Calculator.zip package.
  5. Click Deploy.
  6. Click Finish.