[]
        
(Showing Draft Content)

Blazor WebデザイナのAPI

ActiveReportsは、Blazor WebデザイナコンポーネントをWebアプリケーションに統合するための豊富なAPIを提供します。プロジェクトにBlazor Webデザイナコンポーネントを埋め込むには、Blazor WebDesignerのAPIを使用します。APIを使用することで、レポートを作成、設計、および保存でき、デザイナのロケールの定義、レポートアイテムのデフォルト設定のカスタマイズ、データタブとプロパティタブの管理、アプリケーション情報の変更などの追加機能を使用できます。

GlobalDesignerAPI

GrapeCity.ActiveReports.Blazor.DesignerライブラリによってエクスポートされるGrapeCity.ActiveReports.Blazor.Designer.ReportDesignerオブジェクトの型。

ReportDesigner

ReportDesignerコンポーネントを<div> 要素に描画します。「.razor」ページには次のようなコードを使用します。

パラメータ(型)

PreviewSettings: PreviewSettings

戻り値:ユーザーインタフェイスのReportDesignerコンポーネントを描画します。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

AppBarSettings

Blazor Webデザイナでメニューバーの設定を取得または設定します。

パラメータ(型)

AppBarSettings: AppBarSettings

  • OpenButton: OpenButton

    説明:Blazor Webデザイナの[開く]ボタンの設定を取得または設定します。

    戻り値:[開く]ボタンの設定を表すOpenButtonオブジェクト。

  • AboutButton: AboutButton

    説明:Blazor Webデザイナの[製品情報]ボタンの設定を取得または設定します。

    戻り値:[製品情報]ボタンの設定を表すAboutButtonオブジェクト。

  • ContextActionsTab: ContextActionsTab

    説明:[レポート]タブの設定を取得または設定します。

    戻り値:[レポート]タブの設定を表すContextActionsTabオブジェクト。

  • HomeTab: HomeTab

    説明:[ホーム]タブの設定を取得または設定します。

    戻り値:[ホーム]タブの設定を表すHomeTabオブジェクト。

  • InsertTab: InsertTab

    説明:[挿入]タブの設定を取得または設定します。

    戻り値:[挿入]タブの設定を表すInsertTabオブジェクト。

  • ParametersTab: ParametersTab

    説明:[パラメータ]タブの設定を取得または設定します。

    戻り値:[パラメータ]タブの設定を表すParametersTabオブジェクト。

  • SaveAsButton: SaveAsButton

    説明:[名前を付けて保存]ボタンの設定を取得または設定します。

    戻り値:[名前を付けて保存]ボタンの設定を表すSaveAsButtonオブジェクト。

  • SaveButton: SaveButton

    説明:[保存]ボタンの設定を取得または設定します。

    戻り値:[保存]ボタンの設定を表すSaveAsButtonオブジェクト。

  • ScriptTab: ScriptTab

    説明:[スクリプト]タブの設定を取得または設定します。

    戻り値:[スクリプト]タブの設定を表すScriptTabオブジェクト。

  • Visible: bool?

    説明:メニューバーを表示するかどうかを指定します。

    戻り値:メニューバーを表示するかどうかを表す値。

