Form Control

TextBox

Add a TextBox control.


Field Properties

  • Field - Input field name.
  • Field Label - Input field label.

  • Field Data Type - Select String as field data type.
  • Field Control Type - Select TextBox as field control type.
  • Required - Whether it is mandatory.
  • Label Style - It support to optimise the style for the Field Label.

    Example

     <h1>{data}</h1>

    {data} will replace by label name.

  • Label Value Style - It support to optimise the style for the Field Value.

    Example

     <h1>{data}</h1>

    {data} will replace by Field Value.

  • Field Value Format - Define the format for the control
  • Html Class - Define the custom class for the control.

    Example

    form-control
  • Html Attributes - Define the custom attributes for the control.

    Example

    disbaled=disabled
    xxx=yyy
  • Input Regular - define the regular for the control
  • Invalid Message - It will show on the page when you click save button and the control is empty with required state.

TextBox(Hidden)

Build a Hidden control.


Field Properties

  • Field - Input field name.
  • Field Label - Input field label.

  • Field Data Type - Select String as field data type.
  • Field Control Type - Select Hidden as field control type.
  • Required - Whether it is mandatory.
  • Label Style - It support to optimise the style for the Field Label.

    Example

     <h1>{data}</h1>

    {data} will replace by label name.

  • Label Value Style - It support to optimise the style for the Field Value.

    Example

     <h1>{data}</h1>

    {data} will replace by Field Value.

  • Field Value Format - Define the format for the control
  • Html Class - Define the custom class for the control.

    Example

    form-control
  • Html Attributes - Define the custom attributes for the control.

    Example

    disbaled=disabled
    xxx=yyy
  • Input Regular - define the regular for the control
  • Invalid Message - It will show on the page when you click save button and the control is empty with required state.

CheckBox

Add a Checkbox control


Field Properties

  • Field - Input field name.
  • Field Label - Input field label.

  • Field Data Type - Select String as field data type.
  • Field Control Type - Select Checkbox as field control type.
  • Required - Whether it is mandatory.
  • Label Style - It support to optimise the style for the Field Label.

    Example

     <h1>{data}</h1>

    {data} will replace by label name.

  • Label Value Style - It support to optimise the style for the Field Value.

    Example

     <h1>{data}</h1>

    {data} will replace by Field Value.

  • Field Value Format - Define the format for the control
  • Html Class - Define the custom class for the control.

    Example

    form-control
  • Html Attributes - Define the custom attributes for the control.

    Example

    disbaled=disabled
    xxx=yyy
  • Input Regular - define the regular for the control
  • Invalid Message - It will show on the page when you click save button and the control is empty with required state.

Set the style for the checkbox




If you want config the field data source.Please go to Styles tab in Form Design.

Radio

Add a Radio control.


Field Properties

  • Field - Input field name.
  • Field Label - Input field label.

  • Field Data Type - Select String as field data type.
  • Field Control Type - Select Radio as field control type.
  • Required - Whether it is mandatory.
  • Label Style - It support to optimise the style for the Field Label.

    Example

     <h1>{data}</h1>

    {data} will replace by label name.

  • Label Value Style - It support to optimise the style for the Field Value.

    Example

     <h1>{data}</h1>

    {data} will replace by Field Value.

  • Field Value Format - Define the format for the control
  • Html Class - Define the custom class for the control.

    Example

    form-control
  • Html Attributes - Define the custom attributes for the control.

    Example

    disbaled=disabled
    xxx=yyy
  • Input Regular - define the regular for the control
  • Invalid Message - It will show on the page when you click save button and the control is empty with required state.

Set the style for the Radio




If you want config the field data source.Please go to Styles tab in Form Design.

Select(Single)

Add a SingleSelect control.



