カスタム・コンポーネント、CSSおよびモジュール・インポートの管理
カスタムCSSファイル、モジュール、コンポーネントなどのリソースをインポートして、インポートされたリソースへの"declarative"参照を作成できます。
設定エディタの「インポート」タブでは、アプリケーション、フローまたはページ・アーティファクト用にインポートされたリソースを管理できます。 カスタム・コンポーネント、CSSファイル、およびアプリケーションでコールするコードを含むモジュールを管理できます。 このタブを使用する場合のサンプル・シナリオをいくつか考えてみます:
- 非推奨または使用されなくなったコンポーネントがアーティファクトに含まれている場合、これらのコンポーネント定義はアーティファクトのメタデータにそのまま残りますが、監査によって非推奨または未使用のコンポーネント依存性としてフラグが設定される可能性があります。 JSONエディタを手動で編集することでこの問題を解決できますが、インポート・タブを使用すると、エラーを発生させることなくこれらのインポートを管理できます。
- 特定のページにカスタムCSSファイルを使用する場合は、通常、ページHTMLにimport文を手動で追加する必要があります。 インポート・タブでカスタムCSSファイルを宣言的に追加すると、HTMLページにインポートを手動で追加しなくても、インポートしたCSSファイルをフロー内の任意のページに簡単に適用できます。
- アプリケーション、フローまたはページ・レベルでJavaScriptモジュールを使用して、モジュール内にカスタム関数を作成する場合(たとえば、日付フィールドをISO文字列として書式設定できる
IntlConverterUtilsユーティリティ関数)、インポート・タブからモジュールを参照することで、JSONまたはJavaScriptファイルにコードを追加せずにアプリケーションでコールできるようになります。次のように、プロパティ・ペインで式エディタまたは変数ピッカーの関数を選択することによって、「関数のコール」アクションおよびコンポーネントのプロパティを使用して、アクション・チェーンでこれらの関数をコールできます。
図js-functions-variablepicker.pngの説明
アプリケーション、フローまたはページ・アーティファクトのインポートを管理するには:
- コンポーネント、CSSおよびカスタム・モジュールをインポートします:
- カスタム・コンポーネントをアプリケーション、フローまたはページ・アーティファクトにインポートするには、「+コンポーネント」をクリックし、コンポーネント名とコンポーネント・モジュールへのパスを入力します。 既存のコンポーネントを管理するには、その「アクション」メニューをクリックし、「編集」または「削除」を選択します。
- アプリケーション、フローまたはページ・アーティファクトでCSSファイルを参照するには、+ CSSをクリックし、既存のファイル、外部ファイルまたは新規ファイルへの参照を作成します:
- リソース・フォルダ内の既存のCSSファイルへの参照を作成するには、「既存」をクリックし、ドロップダウン・リストからファイルを選択します。 (CSSファイルをアプリケーション・リソースに追加する方法の詳細は、「アプリケーション・リソースの操作」を参照してください。)
- 外部CSSファイル(使用する外部リソースのフォントまたはアイコン)への参照を作成するには、「外部」をクリックし、ファイルへのパスを指定します。
- 新しいCSSファイルへの参照を作成するには、「新規」をクリックし、新しいファイル(自動的に作成される)の名前とパスを指定します。
既存のCSSファイルを管理するには、その「アクション」メニューをクリックし、「編集」または「削除」を選択します。
- アプリケーション、フローまたはページ・アーティファクトでコールするコードを含むカスタム・モジュールを参照するには、「+モジュール」をクリックし、モジュール名およびモジュールへのパスを入力します。
既存のモジュールを管理するには、その「アクション」メニューをクリックし、「編集」または「削除」を選択します。
