Download a employee's salary structure with watermark | Zoho Creator Academy

Download a employee's salary structure with watermark

Requirement

Create a template that has a watermark using the pages component in Creator. On click of a custom button, your application's users will be able to download their data populated on the template.

Use Case

A software company uses an Employee Management application to perform various employee related operations including maintaining their payroll.  Employees will have access to their Salary Structure report. If they wish to download their salary structure, they can simply click the Download button that will be available next to each record. The salary structure will be downloaded to their local drive in the designed format with the company's logo added as a watermark.

See how it works

Steps to follow

1. Create 3 forms with the following details:

Form

Form Link Name

Field Type

Field Name

Field Link Name

Add Organization

Add_Organization

Single Line

Organization Name

Organization_Name

Image

Logo

Logo

Phone

Phone Number

Phone_Number

Address

Address

Address

Add Employee

Add_Employee

Name

Name

Name

Phone

Mobile Number

Mobile_Number

Email

Official Email

Official_Email

Number

Employee ID

Employee_ID

Single Line

Department

Department

Single Line

Designation

Designation

Single Line

Date of Joining

Date_of_Joining

Salary Structure

Salary_Structure

Lookup
(Add_Employee form)

Employee

Employee

Dropdown

(Imported with predefined choices - Months of the year)

Month

Month_field

Currency

Basic

Basic

Currency

HRA

HRA

Currency

Allowance

Allowance

Currency

PF

PF

Currency

CTC

CTC


2. Create a page named Download Salary Structure and add a page parameter named recid.

3. Include an HTML snippet block into it. We'll use this HTML snippet block to design the salary structure template. 



4. Save the following snippets into the block to create an HTML template based on which the salary structure needs to be downloaded. This snippet also adds the organization logo as watermark to the template.
Prerequisite:
  1. Publish the All_Organizations report (which contains the organization logo) and get the <publish_key>. The publish key of the report is available in the generated perma link.
  2. Example: In the following permalink, 9rxBB4eTWwxXqgB4OsZtTeHsuk9O71WhNXYWVdm3M82PHHSeOTz4kf2QwTGYdC1FVanO1uUFahNZk0fKDOWZtOAqDbyvSm7PnGN2 is the publish key i.e., the set of characters that follow the component name in the URL.
    Permalink: https://creatorapp.zohopublic.com/zylker100122/employee-management/form-perma/Add_Organization/9rxBB4eTWwxXqgB4OsZtTeHsuk9O71WhNXYWVdm3M82PHHSeOTz4kf2QwTGYdC1FVanO1uUFahNZk0fKDOWZtOAqDbyvSm7PnGN2

i. Fetch required values from the Salary Structure, Add employee, and Add Organization forms.
  1. <%{
  2. salary_rec = Salary_Structure[ID == recid.toLong()];
  3. org_rec = Add_Organization[ID != 0];
  4. employee_rec = Add_Employee[ID == salary_rec.Employee];
ii. Construct the image download URL for the company's logo that is stored in Add Organization form. This image will be added as the watermark.
  1. imageurl = org_rec.Logo.executeXPath("/img/@medqual").executeXPath("/medqual/text()");
  2. fileID = imageurl.subString(imageurl.lastIndexOf("/")+1, imageurl.length());
  3. info fileID;
  4. // Replace <user_name>, <application_link_name>, and <publish_key> with appropriate values.
  5. image = "https://creator.zoho.com/file/<user_name>/<application_link_name>/All_Organizations/"+org_rec.ID+"/Logo/image-download/<publish_key>?filepath=/"+fileID;
  6. %>
iii. Define watermark style using CSS.
  1. <style>
  2. #watermark
  3.     {
  4. position: absolute;
  5.     opacity: 0.3;
  6.     text-align: center;
  7.     height: 100%;
  8.     width: 100%;
  9.     box-sizing: border-box;
  10.     }
  11. #watermark img
  12. {
  13.     transform: translateY(100%);
  14. }
  15. </style>
iv. Construct the template using HTML. 
Note: The following snippet constructs a very basic template. You can customize this based on your requirements.
  1. <div id="watermark"><img src="<%=image%>"></div>
  2. <div style="padding:20px 40px">
  3. <div ><center> <b style="font-size: 25px;"><%=org_rec.Organization_Name%></b></center><br>
  4. <div style="font-size: 15px;color: #515151;word-break: initial;display:inline">
  5. <center><%=org_rec.Address%><br />Phone: <%=org_rec.Phone_Number%></center></div>
  6. </div>
  7. <p><b style="font-size: 20px;">CTC structure for the month of <%=salary_rec.Month_field%></b> <br></p>
  8. <div>  <b>Employee ID: </b><%=employee_rec.Employee_ID%> </div>
  9. <div>  <b>Name: </b><%=employee_rec.Name%> </div>
  10. <div>  <b>Email: </b><%=employee_rec.Official_Email%> </div>
  11. <div>  <b>Department: </b><%=employee_rec.Department%> </div>
  12. <div>  <b>Designation: </b><%=employee_rec.Designation%> </div>
  13. <div>  <b>Date Of Joining: </b><%=employee_rec.Date_of_Joining%> </div>
  14.    <p><br></p>
  15. <div>  <b>Basic: </b><%=salary_rec.Basic%> </div>
  16. <div>  <b>HRA: </b><%=salary_rec.HRA%> </div>
  17. <div>  <b>Allowance: </b><%=salary_rec.Allowance%> </div>
  18. <div>  <b>PF: </b><%=salary_rec.PF%> </div>
  19.    <p><br></p>
  20. <div>  <b>Monthly CTC: </b><%=salary_rec.CTC%> </div>
  21. </div>
  22. <%
  23. }%>
5. Salary structure of all the employees  are maintained in the All_Salary_Structure report. However, admin can view and access all the reports and employees should be able to view and download only their records. To achieve this, go to the Design tab of All Salary Structure report and click Open Report Properties button.



6. Click Filters under Organized Records and add the following criteria.



7. Now, let's add a custom button to the All_Salary_Structure report. Click the Layout tab under Quick View in the Report Customization - Web. 



8. Click +Add Fields, scroll down and click +Add New Button under Buttons.



 9. Provide the following details and click Create Workflow.



10. Click Add New Action > Deluge Script > Create your own, and add the following snippet:
  1. // Replace <user_name> and <application_link_name> with appropriate values.
  2. openUrl("https://creatorapp.zoho.com/export/<user_name>/<application_link_name>/pdf/Download_Salary_Structure?recid=" + input.ID,"new window");
The snippet uses the openURL task to open the Download Salary Structure page. The data of the current record will be populated in the HTML template we added (in the 4th step) to Download Salary Structure page. 

11. The Download Salary Structure page is meant to be used only as a template while downloading the salary structure. Therefore, hide the page using sections so the users will not be able to access it while accessing the application.

12. Add the employees as users of the application for them to access the All Salary Structure report and download the Download Salary Structure page.

See how it works


Points to note

  1. This tutorial assumes the app is created in .com DC. To use the same script in different DCs, change the URLs in step 4.ii and step 10 accordingly.
  2. The Organization Details report needs to be published in order to use the logo image stored in it as a watermark in the file that will be downloaded.
  3. Make sure the employee has access to both All Salary structure report and Download Salary structure page.
  1. Pages
  2. openURL task
  3. Add users
  4. Custom Action
  5. Filters