戻り値:メニューバーの設定を含むAppBarSettingsオブジェクト。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner AppBarSettings="@_appBar" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private AppBarSettings _appBar = new AppBarSettings
    {
        OpenButton = new OpenButton { Visible = true },
        AboutButton = new AboutButton { Visible = false },
        ContextActionsTab = new ContextActionsTab { Visible = true },
        HomeTab = new HomeTab { Visible = true },
        InsertTab = new InsertTab { Visible = false },
        ParametersTab = new ParametersTab { Visible = true },
        SaveAsButton = new SaveAsButton { Visible = false },
        SaveButton = new SaveButton { Visible = false },
        ScriptTab = new ScriptTab { Visible = false },
        Visible = false
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

App

アプリケーションに関連するAPIを取得します。

パラメータ(型)

App: GrapeCity.ActiveReports.Blazor.Designer.App

  • Panels: Panels

    説明:メニューおよびサイドバーパネルへのアクセスが含まれます。

    戻り値:メニューとサイドバーのパネルを表すPanelsオブジェクト。

  • Focus(): Task

    説明:デザイナにフォーカスを戻します。プラグイン要素を開いたり閉じたりする場合は、フォーカスが失われます。Ctrl+Z(元に戻す)、Ctrl+Y(やり直し)などのショートカットキーを使い続けるために、フォーカスを戻すことが必要です。

    戻り値:非同期操作を表すTaskオブジェクト。

  • GetAbout(): ValueTask<About>

    説明:アプリケーションの名前またはバージョンに関する情報が含まれます。

    戻り値:アプリケーションの名前またはバージョンに関する情報を表すValueTask<About>オブジェクト。

戻り値:アプリケーションに関連するAPIを返します。

@page "/"
@inject IJSRuntime JSRuntime 
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner @ref="_designer" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = true,
            OpenViewer = OpenViewer
        };
    }
    private async void OpenViewer(ViewerSettings settings)
    {
        if (_viewer != null)
        {
            await _viewer.OpenReport(settings.DocumentInfo.Id);
            return;
        }
        _viewer = new ReportViewer();
        GrapeCity.ActiveReports.Blazor.Designer.App api = _designer.App;
        var initOptions = new InitializationOptions();
        initOptions.ReportID = settings.DocumentInfo.Id;
        initOptions.PanelsLocation = PanelsLocation.toolbar;
        initOptions.ReportLoaded = (reportInfo) => { };
        await _viewer.Render(JSRuntime, settings.Element, initOptions);
    }
}

DataSettings

レポートデザイナコンポーネントのデータ設定を設定します。

パラメータ(型)

DataSettings: DataSettings

  • CommonValues:CommonValues

    説明:[共通の値]セクションの設定を取得または設定します。

    戻り値:[共通の値]セクションの設定。

  • DataSets:DataSets

    説明:[データセット]セクションの設定を取得または設定します。

    戻り値:[データセット]セクションの設定。

  • DataSources:DataSources

    説明:[データソース]セクションの設定を取得または設定します。

    戻り値:[データソース]セクションの設定。

  • DataTab:DataTab

    説明:[データ]タブの設定を取得または設定します。

    戻り値:[データ]タブの設定。

  • Parameters:Parameters

    説明:[パラメータス]セクションの設定を取得または設定します。

    戻り値:[パラメータ]セクションの設定。

