I have an apex:component that renders several buttons and a table where one of the columns of the table uses apex:inlineEditSupport to allow inline editing. I am also using the feature that allows the buttons that are displayed to be changed once inline editing is started:

<apex:inlineEditSupport event="ondblclick"
        showOnEdit="save, cancel, reset"
        hideOnEdit="submit, approve, unapprove"

When I have a single instance of the apex:component in the page this all works very well and meets my need to allow occasional editing of the values without cluttering the user interface.

But when multiple instances of the apex:component are present (in my case when there are multiple payees), an inline edit in one apex:component causes the buttons in all of the apex:components to be changed which is not what I am looking for. I want only the buttons within the apex:component where the inline editing is being done to be changed.

From looking at the generated JavaScript I'm not optimistic that there is a solution. But if you know of one or have any suggestions please share.

1 Answer 1


Just tried this brute-force approach that appears to work. If you have something better please answer.

While it is usually not possible to include {!...} expressions in id attributes, showOnEdit and hideOnEdit do support expressions. So the Visualforce page can pass the start of the button id values in (as AFAIK there is no way to find this within the component):

<c:PayeeTable id="payee1" idPrefix="p:f:payments:payee1" ... />
<c:PayeeTable id="payee2" idPrefix="p:f:payments:payee2" ... />
<c:PayeeTable id="payee3" idPrefix="p:f:payments:payee3" ... />
<c:PayeeTable id="payee4" idPrefix="p:f:payments:payee4" ... />

and then the component can use those to make the references to the buttons fully qualified:

<apex:component allowDML="true" id="c">
    <apex:attribute name="idPrefix" type="String" description=""/>
    <apex:pageBlockSection id="ps">
        <apex:commandButton id="save" .../>
        <apex:commandButton id="cancel" .../>
        <apex:inlineEditSupport event="ondblclick"
                showOnEdit="{!idPrefix}:c:ps:save, {!idPrefix}:c:ps:cancel, {!idPrefix}:c:ps:reset"
                hideOnEdit="{!idPrefix}:c:ps:submit, {!idPrefix}:c:ps:approve, {idPrefix}:c:ps:unapprove"

and the JavaScript generation is smart enough to recognise that the button ids are already fully qualified. Result: only the buttons within the correct component change. (Though the JavaScript emitted into the page seems to contain a lot of repeated values.)

You must log in to answer this question.

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