Add link to dynamically insert an element in JSF/Primefaces selectonemenu

Question

Is it possible to dynamically insert an item into a select one menu:

Currently the user has to go to another page where they can add a job:

Then navigate back to the first view to see the updated pull down with the newly added select item. A more efficient choice would be to allow user to insert on the fly right in this view and then select it in the dropdown.

So, basically, you want to add a dummy select item which when selected shows some dialog with that "Add new job" form and then refreshes the column in the parent page with the new job preselected in the row? — BalusC, Sep 09 '15 at 20:34
yes, preselected would be a bonus! Another idea I was thinking is having a command button at the top of the datatable, which would open a dialog, with the same functionality as that Add New Job.xhtml page. But your idea would be even more efficient. — jeff, Sep 09 '15 at 21:51

score 8 · Accepted Answer · answered Nov 18 '16 at 18:48

This is doable by providing a dummy select item and explicitly checking for it in the ajax change listener. Once selected, just show the dialog. When the dialog is saved, then save the new job and reset the dummy select item.

Here's a kickoff example.

@Named
@ViewScoped
public class Bean implements Serializable {

    private List<Activity> activities;
    private List<Job> jobs;
    private Job newJob;

    @EJB
    private YourActivityService yourActivityService;

    @EJB
    private YourJobService yourJobService;

    @PostConstruct
    public void init() {
        activities = yourActivityService.list();
        jobs = yourJobService.list();
        newJob = new Job();
    }

    public void addNewJobIfNecessary(AjaxBehaviorEvent event) {
        if (newJob.equals(((UIInput) event.getComponent()).getValue())) {
            RequestContext ajax = RequestContext.getCurrentInstance();
            ajax.update("addNewJobDialog");
            ajax.execute("PF('widget_addNewJobDialog').show()");
        }
    }

    public void saveNewJob() {
        yourJobService.save(newJob);
        jobs.add(newJob);
        newJob = new Job();

        RequestContext ajax = RequestContext.getCurrentInstance();
        ajax.update("activitiesForm");
        ajax.execute("PF('widget_addNewJobDialog').hide()");
    }

    // ...
}

<h:form id="activitiesForm">
    <p:dataTable value="#{bean.activities}" var="activity">
        <p:column>#{activity.id}</p:column>
        <p:column>
            <p:selectOneMenu value="#{activity.job}" converter="omnifaces.SelectItemsConverter">
                <f:selectItem itemValue="#{null}" itemLabel="Select one" />
                <f:selectItems value="#{bean.jobs}" />
                <f:selectItem itemValue="#{bean.newJob}" itemLabel="Add new Job" />
                <p:ajax listener="#{bean.addNewJobIfNecessary}" />
            </p:selectOneMenu>
        </p:column>
    </p:dataTable>
</h:form>

<p:dialog id="addNewJobDialog">
    <h:form>
        <p:inputText value="#{bean.newJob.name}" required="true" />
        <p:commandButton value="Add" action="#{bean.saveNewJob}" update="@form" />
        <p:messages />
    </h:form>
</p:dialog>

Your kickoff works for me. Thank you. At first it didn't until I used omnifaces.SelectItemsConverter in lieu of my own converter, but my converted I thought was good, based on your post here http://stackoverflow.com/questions/17052503/using-a-please-select-fselectitem-with-null-empty-value-inside-a-pselectonem/24321980#24321980 about converter. I also had to adjust some of the backing beans; the selectonemenu was defaulting to "Add new Job" since the select item for new job and the noSelectionOption value of null both matched as default — jeff, Nov 21 '16 at 19:48

score 1 · Answer 2 · answered Sep 10 '15 at 05:26

You can try add field for your new item. It will look follows:

Code for bean:

private Job newJob;
private Job addesJob;

public Job getNewJob() {
   return newJob;
}

public void setNewJob(Job newJob) {
   this.newJob = newJob;
}

public Job getAddedJob() {
   return addedJob;
}

public void setAddedJob(Job addedJob) {
   this.addedJob = addedJob;
}

public void needCreateJob() {
   if (addedJob.equals(newJob)) {
      RequestContext.getCurrentInstance().execute("PF('jobCreationDlgVar')
        .show()");
   }
}

Code for view:

<p:selectOneMenu value="#{bean.addedJob}">
   <f:selectItem value="#bean.newJob}"/>
   <p:ajax event="change" listener="#{bean.needCreateJob()}" process="@this"/>
   <f:selectItem value="#{bean.jobs}" var="job" itemLabel="#{job.name}" itemValue="#{job}"/>
</p:selectOneMenu>

Add link to dynamically insert an element in JSF/Primefaces selectonemenu

2 Answers2