![](https://www.a-assist.co.jp/wp-content/uploads/2023/07/workwithplus-e1626841000242.png)
#実装方法:WorkWithPlus (タグの付け方)実装方法
2021年07月21日
こんにちは、新人の鎌倉です。
今回はWorkWithPlusを使用したグリッドへのタグの付け方について紹介させていただきます。
現在、下記のサイトで動作イメージを確認できます。
![](/wp-content/uploads/2023/07/image-6-1024x576.png)
Person (a text tag is added to the Full Name column)
■実装編
まずはじめに、全社員分の勤怠履歴を一覧で閲覧できる画面を作成したとします。
例えば、どの勤怠データが最新(閲覧した当日の分)なのか印を表示したいとき
下の図のように条件に従ってタグが表示されるようにできます。
![](/wp-content/uploads/2023/07/POST_0016_01.png)
わかりやすく3つの位置にタグを付けてみました。
![](/wp-content/uploads/2023/07/POST_0016_02.png)
左から順に
- 列にタグを表示させたいとき
- 社員コードをタグでの表示にさせたいとき
- 勤怠日付の横にタグを表示させたいとき
以上の3つのタグの付け方を紹介させていただきます。
全て、パターンを適用したTransaction オブジェクトの「Patterns」エレメントで設定を行います。
①列にタグを表示させたいとき
列にタグを表示させたいときは、Gridのプロパティから
「Conditional Formatting」で設定します。
![](/wp-content/uploads/2023/07/POST_0016_03-1024x465.png)
[…]を押していただくと、
下の図のようなポップアップ画面が表示されます。
![](/wp-content/uploads/2023/07/POST_0016_04.png)
- タグ列を追加(タグ)
- 行に書式を追加(太文字、背景色)
タグを表示させたいので今回はタグ列を追加を選択します。
![](/wp-content/uploads/2023/07/POST_0016_05.png)
タイプとカテゴリから任意のものを選択し、条件やキャプションを入力します。
★今回はすべてBackgroundを使用していますが他にも様々なタイプがあります。
![](/wp-content/uploads/2023/07/POST_0016_06.png)
![](/wp-content/uploads/2023/07/POST_0016_07.png)
以上で完了です。
②社員コードをタグでの表示にさせたいとき
社員コードをタグでの表示にさせたいときは、ShaCodeのプロパティから
「Conditional Formatting」で設定します。
![](/wp-content/uploads/2023/07/POST_0016_08-1024x359.png)
[…]を押下していただき、①と同様の手順を行ってください。
![](/wp-content/uploads/2023/07/POST_0016_09.png)
以上で完了です。
③勤怠日付の横にタグを表示させたいとき
勤怠日付の横にタグを表示にさせたいときは、Dateのプロパティから
「Column Tags」で設定を行います。
![](/wp-content/uploads/2023/07/POST_0016_10-1024x351.png)
[…]を押下していただき、①、②同様の手順を行ってください。
![](/wp-content/uploads/2023/07/POST_0016_11.png)
以上で完了です。
いかかでしたでしょうか。今回は3つのパターンでタグ表示の方法をご紹介させて頂きました。
一覧画面上にアイキャッチの様な役割を追加することで、
一目で状態が区別できるようになりました。多方面で応用が期待できますよね!
この記事がお役に立てれば幸いです。
最後まで閲覧ありがとうございました。