XPages Ext Lib Dialog Control fields are not editable, need to get a handle on field values, and close the dialog

Question

I have an Extension Library Dialog Control on my XPage that is opened through a button:

XSP.openDialog("#{id:commentsDialog}");

On my XPage, I have a document source, called document1. When I put those fields (drag and drop from Data Palette) on the dialog control, the field (docID) exists, but is not editable -- looks computed for display:

<xe:dialog id="commentsDialog" title="Comments" styleClass="dialogBoxComments">
    <xp:panel>
        <xp:table style="width:100%">
            <xp:tr>
                <xp:td>
                    <xp:label value="Enter your comments..." id="label2"></xp:label>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td>
                    <xp:inputTextarea id="comments" style="width:100%;height:100px">
                    </xp:inputTextarea>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td>
                    <xp:div style="text-align:right">
                        <xp:button value="Submit" id="submitButton">
                            <xp:eventHandler event="onclick" submit="true"
                                refreshMode="complete">
                                <xp:this.action><![CDATA[#{javascript:saveComments();}]]></xp:this.action>
                            </xp:eventHandler>
                        </xp:button>
                        <xp:button id="cancelButton" value="Cancel">
                            <xp:eventHandler event="onclick" submit="false">
                                <xp:this.script><![CDATA[XSP.closeDialog("#{id:commentsDialog}");]]></xp:this.script>
                            </xp:eventHandler>
                        </xp:button>
                    </xp:div>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td>
                    <xp:inputText value="#{document1.docID}" rendered="false"
                        id="docID"></xp:inputText>
                </xp:td>
            </xp:tr>
        </xp:table>
    </xp:panel>
    <xp:br></xp:br>
</xe:dialog>

I have a input text area where the user will enter values, but I am having trouble getting that value using SSJS. I have tried:

    function getComponentValue(id){
      var field = getComponent(id);
      var value = field.getSubmittedValue();
      if( null == value ){
         // else not yet submitted
         value = field.getValue();
      }
      return value
    }

To grab the value in the input text area, I am not sure what to do, since if I bind to an existing field in the Data Palette it appears non-editable and I cannot enter any values.

Also, I have a Submit button on the dialog control which calls some SSJS:

function saveComments() {
// Need to create a comments doc for the movie...
var db:NotesDatabase = session.getCurrentDatabase();
var doc:NotesDocument = currentDocument.getDocument();
var unid = getComponentValue("docID");
// Grab comments from dialog...
var comments = getComponentValue("comments");
// Create the comments doc...   
var docComm:NotesDocument = db.createDocument();
docComm.replaceItemValue("Form", "comment");    
var nowValue = @Text(@Now());
var currentUser = sessionScope.get("currentUser");
docComm.replaceItemValue("cm_Key", unid);
docComm.replaceItemValue("cm_By", currentUser);
docComm.replaceItemValue("cm_Date", nowValue);
docComm.replaceItemValue("cm_Key", unid);
docComm.save();
}

How would I close the Dialog from the server-side?

So, 3 things (appreciate your patience):

1. How to make fields editable on the dialog control
2. How to get the value from the input text area that is not bound to a field on the document1
3. How to close the dialog from server-side

Thanks!

---

EDITS: I put edits in this comment so I could show an image correctly...

1. I made the docID field visible and it appears computed, not editable.
2. I added a second document data source (commentDocument) and set the value of the field to the Data palette value -- field does not appear, thinking it may be non-editable.

Here is the image -- green box is where the comments field (cm_Comm from the commentsDocument source) should exist and the red box is the docID field that is non-editable:

Here is the code behind the control now:

<xe:dialog id="commentsDialog" title="Comments" styleClass="dialogBoxComments">
    <xp:panel>
        <xp:table style="width:100%">
            <xp:tr>
                <xp:td>
                    <xp:label value="Enter your comments..." id="label2"></xp:label>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td>
                    <xp:inputTextarea id="comments" style="width:100%;height:100px"
                        value="#{commentDocument.cm_Comm}">
                    </xp:inputTextarea>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td>
                    <xp:div style="text-align:right">
                        <xp:button value="Submit" id="submitButton">
                            <xp:eventHandler event="onclick" submit="true"
                                refreshMode="complete">
                                <xp:this.action><![CDATA[#{javascript:saveComments();getComponent("commentsDialog").hide();}]]></xp:this.action>
                            </xp:eventHandler>
                        </xp:button>
                        <xp:button id="cancelButton" value="Cancel">
                            <xp:eventHandler event="onclick" submit="false">
                                <xp:this.script><![CDATA[XSP.closeDialog("#{id:commentsDialog}");]]></xp:this.script>
                            </xp:eventHandler>
                        </xp:button>
                    </xp:div>
                </xp:td>
            </xp:tr>
            <xp:tr>
                <xp:td>
                    <xp:inputText value="#{document1.docID}" id="docID"></xp:inputText>
                </xp:td>
            </xp:tr>
        </xp:table>
    </xp:panel>
    <xp:br></xp:br>
</xe:dialog>

Please let me know what I am doing incorreclty -- appreciate this!

Answer 1

Create a second DominoDocument data source with a var of "comment". Set its scope to "request". Create hidden input components for cm_Key, cm_By, and cm_Date, setting an appropriate defaultValue for each; e.g.:

<xp:inputHidden value="#{comment.cm_By}" defaultValue="#{context.user.distinguishedName}" />

Then you can just bind the dialog field to that data source:

<xp:inputTextarea id="comments" style="width:100%;height:100px" value="#{comment.cm_Comment"}>

So your Submit button can become a "Save Document" simple action and a one-line "Execute Script":

<xp:eventHandler event="onclick" submit="true" refreshMode="complete">
    <xp:this.action>
        <xp:actionGroup>
            <xp:actionGroup>
                <xp:saveDocument var="comment" />
                <xp:executeScript>
                    <xp:this.script><![CDATA[#{javascript:getComponent("commentsDialog").hide();}]]></xp:this.script>
                </xp:executeScript>
            </xp:actionGroup>
        </xp:actionGroup>
    </xp:this.action>
</xp:eventHandler>

If the comment data source is scoped to each request, a new document will be created every time. You don't need to create a document programmatically... let the data source manage that for you.

Answer 2

How to make fields editable on the dialog control

1. Add a value property to your inputTextarea - for instance a viewScope variable (value="#{viewScope.myTextArea}") so that XPages (JSF) has a place to store the content in the text area that you want to process later on.

2. Your inputText field is set to rendered="false". So start with setting the control to be rendered (so remove the rendered="false" property).

How to get the value from the input text area that is not bound to a field on the document1

See answer 1 above.

How to close the dialog from server-side

Use getComponent("commentsDialog").hide().