Template based with Telerik Wizard as the main container. The form product is used to collect data from users by providing fields of various UI controls. Language support provided.

Procedure

1. Add as many fields as required. Each field type must be one of the following:
   1. Textbox
   2. Multiline
   3. Dropdown List
   4. Checkbox
   5. Upload (new)
   6. Date Picker
   7. Time Picker
   8. Quantity Textbox
   9. Quantity Dropdown List
   10. Shared Data (new)
2. The field must have a unique Name (Field Title)
3. Default Value and Tooltip are optional.
4. Attributes option can be used to add control attributes directly, including:
   1. Common attributes
      1. class
      2. style
      3. readonly (readonly same as readonly=true or readonly="true")
      4. mandatory (mandatory same as mandatory=true or mandatory="true")
      5. mainline
      6. shareddata – can be used on its own or equal to header name, if used without the header data then the field title is assumed as the header.
   2. Textboxes and Multilines
      1. regex (enter a valid regular expression to be applied to a textbox)
      2. regexmsg (error message when regex not met)
   3. Upload
      1. maxfilesize in MB (Default and Maximum = 20MB)
      2. maxfiles – Maximum number of uploaded files (0 or null for unlimited)
      3. allowedext – list of allowed file extensions (if not specified then "pdf,jpg,png,bmp,tiff,gif,doc,docx,xls,xlsx,ppt,pptx,pub,pubx,csv,txt,wav,mp3,avi,mp4" is assumed.
   4. Shared data
      1. dataid – id of the shared data (Required)

1. Max Length - optional to limit the number of characters entered (for a textbox)
2. Fixed Price, if used, will be added to the total price of the item after multiplying by the selected quantity.
3. Price Set can be used to calculate an item price with price breaks
4. Value: Price Set is a special field to map selected values to Price Set (by their ID)
5. Default Quantity Used to set the default Quantity of an item if no other means is provided. Useful, for example, to give a fixed value to a checkbox field when checked (in combination with Fixed Price). Not available for all types.
6. Quantity Field: Quantity can be based on global quantity (Main Quantity) or any previously created Quantity Textboxes and Dropdown lists.
7. Tabs
   1. Use the + icon to add a new tab.
   2. Enter Tab Title and optional Image Urls (use small images less than 32x32).
   3. Create the Tab template and insert the created fields as {Field Name}. A dropdown is added to help inserting the field names.
   4. Create as many tabs as required. Fields CAN be used more than once but in a separate tab (or in the main template)
   5. Tabs are created using Telerik’s wizard, several skins are available to choose from. Tab position can also be selected.

Upload

1. When deleting, all uploaded files are deleted.
2. For the time being, when editing a product with upload option set to a specific number of files, more files can be added than set.

Shared Data

    To add a shared data control:

1. Add a field of type “Shared Data”
2. Add a title
3. Add dataid attribute in the attributes field. The Id is now displayed on the Shared Data page. Example: dataid=24
4. Save the field and add it in any tab template as {Field Title}

To update other fields, add shareddata attribute in the attributes field.  shareddata ="header column" is recommended.

Or

Notes:

1. Multiple Shared Data controls can be added with the same tab (or on Main window).
2. The tabs option (wizard) can be skipped if no repetitive controls are required. In this case bootstrap tabbing can be added to the Main window’s template. Use sample code below (source: Bootstrap site)

<nav>

   <div class="nav nav-tabs" id="nav-tab" role="tablist">

     <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>

     <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>

     <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>

   </div>

</nav>

<div class="tab-content" id="nav-tabContent">

   <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab" tabindex="0">...</div>

   <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab" tabindex="0">...</div>

   <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab" tabindex="0">...</div>

</div>