CODEWITHSUNDEEP
xpageslotus-domino
Mikael Andersson Wigander
Mikael Andersson Wigander

Reputation: 661

How to display errors from validation in dialog with no document context?

I have a Xpage with fields connected to a document context where the users are to enter values and submit this to the database.

Additionally there's a button that displays a dialog from Extension Library. This dialog contains additional fields required and other validators (regex). The button closing this dialog is a type Button and the SSJS on the event only transfers values from dialog fields to the form below.

The problem I'm facing is that the validators on the fields are executed but no errors shown in dialog. I can tell they are executed because the dialog cannot be closed. This will be confusing for the users when no error messages are displayed. I have tested with both the Error Messages control, Error Message control and also enable Client side validation.

How can I get the validation to be displayed in the dialog/error message control in dialog?

Dialog:

<xe:dialog
            id="dialogNewSec"
            title="New Security Request"
        >
            <xe:dialogContent id="dialogContent1">
                <xe:formTable
                    id="formTable2"
                    labelPosition="above"
                    formDescription="Fields marked with * are mandatory"
                >
                    <xp:this.facets></xp:this.facets>
                    <xp:messages id="messages1"></xp:messages>
                    <xe:formRow
                        id="formRow1"
                        label="ISIN:"
                        for="inputText1"
                    >

                        <xp:inputText
                            id="inputText1"
                            required="true"
                            disableClientSideValidation="false"
                            maxlength="12"
                        >
                            <xp:this.validators>
                                <xp:validateRequired message="ISIN is required"></xp:validateRequired>
                                <xp:validateLength
                                    maximum="12"
                                    message="ISIN must not be more than 12 characters"
                                >
                                </xp:validateLength>
                                <xp:validateConstraint message="ISIN is incorrect">
                                    <xp:this.regex><![CDATA[/^[A-Z]{2}/]]></xp:this.regex>
                                </xp:validateConstraint>
                            </xp:this.validators>
                            <xp:eventHandler
                                event="onchange"
                                submit="false"
                            >
                                <xp:this.script><![CDATA[var e = window.document.getElementById("#{id:inputText1}");
e.value = e.value.toUpperCase();]]></xp:this.script>
                            </xp:eventHandler>
                        </xp:inputText><xp:message id="message1" for="inputText1"></xp:message>
                        <xp:this.facets></xp:this.facets>
                    </xe:formRow>
                    <xe:formRow
                        id="formRow3"
                        label="Exchange:"
                        for="comboBox1"
                    >
                        <xp:comboBox
                            id="comboBox1"
                            disableClientSideValidation="false"
                            required="true"
                        >
                            <xp:this.validators>
                                <xp:validateRequired message="Exchange is required"></xp:validateRequired>
                            </xp:this.validators>
                            <xp:selectItem
                                itemValue=""
                                itemLabel="*Select an Exchange*"
                            >
                            </xp:selectItem>
                            <xp:selectItems>
                                <xp:this.value><![CDATA[#{javascript:var values = DbColumnArray("", "", "cache", "unique", "", "vExchangeLookup", 3)+"|"+DbColumnArray("", "", "cache", "unique", "", "vExchangeLookup", 2);
return values;}]]></xp:this.value>
                            </xp:selectItems>
                        </xp:comboBox>
                    </xe:formRow>
                    <xe:formRow
                        id="formRow4"
                        label="Currency:"
                        for="comboBox2"
                    >
                        <xp:comboBox
                            id="comboBox2"
                            disableClientSideValidation="false"
                        >
                            <xp:this.validators>
                                <xp:validateRequired message="Currency must have a value"></xp:validateRequired>
                            </xp:this.validators>
                            <xp:selectItem
                                itemLabel="* Select a currency *"
                                itemValue=""
                            >
                            </xp:selectItem>
                            <xp:selectItems>
                                <xp:this.value><![CDATA[#{javascript:@DbColumn("","vCurrLookup",1);
}]]></xp:this.value>
                            </xp:selectItems>
                            <xp:eventHandler
                                event="onchange"
                                submit="false"
                            >
                                <xp:this.script><![CDATA[var curr = document.getElementById("#{id:comboBox2}").value;
var qc = document.getElementById("#{id:Currency}")
qc.value = curr]]></xp:this.script>
                            </xp:eventHandler>
                        </xp:comboBox>
                    </xe:formRow>
                    <xe:formRow
                        id="formRow2"
                        for="inputText2"
                        label="PSET:"
                    >
                        <xp:inputText
                            id="inputText2"
                            required="true"
                        >
                            <xp:this.validators>
                                <xp:validateRequired message="PSET is required"></xp:validateRequired>
                            </xp:this.validators>
                        </xp:inputText>
                    </xe:formRow>
                    <xe:formRow
                        id="formRow5"
                        label="Quoted Currency:"
                        rendered="false"
                        for="comboBox3"
                    >
                        <xp:comboBox id="comboBox3">
                            <xp:selectItem
                                itemLabel="* Select a Currency *"
                                itemValue=""
                            >
                            </xp:selectItem>
                            <xp:selectItems>
                                <xp:this.value><![CDATA[#{javascript:@DbColumn("","vCurrLookup",1);
}]]></xp:this.value>
                            </xp:selectItems>
                        </xp:comboBox>
                    </xe:formRow>
                </xe:formTable>
            </xe:dialogContent>
            <xe:dialogButtonBar id="dialogButtonBar1">
                <xp:panel>
                    <xp:button
                        value="Submit"
                        id="button4"
                    >
                        <i class="fa fa-large fa-fw fa-save"></i>
                        <xp:eventHandler
                            event="onclick"
                            submit="true"
                            refreshMode="partial"
                            refreshId="InstrumentDealPanel"
                        immediate="false" save="false">
                            <xp:this.action><![CDATA[#{javascript:sessionScope.SDR = null;
sessionScope.SDR = (sessionScope.SDR || new java.util.HashMap());
sessionScope.SDR.put("Form", compositeData.sdrForm);
sessionScope.SDR.put("PortfolioSystem", getComponentValue("PortfolioSystem"));
sessionScope.SDR.put("Request", "Y");
sessionScope.SDR.put("StaticRequested", "Yes");
sessionScope.SDR.put("Status",0);
sessionScope.SDR.put("StaticReqStatus", "New");
sessionScope.SDR.put("InstrumentType", compositeData.InstrumentType);
sessionScope.SDR.put("ISIN", getComponentValue("inputText1"));
sessionScope.SDR.put("Exchange", getComponentValue("comboBox1"));
sessionScope.SDR.put("Currency", getComponentValue("comboBox2"));
sessionScope.SDR.put("QuotationCurrency", getComponentValue("comboBox3"));
sessionScope.SDR.put("PSET", getComponentValue("inputText2"));
try {
    getComponent("ISIN").setValue(sessionScope.SDR.ISIN);
} catch(e) {}
try {
    getComponent("InstrumentShort").setValue("");
} catch(e) {}
try {
    getComponent("InstrumentName").setValue("");
} catch(e) {}
try {
    getComponent("RIC").setValue("");
} catch(e) {}
try {
    getComponent("CUSIP").setValue("");
} catch(e) {}
try {
    getComponent("SEDOL").setValue("");
} catch(e) {}
try {
    getComponent("BloombergID").setValue("");
} catch(e) {}
try {
    getComponent("MaturityDate").setValue("");
} catch(e) {}
try {
    getComponent("InstrumentType").setValue(sessionScope.SDR.InstrumentType);
} catch(e) {}
try {
    getComponent("Exchange").setValue(sessionScope.SDR.Exchange);
} catch(e) {}
try {
    getComponent("QuotationCurrency").setValue(sessionScope.SDR.QuotationCurrency);
} catch(e) {}
try {
    getComponent("Currency").setValue(sessionScope.SDR.Currency);
} catch(e) {}

try {
    getComponent("PSET").setValue(sessionScope.SDR.PSET);
} catch(e) {}
try {
    getComponent("PSETFull").setValue("");
} catch(e) {}

getComponent("dialogNewSec").hide();}]]></xp:this.action>
                        </xp:eventHandler>
                    </xp:button>
                    <xp:button
                        value="Cancel"
                        id="button5"
                    >
                        <i
                            class="fa fa-lg fa-fw fa-times"
                            style="color:red;"
                        >
                        </i>
                        <xp:eventHandler
                            event="onclick"
                            submit="false"
                        >
                            <xp:this.script><![CDATA[XSP.closeDialog('#{id:dialogNewSec}')]]></xp:this.script>
                        </xp:eventHandler>
                    </xp:button>
                </xp:panel>
            </xe:dialogButtonBar>
        </xe:dialog>

