vertical positioning within wizard

  • 1
  • Question
  • Updated 1 month ago
  • Answered
When inside a wizard, Step 1 has a fairly lengthy field editor component. The user doesn't have to fill out all fields on this field editor, so it's possible (or even likely) the user won't scroll to the bottom of the page before moving forward to Step 2.

After moving to Step 2, if the user navigates back to Step 1, the screen positions itself vertically halfway down on the field editor component, which can be a bit confusing to the user and the user has to scroll back up.

See screencast here: http://recordit.co/aqc8XtS5tZ

I've come across this a couple of times, but can't seem to find anything in the forums.


Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb

Posted 2 months ago

  • 1
Photo of Gregg Baxter

Gregg Baxter, Official Rep

  • 3,080 Points 3k badge 2x thumb
Hi Conlan

Unfortunately this is not possible declaratively at the moment but and idea we are pondering on.  

I have a small 1 line snippet that returns the user to the top of the form after selecting Back in the wizard (window.scrollTo(0, 0);).  Here is the page XML. I have used the standard Contact object as the data source.


<skuidpage unsavedchangeswarning="yes" personalizationmode="server" showsidebar="true" useviewportmeta="true" showheader="true" theme="Material Blue">
    <models>
        <model id="NewContactModel" limit="1" query="true" createrowifnonefound="false" datasource="salesforce" sobject="Contact">
            <fields>
                <field id="AccountId"/>
                <field id="Account.Name"/>
                <field id="AssistantName"/>
                <field id="AssistantPhone"/>
                <field id="Birthdate"/>
                <field id="Fax"/>
                <field id="Phone"/>
                <field id="Description"/>
                <field id="Id"/>
                <field id="Contact_Picture__c"/>
                <field id="Contact_Picture__r.Name"/>
                <field id="Contact_Picture__r.skuid__AttachmentId__c"/>
                <field id="CreatedById"/>
                <field id="CreatedBy.Name"/>
                <field id="CreatedDate"/>
                <field id="Jigsaw"/>
                <field id="IsDeleted"/>
                <field id="Department"/>
                <field id="Eloqua_Unsubscriptions__c"/>
                <field id="Email"/>
                <field id="EmailBouncedDate"/>
                <field id="EmailBouncedReason"/>
                <field id="FirstName"/>
                <field id="Name"/>
                <field id="HomePhone"/>
                <field id="InformalName"/>
                <field id="IsEmailBounced"/>
                <field id="JigsawContactId"/>
                <field id="Languages__c"/>
                <field id="LastActivityDate"/>
                <field id="LastModifiedDate"/>
                <field id="LastModifiedById"/>
                <field id="LastModifiedBy.Name"/>
                <field id="LastName"/>
                <field id="LastReferencedDate"/>
                <field id="LastCURequestDate"/>
                <field id="LastCUUpdateDate"/>
                <field id="LastViewedDate"/>
                <field id="LeadSource"/>
                <field id="Level__c"/>
                <field id="MailingAddress"/>
                <field id="MailingCity"/>
                <field id="MailingCountry"/>
                <field id="MailingGeocodeAccuracy"/>
                <field id="MailingLatitude"/>
                <field id="MailingLongitude"/>
                <field id="MailingStreet"/>
                <field id="MailingState"/>
                <field id="MailingPostalCode"/>
                <field id="MasterRecordId"/>
                <field id="MasterRecord.Name"/>
                <field id="MiddleName"/>
                <field id="MobilePhone"/>
                <field id="OtherAddress"/>
                <field id="OtherCity"/>
                <field id="OtherCountry"/>
                <field id="OtherGeocodeAccuracy"/>
                <field id="OtherLatitude"/>
                <field id="OtherLongitude"/>
                <field id="OtherPhone"/>
                <field id="OtherState"/>
                <field id="OtherStreet"/>
                <field id="OtherPostalCode"/>
                <field id="OwnerId"/>
                <field id="Owner.Name"/>
                <field id="PhotoUrl"/>
                <field id="ReportsToId"/>
                <field id="ReportsTo.Name"/>
                <field id="Salutation"/>
                <field id="Suffix"/>
                <field id="SystemModstamp"/>
                <field id="Template_To_Use__c"/>
                <field id="Title"/>
            </fields>
            <conditions>
                <condition type="param" value="id" field="Id" operator="=" enclosevalueinquotes="true"/>
            </conditions>
            <actions/>
        </model>
    </models>
    <components>
        <grid uniqueid="sk-12zV-373">
            <divisions>
                <division behavior="specified" verticalalign="top" width="300px">
                    <components/>
                </division>
                <division behavior="flex" verticalalign="top" ratio="1" minwidth="100px">
                    <components>
                        <wizard deferstepcontentsrendering="false" buttonslocation="top" uniqueid="sk-12zT-353">
                            <steps>
                                <step stepid="step1" steplabel="Step 1">
                                    <components>
                                        <basicfieldeditor showheader="true" showsavecancel="true" showerrorsinline="true" model="NewContactModel" uniqueid="sk-130i-1133" mode="edit">
                                            <columns>
                                                <column width="100%" uniqueid="sk-130i-1129">
                                                    <sections>
                                                        <section title="Section A" uniqueid="sk-130i-1130">
                                                            <fields>
                                                                <field uniqueid="sk-130i-1170" id="LastName"/>
                                                                <field uniqueid="sk-130i-1135" id="Account.Name"/>
                                                                <field uniqueid="sk-130i-1136" id="AssistantName"/>
                                                                <field uniqueid="sk-130i-1137" id="AssistantPhone"/>
                                                                <field uniqueid="sk-130i-1138" id="Birthdate"/>
                                                                <field uniqueid="sk-130i-1139" id="Fax"/>
                                                                <field uniqueid="sk-130i-1140" id="Phone"/>
                                                                <field uniqueid="sk-130i-1141" id="Description"/>
                                                                <field uniqueid="sk-130i-1142" id="Id"/>
                                                                <field uniqueid="sk-130i-1143" id="Contact_Picture__c"/>
                                                                <field uniqueid="sk-130i-1144" id="Contact_Picture__r.Name"/>
                                                                <field uniqueid="sk-130i-1145" id="Contact_Picture__r.skuid__AttachmentId__c"/>
                                                                <field uniqueid="sk-130i-1146" id="CreatedById"/>
                                                                <field uniqueid="sk-130i-1147" id="CreatedBy.Name"/>
                                                                <field uniqueid="sk-130i-1148" id="CreatedDate"/>
                                                                <field uniqueid="sk-130i-1149" id="Jigsaw"/>
                                                                <field uniqueid="sk-130i-1150" id="IsDeleted"/>
                                                                <field uniqueid="sk-130i-1151" id="Department"/>
                                                                <field uniqueid="sk-130i-1153" id="Eloqua_Unsubscriptions__c"/>
                                                                <field uniqueid="sk-130i-1154" id="Email"/>
                                                                <field uniqueid="sk-130i-1155" id="EmailBouncedDate"/>
                                                                <field uniqueid="sk-130i-1156" id="EmailBouncedReason"/>
                                                                <field uniqueid="sk-130i-1159" id="FirstName"/>
                                                                <field uniqueid="sk-130i-1160" id="Name"/>
                                                                <field uniqueid="sk-130i-1161" id="HomePhone"/>
                                                                <field uniqueid="sk-130i-1162" id="InformalName"/>
                                                                <field uniqueid="sk-130i-1163" id="IsEmailBounced"/>
                                                                <field uniqueid="sk-130i-1164" id="JigsawContactId"/>
                                                                <field uniqueid="sk-130i-1165" id="Languages__c"/>
                                                                <field uniqueid="sk-130i-1166" id="LastActivityDate"/>
                                                                <field uniqueid="sk-130i-1167" id="LastModifiedDate"/>
                                                                <field uniqueid="sk-130i-1168" id="LastModifiedById"/>
                                                                <field uniqueid="sk-130i-1169" id="LastModifiedBy.Name"/>
                                                                <field uniqueid="sk-130i-1171" id="LastReferencedDate"/>
                                                                <field uniqueid="sk-130i-1172" id="LastCURequestDate"/>
                                                                <field uniqueid="sk-130i-1173" id="LastCUUpdateDate"/>
                                                                <field uniqueid="sk-130i-1174" id="LastViewedDate"/>
                                                                <field uniqueid="sk-130i-1175" id="LeadSource"/>
                                                                <field uniqueid="sk-130i-1176" id="Level__c"/>
                                                                <field uniqueid="sk-130i-1177" id="MailingAddress"/>
                                                                <field uniqueid="sk-130i-1178" id="MailingCity"/>
                                                                <field uniqueid="sk-130i-1179" id="MailingCountry"/>
                                                                <field uniqueid="sk-130i-1180" id="MailingGeocodeAccuracy"/>
                                                                <field uniqueid="sk-130i-1181" id="MailingLatitude"/>
                                                                <field uniqueid="sk-130i-1182" id="MailingLongitude"/>
                                                                <field uniqueid="sk-130i-1183" id="MailingStreet"/>
                                                                <field uniqueid="sk-130i-1184" id="MailingState"/>
                                                                <field uniqueid="sk-130i-1185" id="MailingPostalCode"/>
                                                                <field uniqueid="sk-130i-1186" id="MasterRecordId"/>
                                                                <field uniqueid="sk-130i-1187" id="MasterRecord.Name"/>
                                                                <field uniqueid="sk-130i-1188" id="MiddleName"/>
                                                                <field uniqueid="sk-130i-1189" id="MobilePhone"/>
                                                                <field uniqueid="sk-130i-1190" id="OtherAddress"/>
                                                                <field uniqueid="sk-130i-1191" id="OtherCity"/>
                                                                <field uniqueid="sk-130i-1192" id="OtherCountry"/>
                                                                <field uniqueid="sk-130i-1193" id="OtherGeocodeAccuracy"/>
                                                                <field uniqueid="sk-130i-1194" id="OtherLatitude"/>
                                                                <field uniqueid="sk-130i-1195" id="OtherLongitude"/>
                                                                <field uniqueid="sk-130i-1196" id="OtherPhone"/>
                                                                <field uniqueid="sk-130i-1197" id="OtherState"/>
                                                                <field uniqueid="sk-130i-1198" id="OtherStreet"/>
                                                                <field uniqueid="sk-130i-1199" id="OtherPostalCode"/>
                                                            </fields>
                                                        </section>
                                                    </sections>
                                                </column>
                                            </columns>
                                        </basicfieldeditor>
                                        <buttonset model="NewContactModel" uniqueid="sk-1Idc-607">
                                            <buttons>
                                                <button type="multi" label="New Button" uniqueid="sk-1Idd-614">
                                                    <actions>
                                                        <action type="custom" snippet="newSnippet"/>
                                                    </actions>
                                                </button>
                                            </buttons>
                                        </buttonset>
                                    </components>
                                    <actions>
                                        <action uniqueid="sk-12zT-350" type="multi" stepid="step2" label="Next Step" icon="sk-icon-arrow-right" window="self">
                                            <actions>
                                                <action type="navigateToStep" stepid="step2"/>
                                                <action type="save">
                                                    <models>
                                                        <model>NewContactModel</model>
                                                    </models>
                                                </action>
                                            </actions>
                                        </action>
                                    </actions>
                                </step>
                                <step stepid="step2" steplabel="Step 2">
                                    <components>
                                        <basicfieldeditor showheader="true" showsavecancel="true" showerrorsinline="true" model="NewContactModel" uniqueid="sk-130p-1452" mode="read">
                                            <columns>
                                                <column width="100%" uniqueid="sk-130p-1448">
                                                    <sections>
                                                        <section title="Section A" uniqueid="sk-130p-1449">
                                                            <fields>
                                                                <field uniqueid="sk-130p-1519" id="OwnerId"/>
                                                                <field uniqueid="sk-130p-1520" id="Owner.Name"/>
                                                                <field uniqueid="sk-130p-1521" id="PhotoUrl"/>
                                                                <field uniqueid="sk-130p-1522" id="ReportsToId"/>
                                                                <field uniqueid="sk-130p-1523" id="ReportsTo.Name"/>
                                                                <field uniqueid="sk-130p-1524" id="Salutation"/>
                                                                <field uniqueid="sk-130p-1525" id="Suffix"/>
                                                                <field uniqueid="sk-130p-1526" id="SystemModstamp"/>
                                                                <field uniqueid="sk-130p-1527" id="Template_To_Use__c"/>
                                                                <field uniqueid="sk-130p-1528" id="Title"/>
                                                            </fields>
                                                        </section>
                                                    </sections>
                                                </column>
                                            </columns>
                                        </basicfieldeditor>
                                    </components>
                                    <actions>
                                        <action uniqueid="sk-12zT-351" type="multi" stepid="step1" label="Previous Step" icon="sk-icon-arrow-left" secondary="true" window="self">
                                            <actions>
                                                <action type="navigateToStep" stepid="step1"/>
                                                <action type="custom" model="NewContactModel" behavior="standard" snippet="backToTop"/>
                                            </actions>
                                        </action>
                                        <action uniqueid="sk-12zT-352" type="navigate" label="Next Step" icon="sk-icon-arrow-right"/>
                                    </actions>
                                </step>
                            </steps>
                        </wizard>
                    </components>
                </division>
                <division behavior="specified" verticalalign="top" width="300px">
                    <components/>
                </division>
            </divisions>
            <styles>
                <styleitem type="background" bgtype="none"/>
            </styles>
        </grid>
    </components>
    <resources>
        <labels/>
        <javascript>
            <jsitem location="inlinesnippet" name="backToTop" cachelocation="false">var params = arguments[0],
$ = skuid.$;
window.scrollTo(0, 0);</jsitem>
        </javascript>
        <css/>
        <actionsequences uniqueid="sk-12zA-261"/>
    </resources>
    <styles>
        <styleitem type="background" bgtype="none"/>
    </styles>
</skuidpage>
Photo of Conlan O'Rourke

Conlan O'Rourke

  • 3,280 Points 3k badge 2x thumb
Thanks Gregg, this is working well. As a feature request, it would be nice to have that vertical positioning to the top of the page natively built in to the "Navigate to Step" action. As a more full featured request, it would be great to also have the declarative capability to configure where on the page the user should be directed to...but at the very least to me it feels like that action should always default to the top of the page. That's my 2 cents anyways. Thanks!!
Photo of Gregg Baxter

Gregg Baxter, Official Rep

  • 3,080 Points 3k badge 2x thumb
You are very welcome Conlan.Yes I agree with you that this should be considered as a declarative function I will be sure to raise it in our next session. Happy Skuiding!