Field Properties

  • Field - Input field name.
  • Field Label - Input field label.

  • Field Data Type - Select String as field data type.
  • Field Control Type - Select SingleSelect as field control type.
  • Required - Whether it is mandatory.
  • Label Style - It support to optimise the style for the Field Label.

    Example

     <h1>{data}</h1>

    {data} will replace by label name.

  • Label Value Style - It support to optimise the style for the Field Value.

    Example

     <h1>{data}</h1>

    {data} will replace by Field Value.

  • Field Value Format - Define the format for the control
    {selectMode: 'single',width: '50%',data_selected_text_format: 'count > 3',data_container: 'body'  }

    Example

    Name Type Default Description
    selectMode string multiple

    When set to multiple, It's multiple Select. Set to single, It's single Select. (multiple Select & single Select).
    data_actions_box boolean false

    When set to true, adds two buttons to the top of the dropdown menu (Select All & Deselect All).
    data_container string | false false

    When set to a string, appends the select to a specific element or selector, e.g., data_container: 'body' | '.main-body'

    data_header string false

    adds a header to the top of the menu; includes a close button by default
    data_live_search boolean false

    When set to true, adds a search box to the top of the selectpicker dropdown.
    data_max_options integer | false false

    When set to an integer and in a multi-select, the number of selected options cannot exceed the given value.

    This option can also exist as a data-attribute for an <optgroup>, in which case it only applies to that <optgroup>.

    data_selected_text_format 'values' | 'static' | 'count' | 'count > x' (where x is an integer) 'values'

    Specifies how the selection is displayed with a multiple select.

    'values' displays a list of the selected options (separated by multipleSeparator. 'static' simply displays the select element's title. 'count' displays the total number of selected options. 'count > x' behaves like 'values' until the number of selected options is greater than x; after that, it behaves like 'count'.

    data_size 'auto' | integer | false 'auto'

    When set to 'auto', the menu always opens up to show as many items as the window will allow without being cut off.

    When set to an integer, the menu will show the given number of items, even if the dropdown is cut off.

    When set to false, the menu will always show all items.
    data_style string | null null

    When set to a string, add the value to the button's style.
    title string | null null

    The default title for the selectpicker.
    width 'auto' | 'fit' | css-width | false (where css-width is a CSS width with units, e.g. 100px) false

    When set to auto, the width of the selectpicker is automatically adjusted to accommodate the widest option.

    When set to a css-width, the width of the selectpicker is forced inline to the given value.

    When set to false, all width information is removed.
  • Html Class - Define the custom class for the control.

    Example

    form-control
  • Html Attributes - Define the custom attributes for the control.

    Example

    disbaled=disabled
    xxx=yyy
  • Input Regular - define the regular for the control
  • Invalid Message - It will show on the page when you click save button and the control is empty with required state.

Methods

Interface with bootstrap-select.

.selectpicker('val')

You can set the selected value by calling the val method on the element.

$('.selectpicker').selectpicker('val', 'Mustard');
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);

This is different to calling val() directly on the select element. If you call val() on the element directly, the bootstrap-select ui will not refresh (as the change event only fires from user interaction). You will have to call the ui refresh method yourself.

$('.selectpicker').val('Mustard');
$('.selectpicker').selectpicker('render');
// this is the equivalent of the above
$('.selectpicker').selectpicker('val', 'Mustard');

.selectpicker('selectAll')

This will select all items in a multi-select.

$('.selectpicker').selectpicker('selectAll');

.selectpicker('deselectAll')

This will deselect all items in a multi-select.

$('.selectpicker').selectpicker('deselectAll');

.selectpicker('render')

You can force a re-render of the bootstrap-select ui with the render method. This is useful if you programatically change any underlying values that affect the layout of the element.

$('.selectpicker').selectpicker('render');

.selectpicker('mobile')

Enable mobile scrolling by calling $('.selectpicker').selectpicker('mobile'). This enables the device's native menu for select menus.

The method for detecting the browser is left up to the user.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
  $('.selectpicker').selectpicker('mobile');
}

.selectpicker('setStyle')

Modify the class(es) associated with either the button itself or its container.

If changing the class on the container:

$('.selectpicker').addClass('col-lg-12').selectpicker('setStyle');

If changing the class(es) on the button (altering data-style):

