[SalesForce] Pick list as an inline editor

I am creating a VF page and want to show a custom pick list created dynamically in my controller as an inline editor for a custom value. Both the value and list are custom properties of my controller and not bound directly to any fields of an SObject.

An example of what I want is the Status field on the standard Case layout: it is displayed as a text value, but when you double-click it, a pick list is displayed as an inline editor.

enter image description here

Is it possible to implement the same type of an inline editor in a Visualforce page?

I know how to display a picklist using the selectList tag, but it always shows the picklist while I want it to be displayed as just a label when the inline editor is not active.

Best Answer

All you need to do is use a apex:outputField together with a picklist field of the selected sObject. Then the Salesforce will take care about the rest:

Apex:

Account acc { get; set; }

public MyClass(){
    acc = [Select MyPicklist__c From Account Where Id = 'XXXXX'];
}

VF:

<apex:pageBlock mode="inlineEdit">
    <apex:pageBlockSection>
        <apex:outputField value="{!acc.MyPicklist__c}">
            <apex:inlineEditSupport event="onclick"/>
        </apex:outputField>
    </apex:pageBlockSection>
</apex:pageBlock>


Update

Well, i think here you can only do some trix. Here is my thought how it could be implemented with some CSS rules only. The idea is to hide appearance of the list (down arrow) and only show it if the element gets focused. Additionaly i will add some usual SFDC styles to the element:

/* A normal state of the picklist, no combobox styles, only text displayed */
.mySelect {
    font-size: 12px;
    width:100%;
    color: #000;
    background: transparent;
    appearance: none;
    -webkit-appearance: none;
    border: none;
}
/* Focused (clicked) state of the picklist, a normal combobox style displayed */
.mySelect:focus {
    -webkit-appearance: menulist ;
    appearance: menulist ;
    border: 1px solid #000;
    background: white;
    margin: 0;
    width:initial;
}
/* Just some additional styles to get SFDC look & feel */
.mySelect:hover {
    background: url(/img/func_icons/util/pencil12.gif) no-repeat center right 2px  #e3f3ff;
}

<apex:pageBlock mode="inlineEdit">
    <apex:pageBlockSection >

        <apex:pageBlockSectionItem >
            <apex:outputLabel >Blaa</apex:outputLabel>
            <apex:selectList styleClass="mySelect" multiselect="false" size="1" >
                <apex:selectOption itemLabel="Option 1" itemValue="1"/>
                <apex:selectOption itemLabel="Option 2" itemValue="2"/>
            </apex:selectList>
        </apex:pageBlockSectionItem>

    </apex:pageBlockSection>
</apex:pageBlock>

It looks like this then:

enter image description here

Related Topic