[]
ActiveReportsは、Blazor WebデザイナコンポーネントをWebアプリケーションに統合するための豊富なAPIを提供します。プロジェクトにBlazor Webデザイナコンポーネントを埋め込むには、Blazor WebDesignerのAPIを使用します。APIを使用することで、レポートを作成、設計、および保存でき、デザイナのロケールの定義、レポートアイテムのデフォルト設定のカスタマイズ、データタブとプロパティタブの管理、アプリケーション情報の変更などの追加機能を使用できます。
GrapeCity.ActiveReports.Blazor.DesignerライブラリによってエクスポートされるGrapeCity.ActiveReports.Blazor.Designer.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
};
}
}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
};
}
}アプリケーションに関連する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
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: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
};
}
}フォーカスタイマーを無効にします。デフォルトでは、フォーカスされた要素(ボタンなど)は、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: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
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
};
}
}ドキュメントに関する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);
}
}ドキュメントに関する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
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: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: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
};
}
}説明:コントロールでサポートされている画像の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
};
}
}説明:デザイナに使用する言語を指定します。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[]
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: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
};
}
}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
};
}
}通知に関する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
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
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
};
}
}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
};
}
}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
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
};
}
}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: 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: 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
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
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
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.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: 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
};
}
}エクスプローラパネルを管理します。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
};
}
}アプリケーションの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
};
}
}