Button displaying dialog:

<xp:button
                    value="New Security..."
                    id="NewSecurityButton"
                    title="Create a new Security Request"
                >
                    <i
                        class="fa-external-link"
                    ></i>
                    <xp:this.rendered><![CDATA[#{javascript:@IsNewDoc() && compositeData.enableSDR && sessionScope.userRoles.contains("[STATICREQ]");}]]></xp:this.rendered>
                    <xp:eventHandler
                        event="onclick"
                        submit="false"
                        id="eventHandler4"
                    >
                        <xp:this.script><![CDATA[XSP.openDialog("#{id:dialogNewSec}");]]></xp:this.script>
                    </xp:eventHandler>
                </xp:button>

Upvotes: 0

Views: 849

Answers (1)

Paul Stephen Withers
Paul Stephen Withers

Reputation: 15739

The problem, I think, is the refreshId of the button that closes your panel. InstrumentDealPanel isn't in the dialog, so after validation fails, it refreshes that area. It doesn't refresh anything in the dialog, so the messages control in the dialog isn't updated.

I presume InstrumentDealPanel is the panel you want updated after the dialog is closed. If so, that id needs adding as the parameter of getComponent("dialogNewSec").hide().

The refreshId should be an area on the dialog that includes you're errors control. It doesn't look like you're styling controls at all, so setting it to messages1 may work.

If you're not using client-side validation at all in the application, you might prefer to set it in the Xsp Properties file, on the Page Generation tab, instead of setting it on each control.

Upvotes: 2

Related Questions