Customizing tab through order

edited September 3, 2019 in Questions
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!

Comments

  • edited June 6, 2018
    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>

  • edited September 3, 2019
    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>

Sign In or Register to comment.

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!