従業員ダッシュボードの作成

従業員ダッシュボードの作成

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

要件  

従業員が出勤・退勤を行い、ログインしている合計時間を確認し、休暇を申請できるボタン付きの従業員ダッシュボードを作成します。

利用ケース  

従業員管理アプリケーションには、従業員向けのダッシュボードがあります。従業員がログインすると同時に出勤時刻が記録されます。同様に、ログオフすると退勤時刻が記録されます。これにより、その日の勤務時間が自動的に計算されます。このダッシュボードから、従業員は休暇申請を行うこともできます。
 
動作の確認

手順  

1. フォームを作成 し、以下の詳細を設定します。
フォーム
フォームリンク名
フィールドタイプ
フィールド名
フィールドリンク名
従業員を追加
Add_Employee
名前
名前
名前
メール
公式メール
Official_Email
電話番号
電話番号
Phone_Number
出退勤詳細を追加
 
Add_Check_In_Out_Details
ルックアップ (Add_Employee)
従業員
従業員
日付-時間
Check_In
Check_In
日付-時間
Check_Out
Check_Out
単一行
合計時間
Total_Hours
休暇申請
 
 
 
 
Holidays
Apply_Leave
 
 
 
 
Holidays
ルックアップ (Add_Employee)
従業員
従業員
単一行
休暇種別
Leave_Type
日時
差出人
差出人
日時
宛先
宛先
単一折れ線グラフ
休日名
Holiday_Name
日付
日付
Date_field
 
次に進む前に、「 従業員を追加 」フォームと「 Holidays 」フォームにいくつかデータを追加しましょう。
 
従業員ダッシュボードには、「休暇申請」「出勤」「退勤」の各ボタンがあり、それぞれ対応する処理を実行します。まずは「 休暇申請 」操作から順に見ていきます。
 
「 従業員を追加 」項目には、 休暇申請 フォームの現在ログインしているユーザーを自動入力し、ユーザーが変更できないように無効化します。この処理を行うワークフローを作成します。
 
2. フォームワークフローを作成 し、「 休暇申請 」フォームの読み込み時に実行して、「 従業員を追加 」項目にログインユーザーのメールアドレスを入力し、その項目を無効化します。
 
3. 新しいアクションを追加 をクリックし、表示される Deluge エディターに次のコードを追加します。
  1. //ログインユーザーのメール ID を持つ Add_Employee データの ID を取得
  2. input。従業員=Add_Employee[Official_Email==Zoho。loginuserid].ID;

  4. //「従業員を追加」項目を無効化
  5. 無効にする 従業員;
次に、出勤および退勤用の関数を作成します。
 
4. 関数を作成 し、従業員を出勤させます。
 
5. 次のコードを Deluge エディターに追加します。
  1. 無効 checkIn()
  2. {
  3. //ログイン中の従業員データ ID を取得
  4. 従業員 = Add_Employee[Official_Email == Zoho。loginuserid];

  6. //従業員がすでに出勤済みかを確認します。条件「Check_In is 今日」は、Check_In 日時項目の日付がその日（今日）かどうかを確認するために使用されます。
  7. alreadyCheckedIn = Add_Check_In_Out_Details[従業員 == 従業員。ID && Check_In is 今日];
  8. //未出勤の場合のみデータを追加
  9. if(alreadyCheckedIn。件数() == 0)
  10. {
  11. insert into Add_Check_In_Out_Details
  12. [
  13. Added_User=Zoho。loginuser
  14. 従業員=従業員。ID
  15. Check_In=Zoho。currenttime
  16. ]
  17. }
  18. }

6. 同様に、 関数を作成 し、従業員を退勤させます。
 
