AgilePoint HTML Template

The AgilePoint HTML template is an HTML page used to design the configuration screen for the custom activities. This template comes with the default body structure and styles that best matches with the AgilePoint NX.

The file you create gives a place holder to design your configuration screen. Also, the external JavaScript file such as AgilePoint js can be referred in this HTML page to get the client side functionality.

How to Start

  1. Create a new project in AgilePoint NX Developer.
  2. In the project folder Design Time>WebUI, right-click HTML.
  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 html.
  6. In the Name field, enter the name for the AgilePoint HTML project item.
  7. Click Add.

HTML Example

These code samples show how you can write the HTML code to design the configuration screens for your activity.

Label

Label that appears as configuration page heading.

<label class="title paddingTitle" data-i18n="SampleConfiguration"></label>

Help Icon

Help icon that appears next to the configuration page heading.

<a class="infoHelp" data-i18n="[title]Help" id="infoHelp">
            <img src="../DefaultAssets/Images/HelpIcon.png" alt="" />
</a>

Script

Script tag to refers to an external JavaScript such as the AgilePoint JS file.

<script type="text/javascript" src="../Scripts/$fileinputname$.js"></script>

The AgilePoint NX Developer project template gives a sample configuration screen design. BasicSample.html and AdvanceSample.html give the configuration screen code by default to make it easy to design the activity. You can refer and reuse these codes to design your configuration screen to match with the AgilePoint NX UI.

Text Box

<div class="detailsFieldWrapper marginTop15px oneColSpan">
  <label class="lblPadding" data-i18n="TextBox"></label>
  <span class="star"> *</span>
  <label class="labelBold">:</label><br />
  <input name="txtTextBox" class="treeNode" id="txtTextBox" type="text" 
         style="width: 87.2%;" />
  <span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" 
        id="errorTextBox" role="alert" style="display: none; width: auto !important"></span>
</div>

HTML Div Element

<div class="detailsFieldWrapper oneColSpan marginTop10px">
  <label class="lblPadding" data-i18n="[title]HTMLDivElement;HTMLDivElement"></label>
  <span class="star"> *</span>
  <label class="labelBold">:</label><br />
  <div id="txtHTMLDivElement" class="textBox replace DivPlaceHolder" contenteditable="true" 
       style="width: 86.3%;"></div>
  <span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" id="errorHTMLDivElement" 
        role="alert" style="display: none; width: auto !important"></span>
</div>

Text Area

<div class="detailsFieldWrapper marginTop10px oneColSpan">
  <label class="lblPadding" data-i18n="TextArea"></label>
  <span class="star"> *</span>
  <label class="labelBold">:</label><br />
  <textarea name="txtTextArea" id="txtTextArea" type="text" style="width: 87%;"></textarea>
  <span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" id="errorTextArea" 
        role="alert" style="display: none; width: auto !important"></span>
</div>

Dropdown Control

<div class="detailsFieldWrapper marginTop10px twoColSpan">
  <label class="lblPadding" data-i18n="[title]InlineListDropdown;InlineListDropdown"></label>
  <span class="star"> *</span>
  <label class="labelBold">:</label><br />
  <select id="ddDropdownInline" style="width: 95% !important"></select>
  <span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" id="errorDropdownInline" 
        role="alert" style="display: none; width: auto !important"></span>
</div>
<div class="detailsFieldWrapper marginTop10px twoColSpan">
  <label class="lblPadding" data-i18n="[title]DataBindDropdown;DataBindDropdown"></label>
  <label class="labelBold">:</label><br />
  <select id="ddDropdownDataBind" style="width: 95% !important"></select>
</div>

DateTime Control

<div class="detailsFieldWrapper marginTop10px twoColSpan">
  <label class="lblPadding" data-i18n="[title]Datetime;Datetime"></label>
  <span class="star"> *</span>
  <label class="labelBold">:</label><br />
  <input id="dtDatetime" style="width: 95% !important;" />
  <span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" id="errorDatetime" 
        role="alert" style="display: none; width: auto !important"></span>
</div>

Check box

<div class="detailsFieldWrapper marginTop30px twoColSpan">
  <input type="checkbox" id="chkCheckbox" checked="checked" name="CheckboxGroup" />
  <label class="checkBoxLabel" data-i18n="[title]CheckBox1;CheckBox1">
  </label>
</div>

Radio button group

<div class="detailsFieldWrapper marginTop10px oneColSpan">
  <div class="detailsFieldWrapper" style="width:auto">
     <input type="radio" id="rdRadiobtn1" checked="checked" 
            name="RadioBtnGroup" value="Radio Button 1" />
    <label class="checkBoxLabel" data-i18n="[title]RadioButton1;RadioButton1">
    </label>
   </div>
  <div class="detailsFieldWrapper marginLeft15px" style="width:auto">
    <input type="radio" id="rdRadiobtn2" name="RadioBtnGroup" value="Radio Button 2" />
    <label class="checkBoxLabel" data-i18n="[title]RadioButton2;RadioButton2">
    </label>
  </div>
</div>

Combo box

<div class="detailsFieldWrapper twoColSpan marginTop10px">
  <label class="lblPadding" data-i18n="[title]ComboBox;ComboBox"></label>
  <span class="star"> *</span>
  <label class="labelBold">:</label><br />
  <input id="cmbComboBox" style="width: 87% !important" 
         class="treeNode xpath ComboboxPlaceHolder" />
  <br />
  <span class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" 
        id="errorComboBox" role="alert" style="display: none; width: auto !important"></span>
</div>

Grid with JSON data binding

<div class="detailsFieldWrapper oneColSpan marginTop10px">
  <label class="lblPadding" data-i18n="[title]gridJSON;gridJSON"></label>
  <span class="star"> *</span>
  <label class="labelBold">:</label><br />
  <div id="gridJSON" class="noDroppable dynamic_i18n" style="width:95%;"></div>
  <span id="ErrorgridJSON" class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" 
        style="display: none; width: auto !important;" role="alert"></span>
</div>

Grid with XML data binding

<div class="detailsFieldWrapper oneColSpan marginTop10px">
  <label class="lblPadding" data-i18n="[title]gridXML;gridXML"></label>
  <span class="star"> *</span>
  <label class="labelBold">:</label><br />
     <div id="gridXML" class="noDroppable dynamic_i18n" style="width:95%;"></div>
      <span id="ErrorgridXML" class="k-widget k-tooltip k-tooltip-validation k-invalid-msg" 
            style="display: none; width: auto !important;" role="alert"></span>
</div>