// Replace Class
$('.selectpicker').selectpicker('setStyle', 'btn-danger');
// Add Class
$('.selectpicker').selectpicker('setStyle', 'btn-large', 'add');
// Remove Class
$('.selectpicker').selectpicker('setStyle', 'btn-large', 'remove');

.selectpicker('refresh')

To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript. 

$('.selectpicker').selectpicker('refresh');

<select class="selectpicker remove-example">
                            <option value="Mustard">Mustard</option>
                            <option value="Ketchup">Ketchup</option>
                            <option value="Relish">Relish</option>
</select>
<button class="btn btn-warning rm-mustard">Remove Mustard</button>
<button class="btn btn-danger rm-ketchup">Remove Ketchup</button>
<button class="btn btn-success rm-relish">Remove Relish</button>

$('.rm-mustard').click(function () {
  $('.remove-example').find('[value=Mustard]').remove();
  $('.remove-example').selectpicker('refresh');
});

$('.ex-disable').click(function () {
  $('.disable-example').prop('disabled', true);
  $('.disable-example').selectpicker('refresh');
});
$('.ex-enable').click(function () {
  $('.disable-example').prop('disabled', false);
  $('.disable-example').selectpicker('refresh');
});

.selectpicker('toggle')

Programmatically toggles the bootstrap-select menu open/closed.

$('.selectpicker').selectpicker('toggle');

.selectpicker('hide')

To programmatically hide the bootstrap-select use the hide method (this only affects the visibility of the bootstrap-select itself).

$('.selectpicker').selectpicker('hide');

.selectpicker('show')

To programmatically show the bootstrap-select use the show method (this only affects the visibility of the bootstrap-select itself).

$('.selectpicker').selectpicker('show');

.selectpicker('destroy')

To programmatically destroy the bootstrap-select, use the destroy method.

$('.selectpicker').selectpicker('destroy');

If you want config the field data source.Please go to Styles tab in Form Design.

Select(Multi)

Add a MultiSelect control.


