画面遷移の実現方法

Dashcombが提供しているメニュー、View、UI Componetを使って、パラメータ付きの画面遷移を簡単に実現できます。もちろん、パラメータなしの画面遷移はパラメータを設定しなければ、もっと簡単に実現できます。

準備

  • これから使う画面を二つ用意します。一つは遷移元の画面、もう一つは遷移先の画面です。

    • 画面の作成はViewにご参照ください。

実現

  • 遷移先画面のプロパティ領域を開きます。

  • 「パラメータ」の横にある「+」アイコンを押します。

  • パラメータ名の初期値 keyName0 を key に変更します。

  • 必要に応じて、「*」アイコンを押し、必須項目に指定することも可能です。

  • Labelコンポーネントをドラッグ＆ドロップして、パラメータ確認用ラベルを作成します。

  • そのプロパティ領域にある「ラベル文字」の初期値 label を key= {{currentPage.params.key}}に変更します。

  • 遷移元画面のサブメニューを押して、遷移元画面を開きます。

  • Inputコンポーネントをドラッグ＆ドロップして、入力ボックスを作成します。

  • Inputのオブジェクト名 input1 を inputKey に変更します。

  • Buttonコンポーネントをドラッグ＆ドロップして、遷移用のボタンを作成します。

  • そのボタンを押して、ボタンのプロパティ領域を呼び出します。

  • 「onClick」横のアイコンをクリックして、アクションエディタを呼び出します。

  • 「アクション無し」を「メニューに移動」に変更します。

  • 「メニュー」を押して、リストから遷移先のメニュー（画面）を選びます。

  • 「パラメータ」の key 入力ボックスに {{inputKey.value}} を入力します。

  • 「保存」ボタンを押すと、画面遷移機能の実現ができました。

  • 確認するには、遷移元画面のInputに hoge を入力して、Buttonを押すと、遷移先画面に飛んで、確認用ラベル key= hoge を確認できます。

参照項目

前へデータベース経由のCRUD操作の実現方法次へAPI経由のCRUD操作の実現方法

最終更新