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.
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.
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
Get help from others!
Recent Questions
Recent Answers
© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP