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

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

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

要件

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 テンプレートを作成します。このテンプレートに基づいて給与構成をダウンロードします。このスニペットでは、組織ロゴを透かしとしてテンプレートに追加します。
前提条件:
  1. 公開されているAll_Organizationsレポート（組織ロゴを含む）から<publish_key>を取得します。レポートの公開キーは、作成されたパーマリンク内で確認できます。
  2. 例: 次のパーマリンクでは、9rxBB4eTWwxXqgB4OsZtTeHsuk9O71WhNXYWVdm3M82PHHSeOTz4kf2QwTGYdC1FVanO1uUFahNZk0fKDOWZtOAqDbyvSm7PnGN2が公開キーです。つまり、URL 内の項目名の後に続く文字列です。
    パーマリンク: https://creatorapp.zohopublic.com/zylker100122/employee-management/form-perma/Add_Organization/9rxBB4eTWwxXqgB4OsZtTeHsuk9O71WhNXYWVdm3M82PHHSeOTz4kf2QwTGYdC1FVanO1uUFahNZk0fKDOWZtOAqDbyvSm7PnGN2

i. Salary Structure、追加する 従業員、および追加する 組織フォームから必要な値を取得します。
  1. <%{
  2. salary_rec = Salary_Structure[ID == recid。toLong()];
  3. org_rec = Add_Organization[ID != 0];
  4. employee_rec = Add_Employee[ID == salary_rec。従業員];
ii. 追加する 組織フォームに保存されている会社ロゴの画像ダウンロード URLを作成します。この画像を透かしとして追加します。
  1. imageurl = org_rec。ロゴ。executeXPath('/img/@medqual').executeXPath('/medqual/text()');
  2. fileID = imageurl。subString(imageurl。lastIndexOf('/')+1, imageurl。length());
  3. info fileID;
  4. // <user_name>、<application_link_name>、<publish_key> を適切な値に置き換えてください。
  5. 画像 = 'https://creator.zoho.com/file/<user_name>/<application_link_name>/All_Organizations/'+org_rec。ID+'/Logo/image-download/<publish_key>?filepath=/'+fileID;
  6. %>
iii. CSS を使用して透かしのスタイルを定義します。
  1. <style>
  2. #watermark
  3. {
  4. position: absolute;
  5. opacity: 0。3;
  6. text-align: center;
  7. height: 100%;
  8. width: 100%;
  9. 箱-sizing: border-箱;
  10. }
  11. #watermark img
  12. {
  13. transform: translateY(100%);
  14. }
  15. </style>
iv. HTML を使用してテンプレートを作成します。
メモ: 次のスニペットは、非常に基本的なテンプレートを作成します。要件に応じて自由にカスタマイズできます。
  1. <div id='watermark'><img src='<%=画像%>'></div>
  2. <div style='padding:20px 40px'>
  3. <div ><center> <b style='フォント-size: 25px;'><%=org_rec.Organization_Name%></b></center><br>
  4. <div style='フォント-size: 15px;color: #515151;word-break: initial;display:inline'>
  5. <center><%=org_rec。住所%><br />Phone: <%=org_rec。Phone_Number%></center></div>
  6. </div>
  7. <p><b style='フォント-size: 20px;'>CTC structure for the month of <%=salary_rec。Month_field%></b> <br></p>
  8. <div> <b>従業員 ID: </b><%=employee_rec.Employee_ID%> </div>
  9. <div> <b>名前: </b><%=employee_rec.Name%> </div>
  10. <div> <b>メール: </b><%=employee_rec.Official_Email%> </div>
  11. <div> <b>部署: </b><%=employee_rec.Department%> </div>
  12. <div> <b>役職: </b><%=employee_rec.Designation%> </div>
  13. <div> <b>日付 Of Joining: </b><%=employee_rec.Date_of_Joining%> </div>
  14. <p><br></p>
  15. <div> <b>基本: </b><%=salary_rec.Basic%> </div>
  16. <div> <b>HRA: </b><%=salary_rec.HRA%> </div>
  17. <div> <b>Allowance: </b><%=salary_rec.Allowance%> </div>
  18. <div> <b>PF: </b><%=salary_rec.PF%> </div>
  19. <p><br></p>
  20. <div> <b>月間 CTC: </b><%=salary_rec.CTC%> </div>
  21. </div>
  22. <%
  23. }%>
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 をクリックし、次のスニペットを追加します:
  1. // <user_name> と <application_link_name> を適切な値に置き換えてください。
  2. 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ページをダウンロードできるようにするために、従業員をアプリケーションのユーザーとして追加します。

動作を確認する


注意事項

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