ビューの行に色をつける

みなさま、こんにちは。
今回の台風21号、なかなか大きな被害をもたらしてくれたようですが、皆様支障ございませんでしたでしょうか。
神戸は夜中3時ころまで、かなり強い風に見舞われ、寝不足で本日を迎えることになりました。
会社のあるポートアイランドは海上ということで、さらに強い風だったようで、樹木が折れて歩道をふさいでいたり、信号が全く違う方向を向いていたりと、復旧には少しかかりそうです。

さて余談が長くなりましたが、先日はビュー列にアイコンを表示する手順を掲載致しました。
今回はビューの行に色をつける機能について、記載致します。

今回は下記のような勤怠に関わるビューについて、内容によって色を分けてみたいと思います。

具体的には、

　遅刻・早退⇒　　文字列　
　直行・直帰⇒　　文字列　
　休暇等　　⇒　　文字列　

設定手順ですが、ビューの先頭に1列追加し、式で色を設定します。
列の列情報にある「色で値を表示」に、詳細タブで「列を非表示」にそれぞれチェックします。

色の指定はRGBの値で行い、以下のように文字色のみ変更する場合と、文字色と背景色の両方を変更する場合があります。

つまりRGBの値が3項目の場合は文字色のみ、6項目になると、前半3項目で背景色、後半3項目で文字色を設定します。

なお背景色のみの設定は不可能ですが、6項目を使い設定は可能です。

それでは実際に先のビューに組み込んでみましょう。
ビューの最初に1列追加し、色で値を表示」「列を非表示」にチェックしてください。

ひとつひとつの色をRGBで指定してもいいのですが、列を汎用的に使用するために、以下のように色の名称を設定します。

red := 255:0:0; blue := 0:0:255; yellow := 255:255:0; green := 0:255:65; white := 255:255:255; black :=  1:1:1; plain:= 0:0:0;

以上で主要な色を定義しました。

もし他の色を使われるようでしたら、同じように追加ください。

あとは列式を@ifで定義するだけです。

3条件をネストしますので、少し長くなりますが、先の定義に続き、下記のように記載してみました。

@If (@Contains(riyuu;"遅刻")|@Contains(riyuu;"早退");yellow:black;@if(@Contains(riyuu;"直");green:blue;@If(@Contains(riyuu;"休");red:yellow;plain)))

以上で先のビューをプリビューしてみましょう。

かなり派手ですね。アイコンもみにくくなってしまいました。

ということで、アイコン部分は色が設定されないようにしてみます。

このビューの場合、「終了日」と「承」の間に列を追加します。

先と同様、「色で値を表示」に、詳細タブで「列を非表示」にそれぞれチェックします。

式には、

255:255:255:255:255:255

と入力し、文字も背景色も「白」に設定します。

以上でプリビューすると、

このようにアイコン部分の背景が白になり、見やすくなります。

つまり色を設定したい列の前に「色で値を表示」設定した列を追加することで、それ以降の列の色が変化することがご理解頂けるかと思います。

これらの列はコピーして他のアプリケーションでも流用できますので、ひとつ作っておけば以降は簡単に設定できるはずです。

さてここからは先日とある方の記事を教えて頂いた内容を実践してみたいと思います。

先日のビューアイコンや、本日の行の色。

実はカレンダービューでも適用されるんです。

ということで、試してみましょう。

先のアプリケーションのカレンダービューは以下のようになっております。

設計は至って簡単で、下記のようになっております。

早速ですが、先に作成したビューの色設定を行った1列目をコピーし、カレンダービューの3列目(名前が表示されている列の前)に追加します。

少し色に違和感がありますね。

それではNotesでプリビューしてみましょう。

このように設定した色でカレンダーが表示されました。

次にビューアイコンを試してみましょう。

先の色設定列の前に1列追加し、「値をアイコン表示」にチェックします。

今回は休みの場合のみアイコンを表示するように、以下の式を設定してみました。

@If(@Contains(riyuu;"休");87;"")

