「水印を付けた従業員の給与構造をダウンロードする」

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

要件

ページコンポーネントを使用してウォーターマークを持つテンプレートを作成します。カスタムボタンをクリックすると、アプリケーションのユーザーは、テンプレートにポピュレートされたデータをダウンロードできます。

使用ケース

ソフトウェア会社は、給与管理などの従業員関連の操作を行うために、従業員管理アプリケーションを使用しています。従業員は、彼らの給与構造レポートにアクセスできます。彼らが給与構造をダウンロードしたい場合は、各レコードの横にあるダウンロードボタンをクリックするだけです。給与構造は、会社のロゴを透かしとして設計された形式で、ローカルドライブにダウンロードされます。

どのように動作するかを見る

手順

1. 3 つのフォームを作成してください：

フォーム	フォームリンク名	フィールドタイプ	フィールド名	フィールドリンク名
組織の追加	Add_Organization	単一行	組織名	Organization_Name
		画像	マーク	ロゴ
		電話	電話番号	Phone_Number
		住所	住所	住所
従業員を追加	Add_Employee	名前	Name	Name
		電話番号	携帯番号	携帯番号
		メール	公式メール	公式メールアドレス
		番号	従業員ID	従業員ID
		単行	部門	部門
		単行	指定	指定
		単一行	入社日	入社日
給与構造	給与構造	ルックアップ（従業員追加フォーム）	従業員	従業員
		ドロップダウン (インポートされた定義済みの選択肢 - 年間の月)	月	月_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_rec = 給与構造[ID == recid.toLong()];
org_rec = 組織を追加[ID != 0];
employee_rec = 従業員を追加[ID == salary_rec.Employee];

ii. 会社のロゴがAdd Organizationフォームに格納されているイメージダウンロードURLを構築します。この画像は透かしとして追加されます。

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;
%>

imageurl = org_rec.Logo.executeXPath('/img/@medqual').executeXPath('/medqual/text()');
fileID = imageurl.subString(imageurl.lastIndexOf('/')+1, imageurl.length());
info fileID;
// <ユーザー名>、<アプリケーションリンク名>、<公開キー>を適切な値に置き換えてください。
image = 'https://creator.zoho.com/file/<ユーザー名>/<アプリケーションリンク名>/All_Organizations/'+org_rec.ID+'/Logo/image-download/<公開キー>?filepath=/'+fileID;
%>

iii. CSSを使用してウォーターマークスタイルを定義します。

<style>
#水印
{
位置: 絶対的;
不透明度: 0.3;
テキストの配置: 中央;
高さ: 100%;
幅: 100%;
ボックスのサイズ: ボーダーボックス;
}
#水印 img
{
変換: Y軸方向へ100%移動;
}
</style>

iv. HTMLを使用してテンプレートを構築してください。

注意：以下のスニペットは非常に基本的なテンプレートを構築します。必要に応じてこれをカスタマイズできます。

<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 ><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'>日本語に翻訳</div>
<%=org_rec.Address%>
電話番号：<%=org_rec.Phone_Number%>

</div>

<p><b style='font-size: 20px;'>CTC構造の<%=salary_rec.Month_field%>の月</b> <br></p>

<div> <b>従業員ID： </b><%=employee_rec.Employee_ID%> </div>

</div>

<％

}%>（％＞）

「全従業員の給与構造は、All_Salary_Structure レポートに保持されています。しかし、管理者はすべてのレポートを閲覧したりアクセスでき、従業員は自分のレコードのみを閲覧したりダウンロードできるようにしなければなりません。そのために、All Salary Structure レポートの Design タブに移動し、Open Report Properties ボタンをクリックします。」

6. フィルターをクリックし、整理済みレコードの下に以下の条件を追加します。

7.さて、All_Salary_Structureレポートにカスタムボタンを追加しましょう。Quick View の下のLayout tab をクリックします。 Report Customization - Web。

8. 「フィールドを追加」をクリックし、スクロールダウンして「ボタンの下に新しいボタンを追加」をクリックします。

9. 以下の詳細を入力し、ワークフローを作成をクリックしてください。

10. 新しいアクションを追加 > Deluge Script > 独自作成をクリックし、以下のスニペットを追加します。

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

スニペットでは、openURLタスクを使用して、給与構造をダウンロードページを開きます。現在のレコードのデータが（4番目のステップで追加した）給与構造をダウンロードページにHTMLテンプレートに埋め込まれます。

11.「給与構造のダウンロード」ページは、給与構造をダウンロードする際のテンプレートとしてのみ使用するため、セクションを使用してページを非表示にしてください。これにより、アプリケーションにアクセスしている間はこのページにアクセスできなくなります。

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

どのように動作するかを見てみましょう

注意点

このチュートリアルでは、アプリが.com DCで作成されていると仮定しています。異なるDCで同じスクリプトを使用する場合は、ステップ4.iiとステップ10のURLを適宜変更してください。
組織詳細レポートを公開する必要があります。そうすることで、そこに保存されているロゴ画像をダウンロードするファイルに透かしとして使用できます。
従業員がすべての給与構造レポートと給与構造のダウンロードページの両方にアクセスできるようにしてください。