How to Create Bold BI Custom Widgets Without Using the bicw.exe Utility

Overview

In Bold BI, the Bold BI Custom Widget Utility (bicw.exe) is commonly used to generate custom widget templates. However, some users assume that because the utility is distributed as a Windows executable, custom widgets can only be created on Windows environments. This is not the case.

In addition to the bicw.exe utility, Bold BI provides a cross-platform custom widget development workflow based on Node.js and npm. Developers can use the project template and build tooling provided in the Bold BI Custom Widgets Repository](https://github.com/boldbi/custom-widgets) to create, build, and package custom widgets on Windows, macOS, and Linux.

The repository includes the required project structure, sample widgets, and build commands needed to develop and package widgets into the .bicw format supported by Bold BI.

Once uploaded to a Bold BI server, a custom widget functions like any built-in widget. End users can interact with the widget through dashboards without needing to understand its implementation details. The development, configuration, and deployment of custom widgets are administrative and developer responsibilities, ensuring a seamless experience for dashboard users.

This article explains how to create custom widget templates and package custom widgets using the Bold BI Custom Widgets Repository without relying on the bicw.exe utility.

Prerequisites

To create custom widgets without using the bicw.exe utility, ensure that the following software is installed:

• Git
• Node.js (includes npm)
• A code editor, such as Visual Studio Code

A basic understanding of HTML, CSS, JavaScript, and JSON is recommended.

Clone the Custom Widgets Repository

Clone the Bold BI Custom Widgets repository using Git:

git clone https://github.com/boldbi/custom-widgets

Navigate to the cloned repository:

cd custom-widgets

Install the Required Packages

Install the required Node.js packages using the following command:

npm install

This installs the dependencies required by the custom widget repository.

Create a New Custom Widget

Use the create command to create a new custom widget:

For example:

npm run create -- --widgetname=mycustomwidget

The command creates the required custom widget structure in the repository.

The generated widget can then be modified according to the required visualization and functionality.

Develop the Custom Widget

After creating the widget, open the generated widget folder in your preferred code editor.

You can customize the widget based on your requirements, including:

• Widget configuration
• Data binding
• Widget properties
• Filtering
• Visualization
• Formatting
• Styling
• Third-party JavaScript libraries
• Custom interactions

The repository also contains sample custom widgets that can be used as references when developing a new widget.

For more information about developing custom widgets, refer to the Bold BI Custom Widget documentation.

Package a Custom Widget

After completing the development and configuration, use the pack command to package a specific custom widget:

npm run pack -- --widgetname=mycustomwidget

Replace mycustomwidget with the name of the widget that you want to package.

The command generates the custom widget package in the .bicw format.

The generated .bicw file can then be uploaded to Bold BI.

Package All Custom Widgets

If you have multiple custom widgets in the repository and want to package all of them, use:

npm run packall

This packages all available custom widgets into a common output location.

Publish the Custom Widget in Bold BI

After generating the .bicw file, it can be uploaded to Bold BI.

1. Sign in to the Bold BI application.
2. Navigate to Administration.
3. Select Widgets.
4. Click Add New Widget.
5. Browse and select the generated .bicw file.
6. Click Upload.

After the widget is uploaded successfully, it will be available under the Custom Widgets category in the Dashboard Designer.

For more information, refer to Configure Widget Settings.

Development Workflow

This section provides a high-level overview of the custom widget lifecycle in Bold BI. Developers create and package the custom widget, administrators upload and manage it on the Bold BI server, and dashboard designers can subsequently use the widget in dashboards through the standard drag-and-drop interface.

Benefits of this approach

Using the Custom Widgets Repository provides the following benefits:

• No need to use the bicw.exe utility.
• Uses a standard Node.js and npm-based development workflow.
• Provides a ready-to-use project structure for custom widget development.
• Includes sample custom widgets that can be used as references.
• Allows developers to create and package individual widgets.
• Supports packaging multiple widgets using a single command.
• Makes the custom widget development process easier to integrate with standard development workflows.

Frequently Asked Questions

Summary

The Bold BI Custom Widgets Repository provides an alternative to the bicw.exe utility for creating and packaging custom widgets.

Using this approach, developers can create, customize, and package Bold BI custom widgets using a standard Node.js-based development workflow without relying on the bicw.exe utility.

See Also

• Bold BI Custom Widgets Repository
• Create, Configure, and Format the Custom Widget
• Custom Widget Overview
• Configure Widget Settings