<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>ActiveReportsJSデモ</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link
href="https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap"
rel="stylesheet"
/>
<link
rel="stylesheet"
href="https://cdn.materialdesignicons.com/2.8.94/css/materialdesignicons.min.css"
/>
<script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script>
<script src="/activereportsjs/demos/arjs/dist/ar-js-viewer.js"></script>
<script src="/activereportsjs/demos/arjs/dist/ar-js-designer.js"></script>
<script src="/activereportsjs/demos/arjs/dist/ar-js-pdf.js"></script>
<script src="/activereportsjs/demos/arjs/dist/ar-js-html.js"></script>
<script src="/activereportsjs/demos/arjs/dist/ar-js-xlsx.js"></script>
<script src="/activereportsjs/demos/arjs-localization/dist/ar-js-locales.js"></script>
<script src="/activereportsjs/demos/arjs-localization/dist/designer/ja-locale.js"></script>
<script src="$DEMOROOT$/lib/purejs/license.js"></script>
<link
rel="stylesheet"
type="text/css"
href="/activereportsjs/demos/arjs/styles/ar-js-ui.css"
/>
<link
rel="stylesheet"
type="text/css"
href="/activereportsjs/demos/arjs/styles/ar-js-viewer.css"
/>
<link
rel="stylesheet"
type="text/css"
href="/activereportsjs/demos/arjs/styles/ar-js-designer.css"
/>
<style>
#root {
height: 100vh;
}
#viewer-host,
#designer-host {
height: 100%;
}
#designer-host {
display: none;
}
</style>
</head>
<body onload="load()" style="margin: 0">
<div id="root">
<div id="viewer-host"></div>
<div id="designer-host"></div>
</div>
<script>
var currentReport = undefined;
var viewerHost = document.getElementById("viewer-host");
var designerHost = document.getElementById("designer-host");
function load() {
var viewer = new MESCIUS.ActiveReportsJS.ReportViewer.Viewer(
"#viewer-host",
{
language: "ja",
}
);
var designer = new MESCIUS.ActiveReportsJS.ReportDesigner.Designer(
"#designer-host",
{ language: "ja" }
);
designer.setActionHandlers({
onRender(report) {
currentReport = report.definition;
viewer.open(currentReport);
viewerHost.style.display = "block";
designerHost.style.display = "none";
// return Promise.resolve();
},
});
var designButton = {
key: "$openDesigner",
text: "編集",
iconCssClass: "mdi mdi-pencil",
enabled: true,
action: function (item) {
designer.setReport({
definition: currentReport,
displayName: "ネストデータ",
});
viewerHost.style.display = "none";
designerHost.style.display = "block";
},
};
viewer.toolbar.addItem(designButton);
viewer.toolbar.updateLayout({
default: [
"$openDesigner",
"$split",
"$navigation",
"$split",
"$refresh",
"$split",
"$history",
"$split",
"$zoom",
"$fullscreen",
"$split",
"$print",
"$split",
"$singlepagemode",
"$continuousmode",
"$galleymode",
],
});
fetch("order-detail.rdlx-json")
.then(function (data) {
return data.json();
})
.then(function (report) {
currentReport = report;
MESCIUS.ActiveReportsJS.Core.FontStore.registerFonts("fonts/fontsConfig.json").then(
viewer.open(report)
);
});
}
</script>
</body>
</html>
{
"Orders": [
{
"OrderID": "1",
"Customer": "からんころん",
"Contact": "高橋 真紀",
"OrderDate": "2020/12/04",
"PostalCode": "884-1111",
"Address": "北九州町田1-3-X",
"OrderItems": [
{
"Product": "ホワイトソルト",
"UnitPrice": 1400,
"Quantity": 12
},
{
"Product": "バタートースト",
"UnitPrice": 1000,
"Quantity": 10
},
{
"Product": "北海道昆布",
"UnitPrice": 3500,
"Quantity": 5
}
]
},
{
"OrderID": "2",
"Customer": "小料理ひろ",
"Contact": "田中 秀樹",
"OrderDate": "2020/12/08",
"PostalCode": "486-0969",
"Address": "春日井市味美白山町1-9-X",
"OrderItems": [
{
"Product": "モーニングブレッド",
"UnitPrice": 800,
"Quantity": 10
},
{
"Product": "アメリカンポーク",
"UnitPrice": 4200,
"Quantity": 35
},
{
"Product": "冷凍コーンクリームコロッケ",
"UnitPrice": 1700,
"Quantity": 15
}
]
},
{
"OrderID": "3",
"Customer": "食所あんどう",
"Contact": "木下 和明",
"OrderDate": "2020/12/08",
"PostalCode": "811-2206",
"Address": "粕屋郡志免町御手洗51-X",
"OrderItems": [
{
"Product": "チョコクリームアイス",
"UnitPrice": 1700,
"Quantity": 6
},
{
"Product": "和風ハンバーグレトルト",
"UnitPrice": 1600,
"Quantity": 15
},
{
"Product": "冷凍コーンクリームコロッケ",
"UnitPrice": 1700,
"Quantity": 20
}
]
},
{
"OrderID": "4",
"Customer": "高原亭",
"Contact": "田中 秀樹",
"OrderDate": "2020/12/09",
"PostalCode": "300-1203",
"Address": "牛久市下根町1504-XX",
"OrderItems": [
{
"Product": "特製和風醤油",
"UnitPrice": 6500,
"Quantity": 40
},
{
"Product": "フレッシュバター",
"UnitPrice": 200,
"Quantity": 25
},
{
"Product": "ミートバー",
"UnitPrice": 32700,
"Quantity": 40
}
]
},
{
"OrderID": "5",
"Customer": "料亭きゅうきゅう",
"Contact": "木下 和明",
"OrderDate": "2020/12/10",
"PostalCode": "733-0036",
"Address": "広島市西区観音新町1-16-X",
"OrderItems": [
{
"Product": "ロッキーチーズ",
"UnitPrice": 1000,
"Quantity": 12
},
{
"Product": "ラズベリーヨーグルト",
"UnitPrice": 1400,
"Quantity": 42
},
{
"Product": "コーンフレークチョコ",
"UnitPrice": 1600,
"Quantity": 40
}
]
},
{
"OrderID": "6",
"Customer": "洋食ちくさ",
"Contact": "明山 典央",
"OrderDate": "2020/12/11",
"PostalCode": "467-0055",
"Address": "名古屋市瑞穂区中根町5-4-X",
"OrderItems": [
{
"Product": "じゃがチップス",
"UnitPrice": 400,
"Quantity": 15
},
{
"Product": "ベター生ハム",
"UnitPrice": 1900,
"Quantity": 21
},
{
"Product": "食卓わかめ",
"UnitPrice": 800,
"Quantity": 21
}
]
}
]
}
