invoke the confirmation dialog explicitly

invoke the confirmation dialog explicitly

  

I'd like to use the confirmation dialog, but I want to invoke it base on a condition.


The dialog is invoked when you press the link it is associated to


But, that's still not what I wanted to use it for. Currently It pops up always (without implementing condition and it never pops up when I apply the IF condition on a container containing the Confirmation Dialog Web block.)

I wanted to use it conditionally. So on pressing the Submit link, a Save action is invoked.

This Save action would check if a given condition is true.

  • If true, just submit; without showing the confirmation dialog
  • If false, show the confirmation dialog
     - when pressing OK in the dialog, submit
     - when pressing Cancel in the dialog, go back to the screen without submitting the form

Please let me know if there is any resolution to it.

This is a bit messy, but gets the job done and is all client-side.

Build 2 buttons... both with your Save Action.  Connect 1 of those buttons to the Confirmation Dialog.

Build one more button, Method=Navigate, Destination=Common\ExternalURL, URL='#", and Extended Properties of onclick="clickConfirm();return false;"

In your Screen, Javascript Property, add this...

SyntaxEditor Code Snippet

function clickConfirm(){

    debugger;
    var testInput = document.getElementById('DublinTheme_wt17_block_wtMainContent_wtConfirmInput').value;
   
    if(testInput == "Confirm"){
        document.getElementById('DublinTheme_wt17_block_wtMainContent_wtButtonConfirm').click();
    }else{
        document.getElementById('DublinTheme_wt17_block_wtMainContent_wtButtonNoConfirm').click();
    }   

}

That 3rd button is going to call this clickConfirm function.  This function will perform your conditional test.  In this case I have an Input Widget... I'm getting it's value... and then calling one of first 2 buttons set up.

Then I set the style of those 2 buttons to "display:none;"

Hello Nitish and Davidk

Get a "confirmation popup" after executing a screen action is not straight forward.
If we are talking about Web Application, there are two ways to do it. 

a) With a Popup web screen
b) With a Confirmation Message native (browser) popup

Both will require the trick of clicking a button/link in the page, from the Screen Action, but there is no need to put lots of buttons or use special javascript.
In fact, you can use a single button/link for the entire process, if you opt for the standard confirmation message.

I have an example attached.

Hope it helps.

Cheers,
Eduardo Jauch

Solution

The example is here: https://eduardojauch.outsystemscloud.com/DynamicConfirmationMessage/Home.aspx?_ts=636478070784884888

It seems that I'm having some difficults to upload the attachment. Here is what I have done:

Above is the button properties and the variable used to activate or not the confirmation message.
Bellow is the code I used. If my "check" fails, the confirmation message is enabled, the button is refreshed (to the message to be present in the HTML) and then we execute a WidgetClick in the same button.

Cheers,
Eduardo Jauch

Solution

Just wanted to confirm that it's the ConfirmationDialog in Forge that you wanted to use.

I've had a look at the code in that process... and it's all client-side - which is very nice as it doesn't require a call back to the server to get anything done.  I feel this is a huge difference between OS Mobile and Web.

In looking at the code in the ConfirmationDialog webblock, it's a Javascript function which is using jQuery to show a dialog window.  I'm going to test it, but I feel it'd be very easy to modify this code to insert your condition.  If the condition is false then continue with the ConfirmationDialog dialog window.  If true, then continue with the ConfirmationDialog code to click your button.

Can you provide an example of the condition you want to test for... what is involved?  Then I'll build that into the ConfirmationDialog code.  Doing this means no additional buttons.

Davidk, what's the problem with the native dialog? :)

Nothing... haven't looked at that yet.  I believe Nitish was asking about the ConfirmationDialog in Forge... so that's what I was addressing.

The ConfirmationDialog in Forge was fairly easy to modify.  Attached is a new version with a new ConditionalTest input parameter. 

The ConfirmationDialog WebBlock function "OpenConfirmationDialog" now includes this new parameter and tests for it's value.  If the value is "Confirm" then the dialog window opens for confirmation.  Anything else, and the Action takes place without confirmation.

Also attached is a web app with a Button, an Input control, and the ConfirmationDialog attached to the Button.

The Input control Id is passed into the ConfirmationDialog WebBlock.

Turned out pretty good.  However, I wish Javascript was as easy to work with in OS Web as it is in OS Mobile.

Seems like attachments are broken... so here are some links for download...

https://s3.amazonaws.com/pgbvideos/ConfirmationDialog.oml

https://s3.amazonaws.com/pgbvideos/ConfirmationDialogCondTest.oml

Davidk wrote:

Nothing... haven't looked at that yet.  I believe Nitish was asking about the ConfirmationDialog in Forge... so that's what I was addressing.

Yes. I've noticed, but only after my answer.
I was just thinking on why (besides design) to use anything other than the confirmation dialog box... 

But even on that case, if there is no concerns on security, etc, I would prefer to use a modal... 

