カスタムコンポーネントビルダー

  • リリースバージョン: Washingtondc
  • 更新日 2024年02月01日
  • 読む4読むのに数分

    • Next Experience UI フレームワーク と UI コンポーネントエクステンション を使用してカスタムコンポーネントを開発します。

    コンポーネントは、カスタムユーザーインターフェイスの作成に使用する再利用可能な構成要素です。Next Experience Design System には、カスタム UI にドラッグできる一連のカスタマイズ可能なコンポーネントが付属しています。Next Experience Design System ライブラリで必要なコンポーネントが見つからない場合は、独自のコンポーネントを開発します。

    図書館を見る Next Experience Design System には、 ServiceNow® 開発者サイト.

    カスタムコンポーネントを作成するメリット

    カスタムコンポーネントを開発すると、次のことができます。

    • エージェント、お客様、会社のニーズに応じて UI をカスタマイズします。
    • 重要なデータや情報にすばやくアクセスすることで、従業員の効率を高め、コンテキストの切り替えを減らすことができます。
    • API を使用して会社独自のオムニチャネル環境に対応し、データを統合します。

    たとえば、SLA に関連付けられたケースを表示したり、特定のキュー内のアクティブなチャットを追跡したりするコンポーネントを作成できます。Next Experience UI フレームワーク と UI コンポーネントエクステンション を使用して必要なコンポーネントを開発し、[HTTP 効果 API (Http Effect API)] を使用して自分のプラットフォームからデータにアクセスできます。カスタムスキーマを作成することで、GraphQL を使用してプラットフォームデータをクエリすることもできます。詳細については、「スクリプト化された GraphQL」を参照してください。

    使用前の注意事項

    コンポーネントの設計と構築を開始する前に、次のことを確認してください。

    • Web コンポーネントの概念、開発、設計に関する一般的な知識。
    • コンポーネントの動作を定義するための JavaScript の知識。
    • ノードパッケージマネージャー (npm) のナレッジ。
    • 最新バージョンの Node.js がローカルマシンにインストールされている。詳細については、「Node.js」を参照してください。
    • ServiceNow CLI がマシンにインストールされている。

    Next Experience UI フレームワーク

    Next Experience UI フレームワーク は、アプリを拡張し、アプリケーション全体で再利用可能な Web コンポーネントを構築できるようにする JavaScript フレームワークです。Next Experience UI フレームワーク を使用すると、次のことができます。

    • アプリケーション全体の複数の場所で使用する単一のコンポーネントを作成します。
    • 他のコードとの競合を防ぐために、コンポーネントのスコープをカプセル化します。
    • プロパティ、スロット、アクションをコンポーネントに追加し、ユーザーが ワークスペース でコンポーネントを使用するたびにカスタマイズできるようにします。

    詳細については、 ServiceNow® 開発者サイト.

    UI コンポーネントエクステンション および開発フロー

    UI コンポーネントエクステンション は ServiceNow CLI の拡張であり、Next Experience UI フレームワーク を使用してカスタムコンポーネントを開発できます。UI コンポーネントエクステンション を使用すると、次のことができます。

    • コンポーネントまたはプロジェクトのスキャフォールディングの開発に必要なファイルのセットを作成します。
    • ローカル開発サーバーを起動してコンポーネントをテストします。
    • コンポーネントプロジェクトを構築し、ServiceNow インスタンスに展開します。

    アプリケーションスコープ

    Next Experience UI フレームワーク コンポーネントを展開すると、インスタンスのスコープ対象のアプリケーションに展開されます。名前空間識別子として使用するコンポーネントのアプリケーションスコープを指定できます。 インスタンスでのアプリケーション開発には、名前空間識別子のガイドラインを使用します。詳細については、「アプリケーションスコープ」を参照してください。

    アプリケーションスコープを予約するときは、次の要件に従います。

    • 最大：18 文字。

    • ケース：スネークケース。

    • 形式：x_customerprefix_componentname、ここでは：
      • customerprefix は、インスタンスの glide.appcreator.company.code システムのプロパティの値です。
      • componentname は、プロジェクトの作成時にコンポーネントの name パラメーターで指定された値です。

    コンポーネントプロジェクトの作成時にアプリケーションスコープを指定しない場合、Now CLI によって作成されます。

    または、now-ui.json ファイルで scopeName パラメーターに値を追加することもできます。詳細については、「コンポーネントのアプリケーションスコープの変更」を参照してください。

    参照ガイド

    Now CLI のリファレンスガイドを表示するには、開発者サイトにアクセスしてください。