AgilePoint JavaScript Template

The AgilePoint JavaScript template comes with default functions and lets you give logic such as validation, on load, or submission in the AgilePoint NX environment.

In a configuration page all the client side validation and client side manipulation are done through JavaScript. The AgilePoint HTML page supports external JavaScript. You can create an external JavaScript with AgilePoint JS file.

The AgilePoint JS file comes with these functions:

  • OnLoad
  • OnValidate
  • OnSubmit
  • LoadFunctions
  • Remove

How to Start

  1. Create a new project in AgilePoint NX Developer.
  2. In the project folder Design Time>WebUI, right-click Scripts.
  3. In the item menu, click Add>New Item.
  4. On the Add New Item screen, in the left pane of Visual C# menu list, select AgilePoint.
  5. Select AgilePoint js.
  6. In the Name field, enter the name for the AgilePoint JavaScript project item.
  7. Click Add.

JavaScript Code Example

These code samples show how you can write the JavaScript code for client side validation and client side manipulation.

The AgilePoint JS file comes with stub implemented for these functions.

OnLoad

This function is called when the configuration screen loads.

function OnLoad(JSONDATA)
{

};

OnSubmit

This function is called when Ok button is clicked in the configuration screen to save the configuration data.

function OnSubmit() 
{

JSONDATA = { Data: { Properties: [] } };

////Sample usage for a textbox control
//var TextBoxValue = $("#txtTextBox").val();
//Utility.AddDataToJSONOnSubmit(JSONDATA, "txtTextBox", TextBoxValue);

return JSONDATA
};

OnValidate

This function is called when Ok button is clicked in the configuration screen to validate the configured data before it is saved.

function OnValidate() 
{
$('.k-invalid-msg').css('display', 'none');
var validflag = true;

//// Sample usage for validating a textbox control
//validflag = validflag ? ValidateTextBox("txtTextBox", "errorTextBox", "TextBox") : false;

return validflag;
};

LoadFunctions

Automatically executed on load of the JavaScript. Any initalization of values or controls can be done here.

function LoadFunctions() 
{

  //var ConfigHelpURL = "/Help.html";
  //if (ConfigHelpURL == "") $("#infoHelp").css("display", "none");
  //$("#infoHelp").bind("click", function () { window.open(ConfigHelpURL, '_blank'); });

  //Sets Locale
  Utility.SetLocale();
};

Remove

To remove or delete variables from text boxes.

function Remove(obj) 
{
var id = $(obj).closest("div").attr("id");
$('#' + id).attr("contentEditable", !$('#' + id).hasClass("customAttr"));
$('#' + id).text("");
$(obj).closest('span').remove();
};

There are two events implemented for text box.

Keydown

Logic to execute when user types some value and clicks enter.

$('.textBox').keydown(function (event)
  {
  if ((this.children.length !== 0 && $(this.children)[0].tagName == "SPAN") || event.keyCode == 13)
    {
     this.blur();
     return false;
    }
  });

Blur

Logic to execute when the user drags and drops variables or types some value.

$('.textBox').blur(function (e)
{
  var id = this.id;
  if (this.children.length !== 0 && this.children[0].tagName == "SPAN") 
  { 
    this.setAttribute("contentEditable", false); 
  }
  else 
  {
    if ((this.textContent.trim() == "") || (this.innerHTML == "<br>"))
    {
      this.innerHTML = "";
      this.setAttribute("contentEditable", !$(this).hasClass("customAttr"));
    }
    else 
    {
      var appendText = '<span class="k-textbox k-button k-space-right tagSpan" 
                                 contenteditable="false" 
                                 title="' 
                                 + this.textContent + '" style="width:auto;">' 
                                 + this.textContent + '<a id="deletebox" 
                                 onClick="[HTML file name].Remove(this)" 
                                 class="k-icon k-delete"></a></span>';
      this.innerHTML = "";
      $('#' + this.id).append(appendText);
      this.setAttribute("contentEditable", false);
    }
  }
  if (this.children.length !== 0 && this.children[0].tagName == "SPAN") 
  { 
    $(".k-tooltip-validation").css("display", "none");  
  }
});

The AgilePoint NX Developer project template gives some sample JavaScript functions and events. BasicSample.js and AdvanceSample.js files give you some JavaScript functions and event codes to refer and reuse.

LoadAccessToken

Method to load the Access token.

function LoadFunctions() 
{
  LoadAccessToken();
  Utility.SetLocale();
  $(".DivPlaceHolder").attr("data-placeholder", Utility.GetLocaleString("DataPlaceHolder"));
};

ValidateTextBox

Validate the Textbox Control for required field.

var ValidateTextBox = function (controlId, errorControlId, ControlName) 
{
  var controlType = "textbox", errorMsg = "";

  errorMsg = Utility.GetLocaleString("TextBoxNullExceptionPrefix") + 
    Utility.GetLocaleString(ControlName);
  if (!Validate.ValidateIsNullOrEmpty(controlId, errorControlId, controlType, errorMsg)) 
  {
    return false;
  };
  return true;
};

OnLoad

Bind the data to the control when the form loads.

