今回のゴール
左ナビゲーションを作成し、ビューを切り替える機能を実装します。
XPageのページ名からアクティブなメニューを決定し、JavaScriptを使って色を変更します。
【完成イメージ】
左ナビゲーション用カスタムコントロールを作成する
|
1 |
【左ナビゲーション用カスタムコントロールを作成する】 カスタムコントロールをクリックし、 「新規カスタムコントロール」 ボタンをクリックする。 |
 |
||||||||||||||
|
2 |
カスタムコントロールに名前をつけ、OKボタンをクリックする。
|
 |
||||||||||||||
|
3 |
ソースタブを開き、<xp:view>タグの内側にナビゲーション用のHTMLタグを追加する。 ソースは、【左ナビゲーションひな形HTML】を参照。 |
 |
||||||||||||||
|
4 |
【メニュー名、開くXPageを指定する】 赤字部分に作成したXPage名を指定する。
【解説】 |
 |
【左ナビゲーションひな形HTML】
<nav id="sidebar" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
<div class="position-sticky">
<ul class="nav flex-column">
<li class="nav-item">
<a class="nav-link" aria-current="page" href="menu1.xsp" id="menu1">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-justify">
<line x1="21" y1="10" x2="3" y2="10"></line>
<line x1="21" y1="6" x2="3" y2="6"></line>
<line x1="21" y1="14" x2="3" y2="14"></line>
<line x1="21" y1="18" x2="3" y2="18"></line>
</svg>
<span class="ms-2">Menu1</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" aria-current="page" href="menu2.xsp" id="menu2">
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#666" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-align-justify">
<line x1="21" y1="10" x2="3" y2="10"></line>
<line x1="21" y1="6" x2="3" y2="6"></line>
<line x1="21" y1="14" x2="3" y2="14"></line>
<line x1="21" y1="18" x2="3" y2="18"></line>
</svg>
<span class="ms-2">Menu2</span>
</a>
</li>
</ul>
</div>
</nav>
ビュー用XPageに左ナビゲーション用カスタムコントロールを組み込む
|
1 |
作成したXPage(subjectsort_vw)を開き、左メニューのコントロールタブから、 カスタムコントロール「ccLeftNavigation」コントロール を、<div>Left Navigation</div>の下にドロップする。 |
|
|
2 |
【ガイド用の文字を削除する】 ガイド用文字「<div>Left Navigation</div>」を削除し、XPageを保存する。 |
 |
|
3 |
ブラウザでプレビューし、表示内容を確認する。 |
 |
|
4 |
同じ変更を 最終更新日XPage(modifiedsort_vw) にも行う。 ※カスタムコントロールのタグをコピーペーストした場合、右図のようにDesignerがエラーを出す場合があるので、この場合は一旦タグを削除し、左メニューのコントロールタブからカスタムコントロールをドラッグ＆ドロップする。 |
 |
|
5 |
ブラウザでプレビューし、左ナビゲーションでXPageが切り替えできることを確認する。 |
 |
開いているXPage名から現在選択中のナビゲーションに色をつける
| 1 | 【左ナビゲーションのアクティブ化を行うJavaScriptを定義する】 コード＞スクリプトライブラリを選択し、 「新規スクリプトライブラリ」 ボタンをクリックする。 |
 |
||||||||||||||||
| 2 | スクリプトライブラリに名前をつけ、OKボタンをクリックする。
※拡張子は自動的に追加されるため、名前には拡張子をつけない 【解説】 スクリプトライブラリの名前は一見して言語がわかるように下記のように設定すると管理がしやすくなります。
先頭文字の後ろは呼び出しているXPage名にすると、画面ごとの入力チェックなどをスクリプトライブラリにした場合、わかりやすくなります。 |
 |
||||||||||||||||
| 3 | URLパスからXPage名を取得し、ナビゲーションの色を変えるJavaScriptを記述する。 ソースは、【左ナビゲーション用CSJS】を参照。
|
 |
