How to show loader in existing pop up after clicking ok button

akshayp
Tera Expert

Hello, anyone with any idea on this, please revert ASAP

 

I have ui action on table, and if  i click it , it displays one pop up with comment box and Cancel, Ok buttons.

Now, if user fills comments and click 'ok', it takes some time to update record.

For that time, i want to show loader in existing pop up.

i tried enhancing my ui page (client script of ui page at line 13), but i was only able to place one loading pop up over my existing pop up

  Anyone, who has idea on this please share some code or links, Thanks!!

 

Note- by loader i mean exactly like this----

Screenshot 2023-03-20 at 10.57.46 AM.png

 

Screenshot 2023-03-20 at 10.46.07 AM.png

 

Screenshot 2023-03-20 at 10.47.36 AM.png

 

Ui action (client side)--

 

Screenshot 2023-03-20 at 10.49.51 AM.png

 

UI page----

 

HTML---

Screenshot 2023-03-20 at 10.52.31 AM.png

 

Client script--

Screenshot 2023-03-20 at 10.53.59 AM.png

 

processing script--

Screenshot 2023-03-20 at 10.56.05 AM.png

1 ACCEPTED SOLUTION

Prince Arora
Tera Sage
Tera Sage

@akshayp ,

 

If you want to use the same modal just to render the separate content here is the example, I believe in your use case you just want to show the loader to the user for a good UI point of view, please check below case:

 

var mod = new GlideModal().get('sn_vdr_something........'); // Please provide the name of first GlideModal parameter 
mod.renderWithContent('<div><img src="https://media0.giphy.com/media/v1.Y2lkPTc5MGI3NjExZmRkZDExYWRhODFjYWVjOGNjYzhmMDgwODRlNDBjN2Q0MGQ4ZTcyMyZjdD1n/3oEjI6SIIHBdRxXI40/giphy.gif"></img></div>')

By this manner, you can use the same GlideModal for your different content.

if you want to destroy the previous modal, you can use:

 

var mod = new GlideModal().get('sn_vdr_something........');

mod.destroy();
 

After destroying it, attach a new one by creating a new GlideModal object, but if your use case is specific to the loader, you can use the first suggestion and provide any image in it to display on the modal. You can also change the title in the same way.

 

Please add some css in the div to align image center.

 

Tried in my dev instance it worked for me:

PRINCE_ARORA_0-1679300410202.png

 



If my answer solved your issue, please mark my answer as Correct & 👍Helpful based on the Impact.


View solution in original post

23 REPLIES 23

@akshayp ,

 

Actually in your "sn_vdr_risk_asmt_close_assessment_questionnaire" UI page, their exist some hidden input fields, that has been used from the processing script.

 

So if you destroy the "sn_vdr_risk_asmt_close_assessment_questionnaire" and updating the content in "sn_vdr_risk_asmt_close_assessment_questionnaire" Ui page it will impact your further execution because your processing script has the dependency on "sn_vdr_risk_asmt_close_assessment_questionnaire" so by destroying the content and setting up a new once is not feasible here!

 

PRINCE_ARORA_1-1679310747127.png

The above mentioned fields are used in processing script, renderWithContent function flush all the data On UI page and populate the data which has been mentioned in it


You can go ahead with the same double modal options as you have implemented above, like on click of OK button a new modal will open and you can display loader there!

 

Otherwise we need to change a lot of code to achieve this scenario.


If my answer solved your issue, please mark my answer as Correct & 👍Helpful based on the Impact.

@Prince Arora 

I am getting alert , so were you are saying that i have to create new ui page for showing that loading pop up

 

From your 1st method which i used in client script---

 

var mod = new GlideModal().get('sn_vdr_something........'); // Please provide the name of first GlideModal parameter 

 

Here in place of 'sn_vdr_something' i am using same ui page which i have called from ui action

akshayp
Tera Expert

Thanks @Prince Arora  for your replies, i still haven't fixed my issue yet, as of now will close this by marking your methods as correct...

@akshayp ,

 

The way you were doing it earlier was the right way to achieve the functionality, because as per your current implementation, we won't be destroy or flush the first modal, so go ahead with two different modals.

Thanks