We are going to create a web-application using the frevvo Data API, which will fetch submissions from the frevvo database and create an HTML report based on those submissions. We will use the Leave Approval Workflow as an example (download it here.) Using this workflow an Employee will file a vacation request, which will be approved by his Manager. This workflow generates a submission XML like this one:
<p0:form xmlns:p0="http://www.frevvo.com/schemas/_gJamE-62EeCXN_lW5l3omQ" name="LeaveApproval"> <Message7>Leave Approval</Message7> <Employee> <EId>emp</EId> <MId>mgr</MId> <EFullName>femp lemp</EFullName> <EEmail>prajakta@frevvo.com</EEmail> </Employee> <LeaveRequest> <StartDate>2012-09-17</StartDate> <NumberOfDays>2</NumberOfDays> <TypeOfLeave>Annual</TypeOfLeave> <Comments>test</Comments> </LeaveRequest> <ManagerApproval> <MFullName>fmgr lmgr</MFullName> <MEmail>prajakta@frevvo.com</MEmail> <IApproveThisVacationRequest>Denied</IApproveThisVacationRequest> <Comments>rejected.</Comments> </ManagerApproval> </p0:form>
In this tutorial we will get all the submission XMLs for this workflow from the frevvo submission database. Then we will parse the submission XMLs to extract the required data (StartDate, NumberOfDays, TypeOfLeave and IApproveThisVacationRequest fields) for a particular Employee and display this data as a vacation report for that Employee on an HTML page.
Our Vacation Report will look like this:
Please see the attached [https://dev.frevvo.com/projects/Gauss/raw-attachment/wiki/SubmissionReportUsingAPI/submission-report-tutorial.war submission-report-tutorial.war file] of the web application that we are going to create.
To install and see the execution of this web application:
Download and copy the war file to <frevvo-install-dir>\frevvo\tomcat\webapps directory. 2. Re-start frevvo. This will expand the war. 3. Then edit the <frevvo-install-dir>\frevvo\tomcat\webapps\submission-report-tutorial\showReport.jsp file 4. On line number 20, change
service.login ("designer@tutorial", "qa");to
service.login ("<your-designer-user>@<your-tenant>", "<designer-user-password>");Save the file and re-start frevvo.
Upload attached [https://dev.frevvo.com/projects/Gauss/raw-attachment/wiki/SubmissionReportUsingAPI/LeaveApproval_flow.zip Leave Approval Workflow] in your designer user. 7. To check if your web application is working, browse http://<your frevvo server host>:<port>/submission-report-tutorial/showReport.jsp in your browser, E.g. http://localhost:8082/submission-report-tutorial/showReport.jsp. You should see a blank report like this:
Now, to see the vacation report of an employee: 1. Create a manager user. 1. Create an employee user and set the Reports To field for this employee user to the manager user that you created above. This will correctly route the flow from employee to manager. 9. Login as the employee user and browse the Share URL of your Leave Approval workflow. Then enter details for the leave request and submit the form. 10. Login as the manager user and from the manager's task list approve the pending leave approval task for employee. 11. A submission is now created and you should be able to open it from your workflow's submission repository. 12. Now if the employees username is say 'demoemployee', you should be able to see this submission in the employees Vacation Report if you browse: http://localhost:8082/submission-report-tutorial/showReport.jsp?username=demoemployee. Note the '''username=''' parameter that is appended to this URL.
Now let us see step by step how to create such a web application.
First you will need to create this directory structure in your <frevvo-install-dir>\frevvo\tomcat\webapps folder:
<frevvo-install-dir>\frevvo\tomcat\webapps |_submission-report-tutorial |_WEB-INF |_lib
Create a new web.xml file in <frevvo-install-dir>\frevvo\tomcat\webapps\submission-report-tutorial\WEB-INF directory, with following content in it. This will define our application as a web application.
Create a new web.xml file in <frevvo-install-dir>\frevvo\tomcat\webapps\submission-report-tutorial\WEB-INF directory, with following content in it. This will define our application as a web application.
Now copy the frevvo client APIs from <frevvo-install-dir>\frevvo\ext\client directory to <frevvo-install-dir>\frevvo\tomcat\webapps\submission-report-tutorial\WEB-INF\lib directory. These are the frevvo API libraries which will be called by our web application. 1. Now let us create the JSP pages which call the frevvo API as explained here: http://docs.frevvo.com/d/display/frevvo53/Data+API#DataAPI-CallingtheAPIfromaJSPPage. Create a showReport.jsp file in <frevvo-install-dir>\frevvo\tomcat\webapps\submission-report-tutorial directory with following in it:
<%@ page import="java.lang.*,java.util.*,com.frevvo.forms.client.*,com.frevvo.forms.client.util.*,com.google.gdata.data.Link,java.io.InputStream,com.google.gdata.client.Service.GDataRequest,java.io.IOException,javax.xml.parsers.*,org.xml.sax.*,org.xml.sax.helpers.DefaultHandler,com.google.gdata.util.ServiceException"
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<title>Vacation Report</title>
</head>
<body id="page-submissions">
<%
//Get the frevvo Forms service
FormsService service = (FormsService) session.getAttribute ( "frevvo.forms.service" );
if (service != null) {
service.logout();
session.removeAttribute ("frevvo.forms.service");
} else {
service = new FormsService("http", "localhost", 8082, null);
}
service.login ("designer@tutorial", "password");
session.setAttribute ("frevvo.forms.service", service);
String uId = request.getParameter("username"); //Get the value of username paramter in the request URL
if ((uId == null) || (uId.length() == 0)) {
uId = "dummy"; //Use a dummy user if username is not specified in the request URL.
}
%>
- The Java code in this content will create the session for frevvo service and login to frevvo using your designer username and password.
- We are also verifying the value of username parameter that is sent in the request URL. If a parameter is retrieved then we will display the vacation report for that user, but if the parameter value is null then we will retrieve nothing.
- Note character sequences <% and %>. All the Java code should be written between these character sequences. We will write the Java code in between HTML tags so as to embed the results returned by API calls into this JSP page in HTML format.
Remember to change
service.login ("designer@tutorial", "qa");to
service.login ("<your-designer-user>@<your-tenant>", "<designer-user-password>");
Now that we have the frevvo service session, we will get the submission feed of our workflow. Add following lines before the closing tag (%>):
//Get the Submission Feed
SubmissionQuery q = new SubmissionQuery(service.getFeedURL(SubmissionFeed.class));
String ftId = "_gJZX8O62EeCXN_lW5l3omQ"; //This is the formTypeId of our workflow.
q.setFilter("$formTypeId eq " + ftId);
q.setOrderby("$updated"); //Order the submissions by Date
SubmissionFeed sFeed = service.getFeed(q, SubmissionFeed.class);
int totalLeaves = 0; //Counter for total number of leaves taken by the employee.
In these lines we are creating a submission query in q.
Instead of getting all the submissions for all the forms and flows owned by the designer user, we will get the submissions only for our workflow by adding the formTypeID filter to this query as explained here: http://docs.frevvo.com/d/display/frevvo53/Getting+Started+with+the+Data+API+-+Java+Client+Library+Tutorial#GettingStartedwiththeDataAPI-JavaClientLibraryTutorial-Filtering
You can get the formTypeId for this flow by looking at the Share URL of this flow. For example, if the flows URL is: http://<server:port>/frevvo/web/tn/tutorial/user/designer/app/_N4cF4ZuwEeCwk5wyBHqHrQ/flowtype/'''_gJZX8O62EeCXN_lW5l3omQ'''/popupform?locale=, then the bold part of this URL which follows the flowtype is your formTypeId. 1. We will now add the HTML to create our vacation reports table structure:
<div id="bd"> <div id="workarea"> <h2>Vacation Report </h2> <table border="1" cellpadding="6" cellspacing="0" width="50%"> <thead> <tr> <td><b>Start Date</b></td> <td><b>Number Of Days</b></td> <td><b>Type Of Leave</b></td> <td><b>Approved/Denied</b></td> </tr> </thead> <tbody>
Now to display the leave records under this table, we will get all the submission records from the SubmissionFeed. Then we get the Submission XML for all the submissions and parse it to get the relevant data from each submission. Add following in your showReport.jsp file:
<% //Loop over all the submissions for (SubmissionEntry entry : sFeed.getEntries()) { if(entry.getState().equalsIgnoreCase("SUBMITTED")) { //Consider only those submissions which are in Completed, that is in Submitted state //Get the submission XML Link dLink = (Link) entry.getDocumentLinks("text/xml").get(0); String linkRef = dLink != null ? dLink.getHref() : ""; GDataRequest request1 = service.createLinkQueryRequest(dLink); request1.execute(); InputStream responseStream = request1.getResponseStream(); try { // Parse the submission XML (using the XMLContentHandler class which has SAX Parser configurations) XMLContentHandler xch = new XMLContentHandler();; xch.parse(responseStream); Map<String, String> submittedControlMap = xch.getParams(); if((submittedControlMap.get("EId").equals(uId)) && (submittedControlMap.get("StartDate").contains(Integer.toString(Calendar.getInstance().get(Calendar.YEAR))))) { //Get only current year's submissions and for only a particular employee if(submittedControlMap.get("IApproveThisVacationRequest").equals("Approved")) //Check if the Leave was approved or not totalLeaves = totalLeaves + Integer.parseInt(submittedControlMap.get("NumberOfDays")); %>Here we are looping over all the SubmissionEntries in the SubmissionFeed.
We check if the State of the entry (that is the submission) has value as 'SUBMITTED'. This is because there maybe other submissions with states like 'SAVED' which should not be the part of our report as they are not yet completed.
Then we get the submission XML from that entry and parse it. To parse the XML we will be using the SaxParser which is implemented in the XMLContentHandler class.
The parsed values are stored in a hash map 'submittedControlMap'.
We decide if the leave should be considered in the total leaves count for that employee by checking if: 1. The leave was taken by the user whose username was passed in the username parameter of the request URL 1. The StartDate for this leave is within current year. 1. The leave was Approved by the manager. 1. Once the submission passes all criteria we need to print it in our HTML. For that we add these lines:
<tr>
<%-- Print the extracted data --%>
<td><%= submittedControlMap.get("StartDate") %></td>
<td><%= submittedControlMap.get("NumberOfDays") %></td>
<td><%= submittedControlMap.get("TypeOfLeave") %></td>
<td><%= submittedControlMap.get("IApproveThisVacationRequest") %></td>
</tr>
<%
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
%>
<tr>
<td colspan="4"><b>Total Leaves Taken: <%= totalLeaves %> </b></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
Note the character sequences <%= and %> which enclose Java expressions, which are evaluated at run time 1. Now save the showReport.jsp file and re-start frevvo. 1. Then browse: http://localhost:8082/submission-report-tutorial/showReport.jsp?username=demoemployee in your browser and see the vacation report for demoemployee.