基本機能に絞った掲示板について～その1

みなさん、こんにちは!
先週金曜は、IBMチャンピオンである小野様を招待し、大阪研究会はたいへん盛り上がりました。会員の皆様へは、近日議事録が発表されるかと思いますので、お待ちください。
さて今週もイベントは続きます。
金曜にはテクてくLotus技術者夜会が開催されます。
今回はテクてくカフェの開催だそうです。
私自身、初参加ですので、今から楽しみです～。

最近、つくづくブログでの情報発信の難しさ、自分の文才のなさに躓いております。
ただ何もせずにいても成長しませんので、「継続は力なり」ということで引き続きよろしくお願い致します。


さて今回からは新シリーズをスタート致します。
恐らく掲示板はディスカッションテンプレートを使用されているユーザー様が多いのかと推測します。
弊社も過去に記載したように、ディスカッションテンプレートを少しカスタマイズして利用しているアプリケーションが多数存在します。

もちろんディスカッションテンプレートは非常に優秀なテンプレートではありますが、ノーツ初心者が少し手を加えたい等の場合、設計要素が多く、場合によっては影響範囲も考慮する必要があるため、少しハードルが高いのも事実かと思います。

そこで今回は単純な掲示板を作成し、先々、発展したアプリケーションに改築しやすいものを作ってみたいと思います。

それでは新規でアプリケーションを作成します。
テンプレートは使用しません。
参考までに私の設定内容は下記としました。

続いて新規フォームを作成します。
私は「メイン|main」としました。

続いてフィールドを追加します。
掲示板で必要な内容として、今回は以下を設定します。

タイトル：title(テキスト/編集可能) 　　　　　入力必須設定として、以下の式を「入力の確認」に設定 　　　　　　@If(title="";@Failure("［タイトル］の指定は必須です。");@Success) カテゴリ1：category1(テキスト/編集可能) カテゴリ2：category2(テキスト/編集可能) 内容：body(リッチテキスト/編集可能)

※カテゴリは後にダイアログリストに変更しますが、まずはテキストとして作成します。

デザインや体裁はお好みで修正してください。
私の例は下記のようになりました。

次にフォームのウィンドウタイトルに以下の式を設定します。

@If(@IsNewDoc;"新規掲示作成中";title)

以上で一度Notesでプリビューしてみましょう。

私の例では以下のようになりました。
※ウィンドウタイトルが正しく表示されるか、確認ください。

続いてサブフォームをひとつ作成します。
フィールドは以下4つになります。

登録日：created(日付/時刻、作成時の計算結果)       式：@Created 登録者：createdby(作成者、作成時の計算結果、日付のみ表示) 　　式：@Name([CN];@UserName(1))・・・※ 編集日：modified(日付/時刻、計算結果、日付のみ表示) 　　式：@Modified 編集者：modifiedby(名前、計算結果) 　　式：@Name([CN];@UserName(1))・・・※

※別名(当社では日本語名)を使用するため、@UserName関数に(1)を設定しています。
以上でプリビューしてみます。

問題なく表示できましたら、テスト用に2～3文書作成し、閉じてください。
続いてビューを作成します。
作成するビューは4種類
●日付順
●作成者別
●カテゴリ1別
●カテゴリ2別

まずは日付順(日付順/byDate)です。

列の設定は、

作成日(created)/降順/日付のみ表示 作成者(createdby) カテゴリ1(category1) カテゴリ2(category2) タイトル(title)/詳細タブにて「利用可能なウィンドウ幅まで拡張して使用する」にチェック

プリビューすると下記のように表示されるはずです。

このビューをコピーし、以下3つのビューを作成します。
●作成者別|byCreatedby
●カテゴリ1別|byCategory1
●カテゴリ2別|byCategory2

デザイナー上では下記のように表示されるはずです。

次に作成者別ビューを開きます。

2列目の作成者を先頭へドラッグアンドドロップし、1列目にくるように移動させます。
続いて作成者列を選択し、以下設定を行います。

幅：1 展開できる行に参画アイコンを表示する：チェック ソート：昇順 種類：カテゴリ別

プリビューすると以下のように表示されます。

同様にカテゴリ1別では「カテゴリ1」の行、カテゴリ2別では「カテゴリ2」の列を先頭に移動し、作成者別と同じプロパティを設定します。

今回の最後に、アクションを追加します。
共有アクションとして、以下を作成します。