戻り値:データの設定を含むDataSettingsオブジェクト。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DataSettings="@_dataSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private DataSettings _dataSettings = new DataSettings
    {
        DataSets = new DataSets { CanModify = true },
        DataSources = new DataSources { CanModify = true },
        DataSources = new DataSources { CanModify = true, 
             Shared = new SharedDataSourceOptions()
             {
                Enabled = true
             }
        },
        DataTab = new DataTab { Visible = true },
        Parameters = new Parameters() { CanModify = true },
        CommonValues = new CommonValues() { Visible = false }
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

DesignerInitialized

デザイナを初期化する時に呼び出されるコールバックを取得または設定します。

パラメータ(型)

DesignerInitialized:Action

戻り値:デザイナを初期化する後に呼び出されるアクションを含むActionオブジェクト。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DesignerInitialized="@DesignerInitializedCallback" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private void DesignerInitializedCallback() { }
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

DisableFocusTimer

フォーカスタイマーを無効にします。デフォルトでは、フォーカスされた要素(ボタンなど)は、Tabキーが押された後、短時間だけ強調表示されます。この設定により、フォーカスされた要素が永続的に強調表示されます。

パラメータ(型)

DisableFocusTimer:Boolean

戻り値:項目のフォーカスの現在の状態。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DisableFocusTimer="true" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

DisableSystemClipboard

システムクリップボードの使用を無効にします。

パラメータ(型)

DisableSystemClipboard:Boolean

戻り値:システムクリップボードの使用を無効にする現在の状態。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DisableSystemClipboard="true" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

Document

指定されたドキュメントを開きます。

パラメータ(型)

Document: Document

  • Type:SupportedDocumentType

    説明:サポートされているレポートの種類を取得または設定します。利用可能な値は、SupportedDocumentType.fpl、SupportedDocumentType.rpx、SupportedDocumentType.dashboard、SupportedDocumentType.msl、およびSupportedDocumentType.cplです。

    戻り値:指定されたレポートの種類。

  • Id:String

    説明:レポートの識別子を取得または設定します。

    戻り値:指定されたドキュメント。

戻り値:指定されたドキュメント。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Document="@_doc" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private Document _doc = new Document()
    {
        Type = SupportedDocumentType.cpl,
        Id = "Example.rdlx"
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

Documents

ドキュメントに関するAPIを取得します。

パラメータ(型)

Documents: Documents

  • Create(CreateDocumentOptions options):ValueTask<CreateDocumentInfo>

    説明:指定されたCreateReportOptionsオブジェクトを使用して、デザイナで編集する新しいレポートを作成します。

    戻り値:作成されたドキュメントに関する情報を表すValueTask<CreateDocumentInfo>オブジェクト。

  • HasUnsavedChanges():ValueTask<bool>

    説明:レポートに未保存の変更があるかどうかを示します。

    戻り値:レポートに未保存の変更があるかどうかを示すValueTask<bool>

  • Info():ValueTask<CurrentDocumentInfo>

    説明:編集中のレポートに関する情報。

    戻り値:ドキュメント情報を表すValueTask<CurrentDocumentInfo>オブジェクト。

  • IsNew():ValueTask<bool>

    説明:レポートが少なくとも1回保存されたかどうかを示します。

    戻り値:レポートが少なくとも1回保存されたかどうかを示すValueTask<bool>オブジェクト。

  • Open():Task

    説明:[開く]ダイアログを表示します。

    戻り値:非同期操作を表すTaskオブジェクト。

  • OpenById(string id, SupportedDocumentType type, string name = null, string content = null): ValueTask<OpenDocumentInfo>

    説明:指定されたIDでデザイナに編集する既存のレポートを開きます。オプションで、レポート名とコンテンツを渡すことができます。そうしないと、サーバーから読み込まれます。

    戻り値:開いたドキュメントに関する情報を表すValueTask<OpenDocumentInfo>オブジェクト。

  • Save():Task

    説明:編集中のレポートをデザイナに保存します。レポートを新規作成した場合は、[名前を付けて保存]ダイアログを開きます。

    戻り値:非同期操作を表すTaskオブジェクト。

  • SaveAs():Task

    説明:デザイナで[名前を付けて保存]ダイアログボックスを開きます。Description: Opens 'Save As' dialog.

    戻り値:非同期操作を表すTaskオブジェクト。

  • SaveById(string id, string name = null):ValueTask<SaveDocumentInfo>

    説明:指定されたIDを使用して、編集中のレポートをデザイナに保存します。

    戻り値:保存されたドキュメント情報を表すValueTask<SaveDocumentInfo>オブジェクト。

  • SaveByName(string name): ValueTask<SaveDocumentInfo>

    説明:指定された名前を使用して、編集中のレポートをデザイナに保存します。

    戻り値:保存されたドキュメントの情報を表すValueTask<SaveDocumentInfo>オブジェクト。

戻り値:ドキュメントに関するAPI

@page "/"
@inject IJSRuntime JSRuntime 
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner @ref="_designer" Document="@_doc" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    private Document _doc = new Document
    {
        Id = "Example.rdlx",
        Type = SupportedDocumentType.cpl
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = true,
            OpenViewer = OpenViewer
        };
    }
    private async void OpenViewer(ViewerSettings settings)
    {
        if(_viewer != null)
        {
            await _viewer.OpenReport(settings.DocumentInfo.Id);
            return;
        }
        Documents api = _designer.Documents;
        _viewer = new ReportViewer();
        var initOptions = new InitializationOptions();
        initOptions.ReportID = settings.DocumentInfo.Id;
        initOptions.PanelsLocation = PanelsLocation.toolbar;
        initOptions.ReportLoaded = (reportInfo) => { };
        await _viewer.Render(JSRuntime, settings.Element, initOptions);
    }
}

DocumentsSettings

ドキュメントに関するAPIの設定を取得または設定します。

パラメータ(型)

DocumentsSettings:DocumentsSettings

  • FileView:FileView

    説明:Blazor Webデザイナコンポーネントの[ファイル]タブの設定を取得または設定します。

    戻り値:[ファイル]タブの現在の値。

  • Handlers:Handlers

    説明:ハンドラを取得または設定します。

    戻り値:ハンドラの現在の値。

    • OnDocumentChanged:レポートのコンテンツが変更されたときにトリガーされるハンドラ。

      この関数は、次の2つのプロパティを含むオブジェクトを引数として受け取ります。

      • document:変更されたドキュメントの更新バージョンを含めます。

      • hasUnsavedChanges:ドキュメントに未保存の変更があるかどうかを示すブール値です。

