Primefaces - Customize p:confirmDialog content conditionally

Question

I have a list of objects (let's call each object a record object), shown through a <p:datatable> component. Each record has a delete button column.

When a user clicks on the delete button of the record, a <p:confirmDialog> is shown, asking for user confirmation. What I want is to customize the content of the confirmDialog under corresponding circumstances (for example show/do not show a checkbox concerning the value of a property of the record, f.e if record.isPersonal, show the checkbox, else not.

Unfortunately, that does not seem to be working as the checkbox is always shown in case the first record satisfies the condition, and the opposite in case it does not. After some research I found out that especially in previous Primefaces versions, they used to use the "JS way" (creating two separate confirm dialogs and proportionally use PF('widgeName').show(), but I would like to know whether any out of the box solution exists in Primefaces 7.0 version which I use through the <p:confirm> tag or something else. Code example below:

<p:dataTable id="recordsTable" lazy="true" value="#{myBean.myList.records}" var="record...">

          <p:column styleClass="deleteColumn">
    
                        <p:commandButton ...>
                 
                            <p:confirm .../>
    
                        </p:commandButton>
           
          <p:confirmDialog widgetVar="delete_record_dialog" global="true" showEffect="fade" hideEffect="fade">
    
                            <p:selectBooleanCheckbox
                                    rendered="#{record.isPersonal}"
            ....>
           </p:selectBooleanCheckbox>
    
    
            <p:commandButton value="#{msg.yes}" type="button"
                             styleClass="ui-confirmdialog-yes" icon="pi pi-check"
            />
            <p:commandButton value="#{msg.no}" type="button" styleClass="ui-confirmdialog-no"
                             icon="pi pi-times"
            />
    
    </p:confirmDialog>

  </p:column>

</p:dataTable>

Thanks in advance!

Don't you want `global="false"` so that its not storing 1 copy of the confirm dialog for the app. You somehow need your Confirm Dialog to be `update=` to have it re-evaluate its contents when called. Not sure if I have seen this done with a confirm dialog. — Melloware, May 18 '21 at 18:25
@Melloware Thanks for your reply, indeed I changed that from global=“true” to global=“false”, do you have any suggestion for me to update the contents of the confirmDialog correspondingly? — NickAth, May 18 '21 at 18:58
I am not sure its possible. I have never used ConfirmDialog how you are using it. — Melloware, May 18 '21 at 19:32
Well I have even try to create two separate `outputPanels` with `commandButton` and `confirmDialog` inside separately and render them according to this condition but still only the first `confirmDialog` is triggered in any case, this has started driving me crazy — NickAth, May 19 '21 at 00:28

score 2 · Accepted Answer · answered May 20 '21 at 23:13

2

I think rather than using ConfirmDialog, you may have to revert to building you own custom dialog, either using p:dialog or using the dialog framework. Using dialog framework you can create a simple confirm dialog box and can pass the data into the dialog programatically - e.g. a flag based on the current row to indicate if the checkbox should be shown. The dialog framework also gives an easy way to return data back from the dialog to the calling page using the dialogReturn ajax event.

answered May 20 '21 at 23:13

Brooksie

361
2
5

Thanks for your reply, what is the proper way in your opinion to use the `p:dialog` component so that each time a click on the delete button in the datatable, the record object is passed to the `p:dialog`? I think I can update the component through an ajax onclick event attached to the delete button but this would be no less complex solution than that which I already mentioned in the comments, could you please post a code example of your suggestion? – NickAth May 21 '21 at 13:25
To use `p:dialog` and to see an example of passing data into a dialog, see [PrimeFaces Showcase --> DataTable --> Selection (first example)](https://www.primefaces.org/showcase/ui/data/datatable/selection.xhtml). Note that (unlike in the example) the dialog should be outside the main form and should contain it's own form. – Brooksie May 21 '21 at 13:37
That seems perfect for my case, will try to implement it and let you know, thanks :) – NickAth May 21 '21 at 13:48
I implemented that solution and works fine for me, nevertheless, I added the dialog inside the same form with the datatable and works fine, why would you suggest that the dialog should be outside the main form? – NickAth May 22 '21 at 02:29
Generally, a form should represent one logical unit of work. See BalusC's response [here](https://stackoverflow.com/questions/7371903/how-to-use-hform-in-jsf-page-single-form-multiple-forms-nested-forms). But I've also found this [PF discussion](https://forum.primefaces.org/viewtopic.php?f=3&t=61313) specifically when the dialog itself has Ajax actions. So one form is OK but isn't always optimal, I think, but using ajax (as PF does by default) helps to limit the impact of having one large form. – Brooksie May 22 '21 at 11:59

score 0 · Answer 2 · answered May 20 '21 at 11:14

You could use the <p:confirmDialog message=""/> to conditionally display different messages like this:

<p:confirmDialog widgetVar="delete_record_dialog"
 header="Record delete"
 message="Are you sure you want to delete #{record.isPersonal ? 'your personal' : 'this'} record?">
    <h:form id="recordDeleteForm">
        <p:commandButton value="#{msg.yes}" update=":tableForm" 
            oncomplete="PF('deleteDialog').hide(); PF('recordsTableWidgetVar').filter()"/>
        <p:commandButton value="#{msg.no}" type="button" 
            onclick="PF('delete_record_dialog').hide()"/>
    </h:form>
</p:confirmDialog>

If you want to fit in more content then you could use <f:facet name="message">...</f:facet/>

See also:

<p:confirmDialog> with a parameter message

Hi, thanks for your reply, unfortunately this answer does not seem to answer my question, I do not want to have a customized message under condition but customized content inside the confirmDialog concerning the tag which triggered that call, in order to do this I have attached an ajax onclick event on the delete button which "updates" the content of the confirmDialog, which works but I do not see it as an optimal solution — NickAth, May 20 '21 at 13:33

Primefaces - Customize p:confirmDialog content conditionally

2 Answers2