@boxfusion/pd-devexpressreporting
Heading
This is a component library, based on ReactJS and DevExpress Reporting that provides the capability to develop a reporting application to create and customize reports.
Consuming the library
In order to use this library in your application, there are three things you need to do: install it, register it, and import DevExpress styles.
Install
Register
Because this components uses a library that references a window object on load, it causing an error shown below when registered normally:
To overcome this, it will need to be registered only within the useEffect, because this function runs on the browser, when the window object is available, as shown below:
import the DevExpress styles
Create a dev-express.less file and paste the following lines of code:
@import '../../node_modules//jquery-ui/themes/base/all.css';
@import '../../node_modules//devextreme/dist/css/dx.common.css';
@import '../../node_modules//devextreme/dist/css/dx.light.css';
@import '../../node_modules//@devexpress/analytics-core/dist/css/dx-analytics.common.css';
@import '../../node_modules//@devexpress/analytics-core/dist/css/dx-analytics.light.css';
@import '../../node_modules//@devexpress/analytics-core/dist/css/dx-querybuilder.css';
@import '../../node_modules//devexpress-reporting/dist/css/dx-webdocumentviewer.css';
@import '../../node_modules//devexpress-reporting/dist/css/dx-reportdesigner.css';In your pages/\_app.tsx file, import the styles like below
import {
AppConfiguratorProvider,
CustomErrorBoundary,
DynamicModalProvider,
GlobalStateProvider,
IToolboxComponentGroup,
PageWithLayout,
ShaApplicationProvider,
StoredFilesProvider,
UiProvider,
} from '@shesha-io/reactjs';
import { CustomNProgress } from 'components';
import { AppProps } from 'next/app';
import { useRouter } from 'next/router';
import React, { useEffect, useState } from 'react';
import { BASE_URL } from 'src/api/utils/constants';
import { StyledThemeProvider } from 'src/definitions/styled-components';
require('@shesha-io/reactjs/dist/styles.less');
require('src/styles/compiled.antd.variable.css');
require('src/styles/custom-n-progress.less');
require('src/styles/devexpress.less');
function MyApp({ Component, pageProps }: AppProps): JSX.Element {
const router = useRouter();
const [reportingComponents, setReportingComponents] = useState<IToolboxComponentGroup[]>([]);
useEffect(() => {
setReportingConfigComponents();
}, []);
const setReportingConfigComponents = () => {
import('@shesha/module-reports').then(({ allComponents }) => {
setReportingComponents(allComponents);
});
};
// Use the layout defined at the page level, if available
const getLayout = (Component as PageWithLayout<any>).getLayout ?? ((page) => page);
return (
<CustomErrorBoundary>
<StyledThemeProvider>
<GlobalStateProvider>
<ShaApplicationProvider
backendUrl={BASE_URL}
router={router as any}
toolboxComponentGroups={reportingComponents}
noAuth={router?.asPath?.includes('/no-auth')}
>
<AppConfiguratorProvider>
<DynamicModalProvider>
<CustomNProgress />
<StoredFilesProvider baseUrl={BASE_URL} ownerId={''} ownerType={''}>
<UiProvider>{getLayout(<Component {...(router?.query || {})} {...pageProps} />)}</UiProvider>
</StoredFilesProvider>
</DynamicModalProvider>
</AppConfiguratorProvider>
</ShaApplicationProvider>
</GlobalStateProvider>
</StyledThemeProvider>
</CustomErrorBoundary>
);
}
export default MyApp;require('src/styles/devexpress.less');The libraries which are referenced here will be installed you install
@boxfusion/pd-devexpressreporting, meaning you don't need to it manually.
Switch to another file
All your files and folders are presented as a tree in the file explorer. You can switch from one to another by clicking a file in the tree.
Rename a file
You can rename the current file by clicking the file name in the navigation bar or by clicking the Rename button in the file explorer.
Delete a file
You can delete the current file by clicking the Remove button in the file explorer. The file will be moved into the Trash folder and automatically deleted after 7 days of inactivity.
Export a file
You can export the current file by clicking Export to disk in the menu. You can choose to export the file as plain Markdown, as HTML using a Handlebars template or as a PDF.
Node version
This library was developed and tested on version v18.16.0 of NodeJS