アセット一覧表示画面へのカスタムアクションの追加

概要

Correspondence Management ソリューションでは、「アセットを管理」UI にカスタムアクションを追加できます。

次のカスタムアクションをアセット一覧表示画面に追加できます。

  • 1 つ以上のアセットタイプまたはレター。
  • 1 つまたは複数のアセット／レター選択時の実行アクション（アクション／コマンドをアクティブにする）、または非選択時の実行アクション。

このカスタマイズの使用事例として、レターのアセット一覧表示画面に「Download Flat PDF」コマンドを追加するシナリオが示されます。このカスタマイズのシナリオでは、選択された1つのレターのフラットなPDFをユーザーがダウンロードできます。

前提条件

以下で説明するシナリオまたは同様のシナリオを完了するには、次の知識が必要になります。

  • CRX
  • JavaScript
  • Java

シナリオ：レターリストの UI にコマンドを追加してレターのフラットな PDF 版をダウンロードする

次の手順でレターのアセット一覧画面に「Download Flat PDF」コマンドを追加し、選択されたレターのフラットな PDF のダウンロードをユーザに許可することができます。これらの手順で適切なコードとパラメーターを使用することで、データディクショナリやテキストなどこれ以外のアセットにその他の機能を追加することもできます。

Correspondence Management をカスタマイズしてレターのフラットな PDF のダウンロードをユーザーに許可するには、以下の手順を実行します。

  1. https://'[server]:[port]'/[ContextPath]/crx/deに移動し、管理者としてログインします。

  2. 次の手順で、appsフォルダーに、selectionフォルダー内のitemsフォルダーに類似したパス/構造でitemsという名前のフォルダーを作成します。

    1. 次のパスにある​items​フォルダーを右クリックし、「ノードをオーバーレイ」を選択します。

      /libs/fd/cm/ma/gui/content/cmassets/jcr:content/body/content/header/items/selection/items

      メモ

      このパスは、1 つまたはそれ以上のアセット／レターの選択時に機能するアクションを作成する際に使用されます。選択を行わなくても機能するアクションを作成する場合は、代わりに次のパスにオーバーレイノードを作成し、それに応じて残りの手順を完了します。

      /libs/fd/cm/ma/gui/content/cmassets/jcr:content/body/content/header/items/default/items

      ノードを作成

    2. ノードをオーバーレイダイアログに次の値が表示されていることを確認します。

      パス： /libs/fd/cm/ma/gui/content/cmassets/jcr:content/body/content/header/items/selection/items

      場所： /apps/

      ノードタイプを一致： 選択

      ノードをオーバーレイ

    3. 「OK」をクリックします。apps フォルダーにフォルダー構造が作成されます。

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

  3. 新しく作成したitemsフォルダーに、特定のアセットのカスタムのボタン/アクションのノードを追加します(例：downloadFlatPDF)を使用します。

    1. items​フォルダーを右クリックし、作成/ノードを作成​を選択します。

    2. ノードを作成ダイアログに次の値が表示されていることを確認し、「OK」をクリックします。

      名前： downloadFlatPDF（またはこのプロパティに与える名前）

      Type: nt:unstructured

    3. 新しく作成したノードをクリックします（ここでは downloadFlatPDF）。CRX にノードのプロパティが表示されます。

    4. 次のプロパティをノード（ここでは downloadFlatPDF）に追加し、「すべて保存」をクリックします。

      名前 型 値と説明
      class String foundation-collection-action
      foundation-collection-action 文字列

      {"ターゲット":".cq-manageasset-admin-childpages", "activeSelectionCount":"single","type":"LETTER"}


      activeSelectionCountは、1つまたは複数に指定でき、カスタムアクションが実行される1つまたは複数のアセットを選択できます。

      typeは、次のうち1つ以上（カンマ区切りの複数エントリ）にすることができます。LETTER,TEXT,リスト，条件，DATADICTIONARY
      icon 文字列 icon-download

      Correspondence Management のコマンド／メニューの左側に表示されるアイコンです。使用できる様々なアイコンと設定については、CoralUI Iconsドキュメントを参照してください。
      jcr:primaryType 名前 nt:unstructured
      rel 文字列 download-flat-pdf-button
      sling:resourceType 文字列 granite/ui/components/endor/actionbar/button
      text 文字列 Download Flat PDF（または任意のラベル）

      アセット一覧表示のインターフェイスに表示されるコマンド。
      title 文字列 Download a flat PDF of the selected letter（または任意のラベルや代替テキスト）

      このタイトルは、カスタムコマンドの上にカーソルを置いたときに Correspondence Management に表示される代替テキストです。

  4. 次の手順で、appsフォルダーに、adminフォルダー内のitemsフォルダーに類似したパス/構造でjsという名前のフォルダーを作成します。

    1. 次のパスにある​js​フォルダーを右クリックし、「ノードをオーバーレイ」を選択します。

      /libs/fd/cm/ma/gui/components/admin/clientlibs/admin/js

    2. ノードをオーバーレイダイアログに次の値が表示されていることを確認します。

      パス： /libs/fd/cm/ma/gui/components/admin/clientlibs/admin/js

      場所： /apps/

      ノードタイプを一致： 選択

    3. 「OK」をクリックします。apps フォルダーにフォルダー構造が作成されます。「すべて保存」をクリックします。

  5. 次の手順を使用し、formaction.js という名前のファイルを js フォルダーに作成し、ボタンのアクション処理のコードを指定します。

    1. 次のパスにある​js​フォルダーを右クリックし、作成/ファイルを作成​を選択します。

      /apps/fd/cm/ma/gui/components/admin/clientlibs/admin/js

      ファイルにformaction.jsという名前を付けます。

    2. ファイルをダブルクリックして、CRX で開きます。

    3. formaction.js ファイル（/apps 階層の下）で、formaction.js ファイルのコードを次の場所にコピーします。

      /libs/fd/cm/ma/gui/components/admin/clientlibs/admin/js/formaction.js

      次に、formaction.jsファイル（/apps階層の下）の末尾に次のコードを追加し、「すべて保存」をクリックします。

      /* Action url for xml file to be added.*/
