Close modal dialog after button click

Alexander Jakob

Hi.

We have to create an autosave form with a custom "OK" and "Cancel" button (Hide the header and the footer of the Rule dialog box). There are several reasons why we have to do it this way. :(

Is there a functionality how we can close the modal dialog after we've clicked one of the mentioned buttons??

My idea was to use "After the action is performed, redirect the user to a specific location" and there use "Go to URL". Sadly I'm not able to call more than one Javascript function.

If I use the following statements in the JS-console of the browser it seems everything is workling fine:

- document.getElementsByClassName("dialog-rul_ECMIPM_Eingang_AendernEingangsattribute")[0].remove();

- document.querySelectorAll("ux-dialog-container")[0].remove();

- document.querySelectorAll("ux-dialog-overlay")[0].remove();

KR Alex

HelmutB

Hello Alex,

simply closing the dialog is not enough: you also need to send an event to the caller with the result.

Instead of the above hacks you should see to get a solution that works with the standard. Please explain, why the standard footer of the dialog box should be removed?

regards - Helmut

AppWorks Tips

Hi @Alexander Jakob,

I agree with Helmut. Keep things simple!

These steps easily solve your problem:

1. Create a "Cancellable" type of form (that has a "Cancel" instead of a "Close")
2. Create an "Action" type of Rule BB
   1. Set the condition to TRUE (or whatever you want)
   2. Check "Before the action is performed, launch a modal dialog"
   3. Use "Open a form" and select your cancellable form
   4. Select "- Save changes without performing other actions -"
3. Create a 'Theme' type of document
   1. @import a "your_brand.css" file (exposed via a WLD); See here
4. The CSS can hide the header (at least for 24.2)…I don't see any footer, but will be the same trick.

ai-dialog-header.au-target {
    min-height: 0px;
}
.ai-dialog-header-container {
    display: none;
}

//Antal

nssmani

@Alexander Jakob ,

If you are using AppWorks 23.3+, a new set of public APIs are now available to complete or close the rule dialog boxes with custom forms, which enables the application developer to integrate with external systems. These APIs help to show their custom actions in rule dialog boxes and perform rule actions by using client APIs from custom application code.

In the rule design, you can configure to hide the header and footer and also control the size of your model dialog.

In the runtime, you can use the client public API's to trigger the action and close the dialogue from your custom html page.

let parentDomain = window.location.href.split('baseDomain=')[1]
let okAction = {}
okAction.name = 'submitActionWithMessage' --> Predefined message name
okAction.submitType = 'okAction'--> Predefined submit type for Ok action
okAction.submitMessage = 'Custom action performed'--> Custom message to be displayed after performing.

For more details on API refer the topic, 'Using the application JavaScript APIs' from AppWorks Platform → Advance development help guide.

AppWorks Tips

@nssmani That's a great tip on the header/footer and custom size of a dialog….I wasn't aware of the option. Thx //Antal