戻り値:ドキュメントAPIに指定された設定。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DocumentsSettings="@_documentsSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private DocumentsSettings _documentsSettings = new DocumentsSettings
    {
        FileView = new FileView { Visible = true },
        Handlers = new Handlers()
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}
@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner DocumentsSettings="_documentsSettings"/>
</div>
@code {
    private DocumentsSettings _documentsSettings;
    public Index()
    {
        _documentsSettings = new DocumentsSettings()
        {
            Handlers = new Handlers()
            {
                OnDocumentChanged = (options) =>
                {
                    ...
                }
            }
        };
    }
}

EditorSettings

エディタの設定を取得または設定します。

パラメータ(型)

EditorSettings:EditorSettings

  • ShowGrid:bool?

    説明:デフォルトでグリッドを表示するか非表示にするかを指定します。

    戻り値:グリッド表示の現在の値。

  • SnapToGrid:bool?

    説明:[グリッドにスナップ]オプションのデフォルト値を指定します。

    戻り値:[グリッドにスナップ]オプションの現在の値。

  • SnapToGuides:bool?

    説明:[ガイドにスナップ]オプションのデフォルト値を指定します。

    戻り値:[ガイドにスナップ]オプションの現在の値。

  • GridSize:String

    説明:デフォルトのグリッドサイズを指定します。単位が「cm」の場合、デフォルト値は「0.5cm」です。それ以外の場合、デフォルト値は「0.25in」です。

    戻り値:現在のグリッドサイズ。

  • Rulers:Rulers

    説明:ルーラーの設定を取得または設定します。

    戻り値:ルーラーの現在の値。

