[IziModal] iziModal_open does not open the modal in screen action

Forge Component
(1)
Published on 8 May by Bruno Machado
1 vote
Published on 8 May by Bruno Machado

Use case:

After uploading a file (therefore: regular submit to screen action) the file is checked. If there are no errors, summary data of the file is presented in the current screen and the user can chose to validate the upload.

If there are errors in the file, the user should be taken to a separate screen which lists the errors and allows the user to correct the wrong data.

Now I wish to add a modal screen to inform the user that errors were identified and that they will be taken to the error correction screen.

The challenge is that I cannot reload the current page when there are errors in the file. Also, I cannot get iziModal_open to trigger the opening of the modal. Will this function only work with AjaxSubmit?

Also how can I halt the redirection until the user clicks OK or the modal timer has expired?

A possible workaround would be to put the information modal as auto-open on the target page, but I only wish this to happen on redirect from the upload screen, not when the user reached the screen from other pages. Can I use iziModal_open in the preparation perhaps?

Many thanks in advance for your help!

Hey Mattias,

thanks for raising the question. Well, in order to upload a file, using the widget the platform provides, by default, it causes a post request and this will make a reload.

You can use a boolean screen var that turns true when running validations on the file and use the auto open trigger, using that var.

Basically, the boolean starts false.
On the action that validates the file, i presume that you have a foreach where the validation happens. If not valid, then turn the boolean screen var, for example "HasErrors" to true. On the modal, on the auto open parameter add an if(HasErrors,"true","false")

You can't trigger the izimodal on the preparation because it runs before the DOM readiness, but changing the variable value will make it live on the preparation after the post request, and from there you can make the modal to open before the page to fix the error.

Another option, that would open the izimodal from and action is using an ajax file uploader, like this one:

https://www.outsystems.com/forge/component-overview/352/file-upload

or this one:

https://www.outsystems.com/forge/component-overview/5543/filepondupload

the idea is to upload the file without reloading the page and handle the izimodal from there.


Not sure if was this what you were looking for. 


Cheers!

Solution

Thank you so much for the very detailed answer! As I said, I tried a few different options to trigger within the source screen. I think that in some cases the modal opens, but gets closed when the target page starts loading, which is immediately since iziModal does not stop further processing as far as I can understand.

In my specific case, I moved the iziModal to the target page instead and pass an optional Boolean for auto-open (defaulted as False) so the the iziModal only opens when explicitly triggered in the page call. This would also allow me to extend at one point to store the user preference for this popup (tick box "Do not show in the future") on the DB and load as a session variable on login. In the end I think this is the "cleanest" solution as the user will not have to wait for the loading of the screen described once they close the iziModal.

A small general note on the extension:

I really like the visual style and flexibility of the extension, it really adds a level of "professional" look and feel to the overall impression of the application!

One challenge is the huge number of options which can make the setup daunting and complicates making uniform modals as all specific options then have to remain the same. One idea that I also mentioned in my review of the component would be to have the current version as a "power user version" and then also provide components for common specific use cases (simple confirm, info, warning, etc...) some options hard coded. I think this would improve the usability of the extension.

Despite this I really like the extension and it is a great improvement over the built-in Modal component. Thank you so much for sharing it with the community!

Solution

Thanks for the feedback, Mattias!

I agree. In the future, ill provide some extra actions with a simplified version of the modal for quick usage.

Good work providing feedback, that helps a lot in order to understand what can we do to speed up the development when using the plugin.

Cheers!