Keep XML Dialogs Open

General Q&A
1

Hi

I have a basic XML dialog asking for input from the user. When the user clicks the button to submit I need to use JS to validate some inputs but the dialog always closes after the button is clicked.

Is there a way to keep the dialog open, i.e. not have the dialog auto close ?

2

Hey @forumfred

This is simple enough. All you have to do is set auto-hide="false" on the dialog component definition.

Like this.

<dialog id="filter" title="Data Filters" auto-hide="false">
    <body>
        <columns>
            <column>
                <text-input bind="obj.text_field" required="false" />
            </column>
            <column>
                <date-input bind="obj.date_field" required="false" />
            </column>
        </columns>
    </body>
    <button-group>
        <button label="Cancel" on-press="cancel" validate="false" style="outline" />
        <button label="Submit" on-press="submit" validate="false" style="solid" />
    </button-group>
</dialog>

When you set auto-hide="false" you will need to explicitly close the dialog using the .hide() method from JS/TS.

Like this

function cancel() {
  component.dialog({id: 'filter'}).hide()
}

function submit() {
  // do some validations here
  if (view.obj.text_field && view.obj.text_field.length < 5) {
    return notification.error('Text field is too short');
  } else {
    notification.success('Submitted successfully');
    component.dialog({id: 'filter'}).hide()
  }
}
2 Likes