var ACTION_URL = "/apps/fd/cm/ma/gui/content/commons/actionhandlers/items/letterpdfdownloader.html";

/* File upload handling*/
var fileSelectedHandler = function(e){
    if(e && e.target && e.target.value)
        $(".downloadLetterPDFBtn").removeAttr('disabled');
    else
        $(".downloadLetterPDFBtn").attr('disabled','disabled');
}

/*Handing of Download button in pop up.*/
var downloadClickHandler = function(){
    $('#downloadLetterPDFDilaog').modal("hide");
    var element = $('.foundation-selections-item');
    var path = $(element).data("path");
    $("#fileUploadForm").attr('action', ACTION_URL + "?letterId="+path).submit();
}

/*Click handling on action button.*/
$(document).on("click",'.download-flat-pdf-button',function(e){
    $("#uploadSamepledata").val("");
     if($('#downloadLetterPDFDilaog').length == 0){
        $(document).on("click",".downloadLetterPDFBtn",downloadClickHandler);
        $(document).on("change","#uploadSamepledata",fileSelectedHandler);
        $("body").append(downloadLetterPDFDilaog);
    }
      $('#downloadLetterPDFDilaog').modal("show");
});

/*Download popup.*/
var downloadLetterPDFDilaog = '<div id="downloadLetterPDFDilaog" class="coral-Modal notice " role="dialog"  aria-hidden="true">'+
    '<form id="fileUploadForm" method="POST" enctype="multipart/form-data">'+
        '<div class="coral-Modal-header">'+
            '<h2 class="coral-Modal-title coral-Heading coral-Heading--2" id="modal-header1443020790107-label" tabindex="0">Download Letter as PDF.</h2>'+
            '<button type="button" class="coral-MinimalButton coral-Modal-closeButton" data-dismiss="modal">×</button>'+
        '</div>'+
        '<div class="coral-Modal-body" id="modal-header1443020790107-message" role="document" tabindex="0">'+
            '<div class="coral-Modal-message">'+
                '<p></p>'+
            '</div>'+
            '<div class="coral-Modal-uploader">'+
                '<p>Select sample data for letter.</p>'+
                '<input type="file" id="uploadSamepledata" name="file" accept=".xml" size="70px">'+
            '</div>'+
        '</div>'+
     '</form>'+
        '<div class="coral-Modal-footer">'+
            '<button type="button" class="coral-Button" data-dismiss="modal">Cancel</button>'+
            '<button type="button" class="coral-Button coral-Button--primary downloadLetterPDFBtn" disabled="disabled">Download</button>'+
        '</div>'+
