変更内容のテスト

[AEM Forms as a Cloud Service]{class="badge informative"}

**「コアコンポーネントを含む空白」**テンプレートに基づいてアダプティブフォームを作成。フォームに 3 つのボタンをドラッグ&ドロップし、「Corporate」、「Marketing」、「Default」というラベルを付けます。
次に示すように、ペイントブラシを選択して、企業ボタンとマーケティングボタンに適切なスタイルバリアントを割り当てます。

styles

3 番目のボタンには、デフォルトのスタイルが適用されます。

テーマプロジェクトの作成

次の手順では、テーマプロジェクトを作成します。テーマプロジェクトのルートフォルダーに移動し、次のスクリーンショットに示すように、コマンド「npm run build」を実行します。

build-theme

テーマプロジェクトが正常に作成されたら、変更をテストする準備が整います。

CSS を迅速かつ簡単にテストする方法

  • テーマプロジェクトの dist フォルダーにある theme.css ファイルを開きます。ファイルの内容をすべて選択してコピーします。
  • 前の手順で作成したフォームをプレビューします。
  • いずれかのボタンを右クリックし、「Inspect」を選択して Developer Console を開きます。
  • Developer Console で theme.css をクリックし、theme.css を開きます
  • CTR-A を使用して theme.css のコンテンツ全体を選択して削除し、「削除」ボタンを押します。
  • 前の手順で作成した theme.css のコンテンツをコピーして貼り付けます。
  • ボタンは、次に示すように適切なスタイルで更新されます。

final-buttons

変更内容のプッシュ

変更内容に問題がなければ、フロントエンドパイプラインを使用して、変更内容をクラウドインスタンスにプッシュできます。

recommendation-more-help
4859a77c-7971-4ac9-8f5c-4260823c6f69