アダプティブフォームのテーマ themes-for-af-using-core-components

コマンドプロンプトまたはターミナルウィンドウをローカル開発環境で開きます。

git clone コマンドを実行して、テーマを複製します。

   git clone [Path of Git Repository of the theme]

[テーマの Git リポジトリのパス]を、テーマの対応する Git リポジトリの実際の URL に置き換えます。

例えば、キャンバステーマを複製するには、次のコマンドを実行します。

   git clone https://github.com/adobe/aem-forms-theme-canvas

コマンドを正常に実行すると、マシンの aem-forms-theme-canvas フォルダーにテーマのローカルコピーが作成されます。

テーマフォルダーをプレーンテキストエディターで開きます。例えば、Visual Studio Code Editor の aem-forms-theme-canvas フォルダーを開きます。

aem-forms-theme-canvas フォルダーに移動します。

次のコマンドを実行します。

      code .

Visual Studio Code でフォルダーが開きます。

package.json ファイルを編集用に開きます。

name および description 属性の値を設定します。

name 属性は、「aem-forms-wknd-theme」などのテーマを一意に識別するために使用され、フォーム作成ウィザード ​の「スタイル」タブに表示されます。description 属性では、目的や設計されたシナリオなど、テーマに関する追加の詳細を提供します。また、テーマのバージョン、説明、ライセンスを指定することもできます。

ファイルを保存して閉じます。

<your-theme-sources>/src/site/_variables.scss ファイルを編集用に開きます。

任意のプロパティの値を変更します。例えば、エラーのデフォルトの色は red ですが、これを red から blue に変更する場合は、$errorvariable の16 進数カラーコードを変更します。例：$error: #196ee5。

ファイルを保存して閉じます。

編集するために <your-theme-sources>/src/components/<component>/<component.scss> ファイルを開きます。例えば、ボタンコンポーネントのフォントの色を変更するには、<your-theme-sources>/src/components/button/button.scss ファイルを開きます。

必要に応じて値を変更します。例えば、マウスポインターを置いたときのボタンコンポーネントの色を green に変更するには、cmp-adaptiveform-button__widget:hover クラスの color: $white プロパティの値を 16 進数コードコードの #12B453、またはその他の green の色に変更します。最終的なコードは次のようになります。

.cmp-adaptiveform-button__widget:hover {
background: $dark-gray;
color: #12B453;
}

ファイルを保存して閉じます。

テーマレベルとコンポーネントレベルの両方でスタイルを定義する場合は、コンポーネントレベルで定義されたスタイルが優先されます。

テーマフォルダーをプレーンテキストエディターで開きます。例えば、Visual Studio Code エディターの aem-forms-theme-canvas フォルダーを開きます。

テーマフォルダーで env_template ファイルの名前を .env ファイルに変更し、次のパラメーターを追加します。

* **AEM url**
AEM_URL=https://[author-instance]

* **AEM Adaptive form name**
AEM_ADAPTIVE_FORM=Form_name

* **AEM proxy port**
AEM_PROXY_PORT=7000

例えば、フォームの URL が http://localhost:4502/editor.html/content/forms/af/contactusform.html です。したがって、次の値：

• AEM_URL = http://localhost:4502/
• AEM_ADAPTIVE_FORM = contactusform

ファイルを保存します。

テーマフォルダーのルートに移動します。この場合、テーマのフォルダー名は aem-forms-theme-canvas です。

コマンドプロンプトまたはターミナルを開きます。

npm install を実行して依存関係をインストールします。

npm run live を実行して、更新されたテーマを使用したフォームをローカルブラウザーでプレビューする場合。

テーマフォルダーをプレーンテキストエディターで開きます。例えば、Visual Studio Code エディターの aem-forms-theme-canvas フォルダーを開きます。

env_template ファイルを .env ファイルに名前を変更し、次のパラメーターを追加します。

* **AEM url**
AEM_URL=https://[author-instance]

* **AEM Adaptive form name**
AEM_ADAPTIVE_FORM=Form_name

* **AEM proxy port**
AEM_PROXY_PORT=7000

例えば、クラウド環境のフォームの URLは https://author-XXXX.adobeaemcloud.com/editor.html/content/forms/af/contactusform.html です。したがって、次の値：

• AEM_URL = https://author-XXXX-cmstg.adobeaemcloud.com/
• AEM_ADAPTIVE_FORM = contactusform

ファイルを保存します。

ローカルユーザーを作成します。

テーマフォルダーのルートに移動します。この場合、テーマのフォルダー名は aem-forms-theme-canvas です。

npm run live を実行すると、ローカルブラウザーにリダイレクトされます。

SIGN IN LOCALLY (ADMIN TASKS ONLY) をクリックして、ローカルユーザーの資格情報を使用してログインします。

テーマの新しいリポジトリを作成するには、リポジトリ／リポジトリを追加 ​をクリックします。

リポジトリを追加 ​ダイアログボックスで「リポジトリの名前」を指定します。例えば、custom-canvas-theme-repo などと指定します。

「保存」をクリックします。

「リポジトリ URL をコピー」をクリックし、リポジトリの URL をコピーします。

テーマフォルダーのルートに移動します。ここでは、テーマのフォルダー名は aem-forms-theme-canvas です。

コマンドプロンプトまたはターミナルを開きます。

次のコマンドをリストされている順序で実行します。

git remote add [alias-name-for-repository] [URL of repository]
git add .
git commit
git push [name-for-createdrepository]

次に例を示します。

git remote add canvascloudthemerepo https://git.cloudmanager.adobe.com/stage-aemformsdev/customcanvastheme/
git add .
git commit
git push canvascloudthemerepo

AEM Cloud Manager リポジトリにログインします。

「パイプライン」セクションの「追加」ボタンをクリックします。

Cloud Service 環境に応じて、「実稼動以外のパイプラインを追加」または「実稼動パイプラインを追加」を選択します。ここでは「実稼動パイプラインを追加」を選択します。

設定 ​手順に含まれる「実稼動パイプラインを追加」ダイアログで、パイプラインの名前を指定します。例えば、customcanvastheme という名前にします。

「続行」をクリックします。

ソースコード の手順で、
ターゲットデプロイメント／フロントエンドコード ​オプションを選択します。

最新の変更を含む​ リポジトリ ​と Git ブランチ ​の値を選択します。ここで選択したリポジトリ名は custom-canvas-theme-repo で、Git ブランチは main です。

変更がルートフォルダーにある場合は、/ として「コードの場所」を選択します。

「保存」をクリックします。

パイプラインの設定が完了したら、コールトゥアクションカードが更新されます。

作成したパイプラインを右クリックします。

「実行」をクリックします。

AEM Forms オーサーインスタンスにログインします。

Adobe Experience Manager／Forms／フォームとドキュメント ​を選択します。

作成／アダプティブフォーム ​の順にクリックします。アダプティブフォームを作成するためのウィザードが開きます。

「ソース」タブでコアコンポーネントテンプレートを選択します。

「スタイル」タブでテーマを選択します。

「作成」をクリックします。