新規作成　式：@Command([Compose];"main") 終了　式：@Command([FileCloseWindow]) 編集　式：@Command([EditDocument]) 削除　シンプルアクション：データベースから削除 印刷　式：@Command([EditDocument]) 戻る　式：@Command([FileCloseWindow]) 保存　式：@Command([FileSave]); 　　　　　@Command([FileCloseWindow])

※編集：プリビュー(編集モード)、編集モード時は非表示
※戻る：プリビュー(読み込み)、読み込みモード時は非表示

各ビューに「終了」「新規作成」「印刷」「編集」「削除」を。
フォームに「戻る」「編集」「印刷」「保存」「削除」を追加します。

アクションバーのプロパティ等、デザインはお好みで修正ください。

以上で見た目は以下のようになりました。

次回はカテゴリをダイアログリスト化し、過去の履歴から選択できるようにし、ナビゲーター等でアプリケーションを整えたいと思います。

簡単! @関数だけで、一次承認ワークフロー ～おまけ その2

みなさま、こんにちは!
第三回大阪研究会、いよいよ今週末に迫りました。
今からチャンピオンの方のお話しが聞けるのが楽しみでなりません。
小耳に挟んだ情報では、Notesユーザーが知っておくべき事例などもお話し頂けるとか。
興味津々です。
もちろんご参加はまだまだ間に合いますので、ぜひお時間作ってご参加ください!
お申し込み、お問い合わせは事務局まで。

さて前回よりモバイルコントロールを使用したスマホ向け画面を作成しております。
今回はビューに続き、フォームページを追加してみますので、前回作成したXPage「m_mobile」を開いてください。

通常のWEBページと違い、モバイル用のページは「単一ページアプリケーション」内に複数の「アプリケーションページ」を追加します。
なおチュートリアルでは新規作成等も可能な手順が記載されておりますが、本掲載ではできるだけ簡素化するため、新規作成の機能は省いております。

前回作成したビューのアプリケーションページの右側へ、あらたな「アプリケーションページ」を配置します。

必ずアウトラインで、viewpageと同じ階層にあるか、確認しておいてください。

続いて配置アプリケーションページの「すべてのプロパティ」にて以下を設定します。

id : documentpage pageName : documentpage resetContent : true (Open時にページを更新)

続いて前回作成したビューから今回のアプリケーションページを開く設定を行います。
「データビュー」コントロールの「すべてのプロパティ」を開き、基本内下記設定を行います。

pageName : documentpage

次に、新たに追加したアプリケーションページのファセットに「ページ見出し」を追加し、「すべてのプロパティ」の基本内にて以下設定を行います。

back : 戻る label : ワークフロー moveTo : viewpage transition : slide

以上でプリビューすると、下記のように表示されます。
ビューページには各行の右端に>、
行をタップすると、フォームページが開き、上部の「戻る」ボタンでビューページに戻ります。

　

続いてフォームページの内容を追加して参ります。

アプリケーションページ(documentpage)のページ見出しの右横に「コンテナコントロール」から「パネル」を配置します。

追加したパネルにフォームをバインドします。
「パネル」のプロパティにて、「データ」を選択し、データソースの追加をクリックし、「Domino文書」を選択します。

データソースに「document1」が追加されますので、下記設定を行います。

フォーム : フロー - Flow デフォルトアクション : 文書を開く フォーム検証の実行 : 文書ロード時 (デフォルト値等を有効にする)

続いてパネル内に「拡張ライブラリ」から「フォームテーブル」を配置します。
またフォームテーブル内のファセットに、「フォームレイアウト行」を配置します。

フォームレイアウト行の「すべてのプロパティ」を開き、下記設定を行います。

label : ステータス

次に「コアコントロール」より「編集ボックス」をフォームレイアウト行のファセットに配置します。

計算結果フィールドの「値」プロパティを開き、バインド先を「Status」に変更します。
フォントタブにて表示が変更可能です。
※私の例では、フォント : メイリオ、サイズ : 14、色 : オレンジとしました。

プリビューすると、以下のようになります。

次に、届出内容を追加します。
先に配置したフォームレイアウト行の右に、さらに「フォームレイアウト行」を配置し、label を「内容」とします。
アウトラインは下記のようになります。

「コアコントロール」から「編集ボックス」をファセットに配置し、データを「Title」にバインドします。

さらに「フォームレイアウト行」を追加し、label を「申請者」とします。

「コアコントロール」より「編集ボックス」をファセットに配置し、データを「Dsp_Applier」にバインドします。

同様に「フォームレイアウト行」を追加し、label を「承認者」とします。

