Guide - How to Collapse Connections Section By Default

Frappe Framework Customization
, ,
1

I found this code to collapse Connections in my custom DocType when loading the any document of certain doctype(s) (may have some delay on page load):

frappe.ui.form.on('*DOCTYPE NAME*', {
        onload(frm) {
            frappe.after_ajax(() => {
                let $conn = $('.row.form-dashboard-section.form-links');
                if ($conn.length) {
                    $conn.find('.section-head.collapsible').addClass("collapsed");
                    $conn.find('.section-body').addClass("hide");
                }
            });
        }
    });
2 Likes
2

Hello,

Following up on your request, I’ve prepared a guide on how to collapse the “Connections” section by default when a document is opened.

The solution involves using a simple and safe Client-Side Custom Script . This script will automatically collapse the section for you, improving the user experience by presenting a cleaner form upon loading.

The Solution

This script targets a specific DocType and waits for the page to fully load. It then finds the “Connections” dashboard and programmatically collapses it.

Here is the code to achieve this for a single DocType:

// This script collapses the Connections section on form load.
// Replace 'Your DocType Name' with the actual DocType, e.g., 'Customer'.

frappe.ui.form.on('Your DocType Name', {
    onload(frm) {
        // We wait for all background processes (like loading connections) to finish.
        frappe.after_ajax(() => {
            let $connections = $('.form-dashboard-section.form-links');
            if ($connections.length) {
                // Find the header and add the 'collapsed' class.
                $connections.find('.section-head.collapsible').addClass("collapsed");
                // Find the body and add the 'hide' class to hide it.
                $connections.find('.section-body').addClass("hide");
            }
        });
    }
});

How to Apply the Script

  1. Navigate to the Custom Script List from the Awesome Bar.
  2. Click Add Custom Script .
  3. Select the DocType you want this to apply to (e.g., Customer ).
  4. Paste the code above into the Script box.
  5. Important: Change 'Your DocType Name' in the code to the correct DocType (e.g., 'Customer' ).
  6. Save the script.

Recommended: A Single Script for Multiple DocTypes

If you need this functionality on several forms (like Customer, Supplier, and Item), it’s more efficient to use a single script. This approach is cleaner and easier to manage.

// A single script to collapse connections for multiple DocTypes.
// Simply add the names of the DocTypes you need to this list.
const doctypes_to_collapse = ['Customer', 'Supplier', 'Item', 'Sales Order'];

frappe.ui.form.on(doctypes_to_collapse, {
    onload(frm) {
        // Use a small delay to ensure the dashboard is fully rendered.
        setTimeout(() => {
            let $connections = $('.form-dashboard-section.form-links');
            // Check if the section exists and is not already collapsed.
            if ($connections.length && !$connections.find('.section-head').hasClass('collapsed')) {
                // Trigger a click event, which is a clean way to collapse it.
                $connections.find('.section-head.collapsible').trigger('click');
            }
        }, 500); // 500ms delay
    }
});

This improved version allows you to easily manage all the DocTypes from one place.

Please let me know if you have any questions or need assistance applying this.

Best regards,
Tharun Kumar K
6381360779

1 Like