TransWikia.com

Is there an elegant/easy way to set tab order on a VisualForce page?

Salesforce Asked on December 22, 2021

My VF page has input sections for which I want each section to have the tab-key order to be set Top-Down as one can set for a page layout as below.

enter image description here

Is there a way to do this other than setting the tabIndex/tabOrderhint on each input field? The PageBlockSection does not have a Tab-key Order setting (why not??) and using tabStyle on the PageBlock is not an option, as my standardcontroller’s tabStyle is Left-Right with some sections Top-Down.

And I have a few different sections on the page – these are rendered depending on conditions, so not all inputfields are displayed every time the page is displayed.

One Answer

You can set the tabIndex programmatically. While you do need to write a script, you can make it as simple or complicated as you'd like. Here's a quick example:

<apex:page doctype="html-5.0">
    <script>
    window.addEventListener('DOMContentLoaded',onload);
    function onload() {
        let tabIndex = 1;
        [...document.querySelectorAll('[data-order]')].forEach(section => {
            let items = [...section.querySelectorAll('input')];
            let dir = section.dataset.order == 'down';
            let len = items.length>>1;
            let reordered = [...items.filter((v,i)=>dir?!(i%2):i<len),...items.filter((v,i)=>dir?!!(i%2):i>=len)];
            reordered.forEach(item => { item.tabIndex = tabIndex++; });
        });
    }
    </script>
    <apex:form>
        <apex:pageBlock>
            <apex:pageBlockSection title="Section 1" html-data-order="down">
                <apex:input type="text" label="Field1" />
                <apex:input type="text" label="Field3" />
                <apex:input type="text" label="Field2" />
                <apex:input type="text" label="Field4" />
            </apex:pageBlockSection>
            <apex:pageBlockSection title="Section 2" html-data-order="across">
                <apex:input type="text" label="Field5" />
                <apex:input type="text" label="Field6" />
                <apex:input type="text" label="Field7" />
                <apex:input type="text" label="Field8" />
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>
</apex:page>

This page only handles normal input fields (e.g. not select elements), and assumes two columns, and does not support reRender attributes, but this is not meant to be a perfect one-size-fits-all solution. The point is, you can do whatever you'd like to do, such as parse the table tr/td elements to figure out the order to use, etc. It's simply a matter of figuring out the JS you need.

Answered by sfdcfox on December 22, 2021

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP