ActiveReportsで実現する！Power Appsの帳票開発（1）

pac pcf init -n ARdotNetViewer -ns ARdotNet -t field -fw react -npm

npm install @mescius/activereportsnet-viewer-ja 

cd ARdotNetViewer

#viewer-host {
    width: 100%;
    height: 100vh;
  }

.flexbox {
  display:block;
}

ARdotNetViewerPCF\node_modules\@mescius\activereportsnet-viewer-ja\dist\jsViewer.min.css
ARdotNetViewerPCF\node_modules\@mescius\activereportsnet-viewer-ja\dist\jsViewer.chart.min.css

<?xml version="1.0" encoding="utf-8" ?>
<manifest>
  <control namespace="ARdotNet" constructor="ARdotNetViewer" version="0.0.1" display-name-key="ARdotNetViewer" description-key="ARdotNetViewer description" control-type="virtual" >
    <!--external-service-usageノードは、このサードパーティPCFコントロールが外部サービスを使用しているかどうかを宣言します。もし使用している場合、このコントロールはプレミアムと見なされ、使用している外部ドメインも追加してください。  
    外部サービスを使用していない場合、enabled="false"に設定し、以下にドメインを追加しないでください。"enabled"はデフォルトでfalseになります。  
    例1:  
      <external-service-usage enabled="true">  
        <domain>www.Microsoft.com</domain>  
      </external-service-usage>  
    例2:  
      <external-service-usage enabled="false">  
      </external-service-usage>  
    -->  
    <external-service-usage enabled="true">  
    <domain>http://example.com/</domain>  
      <!--外部ドメインを追加するにはコメントを解除してください  
      <domain></domain>
      <domain></domain>
      -->
    </external-service-usage>
    <!-- propertyノードは、コントロールがCDSから期待する特定の設定可能なデータを識別します -->  
    <!-- <property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type="SingleLine.Text" usage="bound" required="true" /> -->
    <property name="Server_Url" display-name-key="Server_Url" description-key="ActiveReport.Netのバックエンドサーバーを指定します。" of-type="SingleLine.Text" pfx-default-value ='"http://example.com/"' usage="input" required="true"  />  
    <property name="Reports_ID" display-name-key="Reports_ID" description-key="表示するレポートを指定します。" of-type="SingleLine.Text" pfx-default-value ='"Invoice.rdlx"' usage="input" required="true"/>  
    <property name="Reports_Loading" display-name-key="Reports_Loading" description-key="レポートの読み込みを行うかを指定します。" of-type="TwoOptions" pfx-default-value ='false' usage="input" required="true"/>  
    <property name="Style_Width" display-name-key="Style_Width" description-key="ビューワの横幅を指定します。" of-type="SingleLine.Text" pfx-default-value ='"100%"' usage="input" required="true"/>  
    <property name="Style_Height" display-name-key="Style_Height" description-key="ビューワの高さを指定します。" of-type="SingleLine.Text" pfx-default-value ='"100vh"' usage="input" required="true"/>
    <!--
      プロパティノードの of-type 属性は of-type-group 属性にすることができます。
      例:
      <type-group name="numbers">
        <type>Whole.None</type>
        <type>Currency</type>
        <type>FP</type>
        <type>Decimal</type>
      </type-group>
      <property name="sampleProperty" display-name-key="Property_Display_Key" description-key="Property_Desc_Key" of-type-group="numbers" usage="bound" required="true" />
    -->
    <resources>
      <code path="index.ts" order="1"/>
      <platform-library name="React" version="16.8.6" />
      <!-- <platform-library name="Fluent" version="8.29.0" />      -->
      <css path="css/App.css" order="1" />  
      <css path="css/jsViewer.min.css" order="2" />  
      <css path="css/jsViewer.chart.min.css" order="3" />  
      <!-- 追加のリソースを追加するにはコメントを解除してください  
      <css path="css/ARdotNetViewer.css" order="1" />
      <resx path="strings/ARdotNetViewer.1033.resx" version="1.0.0" />
      -->
    </resources>
    <!-- 指定されたAPIを有効にするにはコメントを解除してください  
    <feature-usage>
      <uses-feature name="Device.captureAudio" required="true" />
      <uses-feature name="Device.captureImage" required="true" />
      <uses-feature name="Device.captureVideo" required="true" />
      <uses-feature name="Device.getBarcodeValue" required="true" />
      <uses-feature name="Device.getCurrentPosition" required="true" />
      <uses-feature name="Device.pickFile" required="true" />
      <uses-feature name="Utility" required="true" />
      <uses-feature name="WebAPI" required="true" />
    </feature-usage>
    -->
  </control>
</manifest>

npm run build

import * as React from 'react';  

// 型定義
interface GrapeCity {  
  ActiveReports: {  
    JSViewer: {  
      create: (config: { element: string;  reportService: { url: string } }) => ViewerInstance;  
    };  
  };  
}  
  
// ViewerInstance の型定義
interface ViewerInstance {  
  openReport: (report: string | null) => void;  
}  
  
interface Window {  
  GrapeCity: GrapeCity;  
}  
  
declare let window: Window;  
  
// 追加するプロパティ  
export interface IViewerProps {  
  Server_Url?: string | null;  
  Reports_ID?: string | null;  
  Reports_Loading?: boolean | false;  
  Style_Width?: string;  
  Style_Height?: string;  
}  
  
export class Viewer extends React.Component<IViewerProps> {  
  viewer: ViewerInstance | null = null;  
  
  constructor(props: IViewerProps) {  
    super(props);  
  }  
  
  componentDidMount() {  
    if (window.GrapeCity && window.GrapeCity.ActiveReports) {  
      this.viewer = window.GrapeCity.ActiveReports.JSViewer.create({  
        element: '#viewer-host',  
        reportService: {  
          url: (this.props.Server_Url ?? '') + 'api/reporting',  
        },  
      });  

      if (this.props.Reports_Loading) { 
        this.viewer.openReport(this.props.Reports_ID ?? null);  
      }
    }  
  }  
  
  componentDidUpdate() {  
    if (this.viewer && this.props.Reports_Loading) {  
      this.viewer.openReport(this.props.Reports_ID ?? null);  
    }  
  }  
  
  render() {  
    const viewerStyle = {  
      width: this.props.Style_Width || '100%',  
      height: this.props.Style_Height || '100vh'  
    };  
  
        
  
    return (  
      <div>  
        <div id="viewer-host" style={viewerStyle} />  
      </div>  
    );  
  }  
}  

import { IInputs, IOutputs } from "./generated/ManifestTypes";
import { Viewer, IViewerProps } from "./App";  
import * as React from "react";
import "@mescius/activereportsnet-viewer-ja/dist/jsViewer.min.js";

export class ARdotNetViewer implements ComponentFramework.ReactControl<IInputs, IOutputs> {
    private theComponent: ComponentFramework.ReactControl<IInputs, IOutputs>;
    private notifyOutputChanged: () => void;
    private props: IViewerProps = { Server_Url: 'http://example.com/', Reports_ID: 'Invoice.rdlx', Style_Width: '100%', Style_Height: '100vh' };  

    /**
     * 空のコンストラクタ。
     */
    constructor() { }

    /**
     * コントロールのインスタンスを初期化するために使用されます。ここでリモートサーバー呼び出しや他の初期化アクションを開始できます。
     * データセットの値はここでは初期化されません。updateViewを使用してください。
     * @param context コンテキストオブジェクトを介して制御できるプロパティバッグ全体。これは、マニフェストで定義されたプロパティ名にマッピングされたカスタマイザによって設定された値やユーティリティ関数を含みます。
     * @param notifyOutputChanged コントロールに新しい出力が非同期で取得可能であることをフレームワークに通知するコールバックメソッド。
     * @param state 単一ユーザーの1つのセッション内で持続するデータ。Modeインターフェイスで 'setControlState' を呼び出すことにより、コントロールのライフサイクルの任意の時点で設定できます。
     */
    public init(
        context: ComponentFramework.Context<IInputs>,
        notifyOutputChanged: () => void,
        state: ComponentFramework.Dictionary
    ): void {
        this.notifyOutputChanged = notifyOutputChanged;
        this.props.Server_Url = context.parameters.Server_Url.raw || 'http://example.com/';  
        this.props.Reports_ID = context.parameters.Reports_ID.raw || 'Invoice.rdlx';  
        this.props.Reports_Loading = context.parameters.Reports_Loading.raw.valueOf() || false;  
        this.props.Style_Width = context.parameters.Style_Width?.raw || '100%';  
        this.props.Style_Height = context.parameters.Style_Height?.raw || '100vh';  
    }

