vertical positioning within wizard
Conlan O'Rourke
✭✭✭✭
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.
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.
Tagged:
1
Categories
- 7.9K Questions
- 926 Ideas
- 220 Discussion Categories
- 178 General
- 9 Community Feedback
- 3 Community Info
- 18 Knowledge Base
Comments
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