7. 次のコードを Deluge エディターに追加します。
  1. void 決済する()
  2. {
  3. //ログイン中の従業員のデータ ID を取得
  4. 従業員 = Add_Employee[Official_Email == Zoho。loginuserid].ID;

  6. //従業員がすでにチェックインしているデータを Add_Check_In_Out_Details から取得
  7. current_day_entry = Add_Check_In_Out_Details[従業員 == 従業員 && Check_In is 今日];

  9. //チェックアウト値を代入
  10. current_day_entry。Check_Out=Zoho。currenttime;

  12. //タイムスタンプから Total_Hours を計算
  13. 時間 = (current_day_entry。Check_Out - current_day_entry。Check_In);
  14. 秒 = 時間 / 1000;
  15. 分 = 秒 / 60;
  16. 時間 = 分 / 60;
  17. h = 時間。floor();
  18. m = 分 - h * 60;
  19. mins = m。floor();
  20. if(mins < 10)
  21. {
  22. mins = '0' + mins;
  23. }

  25. //合計勤務時間を設定
  26. current_day_entry。Total_Hours=h + ':' + mins + ' Hrs';
  27. }

これですべての機能が完了したので、ダッシュボードの作成に進みましょう。
 
8. ページを作成  し、名前を ダッシュボード とします。そこに ZML スニペット と HTML スニペット をドラッグします。

以下のスニペットを 1 つの動作するスクリプトにまとめたファイルについては、添付ファイルを確認してください。
理解しやすくするため、ZML/HTML コードはスニペットに分割されています。各スニペットについて説明したうえで、ZML/HTML エディターに挿入できるよう適切な順序に並べ替えます。
 
まずは ZML スニペット から始めます。ここには次のボタンを配置します: 休暇申請 、 Check In 、 および Check Out です。
 
スニペット a
従業員の名前は <text> タグを使用して表示します。<button> タグを使用して 休暇申請 ボタンを作成します。このボタンをクリックすると 休暇申請 フォームが開きます。
  1. <pr>
  2. <pc width='80%' bgColor='#ececec' hAlign='left' paddingLeft='10px'>

  4. //ログイン中の従業員の名前を表示
  5.   <text bold='真' 値='Welcome <%=getUser。名前%>.' size='5' color='#3d566e' 種類='Text' textAlign='left'>
  6.   </text>
  7.   </pc>
  8.   <pc width='20%' hAlign='left' padding='10px' vAlign='middle'>
  9.   <pr width='100%' height='fill'>
  10.     <pc hAlign='center'>

  12. //クリック時に休暇申請フォームを開くボタンを作成
  13.     <button bgColor='#3d566e' 操作='Form' componentLinkName='Apply_Leave' size='1' text='適用する 移動する'/>
  14.     </pc>
  15.   </pr>
  16.   </pc>
  17. </pr>

