[SalesForce] Salesforce1 – How to Enable the Standard Lookup Field Search on a Mobile VF Page

We have created a couple of VF pages that are Mobile Enabled. These VF Pages have 2 Lookup fields each. The problem I"m having is that on Android, I cannot open a search to find the records and on iPhone, it opens the Browser version of the lookup popup window.

What I'm trying to achieve is the standard search functionality of the Salesforce1 lookup fields. If you are actually on the Salesforce1 app, you can click + and select "New Task", there if you simply click on a text box for a lookup field, it goes to a new page where you can search. The view is mobile ready. This is the functionality I'm looking for.

I could not achieve this with our VF Page. All help is appreciated. Please see below out code.

Thanks!

==============================================================================

<apex:page controller="Cls_Cycle_Count" sidebar="True" showHeader="True" id="pge" docType="HTML-5.0">

<script>
  function javaScrpt(){
   actionFunName(); 
  }

   function javaScrpt2(){
   actionFunName2(); 
  } 

  function changebackcolorFocus(ctrl){
        ctrl.classList.remove('textBackColorBlur');
        ctrl.classList.add('textBackColorFocus');
      }

function changebackcolorBlur(ctrl){
        ctrl.classList.remove('textBackColorFocus');
        ctrl.classList.add('textBackColorBlur');
      }

 window.onload = function () {
      ChangeImageSrc("/s.gif");

       var locout = document.getElementById('{!$Component.frm.lctn}').value;
        var locin = document.getElementById('{!$Component.frm.actulqnty}').value;
        var b2c = document.getElementById('{!$Component.frm.prdct}').value;
        var q2o = '{!ecsponpge.ECS__Quantity_On_Order__c}';

        if (locout.length == 0) {
            document.getElementById('{!$Component.frm.lctn}').focus();
            return;
        }
        if (q2o.length > 0) {
            if (locin.length == 0) {
                document.getElementById('{!$Component.frm.actulqnty}').focus();
            }
            else {
                document.getElementById('{!$Component.frm.prdct}').focus();
            }
        }
        else {
            document.getElementById('{!$Component.frm.lctn}').focus();
        }

    }

    function ChangeImageSrc(oldSrc) {
        var imgElements = document.getElementsByTagName('img');
        for (i = 0; i < imgElements.length; i++) {
            if (imgElements[i].src.indexOf(oldSrc) !== -1 &&   imgElements[i].className.indexOf("lookupIcon") !== -1) {
                imgElements[i].src = "https://c.na7.content.force.com/servlet/servlet.FileDownload?file=015A0000003HaQt";
                imgElements[i].onmouseover = "";
            }
        }
    }     
