従業員の給与構造を透かし付きでダウンロードする方法

お知らせ：当社は、お客様により充実したサポート情報を迅速に提供するため、本ページのコンテンツは機械翻訳を用いて日本語に翻訳しています。正確かつ最新のサポート情報をご覧いただくには、本内容の英語版を参照してください。

要件

Creator のページコンポーネントを使用して、透かし入りテンプレートを作成します。ユーザーがカスタムボタンをクリックすると、そのテンプレートにデータを差し込んだファイルをダウンロードできるようにします。

ユースケース

あるソフトウェア会社は、給与管理を含むさまざまな従業員関連の業務を行うために、Employee Management アプリケーションを使用しています。従業員は自分の Salary Structure レポートにアクセスできます。給与明細をダウンロードしたい場合は、各データの横に表示される Download ボタンをクリックするだけです。給与明細は、会社のロゴが透かしとして追加された、指定の形式でローカルドライブにダウンロードされます。

動作を確認する

手順

1. 次の詳細でフォームを 3 つ作成します。

フォーム	フォームリンク名	項目タイプ	項目名	項目リンク名
組織の追加	Add_Organization	一行テキスト	組織名	Organization_Name
		画像	ロゴ	ロゴ
		電話番号	電話番号	Phone_Number
		住所	住所	住所
従業員の追加	Add_Employee	名前	名前	名前
		電話番号	携帯番号	Mobile_Number
		メール	会社メール	Official_Email
		番号	従業員 ID	Employee_ID
		単一折れ線グラフ	部署	部署
		単一折れ線グラフ	役職	役職
		単一折れ線グラフ	入社日	Date_of_Joining
給与構成	Salary_Structure	ルックアップ (Add_Employee フォーム)	従業員	従業員
		ドロップダウン (インポート済み（あらかじめ用意された選択肢 ― 月）)	月	Month_field
		通貨	基本給	基本給
		通貨	HRA	HRA
		通貨	手当	手当
		通貨	PF	PF
		通貨	CTC	CTC

2. ページを作成し、名前を給与構成をダウンロードに設定し、ページパラメーターを追加して名前をrecidにします。

3. HTML スニペットブロックをページに含めます。この HTML スニペットブロックを使用して、給与構成テンプレートをデザインします。

4. 次のスニペットをブロックに保存してHTML テンプレートを作成します。このテンプレートに基づいて給与構成をダウンロードします。このスニペットでは、組織ロゴを透かしとしてテンプレートに追加します。

前提条件:

公開されているAll_Organizationsレポート（組織ロゴを含む）から<publish_key>を取得します。レポートの公開キーは、作成されたパーマリンク内で確認できます。
例: 次のパーマリンクでは、9rxBB4eTWwxXqgB4OsZtTeHsuk9O71WhNXYWVdm3M82PHHSeOTz4kf2QwTGYdC1FVanO1uUFahNZk0fKDOWZtOAqDbyvSm7PnGN2が公開キーです。つまり、URL 内の項目名の後に続く文字列です。
パーマリンク: https://creatorapp.zohopublic.com/zylker100122/employee-management/form-perma/Add_Organization/9rxBB4eTWwxXqgB4OsZtTeHsuk9O71WhNXYWVdm3M82PHHSeOTz4kf2QwTGYdC1FVanO1uUFahNZk0fKDOWZtOAqDbyvSm7PnGN2

i. Salary Structure、追加する従業員、および追加する組織フォームから必要な値を取得します。