戻り値:エディタの設定。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner EditorSettings="@_editorSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private EditorSettings _editorSettings = new EditorSettings
    {
        ShowGrid = true,
        SnapToGrid = true,
        SnapToGuides = true,
        Rulers = new Rulers(),
        GridSize = "0.5cm"
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

Fonts

コントロールに許可されるフォントのリストを取得または設定します。

パラメータ(型)

Fonts:Object[]

戻り値:コントロールに許可されるフォントのリスト。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Fonts="@_fonts" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private string[] _fonts = new string[1] { "Arial" };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

Height

デザイナの高さを取得または設定します。

パラメータ(型)

Height:String

戻り値:デザイナの高さ。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Height="20%" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

ImageMimeTypes

説明:コントロールでサポートされている画像のMIMEタイプのリストを指定します。

パラメータ(型)

ImageMimeTypes:String[]

戻り値:コントロールでサポートされている画像のMIMEタイプのリスト。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner ImageMimeTypes="@_imageMimeTypes" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private string[] _imageMimeTypes = new string[3] { "image/gif", "image/jpeg", "image/png" };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

Language

説明:デザイナに使用する言語を指定します。Blazor Webデザイナは次の言語で利用できます:en、ja、zh。

パラメータ(型)

Language:String

戻り値:指定された言語。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Language="ja-JP" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

LocalizationResources

特定のロケールのローカリゼーション リソースを取得または設定します。

パラメータ(型)

LocalizationResources:LocalizationResources[]

  • Language:String

    説明:言語を取得または設定します。

    戻り値:指定された言語。

  • Resources:String

    説明:JSON配列内のローカリゼーション リソースを取得または設定します。

    戻り値:JSON配列で表される指定されたローカリゼーション リソースを返します。

戻り値:カスタム ローカリゼーション リソースの配列を返します。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner LocalizationResources="@_localizationResources" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private LocalizationResources[] _localizationResources =
    {
        new LocalizationResources()
        {
            Language = "en",
            Resources = "[ { \"ns\": \"common\", \"lng\": \"en\", \"resources\": { \"units\": { \"cm\": { \"textShortName\": \"CustomName_cm\", \"textFullName\": \"CustomName_Centimeters\" } } } } ]"
        }
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

LockLayout

説明:レポートレイアウトとの対話を管理します。LockLayoutを有効にすると、既存のレポートアイテムの変更が可能です。新しいレポートアイテムを追加するや、既存のアイテムを削除するなどのレポートのレイアウトを変更することができません。

パラメータ(型)

LockLayout:Boolean

戻り値:LockLayoutの現在の状態。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner LockLayout="true" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

MenuSettings

Blazor Webデザイナコンポーネントのメニューの設定を取得または設定します。

パラメータ(型)

MenuSettings:MenuSettings

  • DocumentExplorer:DocumentExplorer

    説明:Webデザイナの[エクスプローラ]ボタンの設定。

    戻り値:エクスプローラの設定を表すオブジェクト。

  • GroupEditor:GroupEditor

    説明:Webデザイナコンポーネントの[グループエディタ]ボタンの設定。

    戻り値:グループエディタの設定を表すオブジェクト。

  • LayerEditor:LayerEditor

    説明:Webデザイナコンポーネントの[レイヤー]ボタンの設定。

    戻り値:レイヤーの設定を表すオブジェクト。

  • Logo:Logo

    説明:ロゴの設定。

    戻り値:ロゴ設定を表すオブジェクト。

  • ToolBox:ToolBox

    説明:ツールボックスの設定。

    戻り値:ツールボックスの設定を表すオブジェクト。

  • Visible:bool?

    説明:メニューを表示する必要があるかどうかを指定します。

    戻り値:現在の表示・非表示の状態を表す値。

戻り値:メニューの現在の設定。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner MenuSettings="@_menuSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private MenuSettings _menuSettings = new MenuSettings
    {
        DocumentExplorer = new DocumentExplorer { Visible = true },
        GroupEditor = new GroupEditor { Visible = true },
        LayerEditor = new LayerEditor { Visible = true },
        Logo = new Logo { Visible = true },
        ToolBox = new ToolBox { Visible = true },
        Visible = true
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

Notifications

通知に関するAPIを取得します。

パラメータ(型)

Notifications:Notifications

  • Send():Task

    説明:指定されたレベル、キャプション、およびコンテンツの通知を送信します。

    戻り値:非同期操作を表すTaskオブジェクト。

  • Warning():Task

    説明:警告を送信します。

    戻り値:非同期操作を表すTaskオブジェクト。

  • Info():Task

    説明:ユーザーのアクションが完了したときに通知するために使用できる、一般的な通知を送信します。

    戻り値:非同期操作を表すTaskオブジェクト。

  • Error():Task

    説明:エラー通知を送信します。

    戻り値:非同期操作を表すTaskオブジェクト。

  • DismissAll():Task

    説明:すべての通知を閉じます。

    戻り値:非同期操作を表すTaskオブジェクト。

戻り値:通知に関するAPI

@page "/"
@inject IJSRuntime JSRuntime 
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner @ref="_designer" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = true,
            OpenViewer = OpenViewer
        };
    }
    private async void OpenViewer(ViewerSettings settings)
    {
        if (_viewer != null)
        {
            await _viewer.OpenReport(settings.DocumentInfo.Id);
            return;
        }
        Notifications api = _designer.Notifications;
        _viewer = new ReportViewer();
        var initOptions = new InitializationOptions();
        initOptions.ReportID = settings.DocumentInfo.Id;
        initOptions.PanelsLocation = PanelsLocation.toolbar;
        initOptions.ReportLoaded = (reportInfo) => { };
        await _viewer.Render(JSRuntime, settings.Element, initOptions);
    }
}

PreviewSettings

プレビューに関する設定を取得または設定します。

パラメータ(型)

PreviewSettings:PreviewSettings

  • CanPreview():Boolean

    説明:[プレビュー]ボタンを表示するかどうかを取得または設定します。

  • OpenViewer():Action<ViewerSettings>

    説明:OpenViewer関数を提供することで、レポートビューワのコンポーネントをプラグインできます。

戻り値:プレビュー設定。

@page "/"
@inject IJSRuntime JSRuntime
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner @ref="_designer" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = true,
             OpenViewer = OpenViewer
         };
    }
    private async void OpenViewer(ViewerSettings settings)
    {
        if (_viewer != null)
        {
            await _viewer.OpenReport(settings.DocumentInfo.Id);
            return;
        }
        _viewer = new ReportViewer();
        var initOptions = new InitializationOptions();
        initOptions.ReportID = settings.DocumentInfo.Id;
        initOptions.PanelsLocation = PanelsLocation.toolbar;
        initOptions.ReportLoaded = (reportInfo) => { };
        await _viewer.Render(JSRuntime, settings.Element, initOptions);
    }
}

