チョー #初心者 向け、 #XPages 開発手順～メインフォーム

みなさま、こんにちは！
いよいよ今週ですね、ノーツコンソーシアム FESTA 2018。
私は5分お時間を頂きましたので、大阪研究会の報告を行わせて頂きます。
その他、個人的には会員ユーザー向けの「ユーザー情報交換会」は非常に期待しています。
少し私も持ち合わせたものがありますので、理事の方と相談をと予定しています。

さて先日に続き、今回はフォームを表示するページを作りたいと思います。

早速ですが、新規XPageを作成してください。名称は以下としました。

ページが開きましたら、カスタムコントロール[titleBar]を先頭にドラッグ&ドロップします。
続いてその後ろに改行をふたつ入れておきます。

次にXPageにデータとして[mainForm]を定義します(デフォルトアクションは「文書を開く」にしてあります)。

データパレットにフィールドが表示されますので、すべて選択して先の2行目の改行の後ろにドラッグ&ドロップします。

データバインドコントロールが表示されますので、以下のような設定として[OK]してください。

※この選択ダイアログが開かない場合は、下記切り替えボタンをクリックし、[コントロールの選択]ダイアログボックス(使用可能)にしてください。

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

少し気になるところはありますが、無事ブラウザで表示させることができました。

それでは体裁は後で整えるとして、一旦前回のビューから今回のフォームを開く設定を行います。
XPageのxp_byDateを開いてください。

タイトルをクリックするとフォームページを開くようにしますので、ビューの列[Title]を選択し、表示タブ内[列の値をリンクとして表示する]にチェックし、開くモードは[読み取り専用]を選択します。

続いてイベントタブに移動し、onclick時のイベントを以下のように追加します。

以上でビューページからフォームベー時を開くことができるようになりましたので、一度ビューページをブラウザでプリビューしてみます。

タイトルがリンクになって表示されることが確認できます。
続いていずれかのタイトルをクリックすると、以下のようにxp_mainFormが表示されることを確認しておいてください。

xp_mainFormについては体裁が整えられておりませんので、先のxp_byDateに準じるようにデザイン等を修正してください。

取り急ぎ私の設定は以下のように致しました。

本日は以上とさせて頂きます。

次回はフォームの選択項目であるClass及びTagについて、ビューの値を参照する設定を行います。
またアプリケーションとして必要なボタンを配置し、完成させる予定ですので、引き続きよろしくお願い致します。

チョー #初心者 向け、 #XPages 開発手順～日付順ビュー

みなさま、こんにちは！

早速ですが、告知です！！
来週金曜はノーツコンソーシアム FESTA 2018が開催されます。
どなたでもご参加いただけるイベントです。ぜひ懇親会も含め、ご参加ください。
私もなんとか参加できることになりました。
皆様とお会いできることを楽しみにしております！


さて先日に続き、今回は日付順ビューをXPagesで実現してみます。
XPages開発に関するプロパティ設定については、お手数ですが

【第3回】タイムレコーダーアプリ作成～XPages作成の準備とトップページの作成～

をご覧ください。

まずは共通であるタイトル部分をカスタムコントロールで作成します。

[新規カスタムコントロール]をクリックして、カスタムコントロールを作成してください。名称等は自由ですが、私は以下のように作成しました。

作成し、画面が開きましたら、先頭にコンテナコントロール内より1行1列/幅に合わせる(100%幅)の[表]を追加します。

表の中にコアコントロールより[ラベル]を追加し、アプリケーションタイトル(今回はLink)とします。
表の背景やラベルの文字列については自由にデザインください。
私のほうでは以下としました。

以上で保存して閉じます。

続いて[新規XPage]をクリックし、XPageを作成します。
名前は[xp_byDate]としてください。

開きましたら、まずは先頭に先ほど作成しましたカスタムコントロールを配置します。

配置できましたら、カスタムコントロールの後ろに二つ、改行を入れておきます。

続いて二つ目の改行へコンテナコントロールから[表示]をドラッグ&ドロップします。

ビューのデータソースの選択ダイアログが開きますので、[日付順]を選択し、ビュー列はそのままで[OK]します。
できあがった[表示]の幅を100%に設定します。

