TALON Tips < カレンダー ( 月別 ) の画面を表示する > 株式会社 HOIPOI 第 1.1 版 p. 1

TALON Tips < カレンダー ( 月別 ) の画面を表示する > 株式会社 HOIPOI 第 1.1 版 p. 1

1 目次 1 目次... 2 2 はじめに... 3 3 Tips セットアップ... 4 3.1 事前準備... 4 3.2 事前準備 2... 4 3.3 セットアップ... 4 3.4 セットアップ ( その他 )... 5 4 Tips 概要... 6 4.1 概要... 6 4.2 処理フロー... 6 処理フロー... 6 処理内容... 7 4.3 構築のポイント... 9 4.4 サンプル機能... 10 4.5 構築方法... 11 TALON 機能の構築... 11 4.6 利用 TALON 機能... 16 5 改版履歴... 17 p. 2

2 はじめに 本資料は TALON 機能を使用した活用例を掲載しております Tips 共通資料 と合わせてご確認ください また 使用している機能の詳細につきましては 310_TALON_ 機能構築マニュアル 基本的に機能の構築方法につきましては 300_TALON_ 機能構築チュートリアル を合わせてご確認頂きますようお願いいたします TALON Tips のセットアップは 事前に以下の準備が完了している必要があります TALON 本体がセットアップ済みであること 対応するバージョンについては当ドキュメントの改版履歴に記載しています TALON 標準ファンクションがセットアップ済みであること TALON リポジトリ移送機能がセットアップ済みであること p. 3

3 Tips セットアップ 当 Tips を利用する為に必要なセットアップ手順を記載いたします 3.1 事前準備 Tips 共通資料 の 4 セットアップ手順 > 4.1 事前準備 を参照してください 3.2 事前準備 2 Tips 共通資料 の 4 セットアップ手順 > 4.2 事前準備 2 を参照してください 3.3 セットアップ 下記セットアップを実施してください 実施有無 1 スクリプトパッチの適用 2 〇機能のインストール Tips 番号 :0028( リポジトリデータ :TLN_TIPS_0028) 3 〇機能のセットアップ Tips 番号 :0028 4 〇機能利用権限の付与 Tips 番号 :0028 5 DocRoot ファイルの 配備 6 その他 p. 4

3.4 セットアップ ( その他 ) 当 Tips は その他 の作業はありません p. 5

4 Tips 概要 4.1 概要 スケジュールデータをカレンダー展開して画面に表示します 休日を指定して対象日の背景色を変更する事も可能とします 4.2 処理フロー 処理フロー メニュー カレンダー ( 月 ) カレンダーデイリー リスト スケジュールリスト スケジュールカード 休日設定 p. 6

処理内容 < カレンダー ( 月 )> 予定新規登録ボタンで 予定の登録画 面に遷移します 日付をクリックする事で 対象日のスケジ ュールの一覧画面に遷移します 1 指定した年月でカレンダー画面を表示します 2 スケジュールカードで登録された予定データは出力したカレンダーにリボンとして表示します 3 休日設定で登録されたデータは休日出力したカレンダーのセルに表示します 4 日付のボタンをクリックする事で 対象日付の予定のリスト画面 ( カレンダーデイリーリスト ) に遷移します 5 予定新規登録ボタンをクリックする事で 予定の登録画面 ( スケジュールカード ) に遷移します < カレンダーデイリーリスト > 1 対象の日付の予定リストを表示します p. 7

< スケジュールリスト > 1 登録されたスケジュールの一覧が表示されます 2 この画面から予定データの登録 修正 削除が可能です < スケジュールカード > 1 指定されたスケジュールの内容が表示されます ( 新規の場合は空で表示されます ) 2 この画面から予定データの登録 修正 削除が可能です p. 8

4.3 構築のポイント TIPS0028_ カレンダー ( 月 ) 以外の機能は基本的な TALON 機能のみで構築されております TIPS0028_ カレンダー ( 月 ) では 1 カレンダーの表示に 明細 型タイプを使用して構築しています 明細に表示するデータは 表示用のワークテーブルとなっており 検索前 JavaScript エンジンにて スケジュールデータを元にワークテーブルにカレンダー情報を格納し画面に表示しています 2 タイトルの曜日は ワークテーブルに格納した曜日レコードを タイトル SELECT 式 を使用して画面に展開しています ( サンプルでは日曜始まりのパターンでのみ構築しています ) 3 画面遷移では 他画面呼出 機能を使用しています 日付毎にワークテーブルに用意した KEY 項目を条件にして カードデイリーリスト画面を呼出しています ( ボタンの表示場所の制御にクライアントサイドの JavaScript を使用 ( 下記参照 )) 4 休日設定は 日付毎にワークテーブルに用意した 休日区分 を条件にして 背景色 機能にてパターンごとに背景色設定を行っています 5 予定情報は ワークテーブルの区分 = 予定情報のレコードを使用して表示しています サンプルでは予定情報をリボンとして表示する為 クライアントサイドの JavaScript を使用してデータにスタイル編集を行い表示しています p. 9

4.4 サンプル機能 TALON TALON 関連機能 機能名 種別 機能 ID TIPS0028_ カレンダー ( 月 ) TALON TLN_TIPS_0028_CLD_MONTH TIPS0028_ カレンダーデイリーリスト TALON TLN_TIPS_0028_CLD_DAILY_LIST TIPS0028_ スケジュールカード TALON TLN_TIPS_0028_SCH_CARD TIPS0028_ スケジュールリスト TALON TLN_TIPS_0028_SCH_LIST TIPS0028_ 休日設定 TALON TLN_TIPS_0028_HOLIDAY_LIST データベース関連 オブジェクト名 種別 オブジェクト ID TIPS0028_ スケジュールテーブル TABLE TLN_TIPS_0028_SCHEDULE TIPS0028_ 休日テーブル TABLE TLN_TIPS_0028_HOLIDAY TIPS0028_ カレンダーワークテーブル TABLE TLN_TIPS_0028_W_CALENDAR p. 10