PropertyGridSettings

プロパティグリッドの設定を取得または設定します。

パラメータ(型):

PropertyGridSettings:PropertyGridSettings

  • PropertiesTab:PropertiesTab

    説明:[プロパティ]タブの設定を取得または設定します。

    戻り値:[プロパティ]タブの現在の設定を表すPropertiesTabオブジェクト。

  • Mode():Mode?

    説明:デフォルトのプロパティモードを指定します。使用可能な値は、Mode.BasicおよびCourier New Mode.Advancedです。

    戻り値:[プロパティ]タブの現在のモード。

  • Sort():Sort?

    説明:デフォルトのプロパティの並べ替え(ソート)方法を指定します。使用可能な値は、Sort.categorizedおよびSort.alphabeticalです。

    戻り値:[プロパティ]タブの現在の並べ替え方法。

戻り値:プロパティグリッドの現在の設定を表すPropertyGridSettings

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner PropertyGridSettings="@_propertyGridSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private PropertyGridSettings _propertyGridSettings = new PropertyGridSettings
    {
        Mode = Mode.Advanced,
        Sort = Sort.categorized,
        PropertiesTab = new PropertiesTab { Visible = false }
    };
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

RdlxSettings

RDLXプラットフォーム固有の設定を取得または設定します。

パラメータ(型)

RdlxSettings: RdlxSettings

  • ExpressionSyntax:ExpressionSyntax?

    説明:デザイナで使用される式構文を取得または設定します。使用可能な値は、ExpressionSyntax.i11nおよびExpressionSyntax.rdlです。

    戻り値:現在の式構文の設定を表すオブジェクト。

  • ToolBoxContent:ToolBoxContent

    説明:ツールボックスでのコントロールとその表示順序を取得または設定します。

    戻り値:現在の設定を持​​つ使用可能なレポートアイテムとその順序を表すToolBoxContentオブジェクト。

  • InitTemplates:InitTemplates

    説明:レポートをrdlx-json文字列として取得または設定します。これらのレポートのレポートアイテムは、新しいアイテムを作成するためのテンプレートとして使用されます。

    戻り値:現在のテンプレート設定を表すInitTemplatesオブジェクト。

  • ReportItemsFeatures:RdlxReportItemsSettings

    説明:カスタマイズ可能なレポートアイテムの機能を取得または設定します。

    戻り値:現在のカスタマイズ可能なレポートアイテムの機能を表すRdlxReportItemsSettingsオブジェクト。

  • ReportStyles:ReportStyles[]

    説明:レポートアイテムのスタイルに追加するスタイルを取得または設定します。

    戻り値:レポート要素スタイルに追加する現在の追加スタイルを表すReportStylesオブジェクトの配列。

  • Msl:Msl

    説明:複数エリアを持つRDLレポートの設定を取得または設定します。

    戻り値:複数エリアを持つRDLレポートの設定を表すMslオブジェクト。

  • Dashboard:Dashboard

    説明:ダッシュボードレポートの設定を取得または設定します。

    戻り値:現在のダッシュボードレポートの設定を表すDashboardオブジェクト。