Field Properties

  • Field - Input field name.
  • Field Label - Input field label.

  • Field Data Type - Select String as field data type.
  • Field Control Type - Select MultiSelect as field control type.
  • Required - Whether it is mandatory.
  • Label Style - It support to optimise the style for the Field Label.

    Example

     <h1>{data}</h1>

    {data} will replace by label name.

  • Label Value Style - It support to optimise the style for the Field Value.

    Example

     <h1>{data}</h1>

    {data} will replace by Field Value.

  • Field Value Format - Define the format for the control
    {selectMode: 'multiple',width: '50%',data_selected_text_format: 'count > 3',data_container: 'body'  }

    Example

    Name Type Default Description
    selectMode string multiple

    When set to multiple, It's multiple Select. Set to single, It's single Select. (multiple Select & single Select).
    data_actions_box boolean false

    When set to true, adds two buttons to the top of the dropdown menu (Select All & Deselect All).
    data_container string | false false

    When set to a string, appends the select to a specific element or selector, e.g., data_container: 'body' | '.main-body'

    data_header string false

    adds a header to the top of the menu; includes a close button by default
    data_live_search boolean false

    When set to true, adds a search box to the top of the selectpicker dropdown.
    data_max_options integer | false false

    When set to an integer and in a multi-select, the number of selected options cannot exceed the given value.

    This option can also exist as a data-attribute for an <optgroup>, in which case it only applies to that <optgroup>.

    data_selected_text_format 'values' | 'static' | 'count' | 'count > x' (where x is an integer) 'values'

    Specifies how the selection is displayed with a multiple select.

    'values' displays a list of the selected options (separated by multipleSeparator. 'static' simply displays the select element's title. 'count' displays the total number of selected options. 'count > x' behaves like 'values' until the number of selected options is greater than x; after that, it behaves like 'count'.

    data_size 'auto' | integer | false 'auto'

    When set to 'auto', the menu always opens up to show as many items as the window will allow without being cut off.

    When set to an integer, the menu will show the given number of items, even if the dropdown is cut off.

    When set to false, the menu will always show all items.
    data_style string | null null

    When set to a string, add the value to the button's style.
    title string | null null

    The default title for the selectpicker.
    width 'auto' | 'fit' | css-width | false (where css-width is a CSS width with units, e.g. 100px) false

    When set to auto, the width of the selectpicker is automatically adjusted to accommodate the widest option.

    When set to a css-width, the width of the selectpicker is forced inline to the given value.

    When set to false, all width information is removed.
  • Html Class - Define the custom class for the control.

    Example

    form-control
  • Html Attributes - Define the custom attributes for the control.

    Example

    disbaled=disabled
    xxx=yyy
  • Input Regular - define the regular for the control
  • Invalid Message - It will show on the page when you click save button and the control is empty with required state.

Methods

Interface with bootstrap-select.

.selectpicker('val')

You can set the selected value by calling the val method on the element.

$('.selectpicker').selectpicker('val', 'Mustard');
$('.selectpicker').selectpicker('val', ['Mustard','Relish']);

This is different to calling val() directly on the select element. If you call val() on the element directly, the bootstrap-select ui will not refresh (as the change event only fires from user interaction). You will have to call the ui refresh method yourself.

$('.selectpicker').val('Mustard');
$('.selectpicker').selectpicker('render');
// this is the equivalent of the above
$('.selectpicker').selectpicker('val', 'Mustard');

.selectpicker('selectAll')

This will select all items in a multi-select.

$('.selectpicker').selectpicker('selectAll');

.selectpicker('deselectAll')

This will deselect all items in a multi-select.

$('.selectpicker').selectpicker('deselectAll');

.selectpicker('render')

You can force a re-render of the bootstrap-select ui with the render method. This is useful if you programatically change any underlying values that affect the layout of the element.

$('.selectpicker').selectpicker('render');

.selectpicker('mobile')

Enable mobile scrolling by calling $('.selectpicker').selectpicker('mobile'). This enables the device's native menu for select menus.

The method for detecting the browser is left up to the user.

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
  $('.selectpicker').selectpicker('mobile');
}

.selectpicker('setStyle')

Modify the class(es) associated with either the button itself or its container.

If changing the class on the container:

$('.selectpicker').addClass('col-lg-12').selectpicker('setStyle');

If changing the class(es) on the button (altering data-style):

// Replace Class
$('.selectpicker').selectpicker('setStyle', 'btn-danger');
// Add Class
$('.selectpicker').selectpicker('setStyle', 'btn-large', 'add');
// Remove Class
$('.selectpicker').selectpicker('setStyle', 'btn-large', 'remove');

.selectpicker('refresh')

To programmatically update a select with JavaScript, first manipulate the select, then use the refresh method to update the UI to match the new state. This is necessary when removing or adding options, or when disabling/enabling a select via JavaScript. 

$('.selectpicker').selectpicker('refresh');

<select class="selectpicker remove-example">
                            <option value="Mustard">Mustard</option>
                            <option value="Ketchup">Ketchup</option>
                            <option value="Relish">Relish</option>
</select>
<button class="btn btn-warning rm-mustard">Remove Mustard</button>
<button class="btn btn-danger rm-ketchup">Remove Ketchup</button>
<button class="btn btn-success rm-relish">Remove Relish</button>

$('.rm-mustard').click(function () {
  $('.remove-example').find('[value=Mustard]').remove();
  $('.remove-example').selectpicker('refresh');
});

$('.ex-disable').click(function () {
  $('.disable-example').prop('disabled', true);
  $('.disable-example').selectpicker('refresh');
});
$('.ex-enable').click(function () {
  $('.disable-example').prop('disabled', false);
  $('.disable-example').selectpicker('refresh');
});

.selectpicker('toggle')

Programmatically toggles the bootstrap-select menu open/closed.

$('.selectpicker').selectpicker('toggle');

.selectpicker('hide')

To programmatically hide the bootstrap-select use the hide method (this only affects the visibility of the bootstrap-select itself).

