ページビューの合計

ラベル デザイナー の投稿を表示しています。 すべての投稿を表示
ラベル デザイナー の投稿を表示しています。 すべての投稿を表示

2019年9月5日木曜日

タイムレコーダーアプリ、改築

This time, I am remodeling the time recorder app that I created before.

みなさま、こんにちは!!
しばらくあいてしまいましたが、決してサボってるのではないですよ(汗

社内のインフラリプレイスや、取引先との各種EDI関連の作業におわれてまして、実はV11のベータ版の準備もできてない状態です(大汗


ということでまずはご案内から・・・。
気が付けば、もうスタートの東京開催(9/18)まで2週間を切りました。

そう、Notes/Domino Solution 2019 です。

HCL社様からもさまざまな情報が出てきつつあり、Notes/Dominoに関わる方は参加必須のイベントです!

私は東京以外の4か所へ参加予定ですので、皆様とお会いできる日を楽しみにしております!



さてそんな中、以前掲載しました弊社のタイムレコーダーアプリを見直す必要が発生しましたので、簡単に紹介させて頂きます。

以前のアプリはこちら・・・

https://www.tanuchi.com/2017/01/1.html


今回の発端としては主にふたつ。


  1.  現在のアプリでは「出社」「退社」の打ち間違いが多い。また押したか不安になり、二重打刻もみられる
  2. 従来打刻していなかった管理職についても、実務把握のため打刻することになった
です。

1については、何かしら仕組みで回避できないか(時間によるボタンの非表示など)考えたのですが、完全に制御してしまうと問題がありました。また出社してないのに退社するなどの制御も考えたのですが、実務上そのようなパターンもあり得るため、これも不可。

ということで2を付け加えるにあたり、従来の入り口を大きく見直すことにしてみました。

ちなみに従来の入り口はこちら



いずれかをタップすると、部署一覧が表示され、自分の部署をタップし、さらに自分の名前をタップすることで打刻されます。

そこで今回の入り口は以下のように変更しました。


個人名の50音を選択するようにしました。
私の場合は「は」をタップし、

自分の名前をタップすると、


このように[出社]と[退社]が選べるようになっていますので、いずれかをタップすることになります。

ちなみにタップしますと、



このようにメッセージを表示します。
大きくしますと、


こんな感じです。

これで正しく自分の打刻ができたこと、また出社・退社のミスは減るのではないかと・・・期待してます・・・

さてこの構築なのですが、今回急を要したため・・・


このように大量のXPageを作成し、リンクさせることで動いています。
要は各行ごとのページと一人1ページという構成です。

もちろんコピペで多少手間はかかりますが、安定した作成はできたました。が!!、やはり納得できない。

おそらく一般的なプログラマーでしたら、スコープ変数を用いて、個人のランディングページはひとつにするというのがスマートな方法ではないかと考えています。


ということで・・・時間が取れましたら勉強します(汗

2019年6月26日水曜日

#年度 や #期 の取り扱いについて

Treat the fiscal year with Notes.

みなさま、こんにちは!!
いまだ梅雨入りしてない神戸ですが、ようやくそれらしい雰囲気になって参りました。

さて日本企業では売上集計などを年度で取り扱う場合も多いかと思われます。
弊社も例にもれずではありますが、従来はNotesではあまり年度というものを意識することなく利用しておりました。

今回、従来Excelで行っていた、取引先向けの実績収集ファイルをNotes化しようという案件が発生したのですが、その必須項目として以下のように「年度」や「期」、「月」が要求されております。


今まではExcelで行っていたので、蓄積された前行をコピーするなどであまり意識する必要がなかったのですが、Notesでの入力はフォームで行うため、その入力作業を簡素化できればと思ったのが今回の発端です。

目的としては、「納品書発行日付」をカレンダーから選択するだけで、「年度」「期」「月」が計算結果で得られればというものです。

ということで、簡単なフォームを作成してみました。


納品書発行日付[InvoiceDate]は編集可能な日付/時刻としています。
日付/時刻制御にチェックし、年月日のみの表示としてあります。


またフォームのオプションで、「フィールドの自動更新」にもチェックしておきます。


まずは簡単な「月」からです。
こちらは計算結果のテキストとしてあります。
単純に「納品書発行日付」から「月」部分を抜き出すだけです。
※今回はうしろに「月」を付加してあります。


式は以下のようにしました。


 @If(InvoiceDate="";"";@Text(@Month(InvoiceDate))+"月")


If文は、新規作成時にはInvoiceDateがブランクのため、計算結果が得られず、エラーになることを回避させています。
文字列「月」をつなげるため、@Monthで得られた数字を@Textで文字列化しているという、単純なものになります。

次に「期」です。
今回は4~9月の場合に「上」、10~3月の場合に「下」を表示させたいと思います。

こちらも計算結果のテキストとしてあります。


こちらの式は、以下のようにしました。


 @If(Month="";"";(@If(Month="4月":"5月":"6月":"7月":"8月":"9月";"上";"下")))


先のMonthフィールドが「4月」~「9月」であった場合、「上」。それ以外は「下」を表示するというこちらも簡単なIf文になります。
複数条件をまとめるため、各月を「:」(コロン)で接続してあります。

もう少しIf文をネストする必要がありますが、これだと海外のようなQ1~Q4も実現できますね。

それでは最後に年度です。
年と年度の違いは、もちろん12月で終わるか、3月で終わるかです。
問題なのは1~3月が[本来の年]-1される必要があるというものです。
なんて考えていると複雑になってしまうのですが、要は今の日付から3ヶ月引いた時の年(Year)を取得すればいいということになります。

先と同様、こちらも後ろに「年度」の文字を接続させるため、計算結果のテキストとしています。


式は以下としました。


 @If(InvoiceDate="";"";@text(@Year(@Adjust(InvoiceDate;0;-3;0;0;0;0)))+"年度")


こちらも簡単ですね。
InvoiceDateをAdjust関数を用いて、マイナス3ヶ月としたものから年部分を取り出します。
そちらをテキスト化して、「年度」をくっつけているだけになります。

それでは実際のフォームの動きを見てみましょう。

まずは新規作成画面です。


「納品書発行日付」がブランクですので、If文で処理した通り、「年度」「月」「期」のすべてがブランクになっています。
If文がなければ、この新規作成の画面を開くことができません。

それでは本日の日付を選択してみます。


以下は選んですぐの状態です。


フィールドのフォーカスを移動させると、


予定通り、「2019年」「6月」「上」という計算結果が得られました。

それでは今年の10月1日にしてみた場合、どうなるでしょう。


こちらも正しく期は「下」となってくれました。

それでは来年3月31日では・・・


2019年の下期と表示されました。
しつこいようですが、最後に来年の4月1日です。


ちゃんと「2020年度」「上期」になりました。

以上、いまさら取り上げることではないかとも思いましたが、企業として年度ベースでものごとを見ている場合も多いため、記事にしてみました。

2018年7月2日月曜日

#ノーツコンソーシアム ( #notescons )新任担当者向けワークショップ へ参加させて頂きました。

I studied to help you as a lecturer at the workshop for Notes new manager in Osaka.

みなさま、こんにちは!!
今回もまずは告知させてください。
明日、IBM Notes/Domino Day 2018 Summerが開催されます。
年内に発売予定のV10に関する情報を中心とした情報が得られる貴重なイベントです。

また翌7/4には、IBM Notes/Domino v10 意見交換ラウンドテーブル も予定されております。
こちらはコンソーシアム会員優先ではありますが、会員外の方でも参加可能ですので、こちらもご検討ください。

両日ともウェビナー or リモートの開催が予定されております。
私は今回東京まで行くことができませんので、両日自席から参加の予定です。
遠方の方、当日参加できない方も、ぜひリモート参加もご考慮ください!!

さて本日は先週東京で開催されましたノーツコンソーシアム新任担当者向けワークショップへ参加させて頂きましたので、簡単にレポート致します。

両日とも30名定員の募集でしたが、キャンセル待ちが出るほどの盛況ぶり。
また当日の参加率についてもほぼ全員と、まずはその人気ぶりに驚かされました。

1日目は午後から「管理者編」が実施されました。用語編+ワークショップの2本立てになります。
ワークショップでは隣り合った2台のPCをクロスケーブルで繋ぎ、それぞれにインストールされたサーバー同士での複製など、貴重な体験をすることができたようです。
終了後は、懇親会も行われ、お店を貸しきっていただくほどの参加者で盛り上がりました。

2日目は終日、開発者編の開催です。
管理者編同様、用語編+ワークショップ。加えてデザインTipsの講義もあり、実際に利用する立場の方に直接的なメリットが提供頂ける内容であったと感じました。

テキストの内容ですが、IBM様や他社様の教育プログラムほどの内容ではありませんが、両日受講することでノーツサーバーの簡単な管理、ユーザー追加や、初歩的なアプリケーションの作成までできるようになります。

流れとしては、まずはこのワークショップを受講されてから、有償の教育プログラムを受講されることで、理解度が格段に上がるのではと感じました。

ぜひノーツの管理やアプリ開発を行われる方は、次回以降のワークショップをお見逃しなく。

今回までは東京開催のみでしたが、コンソーシアムでは東京以外の開催も計画されているようですので、ぜひ遠方の方もお待ち頂ければと考えます。

なお参加者の方と少しお話ししてみたのですが、まずは初歩的なステップを理解したいという方が多いように感じました。
このことを受けて、私なりにやりたい事が出て参りましたので、少し準備してみたいと思います。

たいへん申し訳ありませんが、私のほうでは写真を撮っておりませんので、その場の雰囲気などはノーツコンソーシアムのフェイスブックページをご覧ください。


さて、そもそも私の参加目的は・・・

●弊社内ではDominoサーバーは二重化していないため、「管理者編」に興味があった。
●最新の用語集を聞きたかった
●開発手順は様々ですので、「開発者編」でどのように説明されるか聞きたかった。
●自らが講師として立てるようになる!!

です。

はじめの3点は、非常に満足できる内容で、改めて自分及び弊社でやっていることの確認が行えました。

講師としては・・・
正直なところテキストが立派に仕上がっているため、なんとかなるだろうと簡単に考えていたのですが、やはり人に教えることの難しさを実感することになってしまいました。

とはいえ、先にも少し触れました東京以外開催。特に大阪開催を実現しなければなりませんので、他の大阪研究会メンバーと強力して準備を開始致します。
開催決定次第、いろいろと案内が行われるかと思いますので、関西の皆様、もう少しお待ちください!!

皆様にお会いできる日を、心待ちに致しております。

2017年4月3日月曜日

アプリケーション管理アプリのご紹介

みなさま、こんにちは!!
始まりましたね、新年度。
関東はソメイヨシノ満開とか聞きますが、関西は少し遅れそうです。
その分、長く楽しめるといいのですが。

さて以前、ノーツコンソーシアムのユーザー情報交換会にて、【ノーツお困りごと相談】という企画がございました。
その際に弊社から提示した内容のひとつに、「データベースの削除ルールについて」というものを出させて頂きました。要は長期間使用されていないアプリケーションを洗い出し、整理することを目的としています。

その際に頂いた回答として、「catalog.nsfで使用頻度をチェックする」というものを頂いたのですが、どうしてもcatalog.nsfにはすべてのアプリケーションが含まれており、少し不自由を感じておりました。
そんな中、ノーツコンソーシアム大阪研究会にて、H様よりcatalog.nsfを参照するアプリケーションを作成し、情報を整理しているというヒントを頂きました。

そのヒントを元に、弊社では稼動しているアプリケーションの一覧を収集し、管理を開始しました。

本日はそちらを紹介させて頂きます。

まずcatalog.nsfでどのような項目が管理されているのか見てみましょう。
catalog.nsfの文書を開いてみると、下記のような項目が保管されていることがわかります。


実際に、この中から必要と思われる項目をピックアップしておきます。

続いてcatalog.nsfをデザイナーで開きます。
フォームで【Main】を開くと、各項目のフィールド名が取得できますので、先にピックアップした項目のフィールドを控えておきます。

それでは別のアプリケーションから参照するためのビューをcatalog.nsfに追加します。

【新規ビュー】をクリックし、以下プロパティを設定して【OK】してください。

ビュー名: 参照用(特に指定ではありません)
別名: ref (こちらは後で参照しますので、指定させてください)

続いてビューの列の設定です。
1列目には参照するためのキーが必要ですので、重複のないPathname(アプリケーションのファイル名)を使うことにします。必ずソートの設定を行っておいてください。

以降の列は特に先にピックアップしたフィールドをどんどん加えてください。
参考までに弊社では、

Title・・・アプリケーションのタイトル
DbSize・・・アプリケーションのサイズ
DbCreationDate・・・アプリケーションの作成日
DbModifiedDate・・・アプリケーションの最終更新日
DbNumDocuments・・・文書数
DbNumDesignDocuments・・・設計文書の数
DbTemplateName・・・設計テンプレート名
DbInheritTemplateName・・・テンプレートから設計を引き継ぐ
DbDesignModified・・・設計の最終更新日時
@If(DbFullTextIndexed="0";"未";"作成")・・・アプリケーションの全文索引
DbBytesIndexed・・・全文索引のバイト数
DbLastFTIndexed・・・全文索引の最終更新
@Name([CN];ManagerList)・・・管理者
@Name([CN];DesignerList)・・・設計者
@Name([CN];EditorList)・・・編集者
@Name([CN];AuthorList)・・・作成者
@Name([CN];ReaderList)・・・読者
@Name([CN];DepositorList)・・・投稿者
@Name([CN];NoAccessList)・・・なし
@Text(DbActSummDisp)+(" - 過去24時間の使用数":" - 過去24時間の読み込み数":" - 過去24時間の書き込み数":
" - 先週の使用数":" - 先週の読み込み数":" - 先週の書き込み数":
" - 先月の使用数":" - 先月の読み込み数":" - 先月の書き込み数":
" - 報告間隔の日数":" - 報告間隔の使用数":" - 報告間隔の読み込み数":
" - 報告間隔の書き込み数")・・・アプリケーションの使用状況の概要

を加えています。
列数がわかりやすいように、ビュー列のタイトルを列数にしています。


それでは実際のアプリケーションを作成します。
アプリケーションの新規作成を行います。名前等はお任せ致します。
続いてフォームを作成します。
こちらも名称はお任せ致します。

フォームのプロパティで、【フィールドを自動更新】にチェックします。


続いてフィールドを配置しますが、先頭に
Pathname・・・アプリケーションのファイル名
を配置してください。
こちらにファイルパスを手入力することになります。

以降はピックアップしたフィールドを配置します。


各フィールドの参照式ですが、

@If(Pathname="";"";@DbLookup("NOTES":"nocache";"サーバー名":"catalog.nsf";"ref";Pathname;2))

となります。
サーバー名はcatalog.nsfのあるサーバー名に書き換えてください。
最後の数字は先にcatalog.nsfに作成したrefビューの列番号になります。
つまり弊社でピックアップした先の項目を順番に列に加えているとすると、

Title・・・2
DbSize・・・3
DbCreationDate・・・4

となります。

なお弊社では以下項目を手入力できるように加えています。
使用用途(テキスト/編集可能)
利用者(名前/編集可能)・・・[宛先]ダイアログから選択
アプリケーションリンク(リッチテキスト)

弊社ではDesktop情報を配信せず、各自で必要に応じて修正させております。
そのため、部署ごとに利用するべきアプリケーションがわかりやすいように【利用者】として部署グループ(一部個人)を選択してあります。
またどのような用途で使用するかを【使用用途】に記載しておくことで、新入社員にも分かりやすいよう工夫してあります。
またいちいち【ファイル】-【アプリケーション】-【開く】からワークスペースへ追加することも手間ですので、【アプリケーションリンク】を配置し、ワンクリックで追加できるようにしてあります。

あとは必要と思われるビューを作成(弊社では、ファイル名順・最終更新日順・部署別の3種類のビューを作成しています。



ビューのアクションの【新規作成】と【更新】は設計者以外には非表示(ロールにて制御)としてあります。

!(@UserRoles="[ロール名]")

また【更新】ですが、一度登録された文書の計算式が自動で最新状態にならないため、ビュー上でクリックすることで全文書が更新されるよう下記の式を設定してあります。

@Command([ToolsRefreshAllDocs])

以上で大まかな設計は完了ですので、文書としてアプリケーションの情報を追加して、適宜確認を行うというものです。
catalog.nsfとの大きな違いは、管理すべきアプリケーションのみを表示できるという点です。

なおご希望されるかたがいらっしゃるか不明ですが、弊社で使用しているものに少し手を加えたものをダウンロードできるようにしておりますので、ご興味ございましたらご使用ください。
設計も公開しておりますが、素人が作ったものと割り切ってご覧ください。

以上、何かのヒントになれば幸いです。

2017年3月6日月曜日

実践!! Cool で使いやすい Notes アプリデザイン講座

みなさま、こんにちは!!
先週金曜は、AMにユーザー情報交換会、PMには総会からNotes Festa + 懇親会といつもながら非常に濃いイベントに参加させて頂きました。

ユーザー情報交換会では、昨年に続き、【ノーツ お困りごと相談】ということでの報告を頂き、特に関心の高かった【検索】に関する講義も行って頂き、得るものが多いイベントとなりました。
Festaでは、先日の IBM Connect 2017 のフィードバック(1週間でここまでまとめていただき、ありがとうございました!!)があり、今年も熱い1年になりそうと感じた次第です。
最後には感謝状まで頂く次第。本来は弊社であり、また私自身がコンソに対して感謝すべきなのですが・・・。
本当にありがとうございました。
これら資料等については、一部については、会員限定サイトでの公開になるかもしれませんが、可能なものはオープンで閲覧できるようになるかもしれませんので、しばらくお待ちください。

次回は7月にユーザー情報交換会を秋田のT様で行う予定との事。
早速ダメもとで今朝ほど上層に相談しました。

私:また7月にユーザー情報交換会があるのですが、参加していいですか?ちょっと遠いんですけど。
上司:もちろん行ってきてください。
私:秋田なんですけど。
上司:とおっ。まあ、いいや。

という具合です。
今から楽しみです~。

さて本来ですと、今回はタイムレコーダーのテンプレート化を予定していたのですが、先に報告したい事項が発生しましたので、テンプレート化は次回とさせてください。

2月17日に東京にて開催されました【テクてく Lotus 技術者夜会】にて、林様より

もう Notes だからとは言わせない!!
Cool で使いやすい Notes アプリデザイン講座

をリモートで受講させて頂きました。
リモートとかいいつつ、林様が大阪で借りていただいたコワーキングスペースに押しかけ、実際にはこのセッションは現場で聞かせて頂くという幸せものです。

さてセッションの内容ですが、IBM Notes のデザインをいかにCoolに見せるかという非常に興味深いものでした。

そこで・・・
弊社で4月より運用開始する日報のデザインを、思い切ってセッション内容に準じたものにしてみました。

セッション資料は林様より Slideshare Docswell(2022/04/28更新)に公開頂いておりますので、こちらをご覧ください。


さて、まずはフォームのデザインです。
私のほうで作成したものは、できるだけノーツということを意識したデザインになっています。

旧デザイン


現在使用している日報デザインを踏襲し、色合いも合わせて作ってあります。

これが講義内容を適用すると・・・


とっても Cool です !!

全く内容は削っておりませんが、見た目がスマートになり、利用者の視線・視点の負担が減らせることになるのではないでしょうか。

続いてビューです。

従来のビュー(弊社のビューはほぼこの形)はフレームセットの左にメニューとしてアウトラインを埋め込んでいました。


ノーツを使い慣れている方でしたら、おなじみですね。

さてこれに講義内容を適用すると・・・


まるで別物!!

もちろんまったく自分の力量ではないのですが、イメージが変わります。
ユーザーにも見てもらい、比較してもらいましたが、感想は・・・

今風になったのでは?

と好評でした。

特にメニュー部分をナビゲータにすることで、従来よりも使いやすくなったようです。

今後のアプリの使い方にノウハウを活かして、少しでも自分の力量に加えられるよう努力致します。


なお本講義に参加できなかった方も多数いらっしゃるかと思います。

まだ予定ですが、ノーツコンソーシアムの2017年 第1回大阪研究会で同じ内容をご講義頂ける予定ですので、ご興味ある方はぜひご参加ください。

会員外の方でも、事務局にご連絡いただけましたら、見学が可能です。
遠慮なくメールしてみてください。


2017年2月27日月曜日

【第7回】タイムレコーダーアプリ作成~仕上げ~

皆様、こんにちは!!

いよいよ今週ですね。ノーツコンソーシアム FESTA 2017
ちなみに会員である弊社は、当日午前に開催されますユーザー情報交換会にも参加させて頂きます。
皆様とお会いできることが、今から楽しみでなりません!!

さて本題に戻ります。前々回で凡そのアプリケーションの形は仕上がりました。
今回は少し手を加えて、完成させたいと思います。


まずはトップページ【m_XpIndex】です。
タイムカードアプリということですが、現時点ではカレンダーや時計表示がありません。
正しくは右下に小さくクライアントの時計表示はありますが、実際にこちらを見て、打刻することはどうかと思います。

そこで、時計表示を埋め込みたいと思います。

個人的にはJSTを利用できればと思ったのですが、「大型文字表示」はiframeに対応しておらず、結局Javascriptのサンプル例を埋め込みました。

恐れ入りますが、Javascriptのサンプルについてはご自身でお好みのものをお探しください。

それでは設置手順です。
まずはm_XpIndexの先頭のラベルと出社・退社ボタンの中央あたりに、パネルコントロールを配置します。
※特パネルは必要ありませんが、手を加える際にわかりやすいよう設置しました。



続いてパネルを選択した状態で、ソースタブに切り替えます。

<xp:panel></xp:panel>というタグがハイライトされますので、その間にJavascriptのサンプルを貼り付けます。
※一部サンプルには、<head>タグ内にもスクリプトが必要なものがございます。今回は<body>タグ内にのみ記述するものとして記載しております。詳しくはサンプルの設置方法に従ってください。

設計タブに戻り、パネルを選択し、フォントサイズや色等のプロパティを設定します。

随時、m_XpIndexをプリビューしながら確認してください。

少しバランスが悪いですが、私の設定では、下記のように表示ができました。



次にアプリケーションのアイコンを変更してみましょう。

今回は下記のような画像を準備してみました。
もちろんお好きな画像をご準備いただければ構いませんが、32x32ピクセルのJPEGもしくはPNG、GIF、BMPファイルが利用可能です。


左メニューの【リソース】内の【アイコン】をダブルクリックしてください。



このような画面が開きます。
上半分は、準備した画像ファイルを読み込む方法。
下半分は、直接アイコンファイルを32x32のマスを利用し、下記のように編集するものになります。


それでは上半分を利用し、アイコンを変更します。

【参照...】ボタンをクリックし、準備した画像ファイルを呼び出してください。


以上でアイコンが切り替わりました。

もちろんノーツクライアントのアイコンも変更されています。


レイアウトやデザインはさておき、以上でアプリケーションとしては完成です。

次回はこのアプリケーションをテンプレート化する手順を紹介させて頂きます。

そのまま使っても構わないのですが、anonymousが使用できる権限を取得しているため、ファイル名を安易に推測できないものにすることで、少しでもリスクを減らそうというという意図もあります。


・・・そろそろ次のネタを探さなければ(汗

2017年2月13日月曜日

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

皆様、こんにちは!!
昨日はひさしぶりに神戸バレンタインラブランにて、たった3km走って筋肉痛と格闘中の筆者です。
少しずつ夜明けも早くなり、梅もほころびはじめ・・・。
春が待ち遠しい限りです~。

さて前回はカスタムコントロールを使用し、1部署のページを仕上げました。
今回は残りのカスタムコントロールを作り、XPageへの埋め込みを行います。

特に見ていただきたいのは、XPageの再利用によるカスタムコントロールの切り替え部分になります。

それでは早速ですが、前回作成したカスタムコントロール XcWork_1をコピーし、XcWork_2という名称に変更します。

XcWork_2をデザイナーで開き、まずはデータで関連付けられたフォームを変更します。

プロパティのデータタブを開いてください。



フォーム: のプルダウンを【出社_営業1部 - Work01】から【出社_営業2部 - Work02】に変更します。

続いて、先頭のラベルを【営業1部】から【営業2部】に変更します。

以降、各個人ボタンの設定は前回と同様です。

左のボタン
ラベル: 長○ 佑都
イベント1行目の値: 長○ 佑都
イベント3行目の確認テキスト: 長○ 佑都 様、おはようございます。

中央のボタン
3箇所の名前を内○ 篤人に変更

右のボタン
3箇所の名前を遠○ 保仁に変更

以上で完成です。


続いて退社のカスタムコントロールを作成します。

XcWork_1をコピーして、XcLeave_1と名称変更します。

そのままデザイナーで開いてください。

冒頭のラベルですが、現在は出社の色にあわせた青になっていますが、同じように退社にあわせた茶色にします(もちろん必須ではありません)。

続いて【戻る】ボタンのイベントが現在は出社ページに設定されていますので、退社ページに変更します。

開くページの名前: m_XpLeave

先と同様、カスタムコントロール(選択されていなければ、画面の背景部分もしくは左のアウトラインで選択)のデータタブにて、

フォーム: 退社_営業1部 - Leave01

に変更します。

各ボタンのイベントですが、それぞれ1ヶ所だけ変更します。

3行目 アクションの確認:○○ 様、お疲れさまでした。

以上で完成です。

同様にXcWork_2からXcLeave_2も作成してください。

以上で4つのカスタムコントロールが完成しました。


それでは本日のメインである、XPageの再利用について、説明致します。

m_XpWork_1をコピーし、新たにふたつのXPageを作成します。
それぞれ名称は

m_XpWork_2
m_XpLeave_1

とします。


まずはm_XpWork_2を開いてください。



中央のカスタムコントロール部分(もしくはアウトラインのXcWork_1)を選択し、ソースタブに移動します。

前回も見ていただきましたが、XPageのソースでは、カスタムコントロールの指定はたった1行、

<xc:XcWork_1></xc:XcWork_1>

で行われています。


すでに"ピン!"と来た方もいらっしゃると思いますが、このタグを

<xc:XcWork_2></xc:XcWork_2>

に変更し、設計タブに戻ってください。


カスタムコントロール部分が営業2部のXcWork_2に変更されていることがわかります。
(アウトライン部分も変更になっています)

以上で完了です。


続いて m_XpLeave_1です。
こちらは先頭の表内が「出社」となっており、背景も青になっていますので、「退社」・背景:茶色に変更します。

同じようにソースタブで<xc:XcWork_1></xc:XcWork_1>を

<xc:XcLeave_1></xc:XcLeave_1>

に変更します。



同様にm_XpLeave_1をコピーし、m_XpLeave_2を作成してください。

以上で各部署のカスタムコントロールとXPageが完成しました。

いかがですか?
簡単でしょ !

それでは最後に出社・退社のページからそれぞれの部署ページにリンクを作成します。

まずm_XpWorkを開いてください。

既に営業1部のボタンにはイベントが作成済ですので、営業2部のボタンにイベントを追加します。

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


続いてm_XpLeaveです。

営業1部ボタン
カテゴリ: 基本
アクション: ページを開く
開くページの名前: m_XpLeave_1

営業2部ボタン
カテゴリ: 基本
アクション: ページを開く
開くページの名前: m_XpLeave_2

それではすべて保存して閉じてください。

次に起動時の設定を行います。

左側のツリーから【アプリケーション構成】内、【アプリケーションのプロパティ】を開いてください。

2番目の起動タブに移動します。

右側にWeb ブラウザの起動という項目がありますので、

起動: 指定いたXPageを開く
XPage: m_XpIndex

とし、保存して閉じます。

これによりブラウザでnsfを直接指定した場合、m_XpIndexが開くようになりました。

それでは設計からプリビューせずに、ブラウザのアドレスを直接指定してみましょう。

作成された環境によってアドレスが異なりますが、私の環境ではDominoディレクトリ内のtestフォルダ内にtime-recorder.nsfという名称で作成しましたので、下記がURLになります。

http://ノーツサーバー名/test/time-recorder.nsf

こちらでトップページが開きます。

以降の動きは、下記をご覧ください。
最終にノーツビューへの表示確認まで行っております。



以上で大まかな部分が完成しました。

XPagesを使用すれば、意図的に少し直接タグを利用しましたが、プログラムレスでここまで表現できるんです。

次回はもう少し手を加えて完成させる予定です。

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部の出社及び両部署の退社までを作成予定です。