メモ: Page パラメーターはページ変数として改善されました。既存のすべての Page パラメーターは、ページビルダー右上のPage Variables and Script タブに移動されています。このタブでは、これらのパラメーターを変数として引き続き使用したり、新しいページ変数を作成したり、従来の Page パラメーターと同様に値を渡し続けることができます。さらに、ページスクリプト内でカスタムロジックを設定して、これらの変数を変更・操作することもできます。
Page パラメーターを設定してページに値を渡し、パネル、チャート、ゲージ、フォーム、レポートなどのページ要素内に表示させることができます。
ZML 属性を使用する
ZML 属性を使用して、パラメーターをページに渡すことができます。これらの属性でパラメーター名とその値を指定します。パネル内のテキストおよびボタンの表示内容を、パラメーターを使用して必要なデータが表示されるように設定できます。以下の表は、パネルおよびボタン要素に対する ZML 属性とその使用方法を示しています。
| Element |
ZML 属性 |
ZML script |
| パネルのテキスト/ラベル |
値 |
<panel>
<pr height='fill' width='fill'>
<pc width='100%' bgColor='#FFFFFF' hAlign='center' vAlign='middle'>
<pr height='auto' width='auto'>
<pc>
<text 種類='Text' 値='${param1}' size='20px' bold='真' uppercase='真'> </text>
</pc>
</pr>
</pc>
</pr>
</panel>
|
| ボタンのテキスト/label |
text |
<panel>
<pr height='fill' width='fill'>
<pc width='100%' bgColor='#ffffff' vAlign='middle'>
<pr height='auto' width='auto'>
<pc vAlign='middle'>
<ボタンのテキスト='${param2}'' size='15px' color='#ffffff' bgColor='#0072f4' 種類='rounded' marginLeft='0px' marginRight='0px' marginBottom='0px' marginTop='0px' cornerRadius='60px' />
</pc>
</pr>
</pc>
</pr>
</panel>
|
パラメーター プロパティを使用する
Order Management というアプリケーションを作成したとします。このアプリケーションでは、Track your Order という名前のパラメーター付きページを設計しており、該当する項目（ステートレスフォーム内）にtracking ID （レコード ID）を入力すると、HTML スニペット内に注文の詳細が表示されます。フォーム送信時、この ID はページ URL 内のパラメーター値として設定されると同時に、「Order No: ${parameter_name} の詳細」というテキストを表示するパネル内にも設定されます。
- パラメーター付きページの作成方法については、こちらを参照してください。
- ステートレスフォームの作成方法については、こちらを参照してください。
- HTML スニペットの埋め込み方法については、こちらを参照してください。
パラメーター値を表示するパネルをデザインするには、
- ページ上にパネルをドラッグ＆ドロップします。Page properties ペインがスライドイン表示されます。
-
Display タブで、データを表示する をText に設定し、以下のように値を入力します。
- 変更内容は自動的に保存されます。右上の閉じる をクリックしてペインを閉じます。
次に、Track Your Order ページにアクセスし、tracking ID を入力します。Track をクリックすると、注文の詳細が表示されます。パネルには入力した tracking ID 番号が表示され、tracking_id パラメーターに基づいて注文の詳細が表示されます。
パラメーター値をパネル画像に渡す
ZML 属性を使用して、パラメーターをページに渡すことができます。これらの属性で、パラメーター名とその値を指定します。パネル内に表示される画像は、パラメーターを使用して必要なデータを表示するように設定できます。以下の表は、パネル画像用の ZML 属性とその使用方法を示しています。
パネル画像要素では、種類 属性の値が weburl の場合にのみ、値 属性にページパラメーターを指定できます。
| 要素 |
ZML 属性 |
ZML スクリプト |
| パネル画像 |
Web Url |
<panel>
<pr height='fill' width='fill'>
<pc width='100%' bgColor='#ffffff' padding='20px' vAlign='middle'>
<pr height='auto' width='auto'>
<pc vAlign='middle'>
<画像 color='#FFFFFF' bgColor='#2D2D2D' width='80px' height='80px' 種類='weburl' 値=' https://abc.com/public/uploads/large/${param1}.png' cornerRadius='0px' 操作='OpenPage' target='新規-window' componentLinkName='ParamPage' />
</pc>
</pr>
</pc>
</pr>
</panel>
|
| |
<panel>
<pr height='fill' width='fill'>
<pc width='100%' bgColor='#ffffff' padding='20px' vAlign='middle'>
<pr height='auto' width='auto'>
<pc vAlign='middle'>
<画像 color='#FFFFFF' bgColor='#2D2D2D' width='80px' height='80px' 種類='weburl' 値='${param1}' cornerRadius='0px' 操作='OpenPage'
target='新規-window' componentLinkName='ParamPage' />
</pc>
</pr>
</pc>
</pr>
</panel>
|
パネルの操作
ZML 属性を使用して、パラメーターをページに渡すことができます。これらの属性で、パラメーター名とその値を指定します。パネル内のテキスト、画像、ボタンの操作は、パラメーターを使用して必要なデータを表示するように設定できます。以下の表は、パネルおよびボタン処理用の ZML 属性とその使用方法を示しています。
| 要素 |
ZML 属性 |
ZML スクリプト |
| フォーム、レポート、ページを開く |
クエリパラメーター |
<panel>
<pr height='fill' width='fill'>
<pc width='100%' bgColor='#FFFFFF' vAlign='middle'
操作='OpenPage' パラメーター='${param1}'
target='新規-window' componentLinkName='ParamPage'>
<text 種類='Text' 値='今月の新規従業員' size='15px' color='#333333'/>
</pc>
</pr>
</panel>
|
| URL を開く場合 |
Url |
|
| フォーム、レポート、ページ、URL をポップアップで開く |
width (popupWidth), height (popupHeight) |
<panel>
<pc width='50%' bgColor='transparent' vAlign='middle'>
<pr height='auto' width='auto'>
<pc vAlign='middle'>
<ボタンのテキスト='${param}' size='15px' color='#ffffff' bgColor='#0072f4' 種類='定額' marginLeft='0px' marginRight='0px' marginBottom='0px' marginTop='0px' 操作='OpenForm' パラメーター='a=9' target='popup' popupWidth='${param}' popupHeight='${param}' componentLinkName='Orders_Form' />
</pc>
</pr>
</pc>
</panel>
|
パラメーター値をチャート要素にフィルターとして渡す
ZML 属性を使用する
ZML 属性を使用して、パラメーターをページに渡すことができます。これらの属性で、パラメーター名とその値を指定します。チャートの x 軸と y 軸のラベルは、パラメーターを使用してそれぞれのタイトルを表示するように設定できます。以下の表は、チャート要素用の ZML 属性とその使用方法を示しています。
| 要素 |
ZML 属性 |
ZML スクリプト |
|
チャート要素
|
X 軸ラベル (xtitle)
Y 軸ラベル (ytitle) |
<chart 種類='列'
xtitle='${param1}' ytitle='${param2}'
DelugeCriteria='((ドロップダウン == "Choice 1"))'
bgColor='rgb(255, 255, 255)' theme='#0BD6B1' legendPos='center。top'
appLinkName='orders_sapp' formLinkName='Orders_Form' xfield='ドロップダウン' yfields='sum:番号' />
|
パラメーター プロパティを使用する
注文管理というアプリケーションを作成したとします。このアプリケーションで、ダッシュボードというページを作成し、特定の日付における注文のステータスと、合計注文数を表示する円グラフを追加しました。ここで、選択済みデータのフィルターを設定する際、値の代わりにパラメーター名を指定できます。この例では、パラメーター名はorder_dateです。
有効なページにアクセスし、ページ URL にアプリで使用している日付形式に従って必須の注文日を?parameter_name=値という形式で指定すると、その日付におけるすべての注文のステータスが円グラフに表示されます。
ゲージ要素にパラメーター値をフィルターとして渡す
ZML 属性を使用する
ZML 属性を使用して、ページにパラメーターを渡すことができます。これらの属性で、パラメーター名とその値を指定します。パラメーターを使用して、ゲージの最大値と目標値を設定できます。次の表は、ゲージ要素の ZML 属性とその用途を示しています。
| 要素 |
ZML 属性 |
ZML スクリプト |
ゲージ要素
|
最大値（maximumval タグ内の value 属性） |
<gauge bgColor='#ffffff' color='#000000'
criteria='(((ドロップダウン == "Choice 1")))' displayType='actual' size='20px'
filledColor='#FF7B19' nonFilledColor='#F5F5F5' needleColor='#000000' targetColor='#D8D8D8' 値='orders_app。OrdersForm。ID。件数'>
<maximumvalue size='15px' fontFamily='初期設定'値='${param2}' />
</gauge>
|
| 目標値（target タグ内の value 属性） |
<gauge bgColor='#ffffff' color='#000000'
criteria='(((ドロップダウン == "Choice 1")))' displayType='actual' size='20px'
filledColor='#FF7B19' nonFilledColor='#F5F5F5' needleColor='#000000' targetColor='#D8D8D8' 値='orders_app。OrdersForm。ID。件数'>
<target size='15px' color='#7F7F7F' fontFamily='初期設定' 値='${param1}' />
</gauge>
|
パラメーター プロパティを使用する
注文管理というアプリケーションを作成したとします。このアプリケーションで、ダッシュボードというページを作成し、特定の日付におけるすべての注文の合計金額を表示するように設定されたゲージを埋め込みました。ここで、選択済みデータのフィルターを設定する際、値の代わりにパラメーター名を指定できます。この例では、パラメーター名はsales_dateです。
有効なページにアクセスし、ページ URL にアプリで使用している日付形式に従って必須の日付を?parameter_name=値という形式で指定すると、その日付におけるすべての注文の合計金額がゲージに表示されます。
スニペット/埋め込みにパラメーター値を渡す
| 要素 |
ZML 属性 |
ZML スクリプト |
| 埋め込み |
src(url)、height、width |
<embed importedTemplate='無効' url='https://<domain>/appbuilder/john/orderst/page/${param1}/edit'
width='${param2}' height='${param3}' hAlign='center' />
|
ここで、
ドメインは DC ごとに異なります。例えば、アカウントが Zoho の米国データセンターにある場合はcreator.zoho.com、EU データセンターにある場合はcreator。Zoho。euを使用する必要があります。
ZML 属性を使用する
ZML 属性を使用して、ページにパラメーターを渡すことができます。これらの属性で、パラメーター名とその値を指定します。フォーム固有の機能にパラメーターを渡すこともできます。以下の表は、ページ内のフォーム要素に対する ZML 属性と、その用途を示しています。
| 要素 |
ZML 属性 |
ZML スクリプト |
| フォーム |
完了メッセージ (zc_SuccMsg) |
<form appLinkName='ordersapp' urlAppLinkName='ordersapp' heightType='auto' linkName='Orders_Form' searchString='小数=78678' zc_SuccMsg='${param1}' allowPublicAccess='fal />
|
| 送信ボタンのテキスト (zc_SubmitVal) |
<form appLinkName='ordersapp' urlAppLinkName='ordersapp' heightType='auto' linkName='Orders_Form' searchString='小数=78678' zc_SubmitVal='${param3}' urlType='weburl' allowPublicAccess='fal />
|
| リセットボタンのテキスト (zc_ResetVal) |
<form appLinkName='ordersapp' urlAppLinkName='ordersapp' heightType='auto' linkName='Orders_Form' searchString='小数=78678' zc_SuccMsg='${param1}' zc_ResetVal='${param2}' zc_Header='無効' zc_SubmitVal='${param3}' urlType='weburl' allowPublicAccess='fal />
|
| リダイレクト先 - Web サイト URL (zc_NextUrl) |
<form appLinkName='thisapp' urlAppLinkName='thisapp' heightType='auto' linkName='Form1' zc_SuccMsg='完了' zc_ResetVal='リセットする' zc_Header='無効' zc_SubmitVal='送信する' urlType='weburl' allowPublicAccess='無効' zc_NextUrl='${pgprm}'/>
|
パラメーター プロパティの使用
たとえば、注文管理というアプリケーションを作成したとします。このアプリケーションでは、ダッシュボードページを作成し、その中に注文レポートを埋め込んでいます。また、ユーザーが注文の詳細と、購入した商品の返品・交換理由を入力する注文返品フォームも作成しています。注文レポートには、商品を返品/交換という名前のボタン（操作項目）が配置されています。
このボタンをクリックすると、注文返品フォームが開き、注文 ID項目やその他の注文詳細が、order_id パラメーターに基づいて自動入力されます。ユーザーはリクエストの種類や返品・交換理由を選択し、フォームを送信できます。
レポート
ページ内にレポートを埋め込む場合、フィルター条件にパラメーターを指定して渡すことができます。
たとえば、注文管理というアプリケーションを作成したとします。このアプリケーションでは、「ダッシュボード」というタイトルのページを作成し、特定の日付の注文を表示するように設定されたレポートを埋め込んでいます。ここで、選択済みデータのフィルターを設定する際、値の代わりにパラメーター名を指定できます。この例では、パラメーター名は order_date です。
ページを実行時に開くと、必須項目として注文日を入力できます。検索結果は、「注文日」フィルターに基づいて表示されます。
パラメーター値に基づいて検索結果を表示する
ZML 属性の使用
ZML 属性を使用して、ページにパラメーターを渡すことができます。これらの属性で、パラメーター名とその値を指定します。検索コンポーネントを、パラメーターを使って目的の検索結果を表示するように設定できます。以下の表は、検索要素に対する ZML 属性と、その用途を示しています。
| 要素 |
ZML 属性 |
ZML スクリプト |
| 検索 |
初期値 (defaultValue) |
<検索する hAlign='center' bgtype='なし' shape='定額' resultComponent='レポート' linkName='OrderForm_Report' target='新規-window' criteriaString='(((ドロップダウン == input。searchString)))' appLinkName='ordersapp' style='1' defaultValue='${param2}'>
</search>
|
| 差し込み項目 (mergeField) |
<検索する hAlign='center' bgtype='なし' shape='定額' resultComponent='レポート' linkName='OrderForm_Report' target='新規-window' criteriaString='(((ドロップダウン == input。searchString)))' appLinkName='ordersapp' style='1' 差し込み項目='${param1}'
</search>
|
パラメーター プロパティの使用
たとえば、従業員管理というアプリケーションを作成したとします。このアプリケーションでは、次の 2 つのページを作成しています。
-
「ダッシュボード」というタイトルのパラメーター化されたページには、ページパラメーター部署に基づいて、別のページ（ターゲット）に検索結果を表示する検索要素があります。
-
検索コンポーネントでは、検索結果の表示に使用するパラメーターを選択できます。ここでは、部署がページパラメーターです。
-
ターゲットページは従業員権限と呼ばれ、ここでは検索結果がテーブル（HTML スニペット）で表示され、選択した部署に基づいて従業員の詳細がフィルターされて表示されます。
