vertical positioning within wizard

Conlan O'RourkeConlan O'Rourke ✭✭✭✭
edited February 17, 2020 in Questions
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.


Comments

  • edited February 17, 2020
    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>
            &nb
  • Conlan O'RourkeConlan O'Rourke ✭✭✭✭
    edited October 9, 2018
    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!!
  • edited October 9, 2018
    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!
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!