Form Control

Over a dozen reusable form control built to provide iconography, MultiSelect, PeoplePicker, File Upload, CheckBox, and much more.

• Calendar
• CheckBox
• File Upload
• Hidden
• Label
• Advanced File Upload
• MultiSelect
• PeoplePicker
• Radio
• RichText
• SingleSelect
• TextBox
• TextArea

Calendar

This component consists actually of 2 subcomponent UI widgets one for the date and one for the time selection process. The developers can configure which of those are needed and also the granularity that the component will allow the users to select a date/time. Developers also choose the format that the selected datetime will be displayed in the input field. The component uses on jQuery, moment.js and bootstrap libraries.

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

Global datetime format

Examples

CheckBox

If you want config the field data source.

Also we can control the style for the checkbox.

File Upload

click to pick manually.

Examples

Hidden

Build a Hedden control.

Label

Build a Label control.

Advanced File Upload

Drop files to upload or click to pick manually.

Examples

MultiSelect

Build a MultiSelect control.

If you want config the field data source.

Examples

People Picker

Build a People Picker control.

• 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.

Radio

Build a Radio control.

Also we can control the style for the Radio.

RichText

Build a RichText control.

Examples

SingleSelect

Build a SingleSelect control.

If you want config the field data source.

Examples

TextBox

Build a TextBox control.

Examples

TextArea

Build a TextArea control.

Examples