戻り値:現在のRDLXレポートの設定を表すRdlxSettingsオブジェクト。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner RdlxSettings="@_rdlxSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private RdlxSettings _rdlxSettings = new RdlxSettings
    {
        Dashboard = new Dashboard { Enabled = true },
        Msl = new Msl { Enabled = true },
        ExpressionSyntax = ExpressionSyntax.rdl,
        InitTemplates = new InitTemplates(),
        ReportItemsFeatures = new RdlxReportItemsSettings(),
        ReportStyles = { },
        ToolBoxContent = new ToolBoxContent { Cpl = new[] { RdlxToolBoxItem.formattedtext } }
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

RpxSettings

RPXプラットフォーム固有の設定を取得または設定します。これらの設定を行うには、RPXレポートが存在する必要があります。

パラメータ(型):

RpxSettings: RpxSettings

  • Enabled:bool?

    説明:セクションレポート(RPXファイル)の設定を有効にするかどうかを取得または設定します。

    戻り値:RPXレポートの現在のアクティブ化値を表すオブジェクト。

  • InitTemplates:InitTemplates

    説明:レポートをrdlx-json文字列として取得または設定します。これらのレポートのレポートアイテムは、新しいアイテムを作成するためのテンプレートとして使用されます。

    戻り値:現在のテンプレート設定を表すInitTemplatesオブジェクト。

戻り値:現在のRPXレポートも設定を表すRpxSettingsオブジェクト。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner RpxSettings="@_rpxSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private RpxSettings _rpxSettings = new RpxSettings
    {
        Enabled = true,
        InitTemplates = new InitTemplates()
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

ServerSettings

サーバーに関する設定を取得または設定します。

パラメータ(型):

ServerSettings: ServerSettings

  • Url:String

    説明:WebデザイナのサーバーAPIのベースURLを取得または設定します。

    戻り値:WebデザイナのサーバーAPIの現在のベースURLを表す文字列。

  • OnBeforeRequest:Func<RequestInit, RequestInit>

    説明:Webデザイナで要求を変更するためのハンドラを取得または設定します。

    戻り値:要求を変更する現在のハンドラを表すFunc<RequestInit, RequestInit>オブジェクト。

戻り値:サーバーに関する現在の設定を表すServerSettingsオブジェクト。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner ServerSettings="@_serverSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private ServerSettings _serverSettings = new ServerSettings
    {
        OnBeforeRequest = delegate (RequestInit requestInit)
        {
            return requestInit;
        },
        Url = "http://localhost:5098/"
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

StatusBarSettings

Webデザイナコンポーネントのステータスバーの設定を取得または設定します。

パラメータ(型):

StatusBarSettings: StatusBarSettings

  • ToggleUnitsButton:ToggleUnitsButton

    説明:Webデザイナの[寸法の単位]ボタンの設定を取得または設定します。

    戻り値:現在の[寸法の単位]ボタンの設定を表すToggleUnitsButtonオブジェクト。

  • GridSizeEditor:GridSizeEditor

    説明:Webデザイナの[グリッドの幅]エディタの設定を取得または設定します。

    戻り値:現在の[グリッドの幅]エディタの設定を表すGridSizeEditorオブジェクト。

  • RulersButton:RulersButton

    説明:Webデザイナコンポーネントのルーラーボタンの設定を取得または設定します。

    戻り値:現在のルーラーボタンの設定を表すRulersButtonオブジェクト。

  • Visible:bool?

    説明:Webデザイナでステータスバーを表示するかどうかを指定します。

    戻り値:ステータスバーを表示するかどうかを指定する値。

戻り値:現在のステータスバーの設定を表すStatusBarSettings

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner StatusBarSettings="@_statusBarSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private StatusBarSettings _statusBarSettings = new StatusBarSettings
    {
        GridSizeEditor = new GridSizeEditor { Visible = true },
        PropertiesModeButton = new PropertiesModeButton { Visible = true },
        RulersButton = new RulersButton { Visible = true },
        ToggleGridButton = new ToggleGridButton { Visible = true },
        ToggleUnitsButton = new ToggleUnitsButton { Visible = true },
        Visible = true
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

StoreUnsavedReport

レポートの保存を管理します。StoreUnsavedReportを有効にすると、ブラウザタブまたはブラウザ自体が誤って閉じられた場合、未保存レポートを復元します。

パラメータ(型):

StoreUnsavedReport: Bool

戻り値:StoreUnsavedReportの現在の状態を表す値。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner StoreUnsavedReport="false" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

StoreUserPreferences

ユーザー設定を管理します。StoreUserPreferencesを有効にすると、ユーザー設定はブラウザに保存されます。

パラメータ(型):

StoreUserPreferences: Bool

戻り値:StoreUserPreferencesの現在の状態を表す値。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner StoreUserPreferences="false" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

StylesSettings

セクションレポートのスタイル設定を取得または設定します。

パラメータ(型):

StylesSettings: StylesSettings

  • StylesTab:StylesTab

    説明:[スタイル]タブの設定を取得または設定します。

    戻り値:現在のスタイルタブの設定を表すStylesTabオブジェクト。

  • Stylesheet:Stylesheet

    説明:Webデザイナでスタイルシートの設定を取得または設定します。

    戻り値:現在のスタイルシート設定を表すStylesheetオブジェクト。

戻り値:セクションレポートの現在のスタイル設定を表すStylesSettingsオブジェクト。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner StylesSettings="@_styleSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private StylesSettings _styleSettings = new StylesSettings
    {
        Stylesheet = new Stylesheet { CanModify = true },
        StylesTab = new StylesTab { Visible = true }
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

TitleSettings

ドキュメントのタイトルの設定を取得または設定します。

パラメータ(型):

TitleSettings: TitleSettings

  • Disabled:bool?

    説明:ドキュメントのタイトルが無効かどうかを示す値を取得または設定します。

    戻り値:ドキュメントのタイトルが無効かどうかを表す値。

戻り値:現在のドキュメントのタイトル設定を表すTitleSettingsオブジェクト。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner TitleSettings="@_titleSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private TitleSettings _titleSettings = new TitleSettings
    {
        Disabled = false
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

ToolBarSettings

ツールバーの設定を取得または設定します。

パラメータ(型):

ToolBarSettings: ToolBarSettings

  • Visible:bool?

    説明:ツールバーを表示するかどうかを表す値を取得または設定します。

    戻り値:ツールバーを表示するかどうかを表す値。

戻り値:現在のツールバー設定を表すToolBarSettingsオブジェクト。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner ToolBarSettings="@_toolbarSettings" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    private ToolBarSettings _toolbarSettings = new ToolBarSettings
    {
        Visible = true
    };
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

Units

デザイナで使用されるデフォルトの寸法の単位を指定します。使用可能な値は、Units.InおよびUnits.Cmです。

パラメータ(型):

Units: Units

戻り値:レポートデザイナのデフォルトの寸法単位の現在値。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Units="Units.Cm" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

Width

デザイナの幅を取得または設定します。

パラメータ(型):

Width: String

戻り値:デザイナの幅を返します。

@page "/"
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<div id="designerContainer">
    <ReportDesigner Width="20%" PreviewSettings="@_preview" />
</div>
@code {
    private PreviewSettings _preview;
    public Index()
    {
         _preview = new PreviewSettings
         {
             CanPreview = false
         };
    }
}

OpenDocumentExplorer

エクスプローラパネルを管理します。BlazorデザイナのAPIからパネルを管理するには、「*.razor」ページではサンプルコードを使用します。

次の例では、BlazorデザイナのAPIを使用してレポートのエクスプローラパネルを呼び出しています。

  • 呼び出しボタンのコードを追加します。

    <button @onclick="OpenDocumentExplorer">エクスプローラを開く</button>
  • ボタンをクリックした時のイベントハンドラのコードを追加します。

    private async void OpenDocumentExplorer()
    {
        await _designer.App.Panels.Menu.Open("document-explorer");
    }

完全なコードは次のようになります。

@page "/"
@inject IJSRuntime JSRuntime
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<button @onclick="OpenDocumentExplorer">エクスプローラを開く</button>
<div id="designerContainer">
    <ReportDesigner @ref="_designer" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    private async void OpenDocumentExplorer()
    {
        await _designer.App.Panels.Menu.Open("document-explorer");
    }
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}

UndoLastOperation

アプリケーションのAPIのクリップボードと選択状態を管理します。アプリケーションAPIのクリップボードと選択状態を管理するには、「*.razor」ページではサンプルコードを使用します。

次の例では、カスタムボタンを使用してデザイナでの最後の操作を元に戻します。

  • 呼び出しボタンのコードを追加します。

    <button @onclick="UndoLastOperation">最後の操作を元に戻す</button>
  • ボタンをクリックした時のイベントハンドラのコードを追加します。

    private async void UndoLastOperation()
    {
        await _designer.App.Editor.Undo();
    }

完全なコードは次のようになります。

@page "/"
@inject IJSRuntime JSRuntime
<link href="_content/GrapeCity.ActiveReports.Blazor.Viewer/jsViewer.min.css" rel="stylesheet" />
<button @onclick="UndoLastOperation">最後の操作を元に戻す</button>
<div id="designerContainer">
    <ReportDesigner @ref="_designer" PreviewSettings="@_preview" />
</div>
@code {
    private ReportDesigner _designer;
    private PreviewSettings _preview;
    private ReportViewer _viewer;
    private async void UndoLastOperation()
    {
        await _designer.App.Editor.Undo();
    }
    public Index()
    {
        _preview = new PreviewSettings
        {
            CanPreview = false
        };
    }
}