Take the 2-minute tour ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

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.

share|improve this question
add comment

1 Answer 1

up vote 3 down vote accepted

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

share|improve this answer
    
Thank you for the response, but this will not work for my case. It seems that I did not explain my situation well. My bad. Both the value and the list are not fields of an SObject. They are dynamically created values in the controller. I have updated my question. –  DmitryN Mar 10 at 14:04
    
@DmitryN Updated my answer, i hope it helps. –  mast0r Mar 10 at 16:29
    
Great, this works! Thank you. I just modified styles slightly to make this work in Firefox: .mySelect { ... text-indent: 0.01px; text-overflow: ''; } .mySelect:focus { ... text-indent: 0; text-overflow: clip; } –  DmitryN Mar 11 at 6:00
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.