ActiveReports新バージョンで強化される「Webデザイナ」のカスタマイズ機能（2）

前回の記事では、ActiveReports新バージョンで強化される「Webデザイナ」のカスタマイズ機能として「レポートパーツ」機能をご紹介し、この機能を活用することで、エンドユーザー自らが、より簡単に帳票作成が行えるようになる事についてお伝えしました。

今回は、新バージョンで強化される「Webデザイナ」のカスタマイズ機能の第2弾として、ユーザーが必要な機能だけを利用できるようにする、カスタマイズ機能についてご紹介していきます。

新たに追加されるデザイナ機能の制御

必要なコントロールのみを表示する

はじめに、「Webデザイナ」の「レポートコントロール」の機能を制御する方法についてご紹介いたします。「レポートコントロール」は「Webデザイナ」で帳票作成を行うための「帳票部品」です。通常は全ての「レポートコントロール」が表示されており、多くのコントロールから一つを選択するため、ユーザによっては使用するコントロールの選択に迷ったり、誤って配置する可能性もあり、帳票の作成を難しく感じる一因となっていると考えられます。

「18.0J」では、こうした課題に対応するために、「レポートコントロール」の表示と非表示をカスタマイズできる機能を追加しました。

それでは、実際に必要なコントロールのみを表示する方法ご紹介していきます。今回は「18.0J」にて提供される予定の「WebDesigner_MVC_Core」サンプルを利用して解説します。

「レポートコントロール」の表示制御は、「セクション」、「ページ」、「RDL・ダッシュボード」のそれぞれのレポート形式で設定を行うことができます。次の画像のようにソリューションエクスプローラーで「wwwroot\script.js」のファイルを開きます。

まず、「セクション」で使用する「レポートコントロール」を次の図のように、「TextBox」と「Picture」コントロールのみを使用できるようにカスタマイズしてみます。

    rpx: {
        toolBoxContent: [ 'TextBox', 'Picture' ]
    },

実行させてみると、次のようにデザイン画面上には、「テキストボックス」と「ピクチャー」のみが表示されています。変更前と見比べると、はっきりとその違いがわかります。

次に、「ページ」および「RDL・ダッシュボード」に対してもカスタマイズを行っていきます。

次のように、「ページ」レポート形式には、「Image」、「List」、「Table」、「Tablix」、「Chart」、「Bullet」、「Barcode」、「Formatted Text」が表示されるように、「script.js」にコードを追加します。同様に、「RDL・ダッシュボード」レポート形式には、「TextBox」、「CheckBox」、「Container」が表示されるように、対応するコードを追加します。

    rdlx: {
        toolBoxContent: {
            // fpl: ページレポート
            fpl: ['image', 'list', 'table', 'tablix', 'chart', 'bullet', 'barcode', 'formattedtext'],
            // cpl: RDLレポート、ダッシュボード
            cpl: ['textbox', 'checkbox', 'container']
        },
    },

上記のコード追加後、動作を確認してみます。それぞれのレポート形式で設定した「レポートコントロール」のみが表示されることが確認できました。

上記で追加した以外にも、以下の表にある「レポートコントロール」を設定可能です。

表示されるプロパティを制御する

ここまでで、必要な「レポートコントロール」のみを表示するカスタマイズ機能についてご紹介してきました。「18.0J」では、これに加えて、さまざまなデザイナーの機能を制御することができるようになりました。

次にご紹介するのは「レポートコントロール」を設定する際に表示される「プロパティ」の表示を制御する方法です。帳票デザインを行う際、レイアウトの設定や「レポートコントロール」に対しさまざまな「プロパティ」を設定する必要がありますが、初期設定で利用するケースが大半ですので、設定を変更する「プロパティ」だけが表示されている方がより迷いなく帳票デザインが行えます。

「18.0J」ではこうしたニーズを受け、表示される「プロパティ」を制御することが可能となりました。次のコードは、「TextBox」コントロールの「プロパティ」を、図のように「値」だけが表示されるように制御しています。今回は「TextBox」コントロールの場合のみに制御を行っていますが、全ての「レポートコントロール」などに、同一の「プロパティ」を一律に制御することも可能です。※ 機能の詳しい説明についてはリリース後ヘルプをご覧ください。

filterProperties: (descriptors, item, platform) => {
    console.log({ descriptors, item, platform }) 
    if (item.Type === 'textbox' || item.Type === 'TextBox') {
        return descriptors.filter(d => {
            return d.valuePath !== 'Name'
                && d.category !== 'propertyDescriptors:categories.action'
                && d.category !== 'propertyDescriptors:categories.background'
                && d.category !== 'propertyDescriptors:categories.border'
                && d.category !== 'propertyDescriptors:categories.text'
                && d.category !== 'propertyDescriptors:categories.data'
                && d.category !== 'propertyDescriptors:categories.dimensions'
                && d.category !== 'propertyDescriptors:categories.international'
                && d.category !== 'propertyDescriptors:categories.layout'
                && d.category !== 'propertyDescriptors:categories.misc'
                && d.category !== 'propertyDescriptors:categories.text'
                && d.category !== 'propertyDescriptors:categories.userSort'
                && d.category !== 'propertyDescriptors:categories.visibility'
        });
    }
},

アプリバーの機能を制御する

