Ajaxを使用して画面の一部をリフレッシュする

画面全体を再描画することなく画面の特定部分のみをリフレッシュすることにより、動的なインターフェイスを作成して高速なユーザーインタラクションをサポートすることが可能となり、エンドユーザーエクスペリエンスを向上できます。

OutSystemsでは、モバイルアプリおよびWebアプリの画面の一部を更新できます。OutSystemsのWebアプリは、Ajaxを使用して必要なデータだけを取り出す非同期のリクエストをWebサーバーに対して実行し、ページ全体をリフレッシュすることなく画面を動的にリフレッシュします。

モバイルアプリの画面の一部のみをリフレッシュするには、以下の手順を実行します。

1. ボタンまたはリンクを画面に追加して、新しいクライアントアクションにOn Clickイベントハンドラを設定します。

2. 新しいクライアントアクションで、画面に表示されているウィジェットに結び付けられているデータの値を変更するか、ブロックの入力値を更新します。たとえば、画面の変数を更新するか、Refresh Dataツールを使用してデータベースからのデータをリフレッシュします。ウィジェットは、明示的に指示をしなくても更新されたデータを自動的に表示します。

Webアプリの画面の一部のみをリフレッシュするには、以下の手順を実行します。

1. ボタンまたはリンクを画面に追加して、Methodプロパティに「Ajax Submit」を設定し、サーバーへのリクエストが非同期に実行されるようにします。

2. 新しい画面アクションをボタンまたはリンクに関連付けます。

3. 新しい画面アクションで、画面に表示されるデータを更新します。たとえば、画面の変数を割り当てるか、Refresh Dataツールを使用してデータベースからのデータをリフレッシュします。

4. Ajax Refreshをツールボックスからアクションフローにドラッグし、更新されたデータを画面に表示するウィジェットを選択します。Ajax Refreshは、Nameプロパティが定義されているウィジェットのみをリフレッシュできます。