Default Report Item Properties

These samples show how to configure default report item properties for the designer component. Try adding a textbox into a report and notice that it has the preconfigured background color, text alignment, font family, and font size properties. Visit the documentation for more information. Scroll down the page to see the code.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <title>ActiveReportsJS sample</title> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <script src="/activereportsjs/demos/arjs/dist/ie-polyfills.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-core.js"></script> <script src="/activereportsjs/demos/arjs/dist/ar-js-designer.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-designer.css" /> <style> #designer-host { width: 100%; height: 550px; } </style> </head> <body> <div id="designer-host"></div> <script> GC.ActiveReports.Core.FontStore.registerFonts("/activereportsjs/demos/resource/fontsConfig.json"); var defaultTemplates = { metricTemplates: [{ id: "templates/metric-template.rdlx-json" }], imperialTemplates: [{ id: "templates/imperial-template.rdlx-json" }], }; var designer = new GC.ActiveReports.ReportDesigner.Designer( "#designer-host", { customInitTemplates: defaultTemplates } ); </script> </body> </html>