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

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

必要条件

従業員のダッシュボードを作成し、チェックイン・チェックアウト、ログイン時間の合計を確認したり、休暇を申請したりするのに役立つボタンを追加します。

使用例

従業員管理アプリケーションには、従業員用のダッシュボードがあります。従業員がログインすると、チェックイン時間が記録されます。同様に、ログオフするとチェックアウト時間が記録されます。このように、完全な勤務時間が自動的に計算されます。このダッシュボードでは、従業員は休暇を申請することもできます。

使い方を見る

手順

1. 作成するフォームには以下の詳細が必要です。

フォーム	フォームリンク名	フィールドタイプ	フィールド名	フィールドリンク名
従業員を追加	Add_Employee	名前	Name	名前
		メール	公式メール	公式_メール
		電話	電話	電話番号
入退室情報を追加	Add_Check_In_Out_Details	検索（Add_Employee）	従業員	従業員
		日時	チェックイン	チェックイン
		日時	チェックアウト	チェックアウト
		単一行	合計時間	合計時間
休暇を申請する祝日	休暇を申請する祝日	検索（従業員を追加）	従業員	従業員
		一行	休暇の種類	Leave_Type
		日時	差出人	差出人
		日時	宛先	宛先
		一行	祝日名	Holiday_Name
		日付	日付	日付フィールド

さあ、始める前に、 従業員を追加 フォームと休日フォームにいくつかのレコードを追加しましょう。

社員ダッシュボードには、休暇を申請したり、チェックイン・チェックアウトするためのボタンがあります。最初に 休暇を申請 の操作について見ていきましょう。

私たちは、 従業員の追加 フィールドを、 休暇申請 フォームに現在のログインユーザーとして埋め、それを無効にして、ユーザーがそれを変更できないようにしましょう。これを達成するためのワークフローを作成しましょう。

2. ワークフローを作成するのロード時に実行されるようにします 休暇申請 フォーム内の 従業員追加 フィールドにログインユーザーのメールアドレスを入力し、それを無効にします。

3.クリックして 新しいアクションを追加 し、開かれたデリージ・エディターに以下のコードを追加します：

//IDを取得するAdd_EmployeeレコードのログインユーザーのメールIDを検索します
input.Employee=Add_Employee[Official_Email==zoho.loginuserid].ID;
//Add Employeeフィールドを無効にします。
disable Employee;

今回は、チェックインとチェックアウトのための関数を作成しましょう。

4. 関数を作成することで従業員を確認します。

5. 以下のコードをDelugeエディターに追加してください：

