how to create text fields in xpage programmatically using js

Question

need a little help here. I'm still a bit new to JS so I'm on a crunch here. I need to create text fields programmatically using JS or SSJS in Xpage and I'm really lost. The routine is when I click a button a text field will be added. I will appreciate every help and suggestions. Thank you in advance.

Answer 1

If you want to add only one text field then create this field in XPage but not render it initially. The button could set a viewScope variable and the text field's rendered code would return true if this viewScope variable is set. This way the field would be visible after clicking button.

If you want to add several text fields dynamically then use a repeat control. Again, use a viewScope variable which would contain a list of text field names you would set by button. This viewScope variable is repeat control's value property.

Example for repeat control:

<xp:this.data>
    <xp:dominoDocument
        var="document1"
        formName="Test">
    </xp:dominoDocument>
</xp:this.data>
<xp:repeat
    id="repeat1"
    rows="100"
    value="#{viewScope.fields}"
    var="fieldName">
    <xp:label
        value="#{fieldName}"
        for="inputText1">
    </xp:label>
    <xp:inputText
        id="inputText1">
        <xp:this.value><![CDATA[#{document1[fieldName]}]]></xp:this.value>
    </xp:inputText>
    <br />
</xp:repeat>
<xp:button
    value="Add Field"
    id="button1">
    <xp:eventHandler
        event="onclick"
        submit="true"
        refreshMode="partial"
        refreshId="repeat1">
        <xp:this.action><![CDATA[#{javascript:
            if (!viewScope.fields) {
                viewScope.fields = [];
            } 
            viewScope.fields.push("field" + (viewScope.fields.length + 1));
        }]]></xp:this.action>
    </xp:eventHandler>
</xp:button>