3


I need to optimize a component for Salesforce One mobile experience.

Imagine a search form that contains several input fields and a button at the end. The form occupies entire screen.
When the search results are retrieved (on button press), they appear below the form and the user have to scroll down himself to see the results.

Question:

Upon results retrieval how to set the focus on the first result component so that the user wouldn't have to scroll down to see the results? Given that .getElementById('').focus() is not working due to Locker Service limitation.
If it's not possible technically, what can be an alternative solution?

tried and failed so far:

  • document.getElementById().focus(); //LockerService
  • component.find().getElement().focus(); //LockerService
  • window.location.hash = id; //doesn't work in salesforce one mobile app
  • scrollTo aura event //is not supported in lightning
  • window.scrollTo(0, 500); // no effect in S1

Possible way to solution:

Example code:

<!--FORM occupying mobile screen-->
<div aura:id="formDiv">
    <c:Form />
</div>
<!--RESULT LIST appears below the form but the user's screen is still on the form -->
<div aura:id="resultDiv">
    <aura:iteration items="{!v.results}" var="result">
        <c:ResultListItem result="{!result}"/>
    </aura:iteration>
</div>
  • Vladimir, do you have the code which you are having the problem with? it would be useful to edit that into your question. See How to Ask – Dave Humm Nov 21 '16 at 11:05
1

My current workaround is to hide the form and show a button to get the form back using $A.util.toggleClass(formDiv, "slds-hide");

The bottleneck of this is when the form is longer than the screen height - the users viewport lands below the point where the result list starts.

<div aura:id="formDiv">
    <c:Form />
</div>
<div aura:id="toggleFormButtonDiv" class="slds-hide">
    <lightning:button variant="base" onclick="{!c.toggleFormVisibility}"
                      label="Show Form"/>
</div>


toggleFormVisibility: function (component) {
    var formDiv = component.find("formDiv");
    var toggleFormButtonDiv = component.find("toggleFormButtonDiv");
    $A.util.toggleClass(formDiv, "slds-hide");
    $A.util.toggleClass(toggleFormButtonDiv, "slds-hide");
}


Looking for a better solution.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.