5

I'm trying to create a VF page that will be used in Salesforce1 via a publisher action. One of the things I need to do is have the user choose an Account. However, there seems to be two problems with this.

  1. The lookup window results has the browser styling: browser styling
  2. Tapping on one of the accounts bounces me back to the main page where I called the publisher action and also freezes the app (the screenshot shows what it looks like in the sforce1 app in the browser, but when trying on my phone, it will freeze the app)

Is there some mobile specific way of rendering lookup fields in sf1 that I am missing here?

Here is a similar issue, but not quite the same.

Update 2/21/2014

Here is the code by popular request (simplified):

<apex:page standardController="Account" docType="html-5.0" showHeader="false" sidebar="false" standardStylesheets="true">
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.css" />
    <script src="//code.jquery.com/jquery-1.9.1.min.js"></script>
    <script src="//code.jquery.com/mobile/1.4.1/jquery.mobile-1.4.1.min.js"></script>

    <apex:form >
        <div>
            <apex:inputField value="{!Account.ParentId}"/>
        </div>
    </apex:form>
</apex:page>

I apologize if I wasn't clear up above, but the main question is: is there a built-in way of getting the lookup to have the sf1 styling and functionality? I.e., can I create the lookup to look like the below via VF, or do I have to create something like this manually?: sf1 lookup control

Improve this question
8
  • 1
    Can you please add some code that you have added to publisher action?
    – Mohith Shrivastava
    Feb 20, 2014 at 17:13
  • I mean, I can, but not sure how it will help answer the question. It is a more general question on how I can have lookup fields in salesforce1 via VF
    – willard
    Feb 20, 2014 at 18:24
  • Hello, willard, what constraints are moving you toward custom Vf vs. a Create Record or an Update Record action?
    – Marty C.
    Feb 21, 2014 at 4:17
  • The full scenario is as follows. We have a trip object. You can add different sobjectTypes to the trip, i.e., you can add an account, contact, lead, etc to a trip. In sf1, I want to have one publisher action (read: one VF page) that can add EITHER an account, contact, or lead. I want to be able to search for an existing account/contact/lead via a lookup field, which is where I am running into the problem above.
    – willard
    Feb 21, 2014 at 5:38
  • Is this in one.app or the native client?
    – Kris Gray
    Feb 21, 2014 at 16:31

3 Answers 3

Reset to default
1

Lookups are not currently supported with the same styling. You will need to reproduce the styling manually.

You can call the same lookup function to bring up the lookup dialog, but the styling of that window will still look like the one you posted.

Improve this answer
1
  • Could you please elaborate your answer? I am not getting how to replicate the lookup functionality for the SF1 enabled VF Pages. I don't want to use <apex:inputField> tag. I am using jQuery Mobile libraries for the mobile UI.
    – Gaurish
    Oct 20, 2014 at 12:23
1

Here's the code needed to create a lookup with sf1 styling:

<apex:page docType="html-5.0" standardController="Deal__c" extensions="PositionNoteDealActionController" sidebar="false" showHeader="false" applyHtmlTag="false">
<html xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="x-ua-compatible" content="ie=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <apex:stylesheet value="{!URLFOR($Resource.salesforce_lightning, 'assets/styles/salesforce-lightning-design-system-vf.min.css')}" />

</head>
<body>
    <div class="yourcompanyname">
        <apex:form >

            <div class="slds-form-element">
                <label class="slds-form-element__label" >Opportunity</label>
                <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon--right">
                    <a href="javascript:%20openLookup%28%27%2F_ui%2Fcommon%2Fdata%2FLookupPage%3Flkfm%3Dj_id0%253Aj_id4%26lknm%3Dj_id0%253Aj_id4%253Aj_id7%26lktp%3D%27%20%2B%20getElementByIdCS%28%27j_id0%3Aj_id4%3Aj_id7_lktp%27%29.value%2C670%2C%271%27%2C%27%26lksrch%3D%27%20%2B%20escapeUTF%28getElementByIdCS%28%27j_id0%3Aj_id4%3Aj_id7%27%29.value.substring%280%2C%2080%29%29%29" id="j_id0:j_id4:j_id7_lkwgt" onclick="setLastMousePosition(event)" title="Opportunity Lookup (New Window)">
                        <svg aria-hidden="true" class="slds-input__icon slds-icon-text-default" >
                            <use xlink:href="{!URLFOR($Resource.salesforce_lightning, '/assets/icons/utility-sprite/svg/symbols.svg#search')}"></use>
                        </svg>
                    </a>
                    <apex:inputField styleClass="slds-input" type="text" value="{!positionNote.Opportunity__c}"/>
                </div>
            </div>


        </apex:form>
    </div>
</body>

</html>
</apex:page>

The salesforce_lightning resource comes from the css-customizer on the lightning design system site. Just upload the entire zip as a static resource.

The href on the anchor tag is copied directly from the lookup icon if using regular salesforce styling.

Improve this answer
0

There is a blog post by CodeScience that shows how to utilize bootstrap to get a lookup styled similarly to your screenshot: Bootstrap Your Salesforce Lookups

Since you are working on it in Salesforce1 the default styling for the lookups isnt great, but this article will show you a way to get started, and you can obviously customize it to fit your needs.

Improve this answer

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .