As you may already know, DevExpress Web Dashboard offers support for custom extensions - allowing you to extend its built-in functionality whenever necessary.
In this blog post we publish a new extension and provide a few DIY tips. We chose Nataly - a team member with no prior extension development experience – to develop the new Dashboard item, publish it on GitHub, and document the problems she faced along the way.
But before we get to the story, let me ask you where you stand on Dashboard extension development.
The Project: Parameter Value Viewer & Editor
The Dashboard item described here enables end-users to view and edit parameter values directly on the Dashboard surface. See the Dashboard Parameters pane on the image below:
You can drag-and-drop this item, combine it into a group and perform all the basic operations you would expect from standard dashboard items.
The completed source code and installation manual are now available on GitHub. Go ahead and grab it if you find it useful.
Tip #1: Start with the Documentation
That's an obvious one - start by reading the documentation. The "Customize the Web Dashboard using Extensions" section that contains the following useful topics:
- Working with Extensions
Explains extension mechanism basics. - Creating a Custom Item
Focuses on Dashboard Items, a type of extensions. - Examples on GitHub
Two samples proved to be particularly useful. SimpleTable is in fact a very simple example, which can be used as a starting point. Funnel3D is an advanced sample that, among other things, shows how to add custom properties to the editor popup. More on that below.
Tip #2: Leverage Existing API / Request Additional API
ASPxClientDashboardParameters looks like an obvious candidate, as it provides read-write access to parameters and their values. But you can also find shortcuts...
Not only does Web Dashboard allow users to add custom extensions, but it also uses the extension technology, internally. One example is DashboardParameterDialogExtension, which lets users manage parameter values using a dedicated dialog. That extension obviously already has a lot of what the new custom item needed, such as rendering data editors for parameters, only the rendering occured in a dialog versus an on-form custom item.
That extension wasn't part of public API, so this step ended up in communication with the team. Our developers examined the suggestion and agreed it would make a valuable addition to the API, so they added the missing members and published a hot fix. The bottom line is if you see an opportunity to extend Dashboard’s API in a way that will benefit many users, please do contact us with suggestions. We’re happy to review any feedback.
Tip #3: Study Samples
The Dashboard item has its own custom settings:
- Show Headers: turns table header row on or off.
- Show Parameter Name: controls the left column's visibility.
- Automatic Updates: when enabled, hides the 'Submit' and 'Reset' buttons.
Here's what these settings look like in the Dashboard designer:
This step proved to be easy enough by adopting the implementation from the Funnel3D sample mentioned above. The special meta mechanism allows you to describe options using JSON, set default editors, and track option value changes.
Tip #4: Search the Knowledge Base
You'd think removing an option would be easier than adding a new one...
Data binding options automatically appeared in the designer, but they served no purpose. Documentation and samples didn't seem to have any solutions. This is where a Support Center search provided the solution. An issue that fit the description has already been resolved and a hot fix was ready to be downloaded.
All in all, that's the entire story – it took Nataly two days to complete the task. We've published one more sample for you to use or to learn from. And remember that you can always contact us and let us know what you need and we’ll do our best to help.