「コアコントロール」より「編集ボックス」をファセットに配置し、データを「Sendto」にバインドします。

引き続き「フォームレイアウト行」を3行追加し、それぞれlabel を「開始日」「終了日」「事由」とします。

それぞれのファセットに「編集ボックス」を配置し、「Start」「End」「Reason」をバインドします。

以上でプリビューすると、以下のように表示されます。

いかがでしたか?

それほど難しい作業をすることなく、スマホ用の画面が出来ました。

先にも書きましたが、今回の一連の記事はできるだけ簡単な作業でアプリケーションをスマホで表示できることを紹介することを主眼におきましたので、一旦こちらで完了致します。

できましたら皆様には先にご紹介したチュートリアルに従い、サンプルワークフローを完成してみることを強くお勧め致します。

簡単! @関数だけで、一次承認ワークフロー ～おまけ その1

みなさま、こんにちは!
神戸は昨日、一昨日と少し涼しくなりましたが、まだまだ残暑は続くようです(汗

さてひとつ宣伝です。
来週8日(金曜)に、ノーツコンソーシアム　第三回大阪研究会が開催されます。
詳しくは上記リンク先をご確認ください。
今回は東京からIBMチャンピオンを招待してのセッションも予定されておりますので、ぜひこのチャンスをお見逃しなく!!
また会員外の方でも見学が可能です。
コンソーシアム事務局へご連絡ください。

さて、前回まででスクリプトを使用せず、ノーツクライアントおよびWeb画面でのアプリケーションの作成をご紹介しましたが、弊社ではXpagesモバイルコントロールを使用した、スマホ向けの画面をよく使用しておりますので、今回からはそちらをご紹介させて頂きます。

現在までのページをiPhoneで表示した場合、以下のような画面になります。

こちらを「NotesワークフローアプリケーションをXPagesでモバイル化するチュートリアル」に従い、モバイルコントロールでリメイクしてみましょう。

お手数ですが、「概要」・「準備」・「設定」については、上記チュートリアルに従ってください。

それではモバイル用のXPageを作成します。「新規XPageの作成」をクリックし、以下の設定を行いOKをクリックします。

名前： m_mobile

開いたページに、コントロールの「モバイル」から、「単一ページアプリケーション」をドラッグ&ドロップします。

続いて、「アプリケーションページ」を先の単一ページアプリケーションのファセット(緑の●)に配置します。

アプリケーションページの「すべてのプロパティ」を開き、以下設定を行います。

id : viewpage pageName: viewpage

次に単一ページアプリケーションの「すべてのプロパティ」を開き、以下設定を行います。

selectedPageName : viewpage

続いて、コントロールより「ページ見出し」をアプリケーションページのファセットに配置します。
※チュートリアルでは、単一ページアプリケーションのファセットと記載されていますが、正しくはアプリケーションページのファセットになります。

続いてページ見出しの「すべてのプロパティ」を以下のように設定します。

label : 一覧

それではブラウザ起動時の設定を以下に変更し、iPhoneでプリビューしてみましょう。
URLは、http://サーバー名/(ディレクトリ名/)ファイル名になります。

XPage: m_mobile

正しく設定できていれば、以下のように表示されるはずです。

続きまして日付順のビューを追加します。

「拡張ライブラリ」から「データビュー」を選択し、先のページ見出しの右横に配置します。

データビューのデータソースの選択ダイアログが開きますので、以下設定しOKします。

ビュー : 申請日順 - byDate

アウトラインで「ページ見出し」と「デービュー」が同じ階層にあることを確認します。

続いてビューとして表示する内容を設定します。
チュートリアルではカテゴリ別ビューを作成してありますが、今回は日付順のビューを作成します。

データビューの「すべてのプロパティ」を開き、「形式」内「summaryColumn」を選択すると「+」が表示されますので、こちらをクリックし、以下設定を行います。

columnName : created

同様に「extraColumns」を選択し、「+」をクリックし、以下設定を行います。

columnName : Dsp_Applier

続いて出来上がった「viewExraCulumn[0]」の右に表示される「+」をクリックし、列を追加します。
新たに「viewExraCulumn[0]」が追加され、先のデータは「viewExraCulumn[1]」に格納されます。

「viewExraCulumn[0]」に以下設定を行います。

columnName : Title

以上の設定にて、iPhoneのプリビューでは以下のように表示されます。

それらしくなってきましたね。
それでは少し各行のスタイルを変更してみましょう。
まず日付のフォントサイズです。
「summaryColumn」の項目を開き、「style」項目をクリックすると、下記のようなスタイルエディタが表示されますので、こちらをクリックします。

開いたスタイルエディタの「フォント」タブにて以下設定します。
※特に指定ではありませんので、お好みで変更してください。

フォント : メイリオ サイズ : 14 色: 濃いグレー

同様に「extraColumns」内、ふたつの「viewExtraColumn」についても「style」を変更します。
私の例では、以下のような設定しました。

viewExtraColumn[0]

フォント : メイリオ 色 : 濃い青

viewExtraColumn[0]

フォント : メイリオ サイズ : 12 色: 濃いグレー

以上でプレビューすると、下記のように変化します。

style の設定は、ぜひいろいろと触ってみてください。

さて少し長くなりますが、もう少し続けます。

続いてビューページを初期値として4行表示し、「さらに表示・・・」をタップするごとに4行表示するページャーを追加します。

まず初期値の設定です。

データビューを選択し、「すべてのプロパティ」、「データ」内に以下設定を加えます。

rows : 4

次に「さらに表示・・・」ボタンを追加します。
「コアコントロール」内の「リンク」を「pagerBottom」というファセットへ配置します。

「リンク」の「すべてのプロパティ」を開き、「基本」内へ下記設定を行います。
※チュートリアルの画像では「value」となっていますが、「text」が正解です。

text : さらに表示・・・

次にリンクの設定を行いますが、たいへん申し訳ありませんが、本来の目的である「@関数だけ」では実現できないため、スクリプトを使用致します。
先と同じ「基本」タブ内「rendered」を選択し、右側の◆アイコンから「値の計算」をクリックします。

スクリプトエディタが起動しますので、以下スクリプトを入力もしくはコピペしてください。
スクリプトの意味としては、ビューの行数が4行以上の場合に表示させるというものです。

var dv = getComponent("dataView1"); if(dv.getRowCount() > 4)  return true; else  return false;

続いて「リンク」がタップされた際のイベントを追加します。
「リンク」を選択した状態で、「イベント」タブをクリックします。
次に「クライアント」タブを選択し、「アクションの追加」をクリックします。

「シンプルアクションの追加」ダイアログが表示されますので、以下設定を行います。

アクション : 行をデータイテレータに追加する disableId : link1 (・・・追加する行がない場合、「リンク」を非表示) for : davaView1 (対象となるビュー) rowCound : 4 (追加する行数)

以上、iPhoneでプリビューすると、初期画面は以下となります。

「さらに表示・・・」をタップすると、4行追加されます。

以上、今回は1ヶ所のみスクリプトを記述しましたが、かなり簡単にモバイルのビューページが出来たのではないでしょうか。

次回はフォームのページを追加し、ビューとフォームを接続致します。

簡単! @関数だけで、一次承認ワークフロー ～その7

みなさま、こんにちは!
関西は暑い日が続いております。
昨日、子供の小学校の掃除(小川、池の掃除と、周辺の草むしり)に参加したのですが、がんばりすぎたのか、過去に経験したことのない場所の筋肉痛で苦しんでおります。
まあ、1日で出たのが気分的には救いです(汗
ただ、関東方面は雨がちだそうで、昨日もかなりの雷雨とか(驚
皆様、くれぐれも天候にはご注意ください。

さて余談が長くなりましたが、前回まででとりあえずブラウザで見ることができるようになりましたが、ワークフローという性質上、承認判断が生じます。
ということで、ブラウザで承認もしくは却下ができるように組み込んでみます。

ちなみにここから先は私自身、未体験の作業を行いながらの掲載になりますので、正しくない手順を書いてしまうかもしれません。加えて今回の目的である【@関数だけ】というキーワードに従うため、実際の運用に耐え難い設定などもございます。ぜひXPages素人が作成した記事ということで、何とぞお許しください。


まずはカスタムコントロール【formFlow】にステータスを表示させます。

formFlowを開き、先頭に改行を3っつ入れます。

まん中の行にデータタブから【Status】をドラッグ&ドロップし、「編集ボックス」として追加します。

体裁を整えて、一旦保存し、m_Flowをプリビューしてみましょう。

問題なく表示されました。

続いてボタンは前回作成しましたheaderカスタムコントロールの中に作成します。

承認と却下のボタンを作りますが、その前にフォームのデータを扱うため、データソースとして【Flow】をdocument1としてバインドします。

次に既に作成済の【戻る】ボタンの右にさらにふたつ、ボタンコントロールを配置し、ラベルをそれぞれ、【承認】と【却下】にします。

それでは【承認】のイベントを設定します。

カテゴリ：文書 アクション：フィールドの変更 フィールド名：Status 値：2.承認済 データソース名：document1

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

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

続いて却下ボタンです。

カテゴリ：文書 アクション：フィールドの変更 フィールド名：Status 値：3.却下 データソース名：document1

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

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

それぞれStatusを【2.承認済】or 【3.却下】に変更し、保存してm_byDateを開くというものです。

それではm_byDateをブラウザでプリビューし、既存文書を開いてみましょう。

【承認】【却下】ボタンを押し、ステータスが変化するかも確認してください。

今回は@関数だけというキーワードでスタートしましたが、少しだけXPagesを加えてみました。

Notesクライアント画面でも、例えばフォームのダブルクリック時の制御等、本来のアプリケーションとしては不十分なものであります。

XPagesについては、他のビューも必要ですし、アクションボタンの非表示式も書いていません。特にNotesクライアント時には実装したSignフィールドへの値入力や、アクション時のメール送信もできていません。

加えて今回の内容に関しては、根本的にはカスタムコントロールを使わず、直接XPageを作成すべきであったと反省もしております。

私自身、まだまだ初級者ですが、それなりに社内で利用できるアプリはなんとか組み上げられるという点のみ、ご理解頂けましたら今回の目的は達成できたのかなと考えております。

不十分な点が多々ありますことについては、何とぞご容赦ください。

引き続き学習し、できるだけ簡潔な改善が実現できましたら、改めて記載させて頂きます。

簡単! @関数だけで、一次承認ワークフロー ～その6

みなさま、こんにちは!
台風5号がまもなく近畿に上陸しそうです。
少し南の進路を進んでいるため、神戸は直撃はなさそうですが、暴風域には間違いなく入りそうです。
ポートアイランドという地区がら、20時前の満潮も気になりますので、しっかり準備して望みたいと思います。

さて「早く帰れ」と言われそうですが、立場上確認した上でしか帰れないので、掲載させて頂きます。

せっかく前回まででブラウザでとりあえず「見る」ことができるようになりましたので、今回は少し体裁を整えてみます。

まずは申請日順のページです。
前回の状況では、以下のようにとてもわかりにくいビューとなっております。

それではカスタムコントロール【byDate】を開いてください。

まずは一番気になる、ビュー列のタイトル【Dsp_applier】を「申請者」に書き換えます。

列幅を整えます。
各ビュー列のヘッダーの幅をお好みに合わせて、修正してください。

それでは一度、ブラウザでm_byDateをプリビューしてみましょう。

少し承認者のデータが悪いのですが、これだけでもかなりすっきりしたかと思います。

フォントや、余白を工夫すると下記のようになります。

続いてフローのフォームページを変更してみます。
カスタムコントロール【formFlow】を開いてください。

現在のブラウザ画面は以下となります。

まずは項目名を修正しましょう。

Title　⇒　申請内容 Dsp_applier　⇒　申請者 Sendto　⇒　承認者 Start　⇒　開始日 End　⇒　終了日 Term　⇒　期間 Reason　⇒　事由 Sign　⇒　決済者

なお、Applierについては、ラベルと編集ボックス両方の可視を外します。

続いて列幅を整えます。
1行目のセルを選択して設定するのですが、特に右のセルが選択しにくいため、左のアウトラインを利用すると簡単に選択できます。

フォント等を整え、ブラウザでプリビューしてみましょう。

まだまだ改善の余地はありますが、最初よりは見やすくなりましたね。

次にフローページ上部にボタンを表示するカスタムコントロールを作成します。

名前：header

まず1行1列、幅100%の表を配置します。
その中に【ワークフロー】と入力し、体裁を整えます。

続いてheaderカスタムコントロールに「戻る」ボタンを付けておきます。

先の表の下にコンテナコントロールから【パネル】を追加します。
パネル内にコアコントロールから【ボタン】を追加し、ラベルを【戻る】とします。

イベントタブに移動し、アクションの追加をクリックします。

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

以上で保存し、m_Flow開きます。
formFlowカスタムコントロールの上にheaderカスタムコントロールを設置します。

それではm_byDateをブラウザでプリビューし、申請者名のリンクをクリックしてみてください。

このように【戻る】ボタンが表示され、クリックすることでm_byDateに戻るようになりました。

以上、デザイン的にもまだまだ改善すべき点は多いのですが、今回もプログラムを書くことなくページを改善したという点をご理解頂けましたら幸いです。

長文にお付き合い、ありがとうございました。