⛔ DEPRECATED. This project was moved to a new repository. Visit dashboard-extensions to find an updated version.
The current repository does not support the modular approach for HTML JS Dashboard and will not be updated in the future.
A custom Web Page item displays a single web page or a set of pages. You can use the Web Page as a detail item along with the Master-Filtering feature.
-
Download the latest version of scripts here.
-
Add the dist folder in your project.
-
Attach the download script to the project inside the
<body>section before the end tag onto the page containing Web Dashboard.
<body>
<!-- ... -->
<script src="/dist/webpage-extension.min.js"></script>
</body>- Handle the Web Dashboard's BeforeRender event to perform client-side customization of the Web Dashboard control before the control and its elements have been rendered.
<!-- For ASP.NET Web Forms -->
<dx:ASPxDashboard ID="ASPxDashboard1" runat="server" DashboardStorageFolder="~/App_Data/Dashboards">
<ClientSideEvents BeforeRender="onBeforeRender" />
</dx:ASPxDashboard>@* For ASP.NET MVC *@
@Html.DevExpress().Dashboard(settings => {
settings.Name = "Dashboard";
settings.ClientSideEvents.BeforeRender = "onBeforeRender";
}).GetHtml()- Register the custom item extension to add the Web Page to the Web Dashboard.
function onBeforeRender(sender) {
var dashboardControl = sender.GetDashboardControl();
dashboardControl.registerExtension(new CustomItems.WebPageItemExtension(dashboardControl));
}The Web Page dashboard item supports the following setting that you can configure in the Web Dashboard UI:
- URL - Specifies a web page URL. You can set a single page as well as a set of pages (e.g., https://en.wikipedia.org/wiki/{0}). If you add a dimension and specify a placeholder, the data source field returns strings that will be inserted in the position of the {0} placeholder. Thus, the Web Page item joins the specified URL with the current dimension value and displays the page located by this address.
You can use this extension code as a base for your own dashboard item extension development.
Before you start, we advise you to fork this repository and work with your own copy.
- Clone this extension to get a local copy of the repository.
git clone https://github.com/DevExpress/dashboard-extension-webpage-item.git
cd dashboard-extension-webpage-item- In this extension we use the Node.js toolset. Use the command below to install all modules listed as dependencies in the extension's package.json file.
npm install- Then install Gulp to build the solution. You can install it globally...
npm install -g gulp
gulp build... or use a local Gulp version.
.\node_modules\.bin\gulp buildYou can find the resulting files at ...\dashboard-extension-webpage-item\dist:
webpage-extension.js and webpage-extension.min.js.
This extension is distributed under the MIT license (free and open-source), but can only be used with a commercial DevExpress Dashboard software product. You can review the license terms or download a free trial version of the Dashboard suite at DevExpress.com.
- Refer to this section for general information about client-side extensions.
- To learn how to create a custom item, see the following KB article.
- To address questions regarding the Web Dashboard and JavaScript API, use DevExpress Support Center.