その他に追加された機能としては、アプリバー内の「ホーム」、「コンテキスト（レイアウト、レポート、エリア）」、「パラメータ」、「スクリプト」の機能を制御することが可能となりました。

次のコードを「script.js」に追加することにより、図のようにそれぞれの機能の利用を制御可能となります。これまでもアプリバー全体を制御することは可能でしたが、アプリバー内で特定の機能の利用を制御することはできませんでした。この変更により、アプリバー内での利用したい機能ごとに制限をかけることができ、より柔軟で高度なカスタマイズが可能になります。

    appBar: {
        homeTab: { visible: false },           //ホーム
        contextActionsTab: { visible: false }, //コンテキスト
        parametersTab: { visible: false },     //パラメータ
        scriptTab: { visible: false }          //スクリプト（レポート形式がセクションの場合）
    },

ツールバー・ステータスバーの機能を制御する

さらに、「ツールバー」、「ステータスバー」に関する機能制御も追加されました。

「ツールバー」は先ほどご紹介した「アプリバー」の機能に応じた「ツール」機能を提供するエリアです。「アプリバー」上の機能を全て非表示にすると、「ツールバー」には「アプリバー」の「ホーム」機能が表示され、「ホーム」機能は利用可能なままです。これを防ぐには、「ツールバー」を非表示にすることで、「アプリバー」に含まれている機能を無効化できます。

次のコードを「script.js」に追加することにより、図のように非表示となります。

toolBar: { visible: false },

つづいて「ステータスバー」ですが、この機能は、主にデザイナ面に関する設定（拡大・縮小、グリッドの表示切替、幅、スナップなど）を行うためのものです。これらの設定を変更させたくない場合などは、「ステータスバー」を非表示にして制限することで、誤操作などを防ぐことが可能です。

今までの手順と同様に以下のコードを「script.js」に追加することにより、図のように非表示となります。

statusBar: { visible: false },

新機能と既存のカスタマイズ機能を組み合わせる

「Webデザイナ」には「18.0J」で追加された機能以外にもカスタマイズ機能を提供しています。今回はその中から最もカスタマイズのニーズの高い「データ」タブのカスタマイズ機能をピックアップしてご紹介します。

データタブの機能を制御する

帳票データソースの設定に必要な「データ」設定ですが、データソースやデータセットがすでに作成されている場合、あるいは前回ご紹介した「レポートパーツ」を利用する場合は、「データ」設定は不要となります。このような場合に「データ」設定を誤って行うと、帳票の作成ができなくなる恐れがあります。「Webデザイナ」ではこういったケースに合わせて、「データ」設定の利用を制限することが可能です。

他の制御方法と同様に、次のコードを追加することで「データ」タブ内のそれぞれの機能を制御することが可能です。

    data: {
        dataTab: { visible: true },　　　　　　　　　　　　//データタブの表示制御
        dataSources: { visible: true, canModify: true }, //データソースの表示制御、利用制御
        dataSets: { visible: true, canModify: true },    //データセットの表示制御、利用制御
        parameters: { visible: true },                   //パラメータの表示制御
        commonValues: { visible: true }                  //共通の値の表示制御
    },

「データタブ」内のすべての機能を非表示にするには、コードを以下のように変更します。

    data: {
        dataTab: { visible: true },
        dataSources: { visible: false, canModify: true },
        dataSets: { visible: false, canModify: true },
        parameters: { visible: false},
        commonValues: { visible: false}
    },

「データソース」と「データセット」を編集不可状態とするには、コードを以下のように変更します。

    data: {
        dataTab: { visible: true },
        //canModifyをfalseへ変更する
        dataSources: { visible: true, canModify: false},
        //canModifyをfalseへ変更する
        dataSets: { visible: true, canModify: false},    
        parameters: { visible: false},
        commonValues: { visible: false}
    },

続いて、「データタブ」自体を非表示にするには、コードを以下のように変更します。

    data: {
        dataTab: { visible: false},
        dataSources: { visible: true, canModify: true },
        dataSets: { visible: true, canModify: true },
        parameters: { visible: true},
        commonValues: { visible: true}
    },

このように、データに関する機能を制限することで、定義済みデータソースやデータセットを誤って操作することを防止できます。

さいごに

今回はActiveReportsの次期バージョンに追加予定の「Webデザイナ」のカスタマイズ機能の第2弾として、デザイナ機能の数々を制御できる新機能についてご紹介しました。 前回ご紹介したレポートパーツ機能を使用すると、レポートコントロールの追加やデータソースの設定などが不要になりますが、これらの機能はそのまま利用可能なため、誤って操作してしまう可能性もあります。 今回ご紹介した機能制御を使用することで、不要な機能のインターフェイスを隠すことができ、デザイナーの機能がシンプルになり、ユーザーは直感的に帳票デザインができるようになります。

ActiveReportsには今回ご紹介したほかにも帳票開発に必要な機能を多数搭載しています。
製品サイトではActiveReportsの豊富な機能を手軽に体験できるデモアプリケーションやトライアル版も公開しておりますので、こちらもご確認ください。

• デモアプリケーションを試す
• トライアル版をダウンロードして試す

また、ご導入前の製品に関するご相談、ご導入後の各種サービスに関するご質問など、お気軽にお問合せください。

• 問合せ先を確認する
• 個別相談会（Web会議）について確認する