Xpage Component using UIDialog, UIDialog does not render its children

Question

I am trying to develope a component for my company wich should have an integrated dialog. Creating the component was easy until i hit the point with the Dialog. I want to use the com.ibm.xsp.extlib.component.dialog.UIDialog for my component because it has some nice features wich i want to use so creating my own dialog with a ClientSideDojo is not an option.

Normaly when adding a component to another i use component.getChildren().add(MyNewComp),but when i try this Code:

public class myComponentWithADialog extends UIComponentBase implements FacesComponent {
    //...other Code...
    public void buildContents(FacesContext context, FacesComponentBuilder builder)
                throws FacesException {

          UIDialog dialog = new UIDialog();
            TypedUtil.getChildren(container).add(dialog);
            dialog.setStyleClass("dlgUserPref");
            dialog.setTitle("titelxyz");
            dialog.setId("TagDialog"); 

            UIPanelEx panel = new UIPanelEx();
            panel.setTagName("div");
            panel.setStyle("border:2px solid red;");
            panel.setStyleClass("lotusList lotusTags lotusRelatedTags");

            dialog.getChildren().add(panel);
            this.getChildren.add(dialog);
    }
  //....
}

My Panel does not display inside the dialog when calling XSP.openDialog('dialogClientId') in my browser the dialog is shown but empty.

I already tried several other methods like dialog.getPopupContent.getChildren().add() but then i get the error: javax.faces.component.UIPanel incompatible with com.ibm.xsp.extlib.component.dialog.UIDialog$PopupContent.

Also i tried to find a solution on google but i only found a entry at openNTF from someone with the same problem but also without any solution.

Note: I also tried to 'inject' some content to a standard <xe:dialog> and to a <px:panel> inside the <xe:dialog> via a button with SSJS like keithstric does in his blog. Code:

var dialog:com.ibm.xsp.extlib.component.dialog.UIDialog = 
   getComponent('extlibdialog');

    if(dialog.getChildren().size() > 0) {     
        dialog.getChildren().clear(); 
    } 

    var TextField:com.ibm.xsp.component.xp.XspOutputText = new com.ibm.xsp.component.xp.XspOutputText();
        TextField.setTitle("test");
        TextField.setId("testTextField");
        TextField.setValue("<p>This is the new Content</p>");

    dialog.getChildren().add(TextField);

This code works fine for a standard <xp:panel> outside a dialog but not on the dialog itself or a panel inside it.

stwissel stwissel · Accepted Answer · 2013-09-04T01:28:34

The dialogue is not pre - rendered when the page is loaded, but when you actually call for it in XSP.openDialog(...)

So you need to get your code run in that event (mobile now, can't check if it is exposed).

Plan B: do use a Dojo dialogue that is backed by a rest control, so you can transport whatever data you need back and forth.

A word of caution: popup dialogs are a UI concept transplanted from desktop apps. They are alien to Web apps and mostly not working in mobile. Consider and Inline form instead (or a wizard)

Xpage Component using UIDialog, UIDialog does not render its children

1 Answers