</script>
<style>
body{margin:0; padding:0;}
img{border:none;}
.container{width:100%; height: 100%; overflow:hidden; }
.new-task {
text-align: center;
}
.cancel-btn{width:72px; height:30px;   border:none; cursor:pointer; margin:5px 0 0 6px;}
.submit-btn{width:72px; height:30px; background:url(images/submit-btn.png) no-repeat; float:left; border:none; cursor:pointer; margin:5px 0 0 6px;}
.task-heading{font-family:Arial, Helvetica, sans-serif; font-size:15px; font-weight:bold;  color:#fff;  padding:11px 37px 0 36px;} 
.form-panel{width:30%; background:#f0f1f3; padding:0 0 0 0; }
.form-panel .row{width:93%;   margin:0 0 8px 14px; }
.form-panel .row p{margin-bottom: 4px; margin-top: 4px; font-family:Arial, Helvetica, sans-serif; font-size:14px; padding:0 0 3px; color:#606060;}
.form-panel .row p span{color:#248bce;margin:0px!important;float:none;padding:0px;border:0px;border-radius:0px;background-color:none;box-shadow:none; color:#606060;}
.text-bg span{float: left;height: 25px!important; margin-top: 0px; color:#606060;width: 99%;color: rgb(60, 61, 62);padding: 7px 14px;line-height: 25px; border: 1px solid rgb(207, 208, 210);border-radius: 5px;background-color: rgb(232, 234, 235);box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.07); margin-bottom:9px; background:none; color:#606060;}
.form-panel .row .text-bg{ position: relative;width:100%; height:41px;  }
.form-panel .row .text-bg .lookupInput {padding:0px;border:0px;border-radius:0px;background-color:none;box-shadow:none; color:#606060;margin:0px;float: none!important;}
.form-panel .row .text-bg input{width: 99%;color: rgb(60, 61, 62);padding: 7px 14px;line-height: 25px; border: 1px solid rgb(207, 208, 210);border-radius: 5px;box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.07); color:#606060;} 
.form-panel .row .text-bg a{position: absolute;margin: 8px -20px 0 0; text-decoration:none; right:0; float:left; border:none;}
.form-panel .row .text-bg a:hover{text-decoration:none;}
.form-panel .row .textarea{width:272px; height:79px; float:left; background:url(images/textarea.png) no-repeat; border:none; padding:2px 3px 0; }
.form-panel .row .select{width:276px; height:41px; background:url(images/select-bg.png) no-repeat;  border:none; padding:12px 9px;}
.form-panel .row .text-bg img
{
    margin-right:0px;
}
.form-panel .row .text-bg input.textBackColorFocus{backgroud-color:#fff !important;}

.form-panel .row .text-bg input.textBackColorBlur{backgroud-color:rgb(232, 234, 235) !important;}

.oRight
{
    background:#f0f1f3!important;
}
.form-panel .row .text-bg .errorMsg{;margin-top: -3px;margin-left: 9px;}
#frm{overflow:hidden !important;}
@media only screen and (min-width:1299px) and (max-width:1600px) {
.form-panel{width:30%;
    }}

@media only screen and (min-width: 768px) and (max-width: 959px) {
    .form-panel{width:40%;
    }}
@media only screen and (min-width: 480px) and (max-width: 767px) {
    .form-panel{  display:block; width:60%;
    }}
@media only screen and (min-width: 300px) and (max-width: 479px) {
    .form-panel{  display:block; width:80%;
    }}

@media only screen and (min-width:100px) and (max-width:300px) {
    .form-panel{  display:block; width:80%;
    }
    .form-panel .row p {
margin-bottom: 4px;
margin-top: 4px;
font-family: Arial, Helvetica, sans-serif;
font-size: 14px;
padding: 0 0 10px;
color: #606060;
width: 172px;
}
.new-task {
width: 122%;
height: 38px;
text-align: center;
}
}

input { background: rgb(232, 234, 235); }
input:focus { background: white; }

.lookupIcon
{
background-image: none !important;
width: 30px !important;
height: 30px !important;
}
</style>


         <apex:commandButton action="{!SaveCount}" value="Save" rendered="{!b}" style="background:#137fc0;Color:White; height:30px;padding:0 15px 0 15px;    border:none; cursor:pointer; margin:5px 0 0 6px;font-weight:regular;font-size: 13px;"/>
   <apex:commandButton action="{!Cancel}" value="Cancel" immediate="true" style="background:#137fc0;Color:White; height:30px; padding:0 15px 0 15px;  border:none; cursor:pointer; margin:5px 0 0 6px;font-weight:regular;font-size: 13px;"/>
    </div>

Location*

      <div class="row">
       <p>B2C Product <span>*</span></p> 

      <div class="text-bg"><apex:inputField value="{!clycount.serp__Product__c }" required="false" id="prdct" onchange="javaScrpt2()" label="B2C Product" />
        </div>
        </div>
       <div class="row">
        <p>Quantity On Hand <span>*</span></p>
          <div class="text-bg">
        <apex:outputField value="{!ecsponpge.ECS__Quantity_On_Hand__c}"/>
          </div>
          </div>
                 <div class="row">

Quantity Pending To Ship *

          <div class="text-bg">


                 <div class="row">
                 <p>            Quantity On Order <span>*</span> </p>
                      <div class="text-bg"><apex:outputField value="{!ecsponpge.ECS__Quantity_On_Order__c}"/>
           </div>
           </div>
       <div class="row">

        <p>Actual Quantity <span>*</span></p>
        <div class="text-bg">

     <apex:inputField value="{!clycount.serp__Quantity__c }" required="false" id="actulqnty" label="Actual Quantity"/>
         </div>
         </div>

        <div class="new-task" >
                   <apex:commandButton action="{!Populatedata}" value="Search" rendered="{!NOT(b)}" style="background:#137fc0; height:30px;  padding:0 15px 0 15px; border:none; cursor:pointer; margin:4px 0 0 6px;font-weight:regular;color:White;font-size: 13px;color:white" />

          <apex:commandButton action="{!SaveCount}" value="Save" rendered="{!b}" style="background:#137fc0;Color:white; height:30px; padding:0 15px 0 15px;  border:none; cursor:pointer; margin:4px 0 0 6px;font-weight:regular;font-size: 13px;"/>
     <apex:commandButton action="{!Cancel}" value="Cancel" immediate="true" style="background:#137fc0;Color:white; height:30px; padding:0 15px 0 15px;  border:none; cursor:pointer; margin:4px 0 0 6px;font-weight:regular;font-size: 13px;"/>
  </div> </div>

  </div>

Best Answer

In your apex:page component, you have showHeader="True". This setting will apply some default styling to the other components in the body.

Try setting showHeader="false".

The Visualforce Guidelines and Best Practices documentation states...

"The normal Salesforce header and sidebar are automatically removed from Visualforce pages added as mobile cards. You may find it useful to explicitly turn them and the full Salesforce site stylesheets off while you’re developing the page. Additionally, if your page uses the Google Maps API, Google recommends using an HTML5 doctype. Here’s an tag that does all of these things: "

I have found that setting the standardStylesheets to false also prevents the lookup icon from appearing in the lookup field. I'm still researching which styling to manually add back to the page in order to show the lookup icon, while having the standardStylesheets set to false.

To mark an answer as accepted, click on the check mark beside the answer to toggle it from greyed out to filled in.

Related Topic