Hi,
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 http://pkp.sfu.ca/ojs/docs/technicalreference/2.1/index.html 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: https://pkp.sfu.ca/wiki/index.php?title=Developer_Documentation
but that’s going to be moving here at some point: https://docs.pkp.sfu.ca/
The best way to learn how to create modals is to look at some examples in the codebase.
Cheers,
Jason
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
cheers,
Jason
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?
Thanks
Stephen
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?
Stephen
I am still running into problems: how to call a modal and load it with JSON information?
Thanks
stephen
Hi @ssciberras,
Generally we don’t use a separate JSON request to pre-fill a modal; we build the modal mark-up with the values in the HTML (e.g. <input ... value="abc"/>). However, if you wanted to use a separate JSON request to fill the form after the modal mark-up has been loaded, you could do that by extending the AJAXFormHandler Javascript class that gets attached to the form and adding code to its constructor.
If you want to find the markup that goes with SubmissionMetadataViewForm, you have to look for where it gets attached to the DOM. Grepping the codebase for SubmissionMetadataViewForm turns up e.g. controllers/modals/submissionMetadata/form/SubmissionMetadataViewForm.inc.php, which refers to controllers/modals/submissionMetadata/form/submissionMetadataViewForm.tpl (look for template files in the templates subdirectory of both the root OJS installation directory and lib/pkp.)
Regards,
Alec Smecher
Public Knowledge Project Team
Thanks, am looking into this.
However, I seem to be having problems related to authorizations to get a page loaded into the modal. That seems to be the major stumbling block, even though I have read the documentation provided.
Below is my latest attempt:
function authorize($request, &$args, $roleAssignments) {
$dump = var_export ($args, true);
error_log ( $dump);
error_log ( “******** TESTING ************”);
import(‘lib.pkp.classes.security.authorization.ContextRequiredPolicy’);
$this->addPolicy(new ContextRequiredPolicy($request));
//import('classes.security.authorization.WorkflowStageAccessPolicy');
// $this->addPolicy(new WorkflowStageAccessPolicy($request));
// Authorize requested submission.
import('lib.pkp.classes.security.authorization.internal.SubmissionRequiredPolicy');
$this->addPolicy(new SubmissionRequiredPolicy($request, $args, 'submissionId'));
// This policy will deny access if user has no accessible workflow stage.
// Otherwise it will build an authorized object with all accessible
// workflow stages and authorize user operation access.
import('lib.pkp.classes.security.authorization.internal.UserAccessibleWorkflowStageRequiredPolicy');
$this->addPolicy(new UserAccessibleWorkflowStageRequiredPolicy($request, WORKFLOW_TYPE_EDITORIAL));
// Users are assigned to specific stages of a submission's
// workflow. Check access to the stage, not the submission.
// In this example, the stage id is submitted as a query
// parameter with the request.
$stageId = $request->getUserVar('stageId');
$dump = var_export ($stageId, true);
error_log ( $dump);
// The submission ID should be submitted as a query
// parameter. Tell the policy what parameter to check for
// the submission id. In this example, we assume the URL
// used for the request included ?submissionId=1
$queryParam = 'submissionId';
import('lib.pkp.classes.security.authorization.WorkflowStageAccessPolicy');
$this->addPolicy(new WorkflowStageAccessPolicy($request, $args, $roleAssignments, $queryParam, $stageId));
//import('lib.pkp.classes.security.authorization.WorkflowStageAccessPolicy');
//$this->addPolicy(new WorkflowStageAccessPolicy($request, $args, $roleAssignments, 'submissionId', $this->identifyStageId($request, $args), WORKFLOW_TYPE_EDITORIAL));
$this->addRoleAssignment(
array(ROLE_ID_MANAGER),
array(
'fetch',
'loadForm',
)
);
return parent::authorize($request, $args, $roleAssignments);
}
Going back to your reply, @asmecher, I find that submissionmetadataview uses a controller, but I was using a handler type.
Should this make any difference? could this be the reason that I cannot load anything in the modal (I keep getting 404 error)
Stephen
Hi @ssciberras,
It’s hard to guess from what you’ve written – would you be willing to put the code so far up into a github repository so I can see it all in context?
Regards,
Alec Smecher
Public Knowledge Project Team
here it is:
there is a lot of redundant code, left there for reference to show me what I have already done. I will try to clean it up later on today, but now have to leave for work
thanks
Stephen