How do i create nested tabs? (Sub tabs)

ERPNext Customize ERPNext
1

Hello ERPNext Community,

I am working on customizing the DocType form in ERPNext and would like to dynamically add nested subtabs (a tab within another tab) using a custom button. I managed to add regular tabs, but I’m struggling to add nested subtabs that display correctly.

Here’s a simplified version of what I have tried (doctype.js):

frappe.ui.form.on('DocType', {
    refresh: function(frm) {
        frm.add_custom_button(__('Add subtab'), function() {
            frappe.prompt([
                {'fieldname': 'subtab_name', 'fieldtype': 'Data', 'label': 'Subtab Name', 'reqd': 1}
            ], function(values) {
                let last_tab_index = -1;
                for (let i = frm.doc.fields.length - 1; i >= 0; i--) {
                    if (frm.doc.fields[i].fieldtype === 'Tab Break') {
                        last_tab_index = i;
                        break;
                    }
                }

                if (last_tab_index === -1) {
                    frappe.msgprint(__('No Tab Break found. Please create a Tab Break first.'));
                    return;
                }

                let new_subtab = {
                    fieldname: Math.random().toString(36).substr(2, 9),
                    fieldtype: 'Tab Break',
                    label: values.subtab_name,
                    insert_after: frm.doc.fields[last_tab_index].fieldname
                };

                frm.doc.fields.splice(last_tab_index + 1, 0, new_subtab);
                frm.refresh_field('fields');
                frappe.show_alert({message: __('New subtab added'), indicator: 'green'});
            }, __('Enter Subtab Name'), __('Add'));
        });
    }
});

The subtab is added to the fields array, but it doesn’t display correctly as a nested tab. How can I achieve this:?

image
image4685×1556 121 KB

Any help or guidance would be greatly appreciated.

Thank you!

2

u can use sesstion for that

3

Thanks for your reply! But my problem is not that I can’t create a tab break, but that I can’t create a tab break inside a tab break (nested tab break). The goal is to add a button to create a nested tab. Most likely I need to create a new field type with a sub tab type, which I need help with.

Any help or guidance would be greatly appreciated.

4

Maybe you can try adding a fieldtype=HTML field which would itself contain a custom-made tab list + a frappe.ui.FieldGroup.

<ul class="nav nav-tabs" id="customtabs" role="tablist">
  <li class="nav-item" role="presentation">
    <button class="nav-link" id="customlink_tab1" data-bs-toggle="tab" data-bs-target="#custom_tab1" type="button" role="tab" aria-controls="custom_tab1">Tab 1</button>
  </li>
</ul>
<div class="tab-content" id="customtabcontent">
  <div class="tab-pane fade show active" id="custom_tab1" role="tabpanel" aria-labelledby="home-tab">
    <div><!-- Empty div where the FieldGroup will be rendered --></div>
  </div>
</div>
1 Like
5

Thanks for your reply! This method does add a sub-tab, but it is not possible to switch between such tabs, and it is also not entirely clear how to hide and show the fields between these tabs. Also, this method is not very user friendly

image
image1685×301 11.4 KB

6

Any other solutions? Any help is appreciated

7

I belive that i need to change something in frappe, but i don’t know where and what exactly

8

Still no solutions?..

9

You will have to implement these features yourself. I think you already have a big part of the solution (judging by the screenshot). But you do need to add a little bit of code to make it work yes.

Sadly, without more details on the contents of these sub-tabs, we can’t help you more:

  • Will they contain fields in the doctype? In this case, why bother with subtabs? (you can try having tabs like “Group/Subtab 1”, “Group/Subtab 2”, …)
  • Will they be generated on-demand? (Will the number of tabs vary between documents?)

It might also be interesting to think more about the data model: could your subtabs become documents or child documents?

10

Thanks for your reply!

  1. Creating tabs with the names “Group/Subtab 1” will not work, because in my case there will be a lot of regular tabs (about 20)

  2. Yes, different documents can have a different number of subtabs, just as each tab can have a different number of subtabs.

These subtabs are needed to place different content (fields) in them, and the functionality of the subtabs will be used very often, so I’m not sure how convenient it will be to add an html field each time

It might also be interesting to think more about the data model: could your subtabs become documents or child documents?

Most likely not, because as I said earlier - there are too many sub-tabs. Thats why i want to add new field type “Sub Tab-Break”

Anyways, thanks for reply