4.0
Admin Consoleの共通設定

1. 概要

サンプルアプリの各実装におけるAdmin Consoleの共通設定です。

1.1. Calendar

サンプルアプリでは、Calendar機能を利用しています。マネージャーまたはオペレーターに属するユーザーは、運営者向け(管理画面)のTop画面に表示されているカレンダーで請求エンティティに登録された納品予定日を確認できます。
カレンダーを作成する方法の詳細は、開発者ガイドのCalendarの章を参照してください。

sample ec adminconsole calendar settlement

1.2. TreeView

サンプルアプリでは、TreeView機能を利用しています。マネージャーまたはオペレーターに属するユーザーは、運営者向け管理画面のメニューのウィジェットエリアでツリー表示された商品情報を確認できます。
TreeViewを作成する方法の詳細は、開発者ガイドのTreeViewの章を参照してください。

sample ec adminconsole treeview product

1.3. Entity多言語対応

画面に表示するメッセージは多言語対応が可能です。
Entity定義において、以下の2つの方法でEntityデータ自体に対する多言語設定ができます。詳しくは、開発者ガイドのデータの多言語対応の章を参照してください。

プロパティ単位の多言語化

設定方法

同一のEntity内に多言語用ラベルのプロパティを持つ方法です。 多言語用プロパティの命名ルールは以下の通りです。
{property名}_{言語}

sample ec adminconsole entity multilang property
  1. 多言語用のプロパティを作成します。

  2. Data Localize TypeEach Property を指定します。

  3. Support Language の言語項目にチェックを入れます。

画面表示

Top画面の日本語表示(左)と英語表示(右)

sample ec adminconsole entity multilang property result

レコード単位の多言語化

設定方法

言語毎にレコードを分ける方法です。 Entity定義に「多言語判別用プロパティ」および「対応言語」を設定することにより、 Entityデータ検索時に自動的に検索条件に 多言語判別用プロパティ = ユーザーの言語 を追加します。主に言語毎に対象とするデータの件数が異なる場合での利用を想定しています。

sample ec adminconsole entity multilang instance

  1. 言語判別用プロパティを作成します。

  2. Data Localize TypeEach Instance を指定します。

  3. Language に作成した言語判別用プロパティを指定します。

  4. Support Language の言語項目にチェックを入れます。

画面表示

Top画面の日本語表示(左)と英語表示(右)

sample ec adminconsole entity multilang instance result

言語別に同じ画面で異なるEntityデータを表示することができます。

1.4. 一括更新画面

設定方法