続いて体裁を整えます。
内容としては、文字フォントやサイズ、余白、列幅など。
特に指定ありませんので、このあたりはお好みで変更してください。
但し枠線を設定しない場合、余白(内側)を大きめに設定されたほうが見易いかと思います。
以上で一度、ブラウザでプリビューしてみましょう。

サンプルデータが登録されていれば、以下のように表示されるかと思います。
私の画面では以下のようになりました。

少し短いですが、今回は以上とさせて頂きます。
次回はフォームのXPageを作成し、ビューとの接続を実施致します。

チョー #初心者 向け、#XPages 開発手順～準備編

みなさま、こんにちは。
先週に引き続き、インフルエンザが猛威をふるっておりますが、皆様体調くずされていませんか?
私は・・・多少風邪気味な山を乗り越え、至って元気です。
先週末はR様主催のNotes Festa 2018へ参加させて頂きました。
ここで詳しく書くことは控えさせて頂きますが、なかなかな内容で面白いものでした。
終了後、弊社2014年の更新に本当にご尽力頂けました方と確か2年ぶり?くらいの再会に、貴重な時間をすごさせていただくことができました。
M様、I様、ほんとうにありがとうございます。


さて今回からは新しいシリーズを書かせて頂きます。内容としては、とにかく簡単なアプリケーションを元に、XPages化する手順を数回に分けて記載したいと思います。
というのも、弊社内ではNotesアプリケーションをXPages化してWEBで閲覧可能にしてあるのですが、単に「閲覧」できるだけのものばかりで、実際にWEBアプリケーションと言えるものがありません。

そこでWEBブラウザだけで利用できるアプリケーションに挑戦したいと思います。
具体的には、ホームページリンクを集めるだけの簡単なデータベースを使ってXPages化し、編集や新規作成という機能を盛り込むことが目的になります。

早速ですが、新規のアプリケーションを作成します。
タイトルやファイル名は自由ですが、私は以下のように設定しました。
テンプレートは【-未入力-】のまま【OK】します。

続いてフォームです。
こちらも名前・別名とも指定はありませんが、私は以下のように作成しました。

フォームに作成するフィールドですが、以下5つとなります。

タイトル:　Title(テキスト・編集可能) 　分類:　Class(ダイアログリスト・編集可能) 　日付:　Date(日付/時刻・編集可能) 　URL:　URL(リッチテキスト・編集可能) 　タグ:　Tags(ダイアログリスト・編集可能)

WEBでの操作を前提とするため、レイアウト等については割愛させて頂きます。

続いてビューを作成します。
今回はリッチテキストフィールドである[URL]を除くすべてのフィールドを使用してビューを3つ作成します。(うち2つはダイアログリストでも利用します)

①日付順(byDate)

日付(降順・列のヘッダーをクリック時のソート[両方]) 　タイトル 　分類 　タグ

②分類別(byClass)

分類(昇順・カテゴリ別) 　日付(降順・列のヘッダーをクリック時のソート[両方]) 　タイトル 　タグ

③タグ別(byTags)

タグ(昇順・カテゴリ別) 　日付(降順・列のヘッダーをクリック時のソート[両方]) 　タイトル 　分類

以上でビューが完成しましたので、一旦【mainForm】に戻り、ダイアログリストの値を設定します。
分類、タグのいずれも「式で選択肢を設定」とし、

分類

@DbColumn("":"NoCache";"";"byClass";1)

タグ

@DbColumn("":"NoCache";"";"byTags";1)

として保存します。

以上で準備が完了しました。
サンプルデータを1つ以上、登録しておいてください。

次回はまずはXPagesで日付順のビューを作成したいと思います。

