"close" button visible after nn seconds (traditional web)

I am trying to design a web form that displays Customer information (that's the easy part) but when that form starts, it opens a MODAL which contains advertisements. After a few seconds I want a button to appear to allow the user to close the modal. This would make sure the user sees the ad for at least nn seconds before moving on.

I have it working as I want with a permanent close button but that allows the user to close it immediately.


I have no HTML or java skills so if the answer is to use either of those I would appreciate sample code as well.

Thanks in advance.


Col Douglass

Hello,

This could be a bit tricky, but still doable. Let's try :)


1. Place a button inside your Modal with its visible property set to False. You don't want this button to appear in the screen, but you want it to be in your page. Just hide it.

2. Define a class (in addition to the other classes) in the Style Classes property for your button. This class doesn't need to be defined in your CSS code. You just need it to find the button element in the HTML. You can define something like a "close-button" class:


3. In the Preparation of your Modal, you should execute a RunJavaScript server action, which will send the defined JavaScript code to your browser. This JavaScript code will run asynchronously in the browser. You should do something like:

var delayTime = 5000; //5 seconds

setTimeout(function() {
  //your code to be executed after 5 seconds

  var closebutton = document.getElementsByClassName('close-button'); //gets the button element above
  closebutton[0].click(); //clicks the button
}, delayTime);


4. Create a new Screen Action in which you will have the logic to control if the "close" button appears or not (for instance, with a boolean variable). Use the Ajax Refresh to refresh the part of the screen where the button is.

5. Associate the screen action defined before to the button that you created in the first step. Don't forget to define the Method property as Ajax Submit.



Basically, you will run your Modal's Preparation and it will send some JavaScript code to your browser to run asynchronously. This code will perform a delay, followed by a forced click in a hidden button. This click will run an action where you execute the code to display the "close" button in your screen.


This should do the trick.

Let me know if you managed to do it.


Kind regards,

Rui Barradas

Rui Barradas wrote:

Hello,

This could be a bit tricky, but still doable. Let's try :)


1. Place a button inside your Modal with its visible property set to False. You don't want this button to appear in the screen, but you want it to be in your page. Just hide it.

2. Define a class (in addition to the other classes) in the Style Classes property for your button. This class doesn't need to be defined in your CSS code. You just need it to find the button element in the HTML. You can define something like a "close-button" class:


3. In the Preparation of your Modal, you should execute a RunJavaScript server action, which will send the defined JavaScript code to your browser. This JavaScript code will run asynchronously in the browser. You should do something like:

var delayTime = 5000; //5 seconds

setTimeout(function() {
  //your code to be executed after 5 seconds

  var closebutton = document.getElementsByClassName('close-button'); //gets the button element above
  closebutton[0].click(); //clicks the button
}, delayTime);


4. Create a new Screen Action in which you will have the logic to control if the "close" button appears or not (for instance, with a boolean variable). Use the Ajax Refresh to refresh the part of the screen where the button is.

5. Associate the screen action defined before to the button that you created in the first step. Don't forget to define the Method property as Ajax Submit.



Basically, you will run your Modal's Preparation and it will send some JavaScript code to your browser to run asynchronously. This code will perform a delay, followed by a forced click in a hidden button. This click will run an action where you execute the code to display the "close" button in your screen.


This should do the trick.

Let me know if you managed to do it.


Kind regards,

Rui Barradas

Hello Rui,

Thanks for your help so far.

I tried as you suggested but I can't find a way to get the MODAL widget to execute the java code. You said to put it the preparation of the Modal but I cant find a way to do that as I can't create a Preparation as you can for web pages.

Any more help would be great


Thanks,

Col Douglass

Solution

Hello Col,

My bad I didn't explain properly.

I'm assuming you're using the Modal widget from the OutSystemsUIWeb module.

When I referred the "Preparation of your Modal", I was talking about the Preparation of the Web Block that you will use inside your Modal. Just create one Web Block with the content that you want to display and place it inside the Content placeholder of your Modal. Use its Preparation to execute the RunJavaScript server action.


Kind regards,

Rui Barradas

Solution

Rui Barradas wrote:

Hello Col,

My bad I didn't explain properly.

I'm assuming you're using the Modal widget from the OutSystemsUIWeb module.

When I referred the "Preparation of your Modal", I was talking about the Preparation of the Web Block that you will use inside your Modal. Just create one Web Block with the content that you want to display and place it inside the Content placeholder of your Modal. Use its Preparation to execute the RunJavaScript server action.


Kind regards,

Rui Barradas

alternatively i think you could put it in the javascript of your page and do a jquery document.ready.

$( document ).ready(function() { /*Rui's Code Goes Here*/   });

Rui Barradas wrote:

Hello Col,

My bad I didn't explain properly.

I'm assuming you're using the Modal widget from the OutSystemsUIWeb module.

When I referred the "Preparation of your Modal", I was talking about the Preparation of the Web Block that you will use inside your Modal. Just create one Web Block with the content that you want to display and place it inside the Content placeholder of your Modal. Use its Preparation to execute the RunJavaScript server action.


Kind regards,

Rui Barradas


Thanks Rui.

Works well.

No problem.

It's nice that you managed to do it.


Kind regards,

Rui Barradas