早速ですが、プリビューしてみます。

少し見にくいですが、青丸内に病気っぽい顔アイコンが表示されました。

このように色やアイコンを使うことで、簡単にユーザーにわかりやすいアプリケーションにアップグレードすることが可能です。

弊社では特に注意しなければいけない行等に、背景：黒/文字：黄　といった超目立つ設定を施したものもあります。

もっとも今回は例ですので、もう少しやさしい色にしたほうがいいかと思いますが・・・

ぜひ1列追加して、さらに使いやすいアプリケーションに進化させてください。

ビューの列にアイコンを表示する

みなさま、こんにちは!
10月に入り、ノーツのイベントが盛りだくさんのようです。
ということで、簡単に宣伝を・・・

10月20日(金)【会員向：ユーザー会員限定】第 3 回ユーザー情報交換会
10月20日(金) テクてく Lotus 技術者夜会　ザ・コミュニティ編 10月
10月27日(金) ノーツコンソーシアム名古屋地区研究会(ユーザー情報交換会)
11月02日(木) ノーツコンソーシアム大阪研究会
11月15日(水) ノーツコンソーシアム　オープンセミナー
11月17日(金) ノーツ四国フェスタ(.NSF)

20日は本業の重要会議があるため、参加できませんが、それ以外には参加予定です。
もし現地でお目にかかる機会がございましたら、ぜひお声掛けください!!

さて・・・ネタが・・・・

ということで、今後配属されるであろう?
後輩のために、ちょっとした内容を掲載できればと考えております。

今回はビューの列にアイコンを表示させる方法についてです。
添付ファイルのついたメールにクリップアイコンが表示されますが、このような機能の設定手順になります。

設定できるアイコンは以下となります。
(ヘルプで「列アイコン」等で検索するとHitします)
初めて見る方には分かりにくいかと思いますが、行が1の位、列が10,100の位となる番号表になっております。
例えば先のメール添付ファイル用のアイコンは"5"、赤の上向き矢印は"101"となります。

それでは今回は下記フォームのような承認作業が発生するデータベースについて、承認状況をアイコン化してみます。

(以下では上段が総務担当者用、下段が承認者用のチェック欄になります。

チェックボックスがONになると、それぞれ「総務承認」「承認者承認」という値となるように設定してあります。)

以下のような作成日順のビューの末尾に承認状況をアイコンで表示してみます。

2列、末尾に追加します。

列幅は"2"くらいが見易いかと思います。

その左の列のタイトルに承認者を示す「承」、右側の列に総務を示す「総」と設定します。

列情報プロパティにて「値をアイコン表示」にチェックを行います。

次に「承」列の値ですが、「式」として、

@If(c_syonin="承認者承認";82;81)

と設定します。

同様に「総」列の値の式は、

@If(c_somu="総務承認";82;81)

となります。

ノーツでプリビューすると、以下のように承認されたものに　

未承認のものに　
が表示されるようになりました。

例えばフィールドの値ごとにアイコンを変化させたり等、さまざまな用途で利用可能な機能であり、見た目にもわかり易い表現が簡単に実現できますので、ぜひ有効にご使用ください。

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