'</div>';

      この手順で追加するコードは libs フォルダーのコードを上書きします。そのため、変更前のコードを /apps 階層の formaction.js ファイルにコピーしてください。/libs 階層から /apps 階層にコードをコピーすることでも変更前の機能を保持することができます。

      上記のコードは、この手順で作成されたレターごとのコマンド処理のアクションに使用されます。その他のアセットの処理を行うアクションについては、JavaScript コードを変更してください。

  6. 次の手順を使用して、appsフォルダーに、actionhandlersフォルダー内のitemsフォルダーに類似したパス/構造でitemsという名前のフォルダーを作成します。

    1. 次のパスにある​items​フォルダーを右クリックし、「ノードをオーバーレイ」を選択します。

      /libs/fd/cm/ma/gui/content/commons/actionhandlers/items/

    2. ノードをオーバーレイダイアログに次の値が表示されていることを確認します。

      パス： /libs/fd/cm/ma/gui/content/commons/actionhandlers/items/

      場所： /apps/

      ノードタイプを一致： 選択

    3. 「OK」をクリックします。apps フォルダーにフォルダー構造が作成されます。

    4. 「すべて保存」をクリックします。

  7. 新しく作成されたitemsノードの下で、特定のアセットのカスタムのボタン/アクションのノードを追加します(例：letterpdfdownloaderを参照)を次の手順で使用します。

    1. items フォルダーを右クリックして、「作成／ノードを作成」を選択します。

    2. ノードを作成ダイアログに次の値が表示されていることを確認し、「OK」をクリックします。

      Name:letterpdfdownloader(または、このプロパティに与える 名前。一意の名前を付ける必要があります。ここで別の名前を使用する場合は、formaction.jsファイルのACTION_URL変数でも同じ名前を指定します)。

      Type: nt:unstructured

    3. 新しく作成したノードをクリックします（ここでは downloadFlatPDF）。CRX にノードのプロパティが表示されます。

    4. 次のプロパティをノード（ここでは letterpdfdownloader）に追加し、「すべて保存」をクリックします。

      名前 種類 値
      sling:resourceType 文字列 fd/cm/ma/gui/components/admin/clientlibs/admin

  8. 次の場所に、コマンドのPOST処理用のコードを使用して、アクション.jspという名前のファイルを作成します。

    /apps/fd/cm/ma/gui/components/admin/clientlibs/admin

    1. 次のパスにある​admin​フォルダーを右クリックし、作成/ファイルを作成​を選択します。

      /apps/fd/cm/ma/gui/components/admin/clientlibs/admin

      ファイルに POST.jsp という名前を付けます。(ファイル名は、POST.jspのみである必要があります)。

    2. POST.jsp​ファイルを重複クリックして、CRXで開きます。

    3. POST.jsp ファイルに次のコードを追加して、「すべて保存」をクリックします。

      このコードはレターのレンダリングサービスに固有のコードです。その他のアセットに関しては、このコードにアセットの Java ライブラリを追加してください。AEM Forms API について詳しくは、「AEM Forms API」を参照してください。

      AEMライブラリについて詳しくは、AEM コンポーネントを参照してください。

      /*Import libraries. Here we are downloading letter flat pdf with input xml data so we require letterRender Api. For any other Module functionality we need to first import that library. */
