メモ: ページパラメーターは、現在は改善されてページ変数になりました。既存のすべてのページパラメーターは、ページビルダー右上のPage Variables and Scriptタブに移動されています。このタブでは、これまでどおりこれらのパラメーターを変数として使用し、新しいページ変数を作成し、従来のページパラメーターと同様の方法で値を渡し続けることができます。さらに、ページスクリプト内でカスタムロジックを設定して、これらの変数を変更・操作することもできます。

• パラメーターを使用できるページ要素
• 注意事項
• パラメーターの追加
• パラメーターの削除
• パラメーター名の付け方
• 例

パラメーターの使用

パラメーターを使用できるページ要素は次のとおりです。

• パネル:
  
  • 表示: パネル内のテキストおよびボタンの表示内容を、必要なデータが表示されるように設定できます。設定方法
  • アクション: パネル内のテキスト、画像、ボタンのアクションを、必要なデータが表示されるように設定できます。設定方法
  • 画像: パネル内の画像を、必要なデータが表示されるように設定できます。設定方法
• チャート: フィルター（条件）を設定するか、ZML 属性を使用して、パラメーター値に基づいてデータをフィルタリングできます。設定方法
• ゲージ: フィルター（条件）を設定するか、ZML 属性を使用して、パラメーター値に基づいてデータをフィルタリングできます。設定方法
• 検索: 検索要素を、ページパラメーターに基づいて検索結果（ページまたはレポート）を表示するように設定できます。設定方法
• フォーム: ページパラメーターに基づいてデータを表示するように、フォーム内の項目の値を設定できます。設定方法
• レポート: フィルター（条件）を設定するか、ZML 属性を使用して、パラメーター値に基づいてデータをフィルタリングできます。設定方法
• スニペット: HTML および ZML スニペット内で、パラメーター値に基づいてデータを表示できます。設定方法
• ボタン:
  
  • 表示: パネル内のボタンの表示内容を、必要なデータが表示されるように設定できます。設定方法
  • アクション: パネル内のボタンのアクションを、必要なデータが表示されるように設定できます。設定方法
  • 画像: パネル内の画像を、必要なデータが表示されるように設定できます。設定方法

注意事項

• ページパラメーターを使用して、ページ読み込み時に動的な値を設定できます。
• パラメーターとその値は、URL のうちクエリ文字列と呼ばれる、疑問符の後ろの部分に配置されます。キーと値のペアで構成され、等号で区切られます。たとえば、
  
  https://<domain>/<account_owner_name>/<appLinkName>/#<pageLinkName>?param1=<value>

  ここで、param1 がページパラメーターであり、その値が等号の後に続きます。この URL 形式により、ブラウザーの更新や再読み込みを行ってもデータが保持されます。

• ページは複数のパラメーターを使ってフィルタリングできます。アンパサンド（&）文字を使用して、パラメーターと値のペアを区切ります。たとえば、
  
  https://<domain>/<account_owner_name>/<appLinkName>/#<pageLinkName>?param1=<value>&param2=<value>

パラメーター名の付け方

• パラメーター名は大文字と小文字が区別されます。
• パラメーター名には、文字（日本語を含む）、数字、アンダースコア（_）を使用できます。
• パラメーター名は必ず文字で開始する必要があります。文字列、数値（データ ID を含む）、日付、Boolean 値をページパラメーター値として渡すことができます。
• デフォルトでは、パラメーター名に使用できる最大文字数は 100 文字です。

例

たとえば、注文管理というアプリケーションを作成したとします。このアプリケーションでは、注文を追跡という名前のパラメーター付きページを設計しており、該当する追跡 ID（データ ID）を入力すると、その注文の詳細が表示されます。このページには、tracking_id というページパラメーターに加えて、次のコンポーネントがあります。

• ユーザーが追跡 ID を入力する、埋め込みステートレスフォームに、Enter your tracking ID という名前の 1 つの一行テキスト項目を追加します。フォームを送信すると、同じページが再読み込みされ、ページ URL にページパラメーター (tracking_id) が次の形式で付加されます:
  
  pageParam=singleLineFieldInput
• HTML スニペットを設定し、入力された追跡 ID に基づいて、注文詳細をテーブル形式で表示します。

パラメーター付きページの作成

パラメーター付きページとは、アプリケーションレベルのパラメーターを持ち、入力値（パラメーター値）を保持して、同じページ上に必要なデータを表示するページのことです。たとえば、Track your order というタイトルのパラメーター付きページを作成し、tracking_id というパラメーターを追加したとします。ここでのパラメーター値はデータ ID（注文レコードごとに一意の値）です。データ ID を入力すると、同じページに注文詳細が表示されます。こちらのページの手順に従ってページを作成し、ページ名を Track your order と指定します。

• パラメーターの追加
• ステートレスフォームの埋め込み

ページへのパラメーターの追加

1. アプリを編集します。
2. [Design] タブに移動し、ページビルダーを開きます。
3. ページビルダー右上付近の 歯車 アイコンをクリックします。[Page properties] ペインが表示されます。
4. [Parameter] セクションで [Add Parameter] をクリックします。
5. パラメーター名として tracking_id と入力し、[Add] をクリックします。
   

   

6. [Page properties] ペインを閉じます。

ページへのステートレスフォームの埋め込み

1. アプリを編集します。
2. [Design] タブに移動し、ページビルダーを開きます。
3. 左側のパレットから Form を選択し、Order Tracking という名前のステートレスフォームを選択します。
4. フォームをクリックしてドラッグし、[Embed as Form] オプションの下に配置して、ページにフォームを埋め込みます。
   

   

5. ページビルダー上部中央のツールバーにある [Configure] オプションをクリックします。右側から [Form Embed Configuration] ペインがスライド表示されます。
6. [Field values] タブで [Set values] をクリックします。Enter your tracking ID 項目の横にある値として、tracking_id（ページパラメーター）を指定します。
   

   

7. 右上の [Done] をクリックして、設定を保存します。

ページへの HTML スニペットの追加

1. アプリを編集します。
2. [Design] タブに移動し、ページビルダーを開きます。
3. ページビルダーで左側の [Snippets] をクリックし、[HTML Snippet] をページ上の必要な位置にドラッグ＆ドロップします。[HTML Snippet] エディターが表示されます。
   

   

4. 注文詳細を表示するテーブルを作成するために、必要な HTML、CSS、Deluge コードを追加します。下の画像は、HTML スニペット内でデータ ID を使用してデータ詳細をフィルターおよび表示するための参考コードを示しています。
   

   

5. [Save] をクリックし、エディターを閉じます。
6. 公開済みの Track your order ページにアクセスし、追跡 ID を入力します。
7. [Track] をクリックすると、注文詳細が表示されます。以下の GIF は、tracking_id パラメーターに基づいて注文詳細がどのように表示されるかを示しています。
   

   

関連トピック

• パラメーターの追加と削除
• ページ要素のパラメーター設定