みなさま、こんにちは!
週末は子供の運動会でした。結構多かったのではないでしょうか。
神戸はお天気に恵まれ、真っ黒に日焼けしてしまいました(汗

さて先週、フェイスブックで少し落ち込んだ記事が本日の記事です。
まったく消えてしまったので、今から再度作り直しなのですが、既にできあがったデータベースを使っての記事作成ですので、画像が思うように取れるのか?
至らぬ点はご容赦ください。

前回は日付順ビューをXPagesでWEB化しましたので、今回はメインフォームをWEB化して完成させたいと思います。

早速ですが、新規XPageで"m_mainForm"を作成します。
データとして、"メイン-main"フォームをバインドしておきます(デフォルトアクションは「文書を開く」)。

続いて全てのプロパティを開き、[データ]-[data]-[dominoDocument[0]]内の下記プロパティを変更します。

computeWithForm：both

このプロパティが従来のNotes開発者には非常に重要な項目かと思います。

要はフォームのフィールドに設定された式をXPageでも実行させるというものです。

onload、onsave及びその両方で実行させることが可能です。

本件、9月にフェイスブックで少し触れたのですが、できればXPagesワークショップのような初心者向けの講義や資料にはぜひ組み込んで頂きたいと感じます。

さて、それでは本題に戻ります。

フォームのデータがバインドされましたので、フィールドをドラッグ&ドロップして配置します。

※作成日・作成者・編集日・編集者の4項目は2回ずつ表示されておりますので、上側のみ配置します。

データバインドコントロールの選択ダイアログが表示されますので、以下のように設定してOKします。

Created/Createdby/Modified/Modifiedby : 計算結果フィールド Title : 編集ボックス Category1/Category2 : コンボボックス Body : リッチテキスト

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

計算結果の4項目は既にセットされた状態で開くことができたかと思います。

それでは標題の変更とフィールドの設定(余白等)を適宜変更してください。

私の環境では以下のようになりました。

次にカテゴリー項目の選択肢を設定します。

category1を選択してください。

コンボボックスの値を設定します。左から2番目のボタン「式項目の追加」をクリックしてください。

言語：JavaScript(サーバーサイド)を確認し、「動的に計算」として下記設定を行います。

@DbColumn(@DbName(), "byCategory1", 1)

同様にcategory2については、以下の式を設定します。

@DbColumn(@DbName(), "byCategory2", 1)

いずれもそれぞれのビューの1列目の値を選択肢として表示するというものになります。

プリビューすると、それぞれ設定ができていることが分かります。

次にアクション用のボタンを配置します。

まずは先頭にコンテナコントロールからパネルを配置します。

そのパネル内に3個のボタンを配置し、左からラベルを「戻る」「編集」「保存」とします。

「編集」ボタンの「可視」プロパティの右の◇をクリックし「値の計算」を選択します。

左のペインで「参照」を選択し、[currentDocument]から[isEditable():boodean]をダブルクリックします。

条件に設定値が入りますので、先頭に"!"を入力し、否定形とします(編集モードでない場合に表示させる)。

続いて「保存」ボタンの「可視」プロパティです。

先と同様[currentDocument]から[isEditable():boolean]をダブルクリックしますが、今回は否定しませんので、"!"は不要です(文書が編集時のみ表示させる)。

続いてそれぞれのイベントですが、下記のように設定します。

「戻る」ボタン

シンプルアクション 　基本/ページを開く/m_byDate

「編集」ボタン

シンプルアクション 　文書/文書モードの変更/編集モード

「保存」ボタン

シンプルアクション 　文書/文書の保存/document1 　基本/ページを開く/m_byDate

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

次に前回作成しましたXPage「m_byDate」から開く設定を行います。

m_byDateを開き、ビューの列「title」を選択します。

表示プロパティ内「列の値をリンクとして表示する」にチェックし、文書を開くモードは「読み取り専用」とします。

続いて新規作成ボタンです。

先ほどのフォームと同様、先頭にパネルコントロールを配置し、ボタンをひとつ追加し「新規作成」とします。

イベントとして、以下を設定します。

シンプルアクション 　基本/ページを開く/m_mainForm/新規文書

以上で完成です。

m_byDateをブラウザでプリビューし、さまざまな動作を確認してください。

なお現時点で、Notesクライアントとの大きな違いがひとつございます。

カテゴリについて、Notesクライアントでは複数選択や新規項目の追加が可能ですが、現状のXPageではそこまで踏み込んでおりませんので、ご了承ください。

なおここまでの内容について、こちらよりダウンロード可能ですので、ご自由にお使いください。

・・・申し訳ありません、アラがあるのは確認済ですので、お許しを(汗

基本機能に絞った掲示板について～その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を作成し、日付順ページから開くように設定します。