デザイナの組み込み（Svelte）

このトピックではSvelteフレームワークでデザイナを使用する際のSvelte対応パッケージについて説明します。Svelte対応パッケージからデザイナをWebアプリケーションに組み込む方法については、クイックスタート > Webデザイナコンポーネントの使用 > Svelteを参照してください。

npmからインストール

Svelte対応パッケージはnpmを利用してインストールすることができます。@mescius/activereportsjs-svelteパッケージをプロジェクトにインストールすると、デザイナを使用できます。

Svelte対応パッケージは@mescius/activereportsjsパッケージに依存しており、Svelte対応パッケージをインストールすると同時にインストールされます。

Svelteのデザイナ

Svelteのデザイナは、次のようにSvelteコンポーネントにインポートして、マークダウンに含めることができます。

<script lang="ts">
    import {Designer} from "@mescius/activereportsjs-svelte";
</script>

<div id="designer-host">
    <Designer report={{ id: "report.rdlx-json", displayName: "my report" }}></Designer>
</div>

デザイナには、次のプロパティ・メソッドが用意されています。

プロパティ・メソッド	設定値	説明
onInit	()=>DesignerConfig	デザイナを初期化する時のオプションを含むDesignerConfigオブジェクトを返却します。使用方法は「カスタマイズ」を参照してください。
dataSources	DataSourceTemplatesの配列	事前定義されたデータソースとデータセットを設定します。
reportList	Report Resource Info itemsの配列	SubReportコントロールの［レポート名前］プロパティを設定します。
imageList	Image Resource Info itemsの配列	Imageコントロールの事前定義画像を設定します。
onCreate	onCreate関数	デザイナのツールバーに［新規作成］ボタンを追加し、対応するクリックハンドラを設定します。
onOpen	onOpen関数	ツールバーに［開く］ボタンを追加し、対応するクリックハンドラを設定します。
onRender	onRender関数	ツールバーに［プレビュー］ボタンを追加し、対応するクリックハンドラを設定します。
onSave	onSave関数	ツールバーに［保存］ボタンを追加し、対応するクリックハンドラを設定します。
onSaveAs	onSaveAs関数	ツールバーに［名前を付けて保存］ボタンを追加し、対応するクリックハンドラを設定します。
onOpenFileMenu	onOpenFileMenu関数	ツールバーに［ファイル］メニューを追加し、対応するクリックハンドラを設定します。
report	レポートオブジェクト	指定されたレポートをデザイナに読み込みます。
documentChanged	(args: DocumentChangedEventArgs)=>void	デザイナに読み込まれたレポートが変更されたときに発生するイベントのハンドラを設定します。

また、親コンポーネントは、デザイナ参照を作成して、Designer クラスのcreateReport、getReport、setReport、およびprocessCommandメソッドを使用できます。

<script lang="ts">
    import {Designer} from "@mescius/activereportsjs-svelte";
    import {onMount} from 'svelte';
    let designerInst: Designer;
    onMount(()=>{
        designerInst.setReport({ id: "report.rdlx-json", displayName: "my report" });
    })
</script>

<div id="designer-host">
    <Designer bind:this={designerInst}></Designer>
</div>