Constellation DXコンポーネント

Constellation DXコンポーネントは、ConstellationデザインシステムのUIコンポーネントライブラリの拡張です。Constellation DXコンポーネントを使用すると、App Studioのビューオーサリングとシームレスに統合するアプリアプリケーションに、目的に特化したUIコンポーネントを追加できます。

Constellation DX Componentsは、オープンソースのJavaScriptライブラリであるReactを使用して構築されています。Constellation DXコンポーネントの開発者は、Reactを理解するだけでなく、PCoreやPConnectなどのさまざまなConstellation APIの呼び出し方法や、カスタムコンポーネントをPega Platform™に統合する方法も知っておく必要があります。

Constellation DXコンポーネントは、開発者がConstellationアプリケーションをカスタマイズできるようにしますが、このカスタマイズにはコストがかかります。コンステレーションはカスタマイズよりも設定のパラダイムの上に成り立っています。カスタムコンポーネントを構築すると、開発時間が長くなるだけでなく、バグが増え、アップグレードが複雑になる可能性が高まるため、Constellationの利点が相殺される可能性があります。

Constellation DXコンポーネントは、実装している機能がクライアントのケースマネジメントプロセスに必要であり、Constellationに組み込まれた標準のパターンやワークフローを使用しても得られないことが確実な場合にのみ使用してください。

Constellation DXコンポーネントを作成するための最初のステップは、「npm」からDXコンポーネントビルダーをインストールすることです。

Constellation DXコンポーネントビルダーには、プロジェクトを初期化してスキャフォールドするためのCLIツールと、コンポーネントを公開してApp Studioで使用できるようにするためのツールが用意されています。

構築できるConstellation DXコンポーネントには、次の3種類があります。

• フィールドコンポーネント
• ウィジェットコンポーネント
• レイアウトテンプレートコンポーネント

フィールドコンポーネント

フィールドコンポーネントを使用すると、標準の他のコンポーネントでは実現できない方法でフィールドを表示できます。 たとえば、LocationInput フィールドコンポーネントはユーザーの入力した場所を取得し、Googleマップのユーティリティで追加します。

「TextArea」、「Button」、「Slider」などのフィールドコンポーネントを使用すると、開発者はテキストボックス、ボタン、スライダーなどのインタラクティブなUI要素を設定できます。

ウィジェットコンポーネント

ウィジェットコンポーネントは、組み込みのロジックと機能によって操作性を向上させます。これらは通常、複数の標準Constellation UIコンポーネントを独自の方法で組み合わせたものです。ウィジェットを使用して、インタラクティブな自己完結型の情報を表示します。

FileInputはウィジェットコンポーネントの例です。 FileInputコンポーネントは、ドラッグ＆ドロップを使用するか、クリックされたときにユーザーのファイルエクスプローラーを開くことによって、ユーザーがファイルまたは添付ファイルをアップロードできるようにします。

レイアウトテンプレートコンポーネント

レイアウトテンプレートコンポーネントは、フィールドのレイアウトとフォーム上のウィジェットを提供します。レイアウトテンプレートコンポーネントを使用することで、App Studioが提供するレイアウトテンプレートでは実現できないレイアウトを作成できます。

レイアウトテンプレートコンポーネントの例として、Gridがあります。Gridは、アプリケーションのレイアウトを列と行のグリッド形式で整理します。列と行の交点がコンテナになります。各コンテナにはアイテムが含まれています。コンテナとアイテムの関係がレイアウトの構造を組み立てます。