Collapsible options

@Lubos, can you please make the options collapsible. They take so much space.

I support this idea, except for the following three options.

This option should still appear on Invoices by default. Because this is not part of the Invoice settings

1 Like

I just finished creating an Extension script for this idea.
But it would still be better if this was implemented in internal code.

function wrapCheckboxesIntoCollapsible() {
    const container = document.querySelector('#v-model-form');
    if (!container) {
        console.error('Container element #v-model-form not found.');
        return;
    }

    const targetElement = container.querySelector('fieldset');
    if (!targetElement) {
        console.error('Target element to insert before not found.');
        return;
    }

    const checkboxParents = container.querySelectorAll('.flex.items-start.space-x-2.rtl\\:space-x-reverse.my-1');
    if (!checkboxParents || checkboxParents.length === 0) {
        console.error('No checkbox parent elements found inside #v-model-form.');
        return;
    }

    const collapsibleContainer = document.createElement('div');
    collapsibleContainer.style.marginTop = '10px';
    collapsibleContainer.style.marginBottom = '5px';

    const titleElement = document.createElement('div');
    titleElement.style.padding = '0px'; 
    titleElement.style.fontSize = '12px';
    titleElement.style.fontWeight = 'bold';
    titleElement.style.cursor = 'pointer';
    titleElement.style.color = '#428bca';
    titleElement.innerHTML = '<i class="fa-solid fa-lg fa-square-chevron-right"></i> Form Settings';

    const checkboxParentsWrapper = document.createElement('div');
    checkboxParentsWrapper.style.padding = '10px';
    checkboxParentsWrapper.style.display = 'none'; 
    
    checkboxParents.forEach(parent => {
        const label = parent.querySelector('label');
        if (label && (label.textContent.trim() !== 'Early payment discount' && label.textContent.trim() !== 'Late payment fees' && label.textContent.trim() !== 'Withholding tax')) {
            checkboxParentsWrapper.appendChild(parent);
        }
    });

    collapsibleContainer.appendChild(titleElement);
    collapsibleContainer.appendChild(checkboxParentsWrapper);

    targetElement.parentNode.insertBefore(collapsibleContainer, targetElement);

    titleElement.addEventListener('click', () => {
        const iconElement = titleElement.querySelector('i');
        if (checkboxParentsWrapper.style.display === 'none') {
            checkboxParentsWrapper.style.display = 'block';
            iconElement.classList.remove('fa-square-chevron-right');
            iconElement.classList.add('fa-square-chevron-down');
        } else {
            checkboxParentsWrapper.style.display = 'none';
            iconElement.classList.remove('fa-square-chevron-down');
            iconElement.classList.add('fa-square-chevron-right');
        }
    });
}

document.addEventListener('DOMContentLoaded', () => {
    wrapCheckboxesIntoCollapsible();
});

4 Likes

@Mabaega
Great works Perfect. :+1:

I just try to test this script (first time try to use extension), but when I click New Extension , it turns out blank screen;

Yes, but this only works with English, for other languages we need to adjust the code.

if (label && (label.textContent.trim() !== 'Early payment discount' && label.textContent.trim() !== 'Late payment fees' && label.textContent.trim() !== 'Withholding tax')) {
            checkboxParentsWrapper.appendChild(parent);
        }

Earlier I tried with id to find the checkbox I was referring to, but it turns out that checkbox id is not static.

But it doesn’t matter if we don’t use all three checkboxes that I excluded from Form Settings

1 Like

Try updating or restart your Manager, I also found the same problem yesterday.
Sometimes the Extension opens, sometimes it doesn’t.

I Use Cloud 24.4.26.1466. for this test

@Mabaega Thank you for your immediate response, really appreciate it.
My version also same here (but blank)
3

How can I use this on the desktop version?

We need create Extension for this, Extension only work if Country is not selected in Business Details.
Settings - Obsolete Features - Extensions

Thanks, now it works but, when i’m not selecting my country the custom VAT-form isn’t available :frowning:

It seems that only users with Administrator rules can open the Extension.

Yes, you’re correct. it works for Administrator. Thank you.

@Mabaega

Please tell this code is work on desktop version.?

i am using version 24.3.30.1380

See FAQ - Manager Forum . The latest version can be downloaded from https://www.manager.io/download At the time of writing this is v24.4.25.1463

Manager advances very quickly, simplifying and adding features and capabilities. Sometimes, bugs occur with new releases. But these are usually fixed rapidly, often within minutes. So if you encounter a problem with the desktop or server editions, update Manager , even if you recently did.

Create a Test Business and try out yourself. This has the benefit to further learn Manager’s abilities.

1 Like

Per definition the user of Manager Desktop is an Administrator so when enabling Extensions under Obsolete (i.e. not supported) features in Settings you can experiment with the code in a test business before using it in an actual business.