Customizing tab through order

  • 1
  • Question
  • Updated 5 months ago
  • Answered
Hello

Is there a way to modify the order of fields that are selected when a user presses "tab" on their keyboard? We have a few pages where users need to enter some data on longer forms and it would be easier for them to just tab through all of the fields, and we would like to control the order of where they go tabbing through the form

I saw a post on this subject from a few years ago, but there wasn't much activity on it. Does anyone know if there is an easy way to do this?

Thanks!
Photo of Joe Dobbels

Joe Dobbels

  • 546 Points 500 badge 2x thumb

Posted 6 months ago

  • 1
Photo of Stephen Sells

Stephen Sells, Official Rep

  • 16,856 Points 10k badge 2x thumb
Hey Joe, thanks for posting.

Buttons on Skuid do have HotKeys that can be configured to your liking. The action you're wanting Tab to do is a little fuzzy to me but you can have the action declared in a snippet to do whatever you want and the button will fire the snippet via the HotKey in the button. I'll warn you though, we can't compete with Chrome's standard usages or anything like that. It can also form poor user experience even if you do find a way to override it. I hope this helps as a good starting point.

<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true">
    <models>
        <model id="Acct" limit="20" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Account">
            <fields>
                <field id="RecordTypeId"/>
                <field id="Name"/>
                <field id="Id"/>
                <field id="Fax"/>
            </fields>
            <conditions/>
            <actions/>
        </model>
    </models>
    <components>
        <tabset rememberlastusertab="false" defertabrendering="true" uniqueid="sk-3Lfn-307">
            <tabs>
                <tab name="New Tab 1" loadlazypanels="true">
                    <components>
                        <pagetitle model="Acct" uniqueid="sk-3Lfn-643">
                            <maintitle>Go to New Tab 2</maintitle>
                            <subtitle>
                                <template>{{Model.label}}</template>
                            </subtitle>
                            <actions/>
                        </pagetitle>
                    </components>
                </tab>
                <tab name="New Tab 2">
                    <components>
                        <buttonset model="Acct" uniqueid="sk-3Lfn-490">
                            <buttons>
                                <button type="multi" label="Control + Tab = Runs a snippet" uniqueid="sk-3Lfn-495">
                                    <actions>
                                        <action type="custom"/>
                                    </actions>
                                    <hotkeys>
                                        <hotkey modifiers="ctrl" key="tab "/>
                                    </hotkeys>
                                </button>
                            </buttons>
                        </buttonset>
                        <skootable showconditions="true" showsavecancel="true" showerrorsinline="true" searchmethod="server" searchbox="true" showexportbuttons="false" hideheader="false" hidefooter="false" pagesize="10" alwaysresetpagination="false" createrecords="true" model="Acct" mode="read" allowcolumnreordering="true" responsive="true" uniqueid="sk-3Lfn-286">
                            <fields>
                                <field id="Name" hideable="true" uniqueid="fi-3Lfn-345" allowordering="true">
                                    <renderconditions logictype="and" onhidedatabehavior="keep"/>
                                    <enableconditions/>
                                </field>
                                <field id="Id" hideable="true" uniqueid="fi-3Lfn-417"/>
                                <field id="Fax" hideable="true" uniqueid="fi-3Lfn-418"/>
                            </fields>
                            <rowactions>
                                <action type="edit"/>
                                <action type="delete"/>
                            </rowactions>
                            <massactions usefirstitemasdefault="true">
                                <action type="massupdate"/>
                                <action type="massdelete"/>
                            </massactions>
                            <views>
                                <view type="standard"/>
                            </views>
                            <renderconditions logictype="and"/>
                            <searchfields/>
                        </skootable>
                    </components>
                    <oninitialshowactions/>
                    <onshowactions>
                        <action type="requeryModel" model="Acct" behavior="standard"/>
                    </onshowactions>
                    <renderconditions logictype="and"/>
                </tab>
            </tabs>
        </tabset>
    </components>
    <resources>
        <labels/>
        <javascript/>
        <css/>
        <actionsequences uniqueid="sk-3Lfn-267"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
    <interactions/>
</skuidpage>
Photo of Mike Dwyer

Mike Dwyer

  • 3,390 Points 3k badge 2x thumb
Joe, are you looking for the tabindex attribute of an html tag? Like ...

<a href="https://www.w3schools.com/"; tabindex="2">W3Schools</a>
<a href="http://www.google.com/"; tabindex="1">Google</a>
<a href="http://www.microsoft.com/"; tabindex="3">Microsoft</a>