Applying Modern UI Layout to a table

The <tablename>_onformload() function runs when the the view/edit/add forms of the module loads. It enhances the form UI by applying modern card styling to tabs and organizing fields into responsive column layouts.

---

Purpose

This function performs the following UI enhancements:

1. Applies modern card styling to major form tabs.
2. Organizes form fields into responsive column layouts.
3. Improves overall readability and usability of the Form.

---

Function Definition

function trn_salesinvoice_onformload(){   //tablename_onformload
    modernCard( '#tab_invoice_details' );  //converts the section into modern card

    let section = modernCard( '#tab_customer_details' );
    $(section).css('background','floralwhite');  //changes the background color of the section

    modernCard( '#tab_amount_summary' );
    modernCard( '#tab_transport_details' );

    let fields = ['invchr','invoiceno','invdate','type','mobile','salesperson','lrdate','vehicleno','tcsper','tcsamt','tdsper','tdsamt','payableamt','duedays','gstamt','netamt'];
    modernCardSetCol(fields,6);  //sets the fields to col-6 format

    fields = ['amount','taxableamt','discount'];
    modernCardSetCol(fields,4);  //sets the fields to col-4 format
}

---

UI Behavior

1. Apply Card Layout to Tabs

The function uses modernCard() to convert tab sections into a modern card-style layout.

Note: modernCard(); //Without any section name, converts ALL sections to modern cards

Tabs Styled

Tab ID	Description
#tab_invoice_details	invoice_details is the Section Name

Example:

modernCard('#tab_invoice_details');  //where invoice_details is the section name
modernCard(); //Converts ALL sections to modern cards

---

2. Custom Background for Customer Section

The Customer Details tab is styled with a custom background color.

let section = modernCard('#tab_customer_details');
$(section).css('background','floralwhite');

This visually separates customer-related fields from the rest of the form.

---

3. Field Column Layout

Fields are organized using:

modernCardSetCol(fields, columnSize)

This assigns Bootstrap-style column widths to selected fields.

---

First Field Group (6 Column Layout)

let fields = ['invchr','invoiceno','invdate','type','mobile','salesperson'];

modernCardSetCol(fields,6);

This creates a 2-column layout (12 grid / 6).

---

Second Field Group (4 Column Layout)

fields = ['amount','taxableamt','discount'];
modernCardSetCol(fields,4);

This creates a 3-column layout.

---

Dependencies

This function relies on the following helper utilities:

Function	Purpose
modernCard()	Converts sections into card-style UI
modernCardSetCol()	Assigns responsive column width to fields

---

Best Practices

• Keep field groups logically organized.
• Use consistent column sizes for better UI alignment.
• Apply modernCard() consistently across tabs for a uniform look.
• Avoid excessive custom CSS overrides unless necessary.

---

Summary

<tablename>_onformload() improves the visual layout and usability of the Module's Entry forms by:

• Structuring sections with a card-based UI
• Organizing fields into responsive columns

This results in a cleaner, more user-friendly form interface.