Form Customization

Form customization in TechMaju allows users to tailor forms according to their specific needs using a user-friendly drag-and-drop interface. This guide provides detailed instructions on how to effectively use this feature.

Understanding the Form Customization DocType

Purpose: The purpose of the Form Customization DocType is to enable users to create and modify forms within the TechMaju platform. This feature allows for the efficient organization of fields and sections, improving data entry and management processes.

Function: The Form Customization DocType allows users to add, remove, and rearrange fields and sections within a form. It supports various field types and configurations, ensuring that forms can be customized to meet specific requirements.

Form Customization Fields

Procedure for Drag-and-Drop Form Customization

1. Navigate to DocType > Form Tab

2. Adding a New Section:

   • Click on the 'Add a new section' button.

   • A new section will appear on the form.

   • Label the section appropriately.

3. Managing Sections and Columns:

   • Click on the ellipsis (three dots) icon on the right side of a section.

   • Choose from the following options:

     • Add section below: Adds a new section beneath the current one.

     • Remove section: Deletes the current section.

     • Add column: Adds a new column within the section.

     • Remove column: Deletes the selected column.

4. Adding Fields to a Section:

   • Click on the 'Add field' button within the desired section.

   • A dropdown menu will appear, displaying various field types.

   • Select the desired field type (e.g., Text, Attach, Button).

   • Customize the field properties such as Label, Type, and Options.

   More about Field Configuration →

5. Adding Tabs:

   • Click on the 'Add tab' button at the top right.

   • A new tab will be created.

   • Label the tab and add sections and fields as needed.

6. Reordering Fields and Sections:

   • Click and hold on a field or section.

   • Drag it to the desired position within the form or to another tab.

   • Release the mouse button to place the field or section in the new position.

7. Saving Changes:

   • After completing the customization, click on the Save button to apply the changes.

Procedure for Manual Form Customization

1. Navigate to DocType > Settings Tab

2. Add a New Field:

   • Scroll down to the 'Fields' section and click 'Add Row' to insert a new field.

3. Configure the Field:

   • Set the field's label, type, and name.

   • Specify any options and default values.

   • Adjust visibility settings, list/search settings, permissions, constraints, and display options as needed.

   • Configure fetch settings and any JavaScript conditions for displaying or making the field mandatory/read-only.

4. Save the DocType:

   • Save your changes to apply the new field configuration.

Best Practices

• Organize fields and sections logically for easy data entry.

• If your User base includes non-desktop users, ensure the form displays in a manner that is appropriate in smaller screens. The out-of-box form has responsive views, but the order still depends on the form customization.