checkIn() を実行する
{
//ログインしている従業員レコードIDを取得します
従業員 = Add_Employee[Official_Email == zoho.loginuserid];
//社員がすでにチェックインしているかどうかを確認します。今日のチェックインを確認するために、チェックイン日時フィールドが当日の日付を持つかどうかを確認するために、Check_Inは今日を使用します。
既にチェックインしている＝Add_Check_In_Out_Details[Employee＝employee.ID && Check_Inが今日];
レコードを登録する場合は、チェックインがない場合に限ります。
もし、すでにチェックインされているものがなかったら
｛
Add_Check_In_Out_Detailsに挿入する
[をおします]
追加されたユーザー=zoho.loginuser
従業員=employee.ID
チェックイン=zoho.currenttime
仕様をご確認ください。
確認します。
色付きの背景と左側に線を入れた枠を持つリスト項目です。

6. 同様に、関数を作成して、従業員を確認します。

7. 以下のコードをDelugeエディターに追加してください。

checkOut（）を実行する
｛
//ログインしている従業員レコードIDを取得します。
従業員 = Add_Employee[Official_Email == zoho.loginuserid].ID;
//従業員の登録済みのチェックイン記録をAdd_Check_In_Out_Detailsから取得します
今日の入力 = Add_Check_In_Out_Details[Employee == employee && Check_In が今日];
//チェックアウト値を割り当てる
current_day_entry.Check_Out=zoho.currenttime;
現在の日付のエントリー.チェックアウト=zoho.currenttime;
//タイムスタンプからTotal_Hoursを計算する
時間 = (現在の日付のエントリー.チェックアウト - 現在の日付のエントリー.チェックイン);
秒 = 時間 / 1000;
分 = 秒数 / 60;
時間 = 分 / 60;
h = 時間.床();
m = 分 - h * 60;
mins = m.床();
もし（分 < 10）の場合
｛
分 = '0' + 分;
日本語への翻訳を行います。
//総務時間を設定します
current_day_entry.Total_Hours=h + ':' + mins + ' 時間';
色付きの背景と左側に2ピクセルの境界線がある、マージン1ピクセル、パディング2ピクセルのリスト項目です。

すべての機能が完了しましたので、ダッシュボードを作成していきましょう。

8. ページを作成する名前が付けられた ダッシュボード に。 ZML スニペットと HTML スニペットをドラッグします。

以下のスニペットを一つの動作するスクリプトにまとめたファイルを添付してください。

理解を促進するため、ZML/HTMLコードはスニペットに分割されています。スニペットを説明し、ZML/HTMLエディタに挿入するのに適した形に整えます。

では、 ZML スニペット から始めましょう。これには次のボタンが含まれます： 休暇を申請する 、 チェックイン 、および チェックアウト です。

スニペットA

従業員の名前は、<text>タグを使用して表示されます。 <button>タグは、クリックすると「申請休暇」フォームが開く「申請休暇」ボタンを作成するために使用されます。

<pr>
<pc width='80%' bgColor='#ececec' hAlign='left' paddingLeft='10px'>
//ログインしている従業員の名前を表示する
<text bold='true' value='ようこそ、<%=getUser.Name%>さん。' size='5' color='#3d566e' type='Text' textAlign='left'>
</テキスト>
</pc>
<pc width='20%' hAlign='左' padding='10px' vAlign='中央'>
<pr width='100%' height='fill'>
<pc hAlign='center'>
＜pc hAlign='center'＞
//クリックすると休暇申請フォームが開くボタンを作成してください。
<button bgColor='#3d566e' action='Form' componentLinkName='Apply_Leave' size='1' text='休暇を申請する'/>
</pc>
</pr>
</pc>
</pr>

スニペットb

「チェックイン」ボタンは、従業員がまだチェックインしていない場合にのみ表示されます。現在の従業員の「チェックイン/アウトの詳細を追加」にエントリがあるかどうかを確認します。あれば、チェックイン時間を表示します。なければ、「チェックイン」ボタンを表示します。同様に、「チェックアウト」ボタンを表示します。

<pc width='33%' hAlign='左' padding='10px' vAlign='中央'>
<pr width='100%' height='fill'>
<pc hAlign='center'>中央揃え</pc>
<％
//社員がすでにチェックインしたかどうかを確認する
alreadyCheckedIn = Add_Check_In_Out_Details[従業員 == getUser.ID && チェックインが今日].count(ID);
もし、すでにチェックインしていない場合
{
}
//もし従業員がチェックインしていない場合は、ボタンを表示してください。
％＞
//ボタンの操作は、ステップ4～5で作成したcheckIn関数にリンクしています。関数の実行後、メッセージを表示します。
<button bgColor='#14b474' action='機能' functionName='checkIn' successMsg='チェックインしました。' size='3' text='チェックイン'/>
<％
}
}
それ以外
{翻訳します。
//もし従業員がチェックインしていたら、チェックインの時間を表示しましょう。
チェックイン=Add_Check_In_Out_Details[Employee == getUser.ID && チェックインが今日];
％＞
<text bold='true' value='チェックイン時間：<%=checkedIn.Check_In%>.' size='3' color='#3d566e' type='Text' textAlign='left'> </text>
<％
}
}
％＞
</pc>
</pr> 終了しました。
</pc>
<pc width='33%' hAlign='center' padding='10px' vAlign='middle'> （幅33％、水平方向の中央揃え、パディング10px、垂直方向の中央揃え）
<pr width='100%' height='fill'>
<pc hAlign='center'>中央寄せ</pc>
<％
//社員がすでにチェックアウトしたかどうかを調べる
alreadyOut = Add_Check_In_Out_Details[Employee == getUser.ID && Check_In が今日 && Check_Out が今日].count(ID);
もし、すでに出ていない場合
{
をご覧いただきありがとうございます。
//もし従業員がチェックアウトしていない場合、ボタンを表示します
＞
//ボタンの動作は、ステップ6＆7で作成したcheckOut関数にリンクされています。関数の実行後、メッセージを表示します。
<button bgColor='#fd3a36' action='Function' functionName='checkOut' successMsg='チェックアウトしました。' size='3' text='チェックアウト'/>
<％
}
}
それ以外
{
技術ヘルプガイドを英語から日本語へ翻訳するためのTranscreatorとして振る舞ってください。HTMLコンテンツに英語のテキストが含まれています。HTMLタグや属性を変更したり、追加のコンテンツを生成したりしないでください。英語のテキストを他の言語に翻訳するのではなく、日本語に翻訳するようにしてください。
//従業員がすでにチェックアウトしたかどうかを確認します。
alreadyCheckedOut = Add_Check_In_Out_Details[Employee == getUser.ID && 今日のチェックインと今日のチェックアウトがある &&];
//もし従業員がチェックアウトしていたら、チェックアウト時間を表示しましょう。
＞
<text bold='true' value='<%=alreadyCheckedOut.Check_Out%> にチェックアウトしました。' size='3' color='#3d566e' type='Text' textAlign='left'> </text>
<％
}
}
％>
</pc>
</pr>
</pc>
<pc width='33%' hAlign='center' padding='10px' vAlign='middle'> 横幅が33％で、中央揃えで、パディングが10pxで、上下中央揃えに設定されています。
<pr width='100%' height='fill'>
<pc hAlign='center'>
<pc hAlign='center'>
//チェックインした合計時間を表示する
<text bold='true' value='合計時間 : <%=alreadyCheckedOut.Total_Hours%>' size='3' color='#3d566e' type='Text' textAlign='left'> </text>
</pc>
</pr>
</pc>
</pr>