4.5 構築方法 TALON 機能の構築サンプル : カレンダーデイリーリスト 1 明細タイプ機能の構築 機能構築チュートリアル 一覧照会機能の構築 を参照してください 注意 サンプルのスケジュールデータは 1 つの予定に開始日 (FROM) と終了日 (TO) でデータを管理しています 指定した日付が含まれる様にデータを抽出できる SELECT 文にする必要があります サンプル : スケジュールリスト 1 明細タイプ ( 更新有 ) 機能の構築 機能構築チュートリアル 一覧メンテナンス機能の構築 を参照してください サンプル : スケジュールカード 1 単票タイプ機能の構築 機能構築チュートリアル 単票メンテナンス機能の構築 を参照してください サンプル : 休日設定 1 明細タイプ ( 更新有 ) 機能の構築 機能構築チュートリアル 一覧メンテナンス機能の構築 を参照してください p. 11

サンプル : カレンダー ( 月 ) 1 単票明細タイプ機能の構築 機能構築チュートリアル 単票明細メンテナンス機能の構築 を参照してください 2 単票ブロックでは 検索条件項目に表示する為だけのダミーの項目 ( 年 月 ) を用意します Point ダミー項目のブロックの作成について SELECT 式では 使用しているデータベースで実行可能なものであれば記述可能です 例えば ORACLE の場合に利用可能な DUAL などを使用した SELECT 文も記述可能となっています サンプルでは マルチのデータベースで動作可能なことを考慮し TALON の標準テーブルである汎用テーブルに ダミー項目を用意し そのデータを参照する形で実現しています SELECT '' AS TRG_Y,'' AS TRG_M FROM TLN_M_HANYO_CODE_MAIN WHERE SIKIBETU_CODE = 'TLN_TIPS_0028_DUMMY' 3 単票ブロックは 検索条件としてのみ必要な為 検索結果の表示エリアに表示されないように設定します Point 画面に表示させないブロックの設定について ( 単票ブロック ) ブロック設定画面の 詳細設定 で下記を設定する事で 対象ブロックは画面より表示されなくなります 複数ブロック画面で最終ブロックでない場合のみこの設定は有効となります 表示高さ 1px ブロック名フィールドを非表示 チェック p. 12

4 明細ブロックでは ワークテーブルより出力された情報を表示する為 SELECT 式では TLN_TIPS_0028_W_CALENDAR テーブルを参照するように構築します ( 処理のイメージ ) 5 明細ブロックの 項目情報 では 各曜日情報の 表示値 の項目のみ 更新 のチェックを付与します これにより 出力された画面ではテキストのオブジェクトで表現される為 クライアントサイドの JavaScript で参照する事が可能になります ただし 画面としては入力する必要がないため 入力許可条件パターン にて 入力不可 設定を行います Point 必ず入力しない項目を設置する場合 ( クライアントサイド JavaScript で使用するのみ等 ) マクロにチェックをつけ 必ず False になる条件式として 1 = 2 を設定します p. 13

6 明細ブロックの 項目情報 にて 休日の状態を参照した 背景色 を設定します 検索前 JavaScript エンジンにて ワークテーブルの日付毎の休日区分 ( 例 :W1_KBN) に 制御値を更新し その値を参照して背景色を制御します 背景色を増やしたい場合は ここでパターンを追加します 7 明細ブロックの 他画面呼出 にて ワークテーブルの日付毎の KEY 項目を条件に カレンダーデイリーリスト画面に遷移するボタンの設定を行います < 設定イメージ > 1 レコード (1 週間分 ) の設定を行い それぞれ対応する KEY を引数とします p. 14

8 明細ブロックの タイトル SELECT 式 にて ワークテーブルに格納された曜日情報を出力します 9 検索前 JavaScript を使用して ワークテーブルに表示用のデータを登録します < 処理のイメージ > 1) ワークテーブルを初期化する 2) 検索条件の年月より 月初の日付の最初の週の日付の取得 サンプルでは日曜日開始としております 3) ワークテーブルに 曜日データ ( 日 ~ 土 ) を登録する 4) 取得した最初の週の日付より6 週間分の日付を LOOP 5)LOOP した日付より スケジュールテーブルを参照し データを取得する 休日テーブルを参照し データを取得する 6)LOOP 時の週末の日付で 取得した情報 ( 一週間分 ) をもって ワークテーブルに日付データと予定データを登録する 10 表示された画面のレイアウトを調整する為に クライアントサイド JavaScript を登録します < 処理の内容 > スタイルを変更 明細テーブルの背景を白に統一 横の罫線を削除し 予定レコード表示時のみ下線を付ける 他画面呼出ボタンのセル ( 土曜日の列以降に表示 ) を非表示 データの編集 日付情報のレコードの場合 土曜日以降のセルに設置されている他画面呼出のボタンを各日付のセルに表示 予定情報のレコードの場合 表示されているのスタイルを変更し リボンのスタイルに編集 p. 15

4.6 利用 TALON 機能 4.4.3 明細のタイトル ( 見出し ) を動的に表現する方法 ( 設定項目 : タイトル SELECT 式タブ ) 6.12 JavaScript 埋め込み 6.16 JavaScript エンジン p. 16

5 改版履歴 日付 版数 内容 2017/06/01 第 1.0 版 初版 2018/07/10 第 1.1 版 TALON Ver4.1.5 に対応しました PostgreSQL に対応しました p. 17