今回はローコードウェブアプリケーション構築サービスのWaveMakerでのページ遷移方法について紹介したいとおもいます。
今回紹介する機能の項目として、
- アプリケーション内でのページ遷移方法
- URLを使って外部リンクの開き方
の２つを紹介していきます。
結論
- アプリケーション内のページ遷移
・Navigation機能を使う - 外部リンクの開き方
・Anchorウィジェットの機能を使う
実現方法
1. アプリケーション内のページ遷移
- Navigationの作成の仕方
Navigationの作成方法として二つやり方があります。
一つ目の作成方法としてUI編集画面上のツールバーにあるvariableを選択して、そこから作成する方法と
二つ目の方法として、各ウェジェットにあるアクション設定画面で、New Actionを選択する方法です。
ナビゲーションの設定画面では遷移先の設定をすることができます。ページの遷移の場合はNavigation Target欄をPageと選択します。Page Name欄には遷移先のページ名を選択してあげます。
また、Navigation TargetとしてPageだけでなく、 Tabや accordionを選択することができます。ページに遷移するだけでなく、ページ上の特定のTabやaccordionに遷移することができます。
今回はテストとして、testページにあるタブ２(tabpane2)に遷移したいと思います。
今回はボタンを用意してあげて、そこをクリックしてするとtestページにあるタブ２に遷移する設定をしてあげます。
プレビュー画面で確認して正常に遷移されたらNavigation を使った遷移の完成です。
２. 外部リンクの開き方
- Anchor機能の設定の仕方
外部のサイトへリンクを飛ばすのにanchorウェジェットを利用する必要があります。
UI編集画面上のWidgetタブでanchorと検索していただくと、船のいかりマークが出てくるとおもいますのでそれを画面にドラック＆ドロップしていただくと、Linkと書かれた文字が画面に表示されます。
そのAnchorウェジェット編集画面にて、表示名はCaptionで変更することができます。
また、遷移したいサイト先のリンクはHyperLinkという欄にURLを記入します。今回はテストとしてgoogle へのリンクを記入します。
遷移形式を設定したい場合はTargetの欄で設定することができます。このTargetの欄にはデフォルトで_selfとなっていると思います。これは現在いる画面でリンクを開くという設定になっています。もし違うウィンドウタブでリンクを開きたい場合はこの_selfとなっているところを_blankに変えてあげる必要があります。
この様にすることによってAnchorウェジェットをクリックすると外部のリンクを開くことができます。
注意：
現在WaveMaker上で外部リンクを開くことができるのはこのAnchorウェジェットとテーブルウェジェットの一部の機能のみになります。そのため写真ウェジェットなどで写真をクリックして外部リンクを開く設定ができませんのでご注意ください。