$('.selectpicker').selectpicker('hide');

.selectpicker('show')

To programmatically show the bootstrap-select use the show method (this only affects the visibility of the bootstrap-select itself).

$('.selectpicker').selectpicker('show');

.selectpicker('destroy')

To programmatically destroy the bootstrap-select, use the destroy method.

$('.selectpicker').selectpicker('destroy');

If you want config the field data source.Please go to Styles tab in Form Design.

TextArea

Add a TextArea control.



Field Properties

  • Field - Input field name.
  • Field Label - Input field label.

  • Field Data Type - Select String as field data type.
  • Field Control Type - Select TextArea as field control type.
  • Required - Whether it is mandatory.
  • Label Style - It support to optimise the style for the Field Label.

    Example

     <h1>{data}</h1>

    {data} will replace by label name.

  • Label Value Style - It support to optimise the style for the Field Value.

    Example

     <h1>{data}</h1>

    {data} will replace by Field Value.

  • Field Value Format - Define the format for the control
  • Html Class - Define the custom class for the control.

    Example

    form-control
  • Html Attributes - Define the custom attributes for the control.

    Example

    disbaled=disabled
    xxx=yyy
  • Input Regular - define the regular for the control
  • Invalid Message - It will show on the page when you click save button and the control is empty with required state.

Label

Build a Label control.


Field Properties

  • Field - Input field name.
  • Field Label - Input field label.

  • Field Data Type - Select String as field data type.
  • Field Control Type - Select Label as field control type.
  • Required - Whether it is mandatory.
  • Label Style - It support to optimise the style for the Field Label.

    Example

     <h1>{data}</h1>

    {data} will replace by label name.

  • Label Value Style - It support to optimise the style for the Field Value.

    Example

     <h1>{data}</h1>

    {data} will replace by Field Value.

  • Field Value Format - Define the format for the control
  • Html Class - Define the custom class for the control.

    Example

    form-control
  • Html Attributes - Define the custom attributes for the control.

    Example

    disbaled=disabled
    xxx=yyy
  • Input Regular - define the regular for the control
  • Invalid Message - It will show on the page when you click save button and the control is empty with required state.

File Upload

Add a Fileupload control



Field Properties

  • Field - Input field name.
  • Field Label - Input field label.

  • Field Data Type - Select String as field data type.
  • Field Control Type - Select File Upload as field control type.
  • Required - Whether it is mandatory.
  • Label Style - It support to optimise the style for the Field Label.

    Example

     <h1>{data}</h1>

    {data} will replace by label name.

  • Label Value Style - It support to optimise the style for the Field Value.

    Example

     <h1>{data}</h1>

    {data} will replace by Field Value.

  • Field Value Format - Define the format for the control
  • Html Class - Define the custom class for the control.

    Example

    form-control
  • Html Attributes - Define the custom attributes for the control.

    Example

    disbaled=disabled
    xxx=yyy
  • Input Regular - define the regular for the control
  • Invalid Message - It will show on the page when you click save button and the control is empty with required state.

File Upload(Advanced)

Add a Advanced File Upload control



Field Properties

  • Field - Input field name.
  • Field Label - Input field label.

  • Field Data Type - Select String as field data type.
  • Field Control Type - Select Advanced File Upload as field control type.
  • Required - Whether it is mandatory.
  • Label Style - It support to optimise the style for the Field Label.

    Example

     <h1>{data}</h1>

    {data} will replace by label name.

  • Label Value Style - It support to optimise the style for the Field Value.

    Example

     <h1>{data}</h1>

    {data} will replace by Field Value.

  • Field Value Format - Define the format for the control
  • Html Class - Define the custom class for the control.

    Example

    form-control
  • Html Attributes - Define the custom attributes for the control.

    Example

    disbaled=disabled
    xxx=yyy
  • Input Regular - define the regular for the control
  • Invalid Message - It will show on the page when you click save button and the control is empty with required state.

Calendar

Add a Calendar control.


