クライアントスクリプトを定義してコンポーネントにバインドする

UI ビルダー のクライアントスクリプトを追加および編集して、イベントを通じてクライアントステータスを更新できるようにします。イベントハンドラーを使用して、これらのスクリプトを任意のコンポーネントにバインドできます。

始める前に

必要なロール：ui_builder_admin

このタスクについて

Now コードエディターを使用して、UI ビルダー で JavaScript クライアントスクリプトを作成できます。次に、クライアントスクリプトをイベントハンドラーとして追加して、クライアントのステータスを更新したり、ページの処理済みイベントを発行したり、データリソース操作を実行したりできます。たとえば、日付またはカウンターをインクリメントするスクリプトを作成し、そのスクリプトをボタンのクリックなどのコンポーネントイベントにバインドできます。Now コードエディターの詳細については、「Now コードエディターでコードを編集する (高度な機能)」を参照してください。

これらのスクリプトを使用して、次のアクションを実行できます。

• 利用可能なデータを取得し、データを操作して、クライアントステータスに格納します。
• データリソースの結果にアクセスします。
• データリソース操作を実行します。
• イベントをディスパッチします。

手順

1. 移動先 すべて > Now Experience フレームワーク > UI ビルダー.
2. 作業するエクスペリエンスを開くか、または選択してエクスペリエンスを作成します 作成 > エクスペリエンス.
   詳細については、「UI ビルダー でユーザーがアプリケーションをどのように操作するかを構成する」を参照してください。
3. ページを開くかまたは作成します。
   UI ビルダー でページを作成する方法の詳細については、「UI ビルダーでのページの作成」を参照してください。
4. オプション: ページにコンポーネントがない場合は、ページにコンポーネントを追加します。
   たとえば、見出しコンポーネントを追加できます。詳細については、「コンポーネントの追加と構成」を参照してください。
5. [クライアントスクリプト] の横にある [+] を選択します。
   
6. スクリプトに名前を付けます。

   説明的な名前を付けると、スクリプトの実行内容を把握しやすくなります。また、後でイベントハンドラーに追加するときにスクリプトを見つけやすくなります。次の例は、単純な日付クライアントスクリプトを示しています。

7. アクションを実行するスクリプトを作成します。
   たとえば、コンポーネントにバインドする簡単な日付スクリプトを作成することができます。
8. オプション: [スクリプトインクルード] または [関連コンポーネント] を追加します。これは、クライアントスクリプト関数の imports パラメーターに表示されます。
9. スクリプトをバインドするページ上のコンポーネントを選択し、[イベント] を選択します。
10. [+ 新しいイベントハンドラーを追加] を選択し、[スクリプト] で作成したスクリプトを選択し、[追加] を選択します。

    次の例は、日付クライアントスクリプトを示しています。

    
11. [保存] を選択します。
12. スクリプト化されたコンポーネントをプレビューするには、を選択します。