Crear una plantilla
Necesita crear una plantilla personalizada usando el componente Catalyst SmartBrowz, Templates. Esta plantilla contendrá el diseño y el estilo de la nómina. Esta es la plantilla que se generará como PDF y se enviará por correo electrónico a los usuarios finales.
Para crear una plantilla:
-
Haga clic en el icono del servicio Catalyst SmartBrowz en la consola, y haga clic en Start Exploring.
-
Haga clic en Templates bajo Convert para acceder al componente Templates, y haga clic en Create Template.
-
Seleccione Custom, ingrese “Payslip” como el nombre de la plantilla, y haga clic en Create.
Podrá ver el editor de plantillas y la ventana de vista previa de la plantilla.
-
Copie el código proporcionado y péguelo en los editores apropiados como se explica a continuación:
- Pegue el siguiente código HTML en el editor HTML
<!DOCTYPE html>
<html>
<head>
<title>Payslip</title>
<link
rel="stylesheet"
type="text/css"
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
</head>
<body>
<div class="container mt-5 mb-5">
<div class="row">
<div class="col-md-12">
<div class="text-center lh-1 mb-2">
<h6 class="fw-bold color_primary">{{company}} Payslip</h6>
<span class="fw-normal color_sec"
>Payment slip for the month of {{month}} {{year}}</span
>
</div>
<div class="d-flex justify-content-end">
<span>Working Branch: NewYork</span>
</div>
<br>
<div class="row">
<div class="col-md-10">
<div class="row">
<div class="col-sm-6">
<div>
<span class="fw-bolder color_primary">EMP Code</span>
<small class="ms-3 color_sec">{{employeeId}}</small>
</div>
</div>
<div class="col-sm-6">
<div>
<span class="fw-bolder color_primary">EMP Name</span>
<small class="ms-3 color_sec">{{employeeName}}</small>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div>
<span class="fw-bolder color_primary">Mode of Pay</span>
<small class="ms-3 color_sec">{{paymentMethod}}</small>
</div>
</div>
<div class="col-sm-6">
<div>
<span class="fw-bolder color_primary">Ac No.</span>
<small class="ms-3 color_sec">*******</small>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div>
<span class="fw-bolder color_primary">Designation</span>
<small class="ms-3 color_sec">{{designation}}</small>
</div>
</div>
</div>
</div>
<table class="mt-4 table table-bordered">
<thead class="bg-dark text-white">
<tr>
<th scope="col">Earnings</th>
<th scope="col">Amount</th>
<th scope="col">Deductions</th>
<th scope="col">Amount</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Basic</th>
<td>{{basicSalary}}</td>
<td>Tax</td>
<td>{{deductions}}</td>
</tr>
<tr>
<th scope="row">Allowances</th>
<td>{{allowances}}</td>
<td colspan="2"></td>
</tr>
<tr class="border-top">
<th scope="row">Total Earning</th>
<td>{{totalEarnings}}</td>
<td>Total Deductions</td>
<td>{{deductions}}</td>
</tr>
</tbody>
</table>
</div>
<div class="row">
<div class="col-md-4">
<br />
<span class="fw-bold">Net Pay : {{netSalary}}</span>
</div>
</div>
</div>
</div>
<div>
<br />
<p>**** This is a system generated payslip ****</p>
</div>
</div>
</body>
</html>
- Haga clic en la pestaña CSS y pegue el siguiente código
body {
font-family: "Times New Roman", Times, serif;
}
table {
width: 100%;
border-radius: 5px solid;
border-spacing: 0;
margin-bottom: 20px;
}
tr {
border: solid 1px #524f4f;
border-top-color: #524f4f;
}
th,
td {
padding: 8px;
text-align: left;
color: #101f3e;
background-color: #fff;
}
th {
background-color: #f8f9fb !important;
color: #7888a8;
}
p {
text-align: center;
color: black;
}
.color_primary {
color: black;
}
.color_sec {
color: #4d618a;
}
-
Haga clic en Save. Puede ver la plantilla que se renderizará al usuario desde la sección de vista previa a la derecha.
-
Haga clic en Settings para estilizar y formatear la plantilla adicionalmente.
-
Le animamos a explorar las diversas opciones y estilizar los elementos de formato visual de la plantilla como prefiera. La sección Live Preview renderizará todos sus cambios en tiempo real y mostrará la plantilla que aparecerá al usuario.
- Haga clic en Save Settings para guardar sus preferencias. Haga clic en el icono de flecha hacia atrás cerca del nombre de la plantilla después de haber completado la personalización de su plantilla.
Su plantilla personalizada se ha guardado, y podrá ver el Template ID único generado por Catalyst. Para obtener más información sobre el componente Templates, visite este documento de ayuda.
Última actualización 2026-03-20 21:51:56 +0530 IST