GEMモジュールで作成された管理画面に独自のカスタムテンプレートを組み込むことが可能です。
マネージャーまたはオペレーターに属するユーザーが、商品の在庫状況を一括更新できる機能を例として説明します。

  • Commandの定義

    在庫一括表示用Commandクラス

    ファイル名

    src/main/java/samples/ec01/command/backoffice/stock/StockBulkViewCommand.java

    @ActionMapping(
            name = "samples/ec01/backoffice/stock/stockUpdate", (1)
            displayName = "在庫一括表示",
            privileged = false, (2)
            result = @Result(
                    type = Type.TEMPLATE,
                    value = "samples/ec01/backoffice/stock/stockUpdate"
            ))
    @CommandClass(
            name = "samples/ec01/backoffice/stock/StockBulkViewCommand",
            displayName = "在庫一括表示コマンド")
    public class StockBulkViewCommand implements Command {
    ----------------------------------------以下略----------------------------------------
    1 在庫一括表示用Action
    2 特権実行モードをfalseに指定します。

    在庫一括更新用Commandクラス

    ファイル名

    src/main/java/samples/ec01/command/backoffice/stock/StockBulkUpdateCommand.java

    @ActionMapping(
            name = "samples/ec01/backoffice/stock/doStockUpdate",  (1)
            displayName = "在庫一括更新",
            privileged = false, (2)
            result = @Result(
                    type = Type.TEMPLATE,
                    value = "samples/ec01/backoffice/stock/stockUpdate"))
    @CommandClass(
            name = "samples/ec01/backoffice/stock/StockBulkUpdateCommand",
            displayName = "在庫一括更新コマンド")
    public class StockBulkUpdateCommand implements Command {
    
        private final String RESULT_PRODUCT_LIST = "productList";
    
        @Override
        public String execute(RequestContext request) {
    ----------------------------------------以下略----------------------------------------
    1 在庫一括更新用Action
    2 特権実行モードをfalseに指定します。
  • Template定義

    • JSPを利用してテンプレートを作成します。

      ファイル名

      src/main/webapp/jsp/samples/ec01/backOffice/stock/stockUpdate.jsp

    • レイアウトテンプレートを指定します。

      ファイル名

      src/main/resources/samples-ec01-ce-metadata.xml

          <!-- Backoffice pages start -->
          <metaDataEntry>
              <metaData xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
                  xsi:type="metaJspTemplate">
                  <name>samples/ec01/backoffice/stock/stockUpdate</name>
                  <displayName>在庫一括更新画面</displayName>
                  <path>/jsp/samples/ec01/backOffice/stock/stockUpdate.jsp</path>
                  <layoutId>/action/gem/layout/defaultLayout</layoutId> (1)
                  <contentType>text/html; charset=utf-8</contentType>
              </metaData>
          </metaDataEntry>
          <!-- Backoffice pages end -->
      1 利用するレイアウトテンプレートに管理画面用の標準レイアウトを指定します。
  • Topメニュー画面

    • 一括更新画面を表示するアクションメニューアイテムを新規作成します。

      sample ec adminconsole bulkupdate actionmenu
      1. 在庫一括表示用Actionクラスを指定します。

    • 作成したアクションメニューアイテムをマネージャーとオペレーター用のメニューに組み込みます。

      sample ec adminconsole bulkupdate topmenu
      1. マネージャーに属するユーザー用のメニュー定義

      2. マネージャーに属するユーザー用のメニュー定義に在庫一括表示用アクションメニューアイテムを組み込みます。

画面表示

sample ec adminconsole bulkupdate update
  1. EC商品管理メニューを開き、「在庫一括更新」をクリックします。

  2. 更新したい商品の在庫数を入力して、「一括更新」ボタンをクリックします。

1.5. 帳票出力

サンプルアプリでは、2種類の帳票出力機能が利用されています。JasperReportsを用いた請求書ダウンロード機能と、POIを利用した注文明細帳票(Excel形式)のダウンロード機能です。
POIを利用した注文明細帳票(Excel形式)のダウンロード機能の実装は各サンプルアプリの実装方法によって異なっているため、詳細は各サンプルの説明を参照してください。

請求書ダウンロード(JasperReports)

JasperReportsを用いて、PDF形式の帳票出力を実行することが可能です。
以下では、このサンプルで利用されているPDF形式の請求書ダウンロード機能を実装するために必要な一連の設定について説明します。

設定方法
  • Command

    帳票出力の前に実行されるCommandクラス(ここではJavaの実装例)

    ファイル名

    src/main/java/samples/ec01/command/backoffice/report/SettlementViewCommand.java

        @Override
        public String execute(RequestContext request) {
            String oid = request.getParam(PARAM_OID);
            // 汎用的な検索
            Query query = Query.newQuery("select oid, order.customer, order.orderItem.product.name,"
                    + " order.orderItem.quantity, order.orderItem.product.price, order.orderItem.price "
                    + " from samples.ec01.order.Settlement where oid = '" + StringUtil.escapeEql(oid) + "'"); (1)
            List<Object[]> result = EntityDaoHelper.search(query);
            // 初期化
            for (int cnt = 0; cnt < MAX_CNT; cnt++) {
                request.setAttribute(RESULT_PRODUCT + cnt, "");
                request.setAttribute(RESULT_QUANTITY + cnt, 0L);
                request.setAttribute(RESULT_ITEM_PRICE + cnt, 0L);
                request.setAttribute(RESULT_PRICE + cnt, 0L);
            }
            int cnt = 0;
            Long totalPrice = 0L;
            for (Object[] obj : result) {
                String customer = (String) obj[1];
                String product = (String) obj[2];
                Long quantity = (Long) obj[3];
                Long itemPrice = (Long) obj[4];
                Long price = (Long) obj[5];
    
                request.setAttribute(RESULT_CUSTOMER, customer); (2)
                request.setAttribute(RESULT_PRODUCT + cnt, product); (2)
                request.setAttribute(RESULT_QUANTITY + cnt, quantity); (2)
                request.setAttribute(RESULT_ITEM_PRICE + cnt, itemPrice); (2)
                request.setAttribute(RESULT_PRICE + cnt, price); (2)
                totalPrice = totalPrice + price;
                cnt++;
            }
            request.setAttribute(RESULT_TOTAL_PRICE, totalPrice); (2)
    
            return Constants.CMD_EXEC_SUCCESS;
        }
    1 データ検索処理を実行します。
    2 RequestContextに検索データをセットします。
  • Template

    帳票出力テンプレート定義を設定します。

    ※ 帳票テンプレート定義に関する各設定項目の詳細は、開発者ガイドの帳票出力(Jasper/JXLS/POI)の章を参照してください。

    sample ec adminconsole report jasper template

    1. 呼び出される請求書の帳票テンプレート定義

    2. jrxml(JasperでテンプレートとなるXMLファイル)テンプレートファイルを指定します。

    3. 事前に実行したCommandクラスで検索データを格納したRequestContextのAttribute名を指定します。

    4. 言語別に帳票出力テンプレート定義を設定することが可能です。

  • Action

    sample ec adminconsole report action
    1. 帳票出力の前に実行するCommandクラス。

    2. 帳票テンプレート定義。

  • EntityViewの詳細画面のカスタマイズ

    請求エンティティを右クリックし、「Detail_Layoutを開く」ボタンをクリックします。
    「編集」ボタンをクリックします。

    sample ec adminconsole report customview
    sample ec adminconsole report customview settings
    1. エンティティの詳細画面にカスタムのボタンを表示します。

    2. カスタムボタンのラベルを設定します。

    3. クリックイベント関数を設定します。

画面表示

請求書ダウンロード機能の画面表示
管理画面で請求エンティティの検索一覧画面を開き、「詳細」リンクをクリックします。

sample ec adminconsole report settlement detail

「請求書ダウンロード」ボタンをクリックします。

sample ec adminconsole report settlement download

ダウンロードしたPDF帳票の中身を確認します。
このサンプルアプリでは、英語用の帳票テンプレートも別途用意しています。

sample ec adminconsole report settlement downloadfile

1.6. 検索結果の一括更新機能

設定方法

EntityViewの「Search_Layout」からEntityの検索画面をカスタマイズすることが可能です。
サンプルアプリでは、マネージャーまたはオペレーターに属するユーザーが、商品の検索結果の一覧から指定したレコードを一括更新できる機能をデフォルトで有効化しています。
この機能の詳細については、開発者ドキュメントの2.3. 一括更新画面を参照してください。

  • EntityViewの検索画面の設定

    • 商品エンティティの「Search_Layout」をカスタマイズし、検索画面の一括更新機能を有効化します。

      sample ec adminconsole searchview bulkupdate searchview
sample ec adminconsole searchview bulkupdate searchresultsection
  1. 「一括更新ボタンを表示」にチェックを入れます。

  2. サンプルアプリでは、「BulkViewレイアウト定義を利用」にチェックを入れています。

    この設定により、「Bulk_Layout」を利用して一括更新画面を生成し、複数項目を一括更新することが可能です。

画面表示

商品の検索結果画面の下部に「一括更新」ボタンが追加されています。

sample ec adminconsole searchview bulkupdate searchresult

検索結果のレコードを選択して、「一括更新」ボタンを押下すると、下図のように「Bulk_Layout」を利用した一括更新画面が表示されます(サンプルでは、デフォルトの「Bulk_Layout」を利用)。
任意の項目を入力し、一括更新画面下部の「一括更新」ボタンを押下することで、指定したレコードの任意の項目を一括で更新することが可能です。

sample ec adminconsole searchview bulkupdate bulkupdate