カスタムツールバーアクションの作成 creating-a-custom-toolbar-action

前提条件 prerequisite

カスタムツールバーアクションを作成する前に、 クライアント側ライブラリの使用 および 開発とCRXDE Lite.

アクションとは what-is-an-action-br

アダプティブフォームには、フォーム作成者が一連のオプションを設定できるツールバーが用意されています。 これらのオプションは、アダプティブフォームのアクションとして定義されます。 パネルのツールバーの「編集」ボタンをクリックして、アダプティブフォームがサポートするアクションを設定します。

デフォルトのツールバーアクション

デフォルトで提供される一連のアクションに加えて、ツールバーでカスタムアクションを作成できます。 例えば、フォームを送信する前に、ユーザーがすべてのアダプティブフォームフィールドを確認できるようにするアクションを追加することができます。

アダプティブフォームでカスタムアクションを作成する手順 steps

カスタムのツールバーアクションを作成するには、次の手順を実行して、記入の済んだフォームを送信する前にアダプティブフォームのすべてのフィールドをエンドユーザーがレビューするためのボタンを作成します。

  1. アダプティブフォームでサポートされているデフォルトのアクションは、すべて /libs/fd/af/components/actions フォルダーにあります。CRXDE で、fileattachmentlisting ノードを /libs/fd/af/components/actions/fileattachmentlisting から /apps/customaction にコピーします。

  2. apps/customaction フォルダーにノードをコピーしたら、ノードの名前を reviewbeforesubmit に変更します。このノードの jcr:titlejcr:description のプロパティも変更します。

    jcr:title プロパティには、ツールバーダイアログに表示されるアクションの名前が含まれています。jcr:description プロパティには、アクションにマウスオーバーしたときに表示される詳細情報が含まれます。

    ツールバーのカスタマイズに使用するノードの階層

  3. reviewbeforesubmit ノード内の cq:template ノードを選択します。guideNodeClass プロパティの値が guideButton となっていることを確認し、それに合わせて jcr:title プロパティを変更します。

  4. cq:Template ノードの type プロパティを変更します。現在の例では、type プロパティを button に変更します。

    type の値が、コンポーネント用に生成されたHTMLに CSS クラスとして追加されます。 ユーザーは、その CSS クラスを使用して、アクションのスタイルを設定できます。 ボタン、送信、リセット、保存の各 type 値には、モバイルデバイスとデスクトップデバイスの両方に対応するデフォルトのスタイルが用意されています。

  5. アダプティブフォームを編集するツールバーのダイアログから、カスタムアクションを選択します。パネルのツールバーに「レビュー」ボタンが表示されます。

    カスタムアクションはツールバーで使用できます カスタムで作成したツールバーアクションの表示

  6. 「レビュー」ボタンに機能を持たせるには、reviewbeforesubmit ノードにある init.jsp ファイルに JavaScript、CSS コード、およびサーバーサイドのコードを追加します。

    init.jsp に次のコードを追加します。

    code language-jsp
    <%@include file="/libs/fd/af/components/guidesglobal.jsp" %>
    <guide:initializeBean name="guideField" className="com.adobe.aemds.guide.common.GuideButton"/>
    
    <c:if test="${not isEditMode}">
            <cq:includeClientLib categories="reviewsubmitclientlibruntime" />
    </c:if>
    
    <%--- BootStrap Modal Dialog  --------------%>
    <div class="modal fade" id="reviewSubmit" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h3>Review the Form Fields</h3>
                </div>
                <div class="modal-body">
                    <div class="modal-list">
                        <table class="table table-bordered">
                            <tr class="name">
                                <td class="reviewlabel col-md-3 active">
                                    <label>Your Name is: </label>
                                </td>
                            </tr>
                            <tr class="pan">
                                <td class="reviewlabel col-md-3 active">
                                    <label>Your Pan Number is: </label>
                                </td>
                            </tr>
                            <tr class="dob">
                                <td class="reviewlabel col-md-3 active">
                                    <label>Your Date Of Birth is: </label>
                                </td>
                            </tr>
                            <tr class="80cdeclaration">
                                <td class="reviewlabel col-md-3 active">
                                    <label>Your Total 80C Declaration Amount is: </label>
                                </td>
                            </tr>
                            <tr class="rentpaid">
                                <td class="reviewlabel col-md-3 active">
                                    <label>Your Total HRA Amount is: </label>
                                </td>
                            </tr>
                        </table>
                    </div>
                </div><!-- /.modal-body -->
                <div class="modal-footer">
                    <div class="fileAttachmentListingCloseButton col-md-2 col-xs-2 col-sm-2">
                        <button data-dismiss="modal">Close</button>
                    </div>
                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal-dialog -->
    </div><!-- /.modal -->
    

    ReviewBeforeSubmit.js ファイルに次のコードを追加します。

    code language-javascript
    /*anonymous function to handle show of review before submit view */
    $(function () {
        if($("div.reviewbeforesubmit button[id*=reviewbeforesubmit]").length > 0) {
            $("div.reviewbeforesubmit button[id*=reviewbeforesubmit]").click(function(){
                // Create the options object to be passed to the getElementProperty API
                var options = {},
                    result = [];
                options.somExpressions = [];
                options.propertyName = "value";
                guideBridge.visit(function(model){
                    if(model.name === "name" || model.name === "pan" || model.name === "dateofbirth" || model.name === "total" || model.name === "totalmonthlyrent"){
                            options.somExpressions.push(model.somExpression);
                    }
                }, this);
                result = guideBridge.getElementProperty(options);
    
                $('#reviewSubmit .reviewlabel').each(function(index, item){
                    var data = ((result.data[index] == null) ? "No Data Filled" : result.data[index]);
                    if($(this).next().hasClass("reviewlabelvalue")){
                        $(this).next().html(data);
                    } else {
                        $(this).after($("<td></td>").addClass("reviewlabelvalue col-md-6 active").html(data));
                    }
                });
                // added because in mobile devices it was causing problem of backdrop
                $("#reviewSubmit").appendTo('body');
                $("#reviewSubmit").modal("show");
            });
        }
    });
    

    ReviewBeforeSubmit.css ファイルに次のコードを追加します。

    code language-css
    .modal-list .reviewlabel {
        white-space: normal;
        text-align: right;
        padding:2px;
    }
    
    .modal-list .reviewlabelvalue {
        border: #cde0ec 1px solid;
        padding:2px;
    }
    
    /* Adding icon for this action in mobile devices */
    /* This is the glyphicon provided by bootstrap eye-open */
    /* .<type> .iconButton-icon */
    .reviewbeforesubmit .iconButton-icon {
        position: relative;
        top: -8px;
        font-family: 'Glyphicons Halflings';
        font-style: normal;
    }
    
    .reviewbeforesubmit .iconButton-icon:before {
        content: "\e105"
    }
    
  7. カスタムアクションの機能を検証するには、プレビューモードでアダプティブフォームを開いて、ツールバーの「レビュー」ボタンをクリックします。

    note note
    NOTE
    オーサリングモードでは GuideBridge ライブラリは読み込まれません。そのため、オーサリングモードではこのカスタムアクションは動作しません。

    カスタムレビューボタンのアクションのデモ

サンプル samples

次のアーカイブには、コンテンツパッケージが含まれています。 このパッケージには、上記のカスタムツールバーアクションのデモに関連するアダプティブフォームが含まれています。

ファイルを取得

recommendation-more-help
19ffd973-7af2-44d0-84b5-d547b0dffee2