@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