Modal Form creation and button handlers


I need to add extra buttons to “Production” tab in the Submission workflow, that creates a new Modal for adding certain data.

I created some modal forms copying the structure of previous ones, but can’t make the “Cancel” button to work.

I realize that, for some reason, if I assign a pkpHandler JS function to a Js file that does something (Even if I never use it, or it’s a already built handler), the Cancel button works (aka just closes the modal, as I don’t want/need to perform anything else)

I don’t quite understand the logic behind it, and why (if needed) I need to attach a handler to perform something just to close the modal.

Reading the technical documentation here I couldn’t find pretty much anything regarding modals. Am I looking in the wrong documentation? Also, the PDF documentation is ridiculously old, and also doesn’t have anything related to a modal.

How would be the correct steps to build a new modal form from scratch? Also, how to properly set up the buttons to perform what they suppose to do?

Kind regards, Jose

Hi @Jose_Ares

That documentation is from 2008 and is for OJS 2, not OJS 3. JS handlers are required to close modals because the “cancel” link is simply an anchor tag, and it’s the handler which binds a click event to it that causes the modal to close. This is needed since in some cases modals need to perform requests to the server in order to clean up operations that are only partially finished.

Some documentation is found in the wiki, here:

but that’s going to be moving here at some point:

The best way to learn how to create modals is to look at some examples in the codebase.


Hi @jnugent, thanks for your help.

I did review the code for some modals, that’s the main (and only) reason I’ve found to add that JS handler.

However, I still don’t know how to create a totally “empty” one, as I just reuse a handler another modal is using just for the sake of giving the Cancel button the functionality it needs (This is not good I guess, as now I depend on a completely external JS file).

Is there a way to create an empty inline handler just for the sake of closing the modal, without creating another extra JS file?

Regards, Jose

Hi Jose,

You really want to use the Form handlers in the lib/pkp suite, because they do other things besides provide modal closing ability. They provide form validation if you need it, they track changes to forms, and so on. There are already some modal handlers that you can use without needing to subclass, i.e. if you just want to show a modal with some text and have a close button, have a look at js/controllers/modal/ConfirmationModalHandler.js


dear @Jose_Ares

I had tried something similar in the past, but gave up. My plugin backend works, I only need to devise the frontend now.

However, I am getting stuck in how to call the Modal, and then filling in the modal itself.

How far did you go?



I have managed to get the modal to work, but now I need help to fill in the modal with a form.

I have tried to see SubmissionMetadataViewForm, but I cannot rfind the SubmissionMetadataViewForm.tpl. Am I missing something?