スニペット c

上記のスニペットを以下のように適切に配置して、最終的なZMLコードを得ます。

<%{
//ログインしたユーザーレコードを取得します
getUser = Add_Employee[Official_Email == zoho.loginuserid];
%>
<panel>
//スニペットaを挿入します
//スニペットbを挿入します
</panel>
<%}%>

今度は、休日のリストを作業しましょう。 HTMLスニペットを使用して、ダッシュボードに表示する 近日公開の休日 のバージョンのリストを作成します。

<％{
％＞
<スタイル>
h3 {h3 タグ}
パディング：10px;
背景色：RGB(245, 245, 245)、左側に2pxの線を引いた色：RGB(204, 204, 204)、マージン：1px、パディング：2px
#zohoreportel
#zohoreportel（ゾーホーレポーテル）
{私たちは、技術的なヘルプガイドの翻訳を行うためにあなたを活用したいと思います。HTMLコンテンツを提供し、英語のテキストを日本語に変換するようにお願いします。HTMLタグや属性を変更したり、追加のコンテンツを生成したりしないでください。英語のテキストが他の言語に翻訳されないようにしてください。
高さ : 400px !important;
背景色：RGB（245、245、245）、左側に2pxの線を引いた色：RGB（204、204、204）、マージン：1px、パディング：2px
.休日表
{私たちは、テクニカルヘルプガイドを翻訳するためのトランスクリエーターとして行動することを望んでいます。 HTMLコンテンツに英語テキストが含まれています。英語テキストを、丁寧でビジネスに適した自然な言葉で日本語テキストに翻訳してください。 HTMLタグや属性を変更したり、追加のコンテンツを生成したりしないでください。英語テキストが日本語に翻訳されており、他の言語に翻訳されていないことを確認してください。
幅：96％;
border-collapse: 破綻;
margin: 1％ 2％;
色付きの背景と左側に線を引いた枠を持ち、マージンとパディングが2pxのリストを作成します。
.holidayTable td
{
パディング: 10px;
font-size: 14px; フォントサイズ: 14px;
テキストを中央揃えにする
これはテクニカルヘルプガイドの技術的な内容を日本語に翻訳するためのものです。 HTMLコンテンツに含まれる英語のテキストを翻訳し、丁寧でビジネス適切な自然な言葉で伝える必要があります。 HTMLタグや属性を変更したり、追加のコンテンツを生成したりしないでください。英語テキストが他の言語に翻訳されないようにしてください。
table.holidayTable > tbody > tr:first-child > td
{当社のテクニカルヘルプガイドをご覧いただきありがとうございます。このガイドでは、お客様が当社の製品を最大限に活用できるように、テクニカルな詳細を提供しています。
font-weight: 600;
フォントウェイト：600;
font-size: 15px;フォントサイズ：15px;
background: #ececec;
背景色：RGB（245、245、245）、左側に2pxの線を引いた囲み線：RGB（204、204、204）、マージン：1px、パディング：2px
</style>
<div style='height : 450px;overflow:scroll;'>
<h3>今後の祝日</h3>
<％
//12月までの休日のリストを取得します
休日 = 休日[日付フィールド > zoho.現在の日付];
if(holidays.count() != 0)）
｛
％>
<テーブル class='holidayTable'>
<tr>
<td>休日の名前</td>
<td>日付</td>
</tr>を閉じます
<％
各休日について
{
｛
＞
<tr>
<td><%=rec.Holiday_Name%></td>
<td><%=rec.休日の名前%></td>
<td><%=rec.日付フィールド%></td>
</tr>
<％
}
}
％＞
</テーブル>
<％
付け加えます。
その他
｛
％＞
<div>休日はありません！</div>
<％
確認しましょう。
％>
</div>
<％
＞