Webアプリケーションでパラメータを使ったナビゲーションを行う方法

WebサイトやWebアプリケーションの作成は、ナビゲーションなしにはほとんど考えられません。ユーザーは、ページ間を移動し、サイトのさまざまなセクションを開き、さまざまな情報を受け取らなければなりません。

ページデータ

しかし、ナビゲーションそのものを見る前に、一般的にページについてどんな情報を得ることができるのか、URLは何から構成されるのかを理解しておく価値があります。これを行うには Get Current Pageブロックを使って、それがどのようなデータを生成するか見てみましょう。

URL- ページのアドレスを通常の形式で指定します。例：https://vdjyien-app.apms.io/admin/someurl/
Page- ページの内部識別子。これはAppMaster のビジネスプロセスで使用されます。22文字のランダムな文字と数字で構成されます。
Title- ページのタイトル。人間が読める形でのその名前。
URL Params.ページは、そのアドレスが厳密に固定されているわけではなく、可変の値を含むように作成することができます。例えば、あるページが特定のセクションの記事のリストを表示することができ、そのセクションの識別子がパラメータとしてURLで示されるだけである。
Query Params.追加のクエリーパラメーターは、URLの末尾の「?」記号の後に記述されます。例えば、記事の一覧を表示するページでは、「?_limit=12&lang=en」というパラメータは、英語の記事12個だけが必要であることを示すかもしれません。

たとえば、ブログの記事の一覧を表示するページを考えてみましょう。そのURLは"/blog/:theme/:author "と指定されます。記号「:」は、その後に指定された値がパラメータであることを示す。パラメータとして、記事のトピック（theme）と著者（author）の識別子を受け取ります。

このページにナビゲートするには、ビジネス・プロセスの Navigateブロックをビジネス・プロセスで使用する必要があります。

パラメータは、先にパースされた Get Current Pageブロックの中で解析されたパラメータに対応します。この場合、ページ自体が内部識別子として指定されているため、ページの実際のタイトルはナビゲーションには関係ありません（ページのリストから選択することができます）。

ページにパラメータがない場合、ナビゲーションは非常に簡単で、提供されたリストから目的のページを選択するだけです。しかし、この例では、パラメータを Navigateブロックに渡さなければならないパラメータがあります。

ナビゲーション用のソースページの作成

具体的な例で、パラメータの使い方を考えてみましょう。そのために、将来的に目的のページに移動する必要がある、別のページを作成します。このページに2つの Select要素 (1つはトピックのリストから選択するためのもの、もう1つは著者のリストのためのもの) をこのページに追加し、テスト値で埋め尽くしましょう。

その後で、ワークフローを設定する必要があります。 Navigateボタンをクリックし、ランディングページへのナビゲーションが動作するようにします。この処理は、選択された値を Selectブロックから選択された値を取得することから始まります。

次のステップは Key-Value仮想モデルに入力することです。その配列は、必要なパラメータをブロックに渡すために使われます。 Navigateブロックに渡すために使用されます。モデル自体はキー(Key) から構成されます。これはパラメータの名前 (この例では、テーマと著者) と、その値 (Valueは、選択されたトピックの直接の名前、または著者の名前）です。

なお、URLにはスペースをはじめ、使用できない文字が多くあります。したがって、URLの中に「Frank Paulsen」と書かれた名前は、自動的に「Frank%20Paulsen」に変換されます。 URL Encodeと URL Decodeブロックは、URLの規格に合わせたエンコードとデコードに使用することができます。この例では、URLをよりわかりやすく美しくするために Replace stringブロックを使用し、独自にスペースを「-」記号に置き換えて、名前を「Frank-Paulsen」として表示しています。

最後のステップは、生成されたキーと値のペアをひとつの配列に結合し、パラメータとして Navigateブロックのパラメータとして渡します。

さて、ボタンをクリックすると、https://vdjyien-app.apms.io/admin/blog/No-code/Frank-Paulsen/ というページに移動します。

そのURLが定数部分(https://vdjyien-app.apms.io/admin/blog/)と前のページで選択された値から形成された変数(No-code/Frank-Paulsen/)の両方からなることを確認することができます。

URLパラメータを使ったコンテンツ管理

次のタスクは、受け取ったURLパラメータを使ってページの内容を変更することです。これらのパラメータは、例えば、データベースへのリクエストを形成するために使用することができます。 GETしかし、この例では、単にその値をページに表示するだけです。これを実現するために、対応するLabel を使って、2 つのコンテナをページに追加してみましょう。

に基づいてビジネスプロセスをセットアップしましょう。 onShowトリガーに基づくビジネスプロセスを設定します。 Label.そのタスクは、URLを解析し、そのパラメータを取得し、ページに表示することです。これを行うには Get Current Pageブロックを使用し、ループの中で各パラメータの値を取得します。

次に Switchブロックを通して、パラメータの値を取得し、対応する Label.同時に、Author パラメータについては、「-」を逆にスペースに置き換えます。

あるページに移動するとき、その静的アドレスだけでなく、ページの実際のコンテンツ表示に影響を与えるURLパラメータも使用されるようになりました。

クエリパラメータの使用

ほぼ同じ要領で、クエリーパラメータ(Query Params).URLパラメータとの主な違いは、オプションであることです。この例では、URLにはページに表示すべき情報（どのテーマのセクションとどの著者か）が必ず含まれており、追加のパラメータで必要な情報を明確にします。例えば、limit とoffset パラメータを使用してページ付けを整理し、データベースから問い合わせるレコード数と出力を開始するレコードを正確に設定することができます。

2つの新しいフィールドを開始ページに追加してみましょう - 。 Input (Integer).その中にlimit とoffset パラメータを書き込むことにします。