[ #XPages ]日付ピッカーについて

みなさま、こんにちは！
昨日投稿しようと思いつつ、寝てしまいました(汗

今回は先日の

[Form]がない！！
親文書全体を引き継いだセクションについて

に続く、ごくごく単純なトラブル報告・・・正しくは私の単純なミス・・・です。

XPagesで以下のような入力フォームを作成しておりました。

こちらをブラウザで表示すると

このように少し雰囲気が違います。
具体的には
・編集ボックス内がグレーになっている
・ピッカーボタンが表示されていない。

この編集ボックスをクリックすると、以下のような表示が現れました。

同じようなアプリケーションで以前作成したものは問題なく動いています。
たまたまフィールド名も同じであったため、編集ボックスをコピーしても変化がありません。

先日のXPagesQAに・・・とも思ったのですが、もう少し調べてからにしようとググってみると・・・それとなく「ん?　と思う文字が目に付きました。

モバイルテーマを使用して、編集ボックスで [日付/時刻ピッカーポップアップを使用] オプションを選択すると、壊れた機能しない Dojo ベースの Web 日付ピッカーが Web ページに表示されました。

こちらはIBM様のサイト

IBM Domino 9.0.1 Social Edition フィーチャーパック 8 の新機能

に含まれる一文になります。

つまりモバイルテーマを使用した場合の日付ピッカーは、フィーチャーバック８で改善されているとの事です。

私の環境はFP7ですので、今回の表示がぴったり当てはまることが判明しました。
・・・すいません、FPを上げなさいというご指摘は今回はご容赦を・・・

ただ！

本来モバイル向けのサイトを作成するつもりがなかったのです。
ということは・・・

やらかしておりました。

たて続けにモバイルコントロールを使用したアプリを作っていたため、XPages用モバイルテーマを設定してしまっていたのです。
また作成したXPageの名称にもしっかりプレフィックスである"m_"が付いてるではありませんか！！

なんて単純なミスなんでしょう。
思い込みや勢いで動いていてはダメですね。反省です。

こちらを外してブラウザで表示すると、

編集ボックスは白くなり、ピッカーボタンも表示されました。

もちろんピッカーをクリックすると

正しく表示されました。

今回も私の恥をさらすだけの記事になりましたが、もし同じ境遇に遭う方がいらっしゃれば・・・いないか(汗・・・と思い、掲載させて頂きました。

もちろん最善策は・・・「最新FPを使いましょう」

最後までありがとうございました。

[Form]がない！！

みなさま、こんにちは。
この寒さで鼻水が止まらず、集中力を欠いております(汗
今年も残すところ2週間。まだまだやり残していることは多いのですが、そろそろキリのいいものは切り捨てはじめてしまっております。

さて今回は私が遭遇しましたトラブルについて報告致します。
とは言っても、本当に単純なミスが原因だったのですが、解決までのスピードが非常に早かったという点をお知らせしたく、記載させて頂きます。

発端は現在の日報を来年度に向けて設計変更を実施している最中に発生しました。

変更内容は、従来日報のコメントは日報本体のフォーム内に記載する方式としており、都度未読文書が生じてしまうため、返答文書に移行するという作業になります。

フォームの修正と追加が完了し、テスト用の文書も作成したのですが、過去に作成した文書は問題ないのですが、本日作成した文書と修正した文書がビューからどんどん消えていくのです(大汗

ビューには[使用フォームにより検索]にて必要なフォームのみを対象としておりましたので、一度こちらを解除し、[Select @All]としてみたところ、もちろん全文書が表示されました。

ちなみに以下がビューの選択式でフォームを絞ったもの。

以下が[Select @All]のビュー

日付降順に並んでいるのですが、明らかに12/5の文書が表示されていないことはわかるかと思います。

最初に疑ったのは、ビューの選択式やビューの項目。
かなりいろいろと見て廻り、いろいろと試してみたのですが、原因らしき点に至ることができませんでした。
2～3時間ほど悩んだ挙句、実際の文書のプロパティを比較してみようと気付き、確認したところ、すぐに判明しました。

表示される文書には、以下のように[Form]プロパティがあり、値がセットされているのですが、

消える文書には[Form]プロパティがないのです！

つまりビューの選択式の評価の対象である[Form]プロパティがないため、ビューから消えるということが判明致しました。


では！？
なぜ[Form]がないのか。
また[Form]がないのに、文書や返答文書が予定した通りのフォームで開くのか。

全く経験のない私は、ツイッターでつぶやいてみました。

するとすぐにIBMチャンピオンであるM様よりコメントがあり、QAサイトの利用を教えて頂きました。
QAサイトは以下になります。

http://qa.xpages.jp/QA/qa.nsf/

私は勘違いしており、XPagesに関することのQAだと勝手に判断しておりました。
結論としては、Notes/Dominoに関する質問はOKなサイトになります。

実際こちらは何度か利用し、助けて頂いた経験がありました。

ということで早速書き込んだところ・・・。
30分もしないうちにふたつも回答が！！

まさに書かれている通りでした。

消える文書には[$Title]というプロパティが存在し、こちらにフォームの設定が格納されておりました。

つまりこの値により、予定したフォームで文書が開くということになります。

ではなぜ[Form]でなく[$Title]に移動してしまったのか。

これが完全に私のミスだったのです。
フォームのプロパティの[フォームに文書を格納]という項目にチェックが入ってしまっておりました。

恐らく何かの作業時に誤ってチェックが入ってしまったのでしょう。
この設定は大昔にR4.6の教育を受けた際、文書のサイズが大きくなるため、基本的に設定しないプロパティと教えて頂いたため、今まで使ったことがありませんでした。

まさかこんな影響が出るとは・・・。


ということでチェックを外し、文書を修正保存することで解決致しました。
もちろん新規文書も問題ありません。


なお[フォームに文書を格納]した場合でも、式でビューの選択式に書くことは可能ですので、勘違いなきようお願い致します。


以上、長々と私の汚点をさらけ出すだけの投稿となりましたが、今まで使用していなかった機能のプロパティを学ぶことができたのは大きな収穫でした。

さらに先のQAサイトの有効性を改めて教えて頂く機会にもなりました。
引き続きこちらのサイトはどんどん？使用させて頂くつもりですので、よろしくお願い致します。
ぜひ皆様もちょっとした疑問などもお気楽に書き込んでください。
・・・もちろん私ができる回答があれば、対応も致しますので。

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

みなさま、こんにちは!
9月も今週で終わりですね。朝夕かなり涼しくなって参りましたので、皆様体調管理にはご留意ください。

先週は東京で【IBM Notes Domino Day 2017】が開催されましたが、かなり盛況との事でした。
私も参加したかったのですが、どうしても本業の兼ね合いがあり、願いは届かず・・・。
今は11月に開催されますノーツコンソーシアムオープンセミナーに参加できるよう調整中です!!

皆様とお会いできる日を楽しみに、日々働いております。

さて先日まででNotesクライアントから利用できる掲示板を作成しましたが、標準テンプレートにはWEB機能も含まれております。
ということで、今回からはWEB画面を作成してみましょう。

XPages作成の初期設定については、お手数ですが過去記事をご参照ください。

それでは新規XPage「m_byDate」を作成します。

ひらいたXPageに、「日付順」ビューをバインドします。

[コントロールの選択]ダイアログボックスが使用可能になっていることを確認し、データパレットのすべての項目を選択し、設計内にドラッグ&ドロップします。

データバインドコントロールの選択ダイアログが開きますので、そのままOKします。

「表示」コントロールを選択し、以下幅を100%に設定します。

フォントのスタイル等は自由に設定してください。

続いてピュー列「title」を選択し、プロパティの「表示」タブ内「列の値をリンクとして表示する」にチェックし、開くモードを「読み取り専用」を選択します。

以上で保存し、ブラウザでプリビューしてみましょう。

見づらいですね。
少し体裁を整えてみましょう。

まずは列タイトルです。

Created　⇒　作成日 Title　⇒　タイトル

に変更します。

続いて全てのビューの列を選択し、左余白(内側)を設定します。
私は3ピクセルとしました。

次に全てのビュー列のヘッダーを選択し、背景を設定します。

私は薄い青としました。

最後に列の幅を設定します。

作成日：10% 作成者：10% カテゴリ1：15% カテゴリ2：15% タイトル：50%

以上で再度ブラウザでプリビューしてみましょう。

かなり見やすくなりましたね。
※私はページャーも変更してみました。ページャを選択すると、サンプル1～7がありますので、お好きなものを選んでください。

以上で日付順ビューのページが整って参りました。

次回はフォームのXPageを作成し、日付順ページから開くように設定します。

簡単! @関数だけで、一次承認ワークフロー ～おまけ その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」をバインドします。

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

いかがでしたか?

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

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

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