<%{
salary_rec = Salary_Structure[ID == recid。toLong()];
org_rec = Add_Organization[ID != 0];
employee_rec = Add_Employee[ID == salary_rec。従業員];

ii. 追加する組織フォームに保存されている会社ロゴの画像ダウンロード URLを作成します。この画像を透かしとして追加します。

imageurl = org_rec。ロゴ。executeXPath('/img/@medqual').executeXPath('/medqual/text()');
fileID = imageurl。subString(imageurl。lastIndexOf('/')+1, imageurl。length());
info fileID;
// <user_name>、<application_link_name>、<publish_key> を適切な値に置き換えてください。
画像 = 'https://creator.zoho.com/file/<user_name>/<application_link_name>/All_Organizations/'+org_rec。ID+'/Logo/image-download/<publish_key>?filepath=/'+fileID;
%>

iii. CSS を使用して透かしのスタイルを定義します。

<style>
#watermark
{
position: absolute;
opacity: 0。3;
text-align: center;
height: 100%;
width: 100%;
箱-sizing: border-箱;
}
#watermark img
{
transform: translateY(100%);
}
</style>

iv. HTML を使用してテンプレートを作成します。

メモ: 次のスニペットは、非常に基本的なテンプレートを作成します。要件に応じて自由にカスタマイズできます。

<div id='watermark'><img src='<%=画像%>'></div>
<div style='padding:20px 40px'>
<div ><center> <b style='フォント-size: 25px;'><%=org_rec.Organization_Name%></b></center><br>
<div style='フォント-size: 15px;color: #515151;word-break: initial;display:inline'>
<center><%=org_rec。住所%><br />Phone: <%=org_rec。Phone_Number%></center></div>
</div>
<p><b style='フォント-size: 20px;'>CTC structure for the month of <%=salary_rec。Month_field%></b> <br></p>
<div> <b>従業員 ID: </b><%=employee_rec.Employee_ID%> </div>
<div> <b>名前: </b><%=employee_rec.Name%> </div>
<div> <b>メール: </b><%=employee_rec.Official_Email%> </div>
<div> <b>部署: </b><%=employee_rec.Department%> </div>
<div> <b>役職: </b><%=employee_rec.Designation%> </div>
<div> <b>日付 Of Joining: </b><%=employee_rec.Date_of_Joining%> </div>
<p><br></p>
<div> <b>基本: </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>月間 CTC: </b><%=salary_rec.CTC%> </div>
</div>
<%
}%>

5. すべての従業員の給与構造は、All_Salary_Structureレポートで管理されます。ただし、管理者はすべてのレポートを表示・アクセスできますが、従業員は自分のデータのみを表示およびダウンロードできるようにする必要があります。これを実現するには、すべて Salary StructureレポートのDesignタブに移動し、レポートプロパティを開くボタンをクリックします。

6. Organized データの下にあるフィルターをクリックし、次の条件を追加します。

7. 次に、All_Salary_Structureレポートにカスタムボタンを追加します。Report カスタマイズ - WebのQuick 表示する内にあるLayout タブをクリックします。

8. [+ 追加する項目] をクリックし、下にスクロールして[+ 新規ボタンを追加]（Buttons 内）をクリックします。

9. 次の詳細を入力し、ワークフローを作成をクリックします。

10. 新規操作を追加 > Deluge Script > 作成 your own をクリックし、次のスニペットを追加します:

// <user_name> と <application_link_name> を適切な値に置き換えてください。
openUrl('https://creatorapp.zoho.com/export/<user_name>/<application_link_name>/pdf/Download_Salary_Structure?recid='+ input。ID,'新規 window');

このスニペットは、openURL タスクを使用してダウンロードする Salary Structureページを開きます。現在のレコードのデータが、（手順 4 で）ダウンロードする Salary Structureページに追加した HTML テンプレートに反映されます。

11. ダウンロードする Salary Structureページは、給与構造をダウンロードする際のテンプレートとしてのみ使用されます。そのため、セクションを使用してページを非表示にし、ユーザーがアプリケーション利用時に直接アクセスできないようにします。

12. アプリケーションにアクセスしてすべて Salary Structureレポートを表示し、ダウンロードする Salary Structureページをダウンロードできるようにするために、従業員をアプリケーションのユーザーとして追加します。

動作を確認する

注意事項

このチュートリアルでは、アプリが.com DCで作成されていることを前提としています。別の DC で同じスクリプトを使用する場合は、手順 4。iiおよび手順 10内の URL をそれぞれの DC に合わせて変更してください。
組織詳細レポートは、そこに保存されているロゴ画像をダウンロードファイルの透かしとして使用するために、公開済みである必要があります。
従業員がすべて Salary structureレポートとダウンロードする Salary structureページの両方にアクセスできることを確認してください。