Anyone with some sample code for customising any existing web_forms for both js and py?

I wanted to customise the Issue’s web form . Can someone enlighten me the process which i should follow ? I have watched D-Code’s video but I am still confused how does the backend .py file works

You can’t get full control when customizing web forms.

To create refer Adding Pages and dynamic pages. You can add own/existing styles. The below html files contains two fields. The saveData() function to retrieve the values of Name and Phone number, and include them in the records array. Ensure that the backend API (method_name ) is capable of handling the additional fields (Name and Phone number) in the records it receives and stores the data in the particular doctype you want.

new.html

<form>
    <!-- Existing table and form elements -->
    
    <!-- Add Name field -->
    <div class="form-group">
        <label for="name">Name:</label>
        <input type="text" class="form-control" id="name" required>
    </div>

    <!-- Add Phone number field -->
    <div class="form-group">
        <label for="phone">Phone Number:</label>
        <input type="text" class="form-control" id="phone" required>
    </div>
<button type="button" onclick="saveData()" class="btn btn-primary">Save Data</button>
</form>
<script>
function saveData() {
    var records = [];
    var validationFailed = false;

    // Loop through the forms to collect the records
    $(".customForm").each(function () {
        // Existing code to collect volunteer data

        // Retrieve Name and Phone number
        var name = $("#name").val();
        var phone = $("#phone").val();

        // Add Name and Phone number to the record
        record['name'] = name;
        record['phone'] = phone;

        records.push(record);
    });
frappe.call({
    method: "module_name.module_name.doctype.doctype_name.doctype_name.method_name",
    args: {
        records: JSON.stringify(records)
    },
    callback: function (response) {
        if (response.message) {
            if (response.message.status === "success") {
                // Success handling
            } else if (response.message.status === "error") {
                // Error handling
            }
        } else {
            // Failure handling
        }
    }
});

    
}

</script>

.py file

def method_name(records):
    try:
        # Parse JSON string to list of dictionaries
        records = frappe.parse_json(records)

        # Validate each record and save to the new doctype
        for record in records:
            name = record.get('name')
            phone = record.get('phone')

            # Basic validation: ensure both name and phone are provided
            if not name or not phone:
                frappe.throw(_("Name and Phone number are required for each entry."))

            # Create a new instance of the custom doctype
            new_doc = frappe.new_doc("YourCustomDoctype")

            # Set values for Name and Phone fields
            new_doc.name = name
            new_doc.phone = phone

            # Save the document
            new_doc.insert()

        # Return success message
        return {"status": "success", "message": "Name and Phone numbers saved successfully."}

I am customising the existing Web Form “Issue” named as “Tickets”. This customer field automatically fetches the name of the user that is logged in after I hit the submit button .
I want to fetch the Service Level Agreement for that customer according to the Customer. By using frappe fall i can fetch any service level agreement but i cant get access according to the customer . Here i have hard coded to fetch a service Level Agreement .

.js

Blockquote
frappe.ready(function() {
frappe.call({
method:“fusion_support.fusion_support.web_form.tickets.tickets.value_fetch”,
callback:(data)=>{
if(data.message){
frappe.web_form.set_value(“service_level_agreement”,[data.message])
}
}
})
});

.py

Blockquote
@frappe.whitelist(allow_guest=True)
def value_fetch():
data = frappe.db.get_value(“Service Level Agreement”,filters={“entity”:‘Grant Plastics Ltd.’},fieldname=[‘name’])
return data