テンプレートの作成
Catalyst SmartBrowzコンポーネントのTemplatesを使用して、カスタムテンプレートを作成する必要があります。このテンプレートには、給与明細のデザインとスタイルが含まれます。このテンプレートがPDFとして生成され、エンドユーザーにメールで送信されます。
テンプレートを作成するには：
-
コンソールでCatalyst SmartBrowzサービスアイコンをクリックし、Start Exploringをクリックします。
-
Convertの下にあるTemplatesをクリックしてTemplatesコンポーネントにアクセスし、Create Templateをクリックします。
-
Customを選択し、テンプレート名として「Payslip」と入力して、Createをクリックします。
テンプレートエディタとテンプレートプレビューウィンドウが表示されます。
-
以下のコードをコピーして、下記の説明に従って適切なエディタに貼り付けてください：
- 以下のHTMLコードをHTMLエディタに貼り付けます
HTML
copy
<!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>
- CSSタブをクリックして、以下のコードを貼り付けます
CSS
copy
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;
}
Note: エディタを使用して独自のカスタムテンプレートデザインを作成することもできます。また、JavaScriptエディタを使用して複雑なテンプレートを作成したり、JSON Dataエディタを使用してプレースホルダー値を入力したりすることもできます。
-
Saveをクリックします。右側のプレビューセクションから、ユーザーにレンダリングされるテンプレートを確認できます。
-
Settingsをクリックして、テンプレートのスタイルとフォーマットをさらに調整します。
-
各種オプションを活用して、テンプレートの視覚的なフォーマット要素をお好みに合わせてスタイル設定してください。Live Previewセクションではすべての変更がリアルタイムでレンダリングされ、ユーザーに表示されるテンプレートが確認できます。
Note: このチュートリアルでは、**Output Format**をPDFに設定することを推奨します。
- Save Settingsをクリックして設定を保存します。テンプレートのカスタマイズが完了したら、テンプレート名の近くにある戻る矢印アイコンをクリックします。
カスタムテンプレートが保存され、Catalystが生成した一意のTemplate IDが表示されます。Templatesコンポーネントの詳細については、こちらのヘルプドキュメントを参照してください。
最終更新日 2026-02-23 18:09:41 +0530 IST