Field Properties

  • Field - Input field name.
  • Field Label - Input field label.

  • Field Data Type - Select DateTime as field data type.
  • Field Control Type - Select Calendar as field control type.
  • Required - Whether it is mandatory.
  • Label Style - It support to optimise the style for the Field Label.

    Example

     <h1>{data}</h1>

    {data} will replace by label name.

  • Label Value Style - It support to optimise the style for the Field Value.

    Example

     <h1>{data}</h1>

    {data} will replace by Field Value.

  • Field Value Format - Define the format for the control

    Example

    DateTime Format: dd/MM/yyyy hh:mm

    If you set the datetime format in Field Value Format. The calendar will show with this format. If you empty the format. The calendar will show with global datetime format



    When the datetime format is dd/MM/yyyy, you can just select the date.


    When the datetime format is dd/MM/yyyy hh:mm, you can select the date , hours and minutes.



  • Html Class - Define the custom class for the control.

    Example

    form-control
  • Html Attributes - Define the custom attributes for the control.

    Example

    disbaled=disabled
    xxx=yyy
  • Input Regular - define the regular for the control

    • Example

    Email:

    ^\w+((-\w+)|(\.\w+))*\@[A-Za-z0-9]+((\.|-)[A-Za-z0-9]+)*\.[A-Za-z0-9]+$
  • Invalid Message - It will show on the page when you click save button and the control is empty with required state.

    Example

    Please enter the correct email format.

PeoplePicker

Add a People Picker control.


Field Properties

  • Field - Input field name.
  • Field Label - Input field label.

  • Field Data Type - Select String as field data type.
  • Field Control Type - Select People Picker as field control type.
  • Required - Whether it is mandatory.
  • Label Style - It support to optimise the style for the Field Label.

    Example

     <h1>{data}</h1>

    {data} will replace by label name.

  • Label Value Style - It support to optimise the style for the Field Value.

    Example

     <h1>{data}</h1>

    {data} will replace by Field Value.

  • Field Value Format - Click the config button to open configuration page.
  • Html Class - Define the custom class for the control.

    Example

    form-control
  • Html Attributes - Define the custom attributes for the control.

    Example

    disbaled=disabled
    xxx=yyy
  • Input Regular - define the regular for the control
  • Invalid Message - It will show on the page when you click save button and the control is empty with required state.

People Picker Configuration



  • Orgination Code - Select the orgination code. When you just select one orgination code. It just support the selected orgination code. If you select two more orgination code. It's will contains current orgination Code and the selected two more orgination code.
  • Item Mode - Staff mean just support the staff data. Group mean just support the group data. If both of them are checked then it support the staff and group data.
  • Set current user as default - When it is checked. When we add a new form, it will add current user to this people picker control.
  • Search Dialog - Define the tooltip with search box and define the pagesize in the search list.
  • Filter - Define the filter depend on the orgination code.
    Single OrganizationCode. 
    
{
    OrganizationCode:"OrganizationCode1", 
    QueryParas:[{ "FieldName": "UserName", "FieldValue": "Name" }]
}
    Multi OrganizationCode 
    
{
    OrganizationCode:"OrganizationCode1", 
    QueryParas:[{ "FieldName": "UserName1", "FieldValue": "Name" },
    { "FieldName": "UserName2", "FieldValue": "Name" }]
},
{ 
    OrganizationCode:"OrganizationCode2", 
    QueryParas:[{ "FieldName": "UserName1", "FieldValue": "Name" },
    { "FieldName": "UserName2", "FieldValue": "Name" }]
}
  • Item Content - Define the three item for the people picker control. 
    
{FirstLineDesc: "UserName", SecondLineDesc: "Phone", ThirdLineDesc: "Email" }
  • Width - Define the width for the people picker control.
  • Max Length - Define the select count for the people picker control.

ClientPicker

Add a Client Picker control.


