7

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>

  • Welcome to the forum. I don't believe you will get good answers because it is just too many code here. Try to be more specific please. – Sergej Utko Dec 6 '13 at 7:42
5

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.

| improve this answer | |
1

The Lookups are not working correctly in Salesforce 1 app depending on the version that you are using :

-IOS + Salesforce 1 app version 5.0 : lookup does not work -IOS + Salesforce 1 app version 5.0.2: lookup works -Android + Salesforce 1 app version 5.0 : lookup does not work -->Android does not have version 5.0.2 available yet.

(always working in desktop browser)

Hope it helps.

| improve this answer | |
0

check out link below and make changes to your vf page. I had a task where I need to enable vf page containing look up fields into sf1 and I was able to complete using link below:

Lookup fields using Salesforce1 and Visualforce

stay Cool & Relaxed

| improve this answer | |
  • We should provide the summery of solution so that event of the URL goes down it helps other users – AtulRajguru9 Jul 24 '14 at 11:35
0

very simple just replace this code in vf page and replace Account with object you are working on. Also showHeader="true" instead of False. It makes use of jquery to show look up window in sf1 . . .(Rest of your code) . . . stay Cool & Relaxed

| improve this answer | |

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.