Customise form to move activity to a tab

Frappe Framework
1

I am customising a form in the frappe framework. To reduce visual clutter I want to move the “activity” section (comments, history and email) to a new tab. Creating a new tab is not a problem but how to move this section?

image
image838×514 16 KB

1 Like
2

Possible but you have to apply a client script for that, but some limitations.

Client script:

frappe.ui.form.on('Test DocType', {
    onload: function(frm) {
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            var target = $(e.target).attr("data-fieldname");
            if (target === 'activity_tab') {
                $('.form-footer').show();
            } else {
                $('.form-footer').hide();
            }
        });
    }
});

Please set your doctype name and tab field name in the script accordingly.

3 Likes
3

Thank you so much, and also for even doing a video, much appreciated!

I had problems with the event not being triggered on the initial form load so the script I wrote was:

frappe.ui.form.on("Widgit", {
	refresh(frm) {

        // hide the footer right at the start,
        // the refresh event can take a second or two to fire, and better that elements appear than disapper
        $('.form-footer').hide();

        // handle initial form load
        const tabs = $('a[data-toggle="tab"]')
        for (const tab of tabs){
          
            // locate the active tab
            if (Array.from (tab.classList).includes("active")){
                if (tab.id.includes('activity_tab')) {
                    $('.form-footer').show();
                } else {
                    $('.form-footer').hide();
                }
            }
        }

        // handle tab change
        $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
            var target = $(e.target).attr("data-fieldname");
            if (target.includes('activity_tab')) {
                $('.form-footer').show();
            } else {
                $('.form-footer').hide();
            }
        });
	},
});
4

This code will work just like the code I provided. Because you have set active tab and going to see in my code also it will show only when activity tab is clicked.

1 Like