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.
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 | ||
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 | 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:
- 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.
- 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.
- <%{
- salary_rec = Salary_Structure[ID == recid.toLong()];
- org_rec = Add_Organization[ID != 0];
- 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.
- imageurl = org_rec.Logo.executeXPath("/img/@medqual").executeXPath("/medqual/text()");
- fileID = imageurl.subString(imageurl.lastIndexOf("/")+1, imageurl.length());
- info fileID;
- // Replace <user_name>, <application_link_name>, and <publish_key> with appropriate values.
- image = "https://creator.zoho.com/file/<user_name>/<application_link_name>/All_Organizations/"+org_rec.ID+"/Logo/image-download/<publish_key>?filepath=/"+fileID;
- %>
iii. Define watermark style using CSS.
- <style>
- #watermark
- {
- position: absolute;
- opacity: 0.3;
- text-align: center;
- height: 100%;
- width: 100%;
- box-sizing: border-box;
- }
- #watermark img
- {
- transform: translateY(100%);
- }
- </style>
iv. Construct the template using HTML.
Note: The following snippet constructs a very basic template. You can customize this based on your requirements.
- <div id="watermark"><img src="<%=image%>"></div>
- <div style="padding:20px 40px">
- <div ><center> <b style="font-size: 25px;"><%=org_rec.Organization_Name%></b></center><br>
- <div style="font-size: 15px;color: #515151;word-break: initial;display:inline">
- <center><%=org_rec.Address%><br />Phone: <%=org_rec.Phone_Number%></center></div>
- </div>
- <p><b style="font-size: 20px;">CTC structure for the month of <%=salary_rec.Month_field%></b> <br></p>
- <div> <b>Employee ID: </b><%=employee_rec.Employee_ID%> </div>
- <div> <b>Name: </b><%=employee_rec.Name%> </div>
- <div> <b>Email: </b><%=employee_rec.Official_Email%> </div>
- <div> <b>Department: </b><%=employee_rec.Department%> </div>
- <div> <b>Designation: </b><%=employee_rec.Designation%> </div>
- <div> <b>Date Of Joining: </b><%=employee_rec.Date_of_Joining%> </div>
- <p><br></p>
- <div> <b>Basic: </b><%=salary_rec.Basic%> </div>
- <div> <b>HRA: </b><%=salary_rec.HRA%> </div>
- <div> <b>Allowance: </b><%=salary_rec.Allowance%> </div>
- <div> <b>PF: </b><%=salary_rec.PF%> </div>
- <p><br></p>
- <div> <b>Monthly CTC: </b><%=salary_rec.CTC%> </div>
- </div>
- <%
- }%>
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:
- // Replace <user_name> and <application_link_name> with appropriate values.
- 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
- 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.
- 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.
- Make sure the employee has access to both All Salary structure report and Download Salary structure page.
Related Links
Zoho CRM Training Programs
Learn how to use the best tools for sales force automation and better customer engagement from Zoho's implementation specialists.
Zoho DataPrep Personalized Demo
If you'd like a personalized walk-through of our data preparation tool, please request a demo and we'll be happy to show you how to get the best out of Zoho DataPrep.
- Zoho Workerly Home
- Forums
- Connect With Us:
- Zoho Recruit Home
- Forums
- Connect With Us:
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho CRM Plus?
Deliver unforgettable customer experiences
New to Zoho Marketing Plus?
Everything you need to run your marketing
New to Zoho Marketing Plus?
Everything you need to run your marketing
You are currently viewing the help pages of Qntrl’s earlier version. Click here to view our latest version—Qntrl 3.0's help articles.
New to Zoho Survey?
Zoho Sheet Resources
Zoho Forms Resources
New to Zoho Sign?
Zoho Sign Resources
Sign, Paperless!
New to Zoho TeamInbox?
Zoho TeamInbox Resources
New to Zoho ZeptoMail?
Zoho DataPrep Resources
Design. Discuss. Deliver.
New to Zoho Workerly?
New to Zoho Recruit?
New to Zoho CRM?
New to Zoho Projects?
New to Zoho Sprints?
New to Zoho Assist?
New to Bigin?
Related Articles
Disable Custom Actions after n times
Requirement A custom action on a report has to be disabled after it is triggered three times. Use Case We have an app to maintain customer invoices. After an invoice is created, the staff can email the invoice to the customer with the click of a ...Display custom action button for specific records
Requirement The custom action button in a report should be visible only for certain records, based on a condition. Use Case An asset request app lets employees raise requests for gadgets or machines. While filling the form, employees can specify ...Building an employee dashboard
Requirement Create an employee dashboard with buttons that will help the employees to check in and out, find the total number of logged-in hours and apply for leave. Use Case An Employee Management application has a dashboard for their employees. ...Publish to Marketplace
Requirement Publish a custom app in Marketplace. Use Case A care-taking facility wants to search for appropriate caregivers to the patients in the same postal code. They have built an application that will help everyone during an emergency. Now, they ...Automatically create daily reports and send current day's reports as email attachment
Requirement Schedule custom actions to automatically create labour reports everyday at the specified time and send a filtered report of all the reports corresponding to the current day as an email attachment. Use case Let's assume your company has ...
New to Zoho LandingPage?
Zoho LandingPage Resources