ページビューの合計

2017年2月6日月曜日

【第5回】タイムレコーダーアプリ作成~部署ページの作成 その2~

皆様、こんにちは !!
インフルエンザが猛威を振るっておりますが、感染されていませんか?
まだしばらくはピークが続きそうですので、ぜひご注意ください。

2月ということで、いよいよ1ヶ月を切りましたね。
ノーツコンソーシアム FESTA 2017
2017 年第 1 回情報交換会

個人的には3月2日に東京の取引先様との打ち合わせを予定していたのですが、すっかり宿泊予約を忘れていました。
予定より少し高くなりましたが、いいホテルは確保できましたが・・・。

あとは移動の予約のみです。



さて前回は部署ページということで、出社・退社それぞれについて、ボタンのみを設置したページを作成しました。
今回はさらにそのページの部署ボタンからリンクされる部署の詳細ページを作成します。
元となるフォームは4つ。
 ・出社_営業1部
 ・出社_営業2部
 ・退社_営業1部
 ・退社_営業2部

前回まではカスタムコントロールは利用せず、直接XPageとして作成しましたが、今回は再利用するパーツが多くなりますので、カスタムコントロールを利用して、工数を減らすような設計手順を掲載するつもりです。

それでは出社側から作成していきましょう。
デザインに統一感を出すため、前回作成したm_XpWorkを再利用することにします。

名前: m_XpWork_1

コピーしたXPageの名前を変更したら、デザイナーで開きます。
先頭の「出社」とかかれた表部分と戻るボタンのみを再利用しますので、表と2個のボタンを削除してください。

下記のようになるはずです。


続いて、【戻る】ボタンのリンクを変更します。
現在はトップページに戻るようになっておりまので、m_XpWorkに戻るように変更します。

戻るボタンをクリックし、下部で「イベント」タブに切り替えます。

現在の設定 ページを開く  ページ名:/m_XpIndex.xsp

と書かれた部分を選択し、【編集】ボタンを押してください。


シンプルアクションの編集ダイアログが開きますので、

開くページの名前: m_XpWork

とし、OKします。

以上で m_XpWork_1を保存して閉じておきます。

つづいてこのm_XpWork_1に埋め込むカスタムコントロールを作成します。

左メニューでカスタムコントロールをダブルクリックし、【新規カスタムコントロール】を押してください。

名前: XcWork_1

とし、OKするとカスタムコントロールの新規作成画面が表示されます。

次にカスタムコントロールにデータソースを関連付けます。
プロパティのデータタブをクリックします。


【追加】ボタンから、【Domino文書】をクリックします。



フォーム: 出社_営業1部 - Work01
データソース名: document1
デフォルトアクション: 文書の作成
フォーム検証の実行: 両方

と設定します。


続いて先頭にラベルコントールを配置します。

ラベル: 営業1部
フォントサイズ: 36(こちらは自由です)
フォントカラー: 青(こちらも自由です)

ラベルコントロールの後ろから改行を5個ほど入れ、続いてボタンコントロールを配置します。

ボタンの設定は「出社_営業1部」の内容に準じます。


ラベル: 楢○ 正剛(貴社情報に書き換えてください)
高さ: 100ピクセル(自由)
幅: 300ピクセル(自由)
フォントサイズ: 36(自由)
文字揃え: 中央

次に、ボタンコントロールにイベントを追加します。

イベントタブに切り替え、アクションを追加します。

カテゴリ: 文書
アクション: フィールドの変更
フィールド名: creator
値: 楢○ 正剛
データソース名: document1


このアクションでは、最初に関連づけた「出社_営業1部」のフォームを使用し、creator というフィールドに【楢○ 正剛】という値を設定するというものです。

ちなみに他のフィールドについては、
busho: デフォルト値にて「営業1部」
time: 作成時の計算結果として「@Created」により作成時の日時
stamp: デフォルト値にて「出社|1」
が設定されます。

続いてイベントを追加します。

カテゴリ: 文書
アクション: 文書の保存
データソース名: document1


さらにイベントを追加します。

カテゴリ: 基本
アクション: アクションの確認
確認テキスト: 楢○ 正剛 様、おはようございます。


このイベントにより、ボタンが押された際に確認ダイアログが表示されます。

最後にもうひとつイベントを追加します。

カテゴリ: 基本
アクション: ページを開く
開くページの名前: m_XpIndex


これにより、先の確認をOKすると、トップページに移動します。

イベントが下記の順に並んでいることを確認してください。


以上でボタンの設定がひとつ完了しました。

それではこのボタンをコピーして、後ろにふたつ貼り付けます。


それでは中央のボタンの内容を変更します。

ラベル: 阿○ 勇樹
イベント1行目のフィールドの変更の値: 阿○ 勇樹


イベント3行目のアクションの確認テキスト: 阿○ 勇樹 様、おはようございます。


以上です。

同様に右側のボタンも3箇所の「楢○ 正剛」を「駒○ 友一」に変更します。


続いてにフォームで扱われるフィールドすべてをカスタムコントロール内に追加します。
右側のコントロールタブをデータタブに切り替えます。


左上の赤枠欄が[コントロールの選択]ダイアログボックス(使用可能)であることを確認し(使用不可になっていましたら、クリックで切り替えてください)、すべてのフィールドを選択し、カスタムコントロール最下部へドラッグアンドドロップします。

データバインドコントロールの選択画面が表示されますので、【Time:】のコントロールを「日付ピッカー」から「計算結果フィールド」に変更し、OKしてください。


これらコントロールは、実際の画面に表示する必要はありませんので、表全体を選択した状態で、【可視】のチェックを外します。

これでカスタムコントロール XcWork_1ができましたので、保存して閉じます。

※カスタムコントロールは、ページとしての構成が行われていないため、単体でプリビューすることができません。

それでは最初に作成したm_XpWork_1に埋め込んでみましょう。

m_XpWork_1をデザイナーで開きます。

コントロールの最下部に「カスタムコントロール」が追加され、作成されたXcWork_1が使用できるようになっています。

それではXcWork_1を出社と戻るボタンの間にドラッグアンドドロップします。


下記のように、カスタムコントロールが配置されました。


せっかくですので、ソースを見てみましょう。

ソース内では、カスタムコントロールは<xc:></xc:>タグでくくられた1行で表現されます。

続いてm_XpWorkからm_XpWork_1へのリンクを作成します。

m_XpWorkをデザイナーで開きます。

「営業1部」のボタンを選択し、イベントを追加します。

カテゴリ: 基本
アクション: ページを開く
開くページの名前: m_XpWork_1


それではm_XpIndexをブラウザでプリビューし、「出社」⇒「営業1部」のボタンを押してみましょう。
下記のように表示されるはずです。


合わせてボタンの動きも確認してみましょう。
「楢○ 正剛」のボタンをクリックしてください。

下記のようなメッセージが表示されますので、OKしてください。


タイムレコーダーのトップ画面に戻ります。
同様に、他の2名についてもテストしてください。

最後に保存されたデータの確認です。

タイムレコーダーをノーツクライアントで開きます。
ビューは「日付順」しかありませんので、今回押された3レコードが表示されているはずです。



無事、打刻日時と部署、社員名、項目が保存されました。

今回は以上とさせて頂きます。

次回は今回のカスタムコントロールをベースに、営業2部の出社及び両部署の退社までを作成予定です。

0 件のコメント:

コメントを投稿