ページビューの合計

2017年8月28日月曜日

簡単! @関数だけで、一次承認ワークフロー ~おまけ その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ヶ所のみスクリプトを記述しましたが、かなり簡単にモバイルのビューページが出来たのではないでしょうか。

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

0 件のコメント:

コメントを投稿