1

Can anyone tell me how to create lookup field in viusalforce page using bootstrap library?
My use case is create contact record fields(LastName,AccountName and Lead Source).
For that I have created a page and it doest give the proper style for lookup field..
My VFP as follows:

<apex:page standardController="Contact" sidebar="false" standardStylesheets="false" showHeader="false" >
  <head> 
    <title>Create New Contact</title>        
    <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"/>        
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <apex:includeScript value="{!URLFOR($Resource.js, '/js/bootstrap.js')}"/>
    <apex:includeScript value="{!URLFOR($Resource.js, '/js/bootstrap.min.js')}"/>    
    <apex:stylesheet value="{!URLFOR($Resource.css, '/css/bootstrap.css')}"/>
    <apex:stylesheet value="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css"/>


    <style type="text/css"><!-- Spacing for the Nav bar -->
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
    </style>

    <script type="text/javascript">
        var $j = jQuery.noConflict();
    </script>

</head>

<body>
     <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <button type="button" class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
            <a class="brand" href="#">Bootstrap Page</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            </ul>
            <span class="navbar-form span3 pull-right">
                <li><a href="#">Right Link</a></li>
            </span>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">
    <apex:pageBlock >
        <apex:form >
            <h3>LastName </h3>
            <apex:inputField value="{!Contact.LastName}" styleClass="form-control"  html-placeholder="Enter Your Last Name"  /><br/>
             <h3>Account name</h3>
            <apex:inputField value="{!Contact.accountid}"   styleClass="form-control" html-placeholder="Enter Account Name"  /> <br/>
             <h3>Lead Source </h3>
            <apex:inputField value="{!contact.LeadSource}" styleClass="form-control"   /><br/>


            <apex:commandButton action="{!save}" styleClass="btn btn-success" value="Create New Contact" />

        </apex:form>
    </apex:pageBlock>
    </div> <!-- /container -->

</body>

</apex:page>

The above page gives like enter image description here

My expectation looks like enter image description here

Please help me on this.

Thanks in advance
Karthick

  • 1
    All the info to do this would be HERE: blogforce9.blogspot.com/2013/10/… – Eric Nov 27 '14 at 5:23
  • @Eric I have seen the blog that you mentioned. But we have to install that package. I dont want to install any package in my project – user3332076 Nov 27 '14 at 5:26
  • +1 to Eric's comment especially as its an unmanaged package (so source code is included and can be modified after installation) and its also available in Github to brows/download. – Keith C Nov 27 '14 at 9:05
1

If you expect a simple solution with just a few lines of code you won't get it. A good lookup mechanism is internally not simple. But luckily thanks to the component mentioned by @eric the usage is simple.

But since there is a unmanaged package here

http://blogforce9dev-developer-edition.ap1.force.com/ProjectDetail?id=a0290000009KusM

you can install it in a developer org and have a look at the full source code. And also deploy it without any package just using eclipse later.

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.