こんばんは

 

2018年、大雪やら低温注意報やらで身体を壊していませんか??

インフルエンザも流行っているようなので、健康には注意してくださいニコニコ

 

気温は寒いですが、こちらはとても熱かったですよ爆  笑

Domino2025 Online Forumが開催されました

お時間あるときに見てください!!

 

 

さて、今回は「ボタンやリンクをクリックして内容を表示したり非表示させたり・・・」とタイトルでは何のこっちゃわからない内容ですキョロキョロ

 

例えばですが・・・

 

上記の赤枠の部分をボタンやリンクをクリックしたら

表示/非表示するってものを作りたい時が、ごくたまーにあると思いますおねがい

 

筆者は、今までよくやっていたこととして

・フラグフィールドを設けて、そこの値によって表示/非表示を変える

とか

・フォーム内のフィールドの値が〇〇だったら表示/非表示を変える

とか

・divタグで囲んであげてdisplay:noneを流用する

とか

 

ほとんどこんな感じでやっていたと思います。

 

 

それで、ちょっと前に開発したときに気づいたんです・・・

 

XPagesなんだからScope変数使えるじゃんびっくり

しかも、Scope変数のほうが無駄なフラグとか考えなくて便利じゃんチュー

(やっちまった・・・)

 

ということで、

忘れっぽい自分自身のための備忘録として手順を書いていきたいと思います。

 

表示/非表示させたいコンテンツは赤枠で囲っている

「発送会社」と「伝票番号」とします。

 

 

1)対象のXPageを開いて、イベントタブ>ページ>beforePageLoadに以下のSSJSを入力します。

 

viewScope.put("変数名",false);

(ここでは"disp"としています)

 

 

2)表示/非表示に利用するパネルコントロールを2つ配置します。

 

 

3)両方のパネルコントロールに名前を付けます。

ここでは上段のパネルコントロールに「outPanel」、

下段のパネルコントロールに「inPanel」とつけています。

 

4)上段のパネルコントロール内にリンクコントロールを2つ配置します。

 

5)1つ目のリンクコントロール

ラベル:詳細表示

可視 :!viewScope.get("変数名")

 

イベントタブ>マウスのonclickに

viewScope.put("変数名",true)

部分更新を上段のパネルコントロールに指定します。

 

6)2つ目のリンクコントロール

ラベル:詳細非表示

可視 :viewScope.get("変数名")

 

イベントタブ>マウスのonclickに

viewScope.put("変数名",false)

部分更新を上段のパネルコントロールに指定します。

 

7)下段のパネルコントロール内に、表示/非表示させたいコンテンツを配置します。

表示/非表示させたいコンテンツを配置した下段のパネルコントロールを、

上段のパネルコントロール内に配置します。

 

下記イメージでいうと、赤枠を青いところへ配置します。

下段のパネルコントロールの可視に以下のSSJSを設定します。

viewScope.get("変数名")

 

 

8)XPageを保存してプレビューします。

 

詳細表示リンクをクリックすると・・・

隠していたコンテンツが表示されました爆  笑

詳細非表示リンクをクリックすると、最初の状態に戻りますグッ

 

とても簡単でしたねチョキ

 

リンクコントロールではなくボタンコントロールでも同じように使用することが出来ますので、

・ヘルプ表示用のボタンに活用

・作成者、最終更新者のプロフィール表示させる

など、活用シーンによっては便利に使用することが出来ると思いますウインク

 

では、今日はこの辺で・・・

 

あでゅーバイバイ

 

 

AD