でのアラートメッセージの作成とカスタマイズ UI ビルダー
デフォルトとスクリプトの両方のアプローチを使用して、フィードバックとステータスの更新を伝える際にアラートメッセージがどのように役立つかについて説明します。
アラートは、フィードバック、警告、確認などの標準化された通知を表示するコンポーネントです。スクリプトを書かなくても簡単に構成できますが、スクリプトを追加してより高度な機能を提供できます。
UI ビルダー は、いくつかのタイプのアラートメッセージをサポートしています。それぞれの動作を確認するには、 アラートコンポーネントのドキュメント を開き、インタラクティブプレビューでさまざまな設定を試してください。
でのアラートメッセージの作成 UI ビルダー
スクリプティングなしで簡単な通知のアラートメッセージを追加および構成します。
始める前に
必要なロール：ui_builder_admin
このタスクについて
簡易通知には、デフォルトのアラートメッセージ構成を使用します。この例では、アラートには、ログインしているユーザーのフルネームを使用したパーソナライズされた挨拶が表示されます。
この手順では、 UI ビルダー コンポーネントを使用して、動的でインタラクティブなレイアウトを作成します。コンポーネントの構成方法の詳細については、以下を参照してください。
| コンポーネント | ドキュメントリンク |
|---|---|
| アラート |
手順
-
アラートを追加します。
-
コンテンツツリーで、 アラート 1 にカーソルを合わせ、構成アイコン
を選択し、[ 名前の変更] を選択します。
-
コンテンツツリーで、 アラート 1 にカーソルを合わせ、構成アイコン
-
アラートメッセージを構成します。
-
コンテンツツリーで [ようこそメッセージ] を選択した状態で、構成パネルに移動し、次のプロパティを設定します。
フィールド 値 タイプ 参考情報 アイコン circle-info-outline ヘッダー 空 (フィールド内のテキストを削除) リンク 空 ( [編集] を選択してから、[ ラベル] と Href 内のテキストを削除) アクション 空 ([ 編集] を選択し、[ タイプ ] を [-- なし --] に設定してから、[ ラベル] と [Href] 内のテキストを削除します) 構成パネルは次のようになります。
-
[ メッセージ] フィールドにカーソルを合わせ、[データをバインド] アイコン
を選択します。
-
「数式」、「文字列」の順に選択し、CONCATをダブルクリックまたはドラッグして、数式を上の領域に移動します。
-
fullName をダブルクリックまたはドラッグして上の領域に移動し、[適用] を選択します。
-
コンテンツツリーで [ようこそメッセージ] を選択した状態で、構成パネルに移動し、次のプロパティを設定します。
-
ページを保存してテストします。
- 右上の [保存] を選択します。
- [プレビュー] を選択します。
アラートがページの上部に表示され、「ようこそ!」というテキストの後にログインしているユーザーの名前が続きます。
のクライアントスクリプトを使用したアラートメッセージのカスタマイズ UI ビルダー
クライアントスクリプトを使用して、コンテキスト依存の動的なアラートメッセージを作成します。
始める前に
必要なロール：admin
このタスクについて
スクリプト化されたアラートは、イベントや外部データに応答する通知を提供します。柔軟性が高く、複雑な条件に対応できますが、スクリプティングの知識と保守により多くの労力が必要です。この例では、カスタムメッセージを含む複数のアラートを生成するクライアントスクリプトをボタンでトリガーします。
- ボタン:クライアントスクリプトをトリガーしてアラートを表示します。
- アラート:カスタマイズされたメッセージを表示します。
この手順では、 UI ビルダー コンポーネントを使用して、動的でインタラクティブなレイアウトを作成します。コンポーネントの構成方法の詳細については、以下を参照してください。
| コンポーネント | ドキュメントリンク |
|---|---|
| ボタン | |
| アラート |
手順
-
ボタンを追加します。
-
コンテンツツリーで、 ボタン 1 にカーソルを合わせ、構成アイコン を選択し、[ 名前の変更] を選択します。
-
コンテンツツリーで、 ボタン 1 にカーソルを合わせ、構成アイコン
-
クライアントスクリプトを作成します。
-
[データとスクリプト] で、[クライアントスクリプト] の横にある [+] を選択します。
-
コードを次のように置き換えます。
ヒント:コードの書式設定アイコン
を選択すると、コードが読みやすくなります。/** * @param {params} params * @param {api} params.api * @param {any} params.event * @param {any} params.imports * @param {ApiHelpers} params.helpers */ function handler({ api, event, helpers, imports }) { api.emit("NOW_UXF_PAGE#ADD_NOTIFICATIONS", { items: [ { id: "alert1", status: "critical", icon: "circle-exclamation-fill", content: { type: "html", value: "<h2>Critical: System failure detected!</h2>" }, action: { type: "dismiss" } }, { id: "alert2", status: "high", icon: "circle-exclamation-outline", content: { type: "string", value: "High: CPU usage exceeded 90%" }, action: { type: "dismiss" } }, { id: "alert3", status: "moderate", icon: "circle-pause-outline", content: { type: "string", value: "Moderate: Disk space is below 20%" }, action: { type: "dismiss" } }, { id: "alert4", status: "warning", icon: "triangle-exclamation-outline", content: { type: "html", value: "<h4> Warning: A new software update is ready. </h4>" }, action: { type: "dismiss" } }, { id: "alert5", status: "info", icon: "circle-question-fill", content: { type: "string", value: "Info: A new software update is available" }, action: { type: "dismiss" } }, { id: "alert6", status: "positive", icon: "check-circle-outline", content: { type: "string", value: "Positive: Backup completed successfully" }, action: { type: "dismiss" } }, { id: "alert7", status: "low", icon: "bell-fill", content: { type: "string", value: "Low: Minor update recommended" }, action: { type: "dismiss" } } ] }); }
-
[データとスクリプト] で、[クライアントスクリプト] の横にある [+] を選択します。
-
イベントを使用してボタンをクライアントスクリプトにリンクします。
-
アラートを検索し、[クライアントスクリプト] の下のアラートハンドラーを選択します。
-
アラートを検索し、[クライアントスクリプト] の下のアラートハンドラーを選択します。
-
ページを保存してテストします。
- 右上の [保存] を選択します。
- [プレビュー] を選択します。
ボタンを選択すると、クライアントスクリプトで定義したメッセージを含む複数のアラートが表示されます。