スニペット b
Check In ボタンは、従業員がまだチェックインしていない場合にのみ表示される必要があります。 そのため、 追加する Check In/Out 詳細 フォームに、現在の従業員の本日のレコードがあるかどうかを確認します。利用可能な場合はチェックイン時刻を表示し、ない場合は Check In ボタンを表示します。同様に、 Check Out ボタンも表示します。
  1. <pr>
  2. <pc width='33%' hAlign='left' padding='10px' vAlign='middle'>
  3. <pr width='100%' height='fill'>
  4. <pc hAlign='center'>
  5. <%
  6. //従業員がすでにチェックインしているかどうかを判定
  7. alreadyCheckedIn = Add_Check_In_Out_Details[従業員 == getUser。ID && Check_In is 今日].件数(ID);
  8. if(alreadyCheckedIn == 0)
  9. {
  10. //従業員がまだ出勤していない場合、ボタンを表示する
  11. %>
  12. <button bgColor='#14b474' 操作='Function' functionName='checkIn' successMsg='出勤が記録されました。' size='3' text='出勤'/>
  13. <%
  14. }
  15. else
  16. {
  17. //従業員がすでに出勤している場合は、出勤時刻を表示する
  18. checkedIn = Add_Check_In_Out_Details[従業員 == getUser。ID && Check_In is 今日];
  19. %>
  20. <text bold='真' 値='出勤時刻：<%=checkedIn。Check_In%>' size='3' color='#3d566e' 種類='Text' textAlign='left'> </text>
  21. <%
  22. }
  23. %>
  24. </pc>
  25. </pr>
  26. </pc>
  27. <pc width='33%' hAlign='center' padding='10px' vAlign='middle'>
  28. <pr width='100%' height='fill'>
  29. <pc hAlign='center'>
  30. <%
  31. //従業員がすでに退勤しているかどうかを取得する
  32. alreadyOut = Add_Check_In_Out_Details[従業員 == getUser。ID && Check_In is 今日 && Check_Out is 今日].件数(ID);
  33. if(alreadyOut == 0)
  34. {
  35. //従業員がまだチェックアウトしていない場合は、ボタンを表示する
  36. %>
  37. <button bgColor='#fd3a36' 操作='Function' functionName='決済する' successMsg='You have checked 出力.' size='3' text='Check 出力'/>
  38. <%
  39. }
  40. else
  41. {
  42. //従業員がすでにチェックアウトしているかどうかを取得する
  43. alreadyCheckedOut = Add_Check_In_Out_Details[従業員 == getUser。ID && Check_In is 今日 && Check_Out is 今日];
  44. %>
  45. <text bold='真' 値='Checked-出力 at <%=alreadyCheckedOut。Check_Out%>.' size='3' color='#3d566e' 種類='Text' textAlign='left'> </text>
  46. <%
  47. }
  48. %>
  49. </pc>
  50. </pr>
  51. </pc>
  52. <pc width='33%' hAlign='center' padding='10px' vAlign='middle'>
  53. <pr width='100%' height='fill'>
  54. <pc hAlign='center'>
  55. <%
  56. //合計時間を取得する。
  57. total_hours = Add_Check_In_Out_Details[従業員 == getUser。ID && Check_In is 今日 && Check_Out is 今日].Total_Hours;
  58. //開始時点での合計時間の null 値を処理する。
  59. if(total_hours == null)
  60. {
  61. total_hours = '';
  62. }
  63. %>
  64. //ダッシュボードで精算後の合計時間の値を表示します。
  65. <text bold='真' 値='合計 時間 :<%=total_hours%>' size='3' color='#3d566e' 種類='Text' textAlign='left'> </text>\
  66. </pc>
  67. </pr>
  68. </pc>
  69. </pr>

スニペット c
上記のスニペットを、以下のように適切な位置に配置して、最終的な ZML コードを作成します。
  1. <%{

  3. //ログイン中のユーザーデータを取得します。
  4. getUser = Add_Employee[Official_Email == Zoho。loginuserid];
  5. %>
  6. <panel>
  7. //スニペット a を挿入
  8. //スニペット b を挿入
  9. </panel>
  10. <%}%>

次に、 Holidays リストを作成します。ここでは、 HTML スニペット を使用して、ダッシュボードに 今後の休日 を表示する独自のリストを作成します。
  1. <%{
  2. %>
  3. <style>
  4. h3 {
  5. padding: 10px;
  6. }
  7. #zohoreportel
  8. {
  9. height : 400px !important;
  10. }
  11. .holidayTable
  12. {
  13. width: 96%;
  14. border-collapse: collapse;
  15. margin: 1% 2%;
  16. }

  18. .holidayTable td
  19. {
  20. padding: 10px;
  21. フォント-size: 14px;
  22. text-align: center;
  23. border-bottom: 1px solid #f1f1f1;
  24. }
  25. table。holidayTable > tbody > tr:first-child > td
  26. {
  27. フォント-重さ: 600;
  28. フォント-size: 15px;
  29. background: #ececec;
  30. }
  31. </style>
  32. <div style='height : 450px;overflow:scroll;'>
  33. <h3>Upcoming Holidays</h3>
  34. <%

  36. //12 月までの休日一覧を取得します。
  37. holidays = Holidays[Date_field > Zoho。currentDate];
  38. if(holidays。件数() != 0)
  39. {
  40. %>
  41. <table クラス='holidayTable'>
  42. <tr>
  43. <td>休日名</td>
  44. <td>日付</td>
  45. </tr>
  46. <%
  47. for each rec in holidays
  48. {
  49. %>
  50. <tr>
  51. <td><%=rec。Holiday_Name%></td>
  52. <td><%=rec。Date_field%></td>
  53. </tr>
  54. <%
  55. }
  56. %>
  57. </table>
  58. <%
  59. }
  60. else
  61. {
  62. %>
  63. <div>利用可能な休日はありません。</div>
  64. <%
  65. }
  66. %>
  67. </div>
  68. <%
  69. }%>

動作を確認する