0

I'm using a prefixed version of Bootstrap to create a Visualforce page where you will lookup a User with a jQuery autocomplete component. The component autohides the SF standard lookup features. I'm having a hard time getting the styling to work... does anyone have any ideas?

Here's a screenshot: When using the form-control style, it doesn't work

Here's the apex code:

<div class="form-group">
    <label class="control-label col-md-2">Employee</label>
    <div class="col-md-3">
        <apex:inputField id="Employee" value="{!prf.Employee__c}" styleClass="form-control" >
            <c:AutoCompleteController objectname="User" autocomplete_textbox="{!$Component.Employee}" limit="isActive=true"/>
        </apex:inputField>
    </div>
</div>

Here's the rendered html output:

<div class="form-control" id="j_id0:j_id33:j_id34:Employee_top" name="j_id0:j_id33:j_id34:Employee_top" style="white-space: nowrap">
    <select id="j_id0:j_id33:j_id34:Employee_mlktp" name="j_id0:j_id33:j_id34:Employee_mlktp" onchange="LookupAutoCompleteInputElement.handleLookupTypeChange('j_id0:j_id33:j_id34:Employee',false);" title="Search scope" style="display: none;">
        <option value="005" selected="selected">User</option>
        <option value="PartnerUserLookup">Partner User</option>
        <option value="CustomerSuccessUserLookup">Customer Portal User</option>
    </select>
    <input type="hidden" name="j_id0:j_id33:j_id34:Employee_lkid" id="j_id0:j_id33:j_id34:Employee_lkid" value="000000000000000">
    <input type="hidden" name="j_id0:j_id33:j_id34:Employee_lkold" id="j_id0:j_id33:j_id34:Employee_lkold" value="null">
    <input type="hidden" name="j_id0:j_id33:j_id34:Employee_lktp" id="j_id0:j_id33:j_id34:Employee_lktp" value="StandardUserLookup">
    <input type="hidden" name="j_id0:j_id33:j_id34:Employee_lspf" id="j_id0:j_id33:j_id34:Employee_lspf" value="0">
    <input type="hidden" name="j_id0:j_id33:j_id34:Employee_lspfsub" id="j_id0:j_id33:j_id34:Employee_lspfsub" value="0">
    <input type="hidden" name="j_id0:j_id33:j_id34:Employee_mod" id="j_id0:j_id33:j_id34:Employee_mod" value="0">
    <span class="lookupInput">
        <span role="status" aria-live="polite" class="ui-helper-hidden-accessible"></span>
        <input id="j_id0:j_id33:j_id34:Employee" maxlength="255" name="j_id0:j_id33:j_id34:Employee" onchange="getElementByIdCS('j_id0:j_id33:j_id34:Employee_lkid').value='';getElementByIdCS('j_id0:j_id33:j_id34:Employee_mod').value='1';" size="20" title="Employee" type="text" class="ui-autocomplete-input" autocomplete="off">
        <script>
            new ForeignKeyInputElement("j_id0:j_id33:j_id34:Employee","/_ui/common/data/LookupValidationServlet",null,true,{"acent":"005"});
        </script>
        <a href="javascript:%20openLookup%28%27%2F_ui%2Fcommon%2Fdata%2FLookupPage%3Flkfm%3Dj_id0%253Aj_id33%26lknm%3Dj_id0%253Aj_id33%253Aj_id34%253AEmployee%26lktp%3D%27%20%2B%20getElementByIdCS%28%27j_id0%3Aj_id33%3Aj_id34%3AEmployee_lktp%27%29.value%2C670%2C%271%27%2C%27%26lksrch%3D%27%20%2B%20escapeUTF%28getElementByIdCS%28%27j_id0%3Aj_id33%3Aj_id34%3AEmployee%27%29.value.substring%280%2C%2080%29%29%29" id="j_id0:j_id33:j_id34:Employee_lkwgt" onclick="setLastMousePosition(event)" title="Employee Lookup (New Window)" style="display: none;"><img src="/s.gif" alt="Employee Lookup (New Window)" class="lookupIcon" onblur="this.className = 'lookupIcon';" onfocus="this.className = 'lookupIconOn';" onmouseout="this.className = 'lookupIcon';this.className = 'lookupIcon';" onmouseover="this.className = 'lookupIconOn';this.className = 'lookupIconOn';" title="Employee Lookup (New Window)"></a>
    </span>
</div>
0

Ok, I think I found a work around -- putting this out there in case anyone else has this issue.

I think the root issue is that in my Org, using a User Lookup adds the other select list with the User Type. Even though I'm hiding that from the autocomplete component, I think it's causing the formatting to be faulty.

When you use a lookup on the page, it adds a hidden field to capture the Id (while you see the Name displayed). This field is the same element Id as the input only with "_lkid" appended to the end. So, I changed my to an to capture the record name, and added an with the Id the same as the inputText only ending in _lkid -- this hidden input is binded to the object's lookup field. This way, I can easily format the inputText with Bootstrap and still pass the Id to the controller.

Here's the final version.

<div class="form-group">
    <label class="control-label col-md-2">Employee</label>
    <div class="col-md-3">
        <apex:inputHidden id="Employee_lkid" value="{!prf.Employee__c}"/>
        <apex:inputText id="Employee" value="{!prf.Name}" styleClass="form-control">
            <c:AutoCompleteController objectname="User" autocomplete_textbox="{!$Component.Employee}" limit="isActive=true"/>
        </apex:inputText>
    </div>
</div>

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.