    /**
     * プロパティバッグ内の任意の値が変更されたときに呼び出されます。これには、フィールド値、データセット、コンテナの高さや幅などのグローバル値、オフラインステータス、ラベル、可視性などのコントロールメタデータ値が含まれます。
     * @param context コンテキストオブジェクトを介して制御できるプロパティバッグ全体。これは、マニフェストで定義された名前にマッピングされたカスタマイザによって設定された値やユーティリティ関数を含みます。
     * @returns ReactElement コントロールのルートReact要素を返します。
     */
    public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
        this.props.Server_Url = context.parameters.Server_Url.raw || 'http://example.com/';  
        this.props.Reports_ID = context.parameters.Reports_ID.raw || 'Invoice.rdlx';  
        this.props.Reports_Loading = context.parameters.Reports_Loading.raw.valueOf() || false;  
        this.props.Style_Width = context.parameters.Style_Width?.raw || '100%';  
        this.props.Style_Height = context.parameters.Style_Height?.raw || '100vh';  
    
        return React.createElement(
            Viewer, this.props
        );
    }

    /**
     * コントロールが新しいデータを受け取る前に、フレームワークによって呼び出されます。
     * @returns マニフェストで定義された命名法に基づくオブジェクトを返します。「bound」または「output」とマークされたプロパティに対するオブジェクトを期待します。
     */
    public getOutputs(): IOutputs {
        return { };
    }

    /**
     * コントロールがDOMツリーから削除されるときに呼び出されます。コントロールはこの呼び出しを使用してクリーンアップを行うべきです。
     * 例: 保留中のリモート呼び出しのキャンセル、リスナーの削除など。
     */
    public destroy(): void {
        // 必要に応じてコントロールをクリーンアップするコードを追加
    }
}

npm start

using System;
using System.IO;
using System.Reflection;
using Microsoft.AspNetCore.Hosting;
using Microsoft.AspNetCore.Builder;
using Microsoft.Extensions.Hosting;
using Microsoft.Extensions.Logging;
using Microsoft.Extensions.DependencyInjection;

using GrapeCity.ActiveReports.Aspnetcore.Viewer;
using System.Text;
using System.Linq;
using System.Text.RegularExpressions;

namespace JSViewer_CORS_Core
{
	public class Startup
	{
		private static readonly string CurrentDir = Path.GetDirectoryName(Assembly.GetExecutingAssembly().Location) ?? String.Empty;
		public static readonly DirectoryInfo ReportsDirectory = new DirectoryInfo(Path.Combine(CurrentDir, "Reports"));

		// This method gets called by the runtime. Use this method to add services to the container.
		public void ConfigureServices(IServiceCollection services)
		{
			Encoding.RegisterProvider(CodePagesEncodingProvider.Instance);

			services
				.AddLogging(config =>
				{
					// Disable the default logging configuration
					config.ClearProviders();

					// Enable logging for debug mode only
					if (Environment.GetEnvironmentVariable("ASPNETCORE_ENVIRONMENT") == Environments.Development)
					{
						config.AddConsole();
					}
				})
				.AddReportViewer()
				.AddMvc(options => options.EnableEndpointRouting = false);
		}

		// This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
		public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
		{
			if (env.IsDevelopment())
			{
				app.UseDeveloperExceptionPage();
			}

			app.UseFileServer();

            // Configure CORS
            //app.UseCors(cors => cors.SetIsOriginAllowed(origin => new Uri(origin).Host == "localhost")
            //	.AllowAnyMethod().AllowAnyHeader().AllowCredentials().WithExposedHeaders("Content-Disposition"));
            app.UseCors(cors =>
                cors.SetIsOriginAllowed(origin =>
                {
                    var allowedPatterns = new[]
                    {
                        @"^localhost$",								// localhost  
						@"^make.powerapps.com$",					// make.powerapps.com  
						@"^.*\.powerapps\.com$",					// *.powerapps.com
						@"^.*\.*\.*\.*\.*\.powerapps\.com$",		// *.powerapps.com
						@"^.*\.azureedge\.net",						// *.azureedge.net
						@"^.*\.powerplatform\.com$",				// *.powerplatform.com  
						@"^.*\.api\.powerplatformusercontent\.com$" // *.api.powerplatformusercontent.com  
                    };

                    var requestHost = new Uri(origin).Host;
                    return allowedPatterns.Any(pattern => Regex.IsMatch(requestHost, pattern));
                }
                )
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials()
                .WithExposedHeaders("Content-Disposition")
                );

            app.UseReportViewer(settings =>
			{
				settings.UseFileStore(ReportsDirectory);
			});

			app.UseMvc();
		}
	}
}