Ajaxを使用して画面の一部をリフレッシュする
画面全体を再描画することなく画面の特定部分のみをリフレッシュすることにより、動的なインターフェイスを作成して高速なユーザーインタラクションをサポートすることが可能となり、エンドユーザーエクスペリエンスを向上できます。
OutSystemsでは、モバイルアプリおよびWebアプリの画面の一部を更新できます。OutSystemsのWebアプリは、Ajaxを使用して必要なデータだけを取り出す非同期のリクエストをWebサーバーに対して実行し、ページ全体をリフレッシュすることなく画面を動的にリフレッシュします。
モバイルアプリの画面の一部のみをリフレッシュするには、以下の手順を実行します。
-
ボタンまたはリンクを画面に追加して、新しいクライアントアクションにOn Clickイベントハンドラを設定します。
-
新しいクライアントアクションで、画面に表示されているウィジェットに結び付けられているデータの値を変更するか、ブロックの入力値を更新します。たとえば、画面の変数を更新するか、Refresh Dataツールを使用してデータベースからのデータをリフレッシュします。ウィジェットは、明示的に指示をしなくても更新されたデータを自動的に表示します。
Webアプリの画面の一部のみをリフレッシュするには、以下の手順を実行します。
-
ボタンまたはリンクを画面に追加して、Methodプロパティに「Ajax Submit」を設定し、サーバーへのリクエストが非同期に実行されるようにします。
-
新しい画面アクションをボタンまたはリンクに関連付けます。
-
新しい画面アクションで、画面に表示されるデータを更新します。たとえば、画面の変数を割り当てるか、Refresh Dataツールを使用してデータベースからのデータをリフレッシュします。
-
Ajax Refreshをツールボックスからアクションフローにドラッグし、更新されたデータを画面に表示するウィジェットを選択します。Ajax Refreshは、Nameプロパティが定義されているウィジェットのみをリフレッシュできます。
例
レストランや美術館のような場所の検索やレビューができるWebアプリケーションがあります。このアプリケーションは、一部の重要指標をチャートに表示するためのバックオフィスダッシュボードを備えています。
これらのチャートの1つには、インターフェイスで選択した日付について、場所カテゴリごとのレビュー数が表示されます。この日付をユーザーが変更すると、ページ全体がリフレッシュされて更新された情報が表示されます。ただし、日付には無関係な他のチャートも一緒にリフレッシュされます。
日付の影響を受けるチャートのみをリフレッシュするには、以下の手順を実行します。
-
[Dashboard]画面を開き、チャートが含まれているコンテナのNameプロパティを「ReviewsPerDate」に変更します。
-
[Filter]ボタンを選択し、Methodプロパティを「Ajax Submit」に変更します。
-
[Filter]ボタンに関連付けられている画面アクションを開きます。
-
Refresh Dataをツールボックスからアクションフローにドラッグし、[GetReviewsPerDate Aggregate]を選択します。これは、チャートに提供するデータをデータベースから取り出すAggregateです。Refresh Dataを使用することにより、ユーザーが選択した日付を考慮しながら、更新されたデータをデータベースから取り出せるようになります。
-
Ajax Refreshをツールボックスからアクションフローにドラッグし、最初のステップで名前を付けたReviewsPerDateコンテナを選択します。
-
パブリッシュしてテストします。