Notice: this Wiki will be going read only early in 2024 and edits will no longer be possible. Please see: https://gitlab.eclipse.org/eclipsefdn/helpdesk/-/wikis/Wiki-shutdown-plan for the plan.
Stardust/Knowledge Base/Integration/UI/UIMashup/FormValidation
Overview
In this article we will see how we can defer the embedded mashed up UI form submission and validation until user clicks on Stardust portal's Complete and Suspend & Save icon. This means we may no more need additional buttons in embedded mashed up form/UI to submit the form the underlying application for form validation.
Use Case
Lets assume we have built our web application that we want to embed in Stardust's interactive activity view. We have few controls on our web app and we would like that submission and validation of form should happen when user clicks complete or suspend and save buttons on Stardust interactive activity view.
How To
There are 2 parts to our how to, 1st, how would we design the external web application and what changes are expected to achieve this and 2nd. how would we embed the external web application UI into Stardust interactive activity view.
Web Application part (considering we are developing a plugin jar for it that contains all required artifacts including html and java script): Define a plugin project looking like (place html and java script file as per your requirement):
HTML File:
<!DOCTYPE html> <html ng-app="validationApp"> <head> <!-- CSS --> <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" /> <style> body { padding-top:30px; } .form-group input.ng-invalid.ng-dirty { background-color: teal; } .form-group input.ng-invalid-required { border-width: 2px; border-color: red; } .help-inline { color: red; } .fixed-width { width:200px; } </style> <!-- JS --> <script src="js/lib/angular/angular.js"> </script> <script src="js/lib/angular/angular-resource.js"> </script> <script src="js/lib/misc/xml2js.js"> </script> <script src="js/lib/jquery/jquery-1.9.1.js"></script> <script src="js/lib/jquery/plugins/jquery-cookie.js"></script> <script src="js/lib/jquery/plugins/jquery.url.js"></script> <script src="js/validationApp.js"></script> <script> //Define the below script here so that complete icon click can send the call back //from here get the scope and call required validation method of the script that holds this html function performIppAiClosePanelCommand(commandId){ var scope = angular.element($("#controlDiv")).scope(); //var formState = window.element($("#userForm")).$valid; var status = scope.submitForm(); scope.$apply(); if(status) //call this to inform Stardust that it can complete and close the activity parent.InfinityBpm.ProcessPortal.confirmCloseCommandFromExternalWebApp(commandId); } </script> </head> <body > <div id="controlDiv" class="container" ng-controller="mainController"> <!-- PAGE HEADER --> <div class="page-header"><h1>Data Entry</h1></div> <!-- =================================================================== --> <!-- FORM ============================================================== --> <!-- =================================================================== --> <!-- pass in the variable if our form is valid or invalid --> <form name="userForm" ng-submit="submitForm()" novalidate> <!-- NAME --> <div class="form-group" ng-class="{ 'has-error' : userForm.name.$invalid && submitted }"> <label>Name*</label> <input type="text" name="name" class="fixed-width form-control input-sm" ng-model="user.name" required> <span ng-show="userForm.name.$invalid && submitted" class="help-inline">* Required</span> </div> <!-- USERNAME --> <div class="form-group" ng-class="{ 'has-error' : userForm.username.$invalid && submitted}"> <label>Username</label> <input type="text" name="username" class="fixed-width form-control input-sm" ng-model="user.username" ng-minlength="3" ng-maxlength="8"> <span ng-show="userForm.username.$error.minlength && submitted" class="help-inline">Username is too short.</span> <span ng-show="userForm.username.$error.maxlength && submitted" class="help-inline">Username is too long.</span> </div> <!-- EMAIL --> <div class="form-group" ng-class="{ 'has-error' : userForm.email.$invalid && submitted}"> <label>Email</label> <input type="email" name="email" class="fixed-width form-control input-sm" ng-model="user.email"> <span ng-show="userForm.email.$invalid && submitted" class="help-inline">Enter a valid email.</span> </div> <!-- Size --> <div class="form-group" ng-class="{ 'has-error' :userForm.size.$invalid && submitted}"> <label>Size (integer 0 - 10):</label> <input type="number" ng-model="user.size" name="size" min="0" max="10" class="fixed-width form-control input-sm" required/> <span ng-show="userForm.size.$error.min || userForm.size.$error.max && submitted" class="help-inline"> The value must be in range 0 to 10!</span> <span ng-show="userForm.size.$invalid && submitted" class="help-inline">* Required</span> </div> <!-- Size --> <div class="form-group" ng-class="{ 'has-error' :userForm.quantity.$invalid && submitted}"> <label>Quantity (digits: 0-9):</label> <input ng-model="user.quantity" name="quantity" class="fixed-width form-control input-sm" ng-pattern="/^\d+$/" /> <span ng-show="userForm.quantity.$error.pattern && submitted" class="help-inline"> Not a valid integer!</span> </div> </form> </div> </body> </html>
Important sections of the html file:
<script> //Define the below script here so that complete icon click can send the call back //from here get the scope and call required validation method of the script that holds this html function performIppAiClosePanelCommand(commandId){ var scope = angular.element($("#controlDiv")).scope(); //var formState = window.element($("#userForm")).$valid; var status = scope.submitForm(); scope.$apply(); if(status) //call this to inform Stardust that it can complete and close the activity parent.InfinityBpm.ProcessPortal.confirmCloseCommandFromExternalWebApp(commandId); } </script>
This section is the core of the approach. Stardust has included a callback function called 'performIppAiClosePanelCommand(commandId)' which is called back when user clicks either on Complete or Suspend and Save button, passing the commandId of the pressed button. The web application is expected to implement this callback method (the way we are doing it here) and call the required methods in the js backing the page (in this case we are calling "submitForm()", that internally checks whether the form is valid or not by using "$scope.userForm.$valid" variable and accordingly generates alert.
<div id="controlDiv" class="container" ng-controller="mainController">Note the id assigned to div, this id is used in script to get angular scope associated with this div section of the form.
<form name="userForm" ng-submit="submitForm()" novalidate>Note the novalidate keyword, we are telling it to not to validate the form until we indicate.
Java Script File:
// create angular controller
validationApp.controller('mainController', function($scope, $window) {
// function to submit the form after all validation has occurred
$scope.submitForm = function() {
$scope.submitted = true;
// check to make sure the form is completely valid
if ($scope.userForm.$valid) {
$window.alert('Our form is amazing');
return true;
}
else {
$window.alert("Form has error, please fix those.");
return false;
}
};
});Deploy this plugin jar accordingly.
Stardust process modeling part - Here we will see how we can embed the web application UI into Stardust interactive activity view. Create a process, create a manual activity in it. Create a UI Mashup application and configure it to point to web application UI.
Deploy the process model.
Execution and Artifacts
Please see the web recording and required artifacts here.