<%@include file="/libs/foundation/global.jsp?lang=ja"%>
<!DOCTYPE html lang="en" PUBLIC "-//W3C//DTD XHTML 1.1//EN" "https://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<%@page import="com.adobe.icc.ddg.api.*"%>
<%@page import="com.adobe.icc.dbforms.obj.*"%>
<%@page import="com.adobe.icc.render.obj.*" %>
<%@page import="com.adobe.icc.services.api.*" %>
<%@page import="org.apache.sling.api.resource.*" %>
<%@page import="java.io.File" %>
<%@page import="java.util.*" %>
<%@page import="com.adobe.livecycle.content.appcontext.AppContextManager"%>
<%@page import=" com.adobe.icc.dbforms.exceptions.ICCException"%>
<%@page import="java.io.InputStream" %>
<%@page import="java.io.FileInputStream" %>
<%@page import="org.apache.commons.io.IOUtils" %>
<%@page session="false" contentType="text/html; charset=utf-8"%>
<%@taglib prefix="sling" uri="https://sling.apache.org/taglibs/sling/1.0"%>
<%@taglib prefix="cq" uri="https://www.day.com/taglibs/cq/1.0" %>
 <%@page session="false" contentType="text/html; charset=utf-8"%>
<%
   AppContextManager.setCurrentAppContext("/content/apps/cm");
   /*Get letter id sent in js file.*/
    String letterId = request.getParameter("letterId");
    if(letterId.lastIndexOf("?") != -1)
        letterId = letterId.substring(0, letterId.indexOf("?"));
    String fileName = null;
    String letterName = null;
    InputStream inputStream = null;
    /*Get xml file data*/
    if (slingRequest.getRequestParameter("file") != null)
        inputStream = slingRequest.getRequestParameter("file").getInputStream();
    if(letterId != null){
        String xmlData = null;
        try{
            xmlData = IOUtils.toString(inputStream, "UTF-8");
        }
        catch (Exception e) {
            log.error("Xml data does not exists.");
        }
        /*letter Name from letter letter id.*/
        letterName = letterId.substring(letterId.lastIndexOf("/")+1);
        /*Invoking letter render services API.*/
        LetterRenderService letterRenderService = sling.getService(LetterRenderService.class);
        /*using CM renderLetter api to get pdfbytes.*/
        PDFResponseType  pdfResponseType= letterRenderService.renderLetter(letterId,xmlData,true,false,false,false);
        byte[] bytes = null;
        /*Downloading pdf bytes as pdf.*/
        if(pdfResponseType != null && pdfResponseType.getFile() != null){
            bytes = pdfResponseType.getFile().getDocument();
            /*set the response header to enable download*/
            response.setContentType("application/OCTET-STREAM");
            response.setHeader("Content-Disposition", "attachment;filename=\"" + letterName + ".pdf\"");
            response.setHeader("Pragma", "cache");
            response.setHeader("Cache-Control", "private");
            out.clear();
            response.getOutputStream().write(bytes);
        }
    }
    else{
        log.error("Letter id does not exists.");
    }
%>

カスタム機能によるレターのフラットな PDF のダウンロード

レターのフラットなPDFのダウンロード用にカスタム機能を追加した後、次の手順を使用して、選択したレターのフラットなPDFバージョンをダウンロードできます。

  1. https://'[server]:[port]'/[ContextPath]/projects.htmlに移動し、ログインします。

  2. 「フォーム／レター」を選択します。Correspondence Management によってシステムで使用可能なレターが一覧表示されます。

  3. 「選択」をクリックし、レターをクリックして選択します。

  4. 詳細/<Download Flat PDF>（この記事の説明に従って作成されたカスタム機能）を選択します。 PDF でレターをダウンロードするダイアログが表示されます。

    メニュー項目の名前、機能、代替テキストは、シナリオで作成したカスタマイズに従います。レター追加のフラットなPDF版をダウンロードするためのレターリストユーザーインターフェイスへのコマンド。

    カスタム機能：フラットな PDF のダウンロード

  5. PDFとしてレターをダウンロードダイアログで、PDFに入力するデータに関連するXMLを選択します。

    メモ

    フラットなPDFとしてレターをダウンロードする前に、「レポートを作成」オプションを使用して、レター内のデータを含むXMLファイルを作成できます。

    PDF でレターをダウンロード

    フラットな PDF としてレターがコンピューターにダウンロードされます。

このページ

Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now