Field Properties

  • Field - Input field name.
  • Field Label - Input field label.

  • Field Data Type - Select String as field data type.
  • Field Control Type - Select People Picker as field control type.
  • Required - Whether it is mandatory.
  • Label Style - It support to optimise the style for the Field Label.

    Example

     <h1>{data}</h1>

    {data} will replace by label name.

  • Label Value Style - It support to optimise the style for the Field Value.

    Example

     <h1>{data}</h1>

    {data} will replace by Field Value.

  • Field Value Format - Click the config button to open configuration page.
  • Html Class - Define the custom class for the control.

    Example

    form-control
  • Html Attributes - Define the custom attributes for the control.

    Example

    disbaled=disabled
    xxx=yyy
  • Input Regular - define the regular for the control
  • Invalid Message - It will show on the page when you click save button and the control is empty with required state.

Client Picker Configuration


  • Orgination Code - Select the orgination code. When you just select one orgination code. It just support the selected orgination code. If you select two more orgination code. It's will contains current orgination Code and the selected two more orgination code.
  • Category Name - Staff mean just support the staff data. Group mean just support the group data. If both of them are checked then it support the staff and group data.
  • Order Field Name
  • Is Descend - When it is checked. When we add a new form, it will add current user to this people picker control.
  • Search Dialog - Define the tooltip with search box and define the pagesize in the search list.
  • Filter - Define the filter depend on the orgination code.
    Single OrganizationCode. 
    
{
    OrganizationCode:"OrganizationCode1", 
    QueryParas:[{ "FieldName": "UserName", "FieldValue": "Name" }]
}
    Multi OrganizationCode 
    
{
    OrganizationCode:"OrganizationCode1", 
    QueryParas:[{ "FieldName": "UserName1", "FieldValue": "Name" },
    { "FieldName": "UserName2", "FieldValue": "Name" }]
},
{ 
    OrganizationCode:"OrganizationCode2", 
    QueryParas:[{ "FieldName": "UserName1", "FieldValue": "Name" },
    { "FieldName": "UserName2", "FieldValue": "Name" }]
}
  • OnChange
  • Item Content - Define the three item for the people picker control. 
    
{FirstLineDesc: "UserName", SecondLineDesc: "Phone", ThirdLineDesc: "Email" }
  • Width - Define the width for the people picker control.
  • Max Length - Define the select count for the people picker control.

Tags

Add a Tags control.


Field Properties

  • Field - Input field name.
  • Field Label - Input field label.

  • Field Data Type - Select String as field data type.
  • Field Control Type - Select RichText as field control type.
  • Required - Whether it is mandatory.
  • Label Style - It support to optimise the style for the Field Label.

    Example

     <h1>{data}</h1>

    {data} will replace by label name.

  • Label Value Style - It support to optimise the style for the Field Value.

    Example

     <h1>{data}</h1>

    {data} will replace by Field Value.

  • Field Value Format - Define the format for the control
  • Html Class - Define the custom class for the control.

    Example

    form-control
  • Html Attributes - Define the custom attributes for the control.

    Example

    disbaled=disabled
    xxx=yyy
  • Input Regular - define the regular for the control
  • Invalid Message - It will show on the page when you click save button and the control is empty with required state.

RichText

Add a RichText control.



Field Properties

  • Field - Input field name.
  • Field Label - Input field label.

  • Field Data Type - Select String as field data type.
  • Field Control Type - Select RichText as field control type.
  • Required - Whether it is mandatory.
  • Label Style - It support to optimise the style for the Field Label.

    Example

     <h1>{data}</h1>

    {data} will replace by label name.

  • Label Value Style - It support to optimise the style for the Field Value.

    Example

     <h1>{data}</h1>

    {data} will replace by Field Value.

  • Field Value Format - Define the format for the control
  • Html Class - Define the custom class for the control.

    Example

    form-control
  • Html Attributes - Define the custom attributes for the control.

    Example

    disbaled=disabled
    xxx=yyy
  • Input Regular - define the regular for the control
  • Invalid Message - It will show on the page when you click save button and the control is empty with required state.
  • ReadOnly -- Metadata_ControlName.setReadOnly();
  • More Detail -- Click http://ckeditor.com/;