Cheers,
Eduardo Jauch

Eduardo,

Since the forum attachment process is down, could you post your oml somewhere for download?  I'd like to see that solution as it will help me better understand OS.

Cheers,

David

Sure Davidk,

As soon as I get to a computer, I'll upload to some place. It will have the IPP, but it is small and easily replicable.

Cheers

Eduardo Jauch

Thanks Eduardo and Davidk for you replies.

I really want to bypass the need for javascript due to my knowledge limitations.

@Eduardo, I didn't quite understand what you did in here https://eduardojauch.outsystemscloud.com/DynamicConfirmationMessage/Home.aspx?_ts=636478070784884888
I am new to outsytems and haven't used 'Widget_Click' yet. What exactly is it.

Just to elaborate what I want to achieve (the exact thing that I want. Initially I fabricated my question to be a little more generic):-

I have a pop-up 

When the user press "Cancel" link, based on condition that Note = Note in Database, I want to have a confirmation dialog saying that "You have made changes on this note. If you navigate away from this page without first saving, the changes will be lost.". In the confirmation dialog, if user selects 'OK', pop-up is closed. If user selects 'Cancel', the user should get back to the already opened pop-up.

I am happy to use browser's confirmation dialog as well as one in forge. 


Thank you for your time!

PS: I am creating web app. No mobile app.

-Nitish

Davidk wrote:

The ConfirmationDialog in Forge was fairly easy to modify.  Attached is a new version with a new ConditionalTest input parameter. 

The ConfirmationDialog WebBlock function "OpenConfirmationDialog" now includes this new parameter and tests for it's value.  If the value is "Confirm" then the dialog window opens for confirmation.  Anything else, and the Action takes place without confirmation.

Also attached is a web app with a Button, an Input control, and the ConfirmationDialog attached to the Button.

The Input control Id is passed into the ConfirmationDialog WebBlock.

Turned out pretty good.  However, I wish Javascript was as easy to work with in OS Web as it is in OS Mobile.

Seems like attachments are broken... so here are some links for download...

https://s3.amazonaws.com/pgbvideos/ConfirmationDialog.oml

https://s3.amazonaws.com/pgbvideos/ConfirmationDialogCondTest.oml


This didn't work for me DavidK. it is not even invoking the dialog

Hi Nitesh,

The Widget_Click() is an Action that clicks on a button or link. What Eduardo has shown, is that the pattern for what you want is this:

  1. Have a local variable containing the confirmation message. Initially, it is empty. Use the variable as value for the button's Confirmation Message property.
  2. Make sure the button's Method property is set to Ajax Submit.
  3. In the Action that's invoked when you click the button, check whether the confirmation message is empty. If so, you haven't done your checks yet, so do your checks. If you need to ask the user for confirmation, set the local confirmation message variable to your message (e.g. "You have made changes, are you sure to cancel?"). Ajax refresh the button, so the confirmation message will be "activated".
  4. Use Widget_Click() from RichWidgets to click on the button. Then End the Action.
  5. Because of step 4, your Action will be called again, but this time the confirmation message is set, so you know you don't need to check again. Because the Action is called, you know the user already confirmed their decission, so you can just go ahead and do what you want (e.g. navigate away).

Hello Nitish.

1. Create a webscreen text variable named ConfirmationMessage, default value ""

2. Set the Confirmation Message property of the Cancel button to this variable

3. In the cancel button, set method to Ajax Submit, and set destination to a screen action (Cancel).

4. On the action, first thing, use an IF to check if validation message is different than Empty (""). If true, means the user confirmed that wants to leave. So, navigate to the screen you want to go.

5 If previous is false, check if something changed. If not, navigate to the screen you want to go. If something changed, set confirmation message, ajax refresh the button (it is necessary to give it a name), use a widget click (from richwidgets) in the button. Just drag and drop the action in the logic, after the ajax refresh, and set the property to the id of the button. Finish the logic after it with a normal end point.

What will happen is the following:

You enter the screen, the variable ConfirmationMessage is empty, so the button will be built without it. If the user press Cancel, the action will be called. Inside it, as the variable is empty, the first validation fails and proceeds to second validation (something changed). If nothing changed, you leave the screen. If something changed, you set a confirmation message and refresh the button. This will make the button to be rebuilt, but now, with the message. Than you send a click in the button to the browser (via Widget_Click).

What will happen is that when browser render the button again (response from the server), immediately itt will also execute an automatic click in the cancel button. As now the button has a confirmation message, this will popup the Confirmation popup. If the user clicks the ok in the popup, the action will be called and now, the first validation will be true and the user will navigate away. If the user press the cancel in the popup, it is.closed and the action it isn't called. But now, the message is in the cancel button, so every time it clicks the cancel button, from now on, the popup will rise the popup.

As soon as I can get, I'll try to upload the oml again.

Cheers

Eduardo Jauch 

Thanks Eduardo for your time! Thanks Kilian and David too for your time !