Manage Extensions in Vue
- 3 minutes to read
You can access extensions to customize the Web Dashboard control. The extension is an independent JavaScript module/class that adds specific functionality to the control. Each extension implements the IExtension interface. For example, the DashboardExportExtension enables users to export dashboard data, the DashboardParameterDialogExtension manages dashboard parameters, and the ToolboxExtension allows you to customize the Toolbox. If you disable the extension, the functionality this extension provides is unavailable.
View the DevExpress.Dashboard.Designer module to find extensions used in the Web Dashboard when it operates as a designer. The DevExpress.Dashboard contains extensions used both in Designer and Viewer modes. You can use the DashboardControl.extensions property to get an array of registered extensions you can customize.
Specify Extension Options
You can use the extensions property to access registered extension settings. Import the Extensions module and the module that corresponds to the extension you want to configure. The following code changes the DataInspectorExtension options to enable the Data Inspector:
<template>
<div>
<DxDashboardControl
style="height:900px; display: 'block'; width: '100%';"
endpoint="http://localhost:5000/api/dashboard">
<DxExtensions>
<DxDataInspector
:allowInspectAggregatedData="true"
:allowInspectRawData="true">
</DxDataInspector>
</DxExtensions>
</DxDashboardControl>
</div>
</template>
<script>
import { DxDashboardControl, DxExtensions, DxDataInspector } from 'devexpress-dashboard-vue/dashboard-control';
export default {
components: {
DxDashboardControl,
DxExtensions,
DxDataInspector
}
}
</script>
Remove an Extension
You can unregister the extension to remove the specific functionality from the Web Dashboard. For example, you can completely remove the export functionality if you unregister the DashboardExportExtension.
To remove the registered extension, handle the onBeforeRender event and get the e.component property to get the DashboardControl instance. Call the DashboardControl.unregisterExtension method and pass the extension unique name as a parameter. The following code unregisters the CreateDashboardExtension and removes the ‘New…’ item from the dashboard menu:
<template>
<div>
<DxDashboardControl
style="height:900px; display: 'block'; width: '100%';"
endpoint="https://demos.devexpress.com/services/dashboard/api"
@beforeRender="onBeforeRender" />
</div>
</template>
<script>
import { DxDashboardControl } from 'devexpress-dashboard-vue';
export default {
components: {
DxDashboardControl
},
methods: {
onBeforeRender(e) {
var dashboardControl = e.component;
dashboardControl.unregisterExtension('createDashboard');
}
}
}
</script>
Register a New Extension
Import the extension module. Register an extension in the onBeforeRender event handler. Use the e.component property to get the DashboardControl instance. Pass the extension instance as the control’s registerExtension method parameter.
The code below registers the imported DashboardPanelExtension and the HelloWorld custom item from the external HelloWorld.js file:
<template>
<div>
<DxDashboardControl
style="height:900px; display: 'block'; width: '100%';"
endpoint="https://demos.devexpress.com/services/dashboard/api"
@beforeRender="onBeforeRender" />
</div>
</template>
<script>
import { DxDashboardControl } from 'devexpress-dashboard-vue';
import {DashboardPanelExtension} from 'devexpress-dashboard/common';
import HelloWorldItem from './HelloWorld';
export default {
components: {
DxDashboardControl
},
methods: {
onBeforeRender(e) {
var dashboardControl = e.component;
dashboardControl.registerExtension(new DashboardPanelExtension(dashboardControl));
dashboardControl.registerExtension(new HelloWorldItem(dashboardControl));
}
}
}
</script>
More Examples
The following topic describes how to register the TextBoxItemEditorExtension: Enable Text Editor Functionality.
View the DevExpress.Dashboard.Designer module to find extensions used in the Web Dashboard when it operates as a designer. The DevExpress.Dashboard contains extensions used both in Designer and Viewer modes.