devexpress-dashboard-cli

DevExpress Dashboard CLI

The DevExpress Dashboard CLI is a set of command-line tools to be used with the DevExpress Dashboard control.

• Installation
• Usage
• Example
• License
• Support & Feedback

Installation

To install the devexpress-dashboard-cli package globally with npm, run the following command:

npm install -g devexpress-dashboard-cli

Make sure you have Node.js and npm installed on your machine.

Usage

Use the DevExpress Dashboard CLI to create a custom Dashboard theme or apply a custom DevExtreme theme created with the ThemeBuilder.

The DevExpress Dashboard CLI uses the Dashboard ThemeBuilder's exported json file to generate CSS files for the custom theme.

The following command generates custom CSS files:

npx devexpress-dashboard-cli build-theme

Use --help to list the available parameters:

npx devexpress-dashboard-cli build-theme --help

Arguments	Description
--input-file	Specifies the json file generated by the DevExtreme ThemeBuilder.
--base-theme	Specifies a base theme's name (the default value is generic.light).
--output-color-scheme	Specifies the custom color scheme name (the default value is custom-scheme).
--output-dir	Specifies the folder to save output files (the default value is the current directory).
--version	Specifies the target peer dependencies version.

Example

1. Open the ThemeBuilder. Create a custom theme based on the Generic theme. Use the Light color scheme as a base and change its accent color from blue (#57dd62) to yellow (#fdb400).

2. Set the color scheme name (light-yellow) and export the metadata as dx.generic.light-yellow.json to the created folder.

   Refer to the ThemeBuilder article for more information about the DevExtreme ThemeBuilder tool.

3. Copy the downloaded JSON file (dx.generic.light-yellow.json) to the folder with the installed packages (step 1).

4. Edit dx.generic.light-yellow.json and add the dashboardItems property to override the accent colors at the dashboard level:

   {
       "items": [
           {
               "key": "@base-accent",
               "value": "#fdb400"
           }
       ],	 
       "dashboardItems": [  
           { 
               "key": "@dashboard-item-selected-bg", 
               "value": "rgba(#fdb400, 0.2)" 
           },
           { 
               "key": "@dashboard-item-hover-bg", 
               "value": "rgba(#fdb400, 0.1)" 
           } 
       ],
       "baseTheme": "generic.light",
       "outputColorScheme": "light-yellow",
       "makeSwatch": false,
       "version": "19.1.5"
   }
   

   Refer to Color Constants to see a list of available color constants you can use to customize the Web Dashboard's colors.

5. In the created folder, use the command prompt to execute the command that builds the CSS files for your custom theme:

   npx devexpress-dashboard-cli build-theme --input-file dx.generic.light-yellow.json
   

   This generates the following CSS files you need to use to apply a custom theme:

   • dx.light-yellow.css
   • dx-analytics.light-yellow.css
   • dx-dashboard.light-yellow.css
   • dx.light-yellow.min.css
   • dx-analytics.light-yellow.min.css
   • dx-dashboard.light-yellow.min.css

See Apply a Custom Theme for information on how to use the generated CSS files to apply the custom theme.

License

DevExpress Dashboard CLI 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.

Support & Feedback

• Follow this article for general information about themes and styles.
• For any questions regarding the use of DevExpress Dashboards tools, please refer to our Support Center.