フォームリスター項目にカスタムアクションボタンを追加 adding-custom-action-on-form-lister-items

Last update: Wed Mar 20 2024 00:00:00 GMT+0000 (Coordinated Universal Time)

AEM Forms では、使用可能なフォームをリストしたポータルページを作成できます。デフォルトの設定では、ポータルページで検索したりフォームをリストしたりできます。フォームを開いて、情報を入力および送信することができます。ポータルページにリストされているフォームには、レンダリングアクションのみがデフォルトで提供されています。ポータルページの利用可能なアクションの詳細については、フォームポータルページの作成を参照してください。

ポータルページには、その他のオプションも追加できます。フォームポータルのテンプレートをカスタマイズすることで、これらのオプションやアクションをカスタマイズできます。

この記事は、フォームポータルページから直接フォームのリンクを送信するボタンの作成方法を示します。このカスタマイズには、検索とリスターコンポーネントのテンプレートをアップデートすることが必要です。

テンプレートにアクションを追加するのに必要なコードは以下の通りです。コードスニペットの onclick 属性にはメールでフォームのリンクを送信するスクリプトがあります。

<div class="__FP_boxes-container __FP_single-color">
    <div class="boxes __FP_boxes __FP_single-color" data-repeatable="true">
  <div class="__FP_boxes-thumbnail">
            <img src ="${contextPath}${path}/jcr:content/renditions/cq5dam.thumbnail.319.319.png">
        </div>
        <h3 class="__FP_single-color" title="${name}" tabindex="0">${name}</h3>
        <p>${description}</p>
        <div class="boxes-icon-cont __FP_boxes-icon-cont">
            <div class="op-dow">
                <a href="${formUrl}" target="_blank" class="__FP_button ${htmlStyle}" title="${config-htmlLinkText}">Apply</a>
                <a class="__FP_button" title="Email a friend" href="#" onclick="javascript:window.location=&apos;mailto:?subject=Interesting information&body=I thought you might find {name} form helpful :  &apos;+window.location.protocol+window.location.host+&apos;${formUrl}&apos; ;">Email</a>
                <a href="${pdfUrl}" class="__FP_button ${pdfStyle}" title="${config-pdfLinkText}">Download</a>
            </div>
        </div>
    </div>
</div>

カスタムテンプレートで同様のアクションを追加できます。JavaScript 関数を定義するには、その関数をページレベルスクリプトに追加して、必要な HTML 要素にリンクします。上記の例では、onclick 式はリンク関数です。

テンプレートに編集を行った後、サンプルのポータルページには、以下のようにフォームのリンクをメールで送信するボタンが含まれています。

メール

recommendation-more-help

19ffd973-7af2-44d0-84b5-d547b0dffee2