AEMアセットのProperty設定に、複数行のテキスト入力について

AEMアセットのプロパティ設定画面では、テキスト入力欄に、単数行のテキストしか入力できません。

f:id:www0532:20210804184655p:plain

原因

この原因として、アセットのプロパティ設定画面のテキスト入力に関して、単数行のテキスト入力コンポーネント（textfield）しか設置されていないことです。

それは、アセットのプロパティ設定画面の項目を編集する Metadata Schema Form Editor 画面を開ければわかりますが、Single Line Text しかありません。

f:id:www0532:20210804190458p:plain

解決方法

これから、複数行のテキストを入力したい場合、そのカスタマイズ方法を紹介いたします。

AEMでは、複数行のテキストが入力できるコンポーネント（textarea）が用意されています。

このコンポーネントをプロパティ設定画面に設置すれば、問題が解決できます。

ステップ１

先ずは、Single Line Text と同じフォルダに、Multi line text のソースコードを用意します。

コピー元

/libs/dam/gui/coral/components/admin/schemaforms/formbuilder/formfields/v2/textfield/textfield.jsp

コピー先

/apps/dam/gui/coral/components/admin/schemaforms/formbuilder/formfields/v2/textarea/textarea.jsp

textarea.jspの中身は、下記のように、改修します。

改修前

    <input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "/resourceType") %>" value="granite/ui/components/coral/foundation/form/textfield">

改修後

    <input type="hidden" name="<%= xssAPI.encodeForHTMLAttr("./items/" + key + "/resourceType") %>" value="granite/ui/components/coral/foundation/form/textarea">

ステップ２

次は、 Metadata Schema Form Editor 画面のソースコードをlibs配下からapps配下にコピーし編集します。

コピー元

/libs/dam/gui/coral/components/admin/schemaforms/formbuilder/v2/builditems.jsp

コピー先

/apps/dam/gui/coral/components/admin/schemaforms/formbuilder/v2/builditems.jsp

コピー先のソースコードに、下記を追記する

<li class="field" data-fieldtype="text">
    <div class="formbuilder-template-title"><coral-icon icon="fileTxt" size="M"></coral-icon><span><%= i18n.get("Multi line text") %></span></div>
    <script class="field-properties" type="text/x-handlebars-template">
    <sling:include resource="<%= fieldTemplateResource %>"
                   resourceType="dam/gui/coral/components/admin/schemaforms/formbuilder/formfields/v2/textarea" />
</script>