function OnLoad(JSONDATA) 
{
  Utility.BindDataToControls(JSONDATA);
  JSON.Data.Properties.forEach(function (pair) 
  {
    (pair.Name == "dtDatetime") && ($dtDatetime.data("kendoDateTimePicker").value(pair.Value));
    if (droppableTextBoxId.indexOf(pair.Name) !== -1) 
    {
      var id = pair.Name
      var textBoxContents = pair.Value.split(";");
      var value = textBoxContents[0];
      var title = textBoxContents[1];
      var color = textBoxContents[2];
      $("#" + id).html("");
       if (value == "") {
      }
      else 
      {
        $("#" + id).text("");
        $("#" + id).append('<span class="k-textbox k-button k-space-right tagSpan" 
          contenteditable="false" title="' + title + '" >' + value + 
          '<a id="deletebox" onClick="BasicControls.Remove(this)" 
          class="k-icon k-delete"></a></span>')
        $("#" + id).attr("contentEditable", false);
      }
    }
  });
};

OnSubmit

Contains the implementation to add the data from controls to JSON data object.

function OnSubmit() 
{
  JSONDATA = { Data: { Properties: [] } };

  //Textbox
  var TextBoxValue = $("#txtTextBox").val();
  Utility.AddDataToJSONOnSubmit(JSONDATA, "txtTextBox", TextBoxValue);
  Utility.AddDataToJSONOnSubmit(JSONDATA, "textboxproperty", TextBoxValue);

  //HTML Div Element
  for (var i = 0; i < droppableTextBoxId.length; i++) 
  {
    var id = droppableTextBoxId[i];
    var property = droppableTextBoxProperties[i];
    var nodeText;
    var nodeValue;
    var spanColor;

    if ($($("#" + id).children()).length == 1) 
    {
      nodeText = $($("#" + id).children()[0]).text();
      nodeValue = $($("#" + id).children()[0]).attr('title');
      spanColor = $($("#" + id).children()[0]).css("background-color");
    }
    else 
    {
      nodeText = "";
      nodeValue = "";
      spanColor = "";
    }
    Utility.AddDataToJSONOnSubmit(JSONDATA, id, nodeText + ";" + nodeValue + ";" + spanColor);
    Utility.AddDataToJSONOnSubmit(JSONDATA, property, nodeValue);
  }

  //The following are the reusable code to access the data from the UI 
  //control on submit and pass it to JSON object for processing it.
  //Text Area
  var TextAreaValue = $("#txtTextArea").val();
  Utility.AddDataToJSONOnSubmit(JSONDATA, "txtTextArea", TextAreaValue);
  Utility.AddDataToJSONOnSubmit(JSONDATA, "texareaproperty", TextAreaValue);

  //CheckBox
  var IschkChecked = $("#chkCheckbox").prop('checked');
  Utility.AddDataToJSONOnSubmit(JSONDATA, "chkCheckbox", IschkChecked);

  //Dropdown
  var DropdownInline = $("#ddDropdownInline").val();
  Utility.AddDataToJSONOnSubmit(JSONDATA, "ddDropdownInline", DropdownInline);

  var DropdownDataBind = $("#ddDropdownDataBind").val();
  Utility.AddDataToJSONOnSubmit(JSONDATA, "ddDropdownDataBind", DropdownDataBind);

  //DateTime
  var dateTimeval = $dtDatetime.val();
  Utility.AddDataToJSONOnSubmit(JSONDATA, "dtDatetime", dateTimeval);

  //Radio Button
  var RadioButton1 = $("#rdRadiobtn1").prop('checked');
  var RadioButton2 = $("#rdRadiobtn2").prop('checked');
  Utility.AddDataToJSONOnSubmit(JSONDATA, "rdRadiobtn1", RadioButton1);
  Utility.AddDataToJSONOnSubmit(JSONDATA, "rdRadiobtn2", RadioButton2);

  return JSON;
};

Blur - event

Creates a span element on blur event of a div element.

$('.textBox').blur(function (e) 
{
  if (!(this.children.length !== 0 && this.children[0].tagName == "SPAN")) 
  {
    if ((this.textContent.trim() == "") || (this.innerHTML == "<br>")) 
    {
      this.innerHTML = "";
      this.setAttribute("contentEditable", true);
    }
    else 
    {
      var appendText = '<span class="k-textbox k-button k-space-right tagSpan" 
        contenteditable="false" title="' + this.textContent + '" style="width:auto;">' 
        + this.textContent + '<a id="deletebox" onClick="[HTML file name].Remove(this)" 
        class="k-icon k-delete"></a></span>';
      this.innerHTML = "";
      $(this).append(appendText);
    }
  }

  if (this.children.length !== 0 && this.children[0].tagName == "SPAN") 
  {
    $(".k-invalid-msg").css("display", "none");
    this.setAttribute("contentEditable", false);
  }
});

Remove

Removes custom attribute span from div element.

function Remove(obj) 
{
  var textBox = $(obj).closest("div");
  $(textBox).html("");
  $(textBox).attr("contentEditable", !$(textBox).hasClass("customAttr"));
}

You can reuse these codes to access the data from the UI control on submit and pass it to JSON object for processing.

Text Area

var TextAreaValue = $("#txtTextArea").val();
  Utility.AddDataToJSONOnSubmit(JSONDATA, "txtTextArea", TextAreaValue);
  Utility.AddDataToJSONOnSubmit(JSONDATA, "texareaproperty", TextAreaValue);

Check box

var IschkChecked = $("#chkCheckbox").prop('checked');
  Utility.AddDataToJSONOnSubmit(JSONDATA, "chkCheckbox", IschkChecked);

Dropdown

var DropdownInline = $("#ddDropdownInline").val();
  Utility.AddDataToJSONOnSubmit(JSONDATA, "ddDropdownInline", DropdownInline);

DateTime

var dateTimeval = $dtDatetime.val();
  Utility.AddDataToJSONOnSubmit(JSONDATA, "dtDatetime", dateTimeval);

Radio Button

var RadioButton1 = $("#rdRadiobtn1").prop('checked');
  var RadioButton2 = $("#rdRadiobtn2").prop('checked');
  Utility.AddDataToJSONOnSubmit(JSONDATA, "rdRadiobtn1", RadioButton1);
  Utility.AddDataToJSONOnSubmit(JSONDATA, "rdRadiobtn2", RadioButton2);