||||||||||||||||
| 4 | 【定義したJavaScriptをカスタムコントロールから呼び出す】 カスタムコントロールを選択し、カスタムコントロール 「ccLeftNavigation」を開く。 |
 |
||||||||||||||||
| 5 | プロパティ＞リソースを選択し、追加ボタンをクリックする。 JavaScriptライブラリを選択する。 |
 |
||||||||||||||||
| 6 | 呼び出すスクリプトライブラリ「csjsCcleftnavigation」を選択し、OKボタンをクリックする。 |  |
||||||||||||||||
| 7 | イベント＞onClientLoadイベントをクリックする。 |  |
||||||||||||||||
| 8 | クライアントタブをクリックし、スクリプトエディタを選択する。 スクリプトエディタには、左ナビゲーションのアクティブ化を行うJavaScript関数を指定する。 ソースは、【左ナビゲーションアクティブ化JavaScript】を参照。 |
 |
||||||||||||||||
| 9 | ブラウザでプレビューし、表示内容を確認する。 下記の点を確認する。
|
 |
【左ナビゲーション用CSJS】
/* set active left navigation(Url) */
function onLoad_SetActiveMenuUrl(){
//get pagename
var path = location.pathname;
var pathlist = path.split("/");
var pagename = pathlist[pathlist.length-1];
var pageid = pagename.split(".")[0];
//urlparam check (urlparam = form xpage)
var urlParam = location.search;
if(urlParam!=""){
return;
}
//remove now activeClass
var activeNow = document.getElementById("sidebar").querySelector(".nav-item a");
if(activeNow != null){
activeNow.classList.remove("active");
}
//add new activeClass
var activeMenu = document.getElementById(pageid);
if(activeMenu != null){
activeMenu.classList.add("active");
}
//collapse show
var collapseMenu = activeMenu.closest(".flex-column .collapse");
if(collapseMenu != null){
collapseMenu.classList.add("show");
}
}【左ナビゲーションアクティブ化JavaScript】
onLoad_SetActiveMenuUrl()
左ナビゲーションのSVGアイコンを変更する
| 1 | 左ナビゲーションのメニュー名の左に表示しているアイコンは、フリーのSVGアイコンを利用している。 |
|
| 2 | feathericonsのホームページを表示する。 https://feathericons.com/ 右のメニューで
を指定することができる。 |
|
| 3 | 右メニューのColorに「#666」を指定し、「Activity」アイコンをクリックする。 |
|
| 4 | 拡張子svgのアイコンファイルがダウンロードされるので、VSCodeなどのエディタを使用して、ファイルを開き、内容をコピーする。 |  |
| 5 | カスタムコントロールを選択し、カスタムコントロール 「ccLeftNavigation」を開く。 |
 |
| 6 | <svg></svg>タグを選択し、コピーしたsvgアイコンのテキストファイルを貼り付ける。 |  |
| 7 | そのままではエラーが出て保存できない。 |  |
| 8 | 「xmlns=http://www.w3.org/2000/svg」の部分を削除し、保存する。 |  |
| 9 | XPage(subjectsort_vw)をブラウザでプレビューし、表示内容を確認する。 下記の点を確認する。
|
 |
フォーム用XPageにヘッダーと左ナビゲーションを組み込む
|
1 |
【ナビゲーション用のスタイルシートを読み込む】 フォーム用XPageを開き、BootstrapのCSSクラスを読み込んだ後に、ナビゲーション用のCSSクラスを読み込むタグを追加する。 |
 |
|
2 |
左メニューのコントロールタブから、 カスタムコントロール「ccHeaderNavigation」コントロール を、<div>Header</div>の下にドロップする。 ガイド用文字「<div>Header</div>」を削除する。 |
 |
|
3 |
左メニューのコントロールタブから、 カスタムコントロール「ccLeftNavigation」コントロール を、<div>Left Navigation</div>の下にドロップする。 ガイド用文字「<div> Left Navigation </div>」を削除する。 |
 |
|
4 |
ブラウザでプレビューし、表示内容を確認する。 下記の点を確認する。
|
 |
