What is a whiteboard plugin and does your team really need it? Custom-made whiteboard plugins are additional features that you have the possibility to develop yourself. Let’s say you need to calculate your team’s sprint load and you want to have a feature that does that automatically – you don’t want to manually analyze the team capacity and estimated story points, you want the feature to do it for you.
Building custom features for your online whiteboard will save you lots of manual work and take you to places you haven’t even imagined.
Would you like to know how to develop your own plugins for your virtual board but don’t know where to start? Read on!
We’ll show you how to create plugins for Whiteboards, our agile collaboration tool, in easy-to-follow steps. We’ll use GIPHY integration as an example. It’ll enable us to search for a GIF straight on the online board and drag and drop it onto the virtual canvas. We’ll also share a couple of handy links for API documentation, plugin SDK repository as well as sample plugins.
Let’s dive in!
Project setup
We’ll use React in this example, however, you can use any other framework that suits your needs. SDK is a framework-agnostic frontend library, the full source code of the following example is available on GitHub.
The first steps
1. Create a new project
npx create-react-app whiteboards-giphy --template typescript
2. Install dependencies
npm install --save-dev @whiteboards-io/plugins @giphy/react-components
3. Downgrade React to version 17 (Giphy React components do not work with newer versions)
npm install --save-dev react@17 react-dom@17
Application init
Downgrade the index.tsx to React 17.
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
ReactDOM.render(
,
document.getElementById('root')
);Two routes will be used by the app — plugin root, and sidebar.
function App() {
if (window.location.search === "?sidebar") {
return ;
} else if (window.location.search === "") {
return ;
} else {
return null;
}
}Plugin root will register a plugin extension and a new sidebar option. This route is initialized by the plugin system in an invisible iframe.
export default function PluginRoot() {
useEffect(() => {
const baseUrl = window.location.origin + window.location.pathname.replace(/^/$/, '');
registerSidebarTool({
id: "whiteboards-notepad",
icon: baseUrl + icon,
tooltip: "Giphy",
contentUrl: baseUrl + "?sidebar",
});
}, []);
return null;
}The sidebar is the only visible part of the plugin. It will display the GIPHY UI, let the user search for GIFs, and handle the GIF onClick action — insert the GIF in the center of the current viewport.
{
event.preventDefault();
const viewport = await getCurrentViewport();
createCards([{
x: viewport.location[0],
y: viewport.location[1],
width: gif.images.preview.width / viewport.zoom,
height: gif.images.preview.height / viewport.zoom,
props: {
dataURL: gif.images.downsized.url + "#image/gif",
originalWidth: gif.images.downsized.width,
originalHeight: gif.images.downsized.height,
}
}])
}}
/>Check the full source code of the sidebar component on GitHub.
Testing
Now it’s time to test if the code works as intended.
1. Run npm run start
2. Open the plugins administration: https://app.whiteboards.io/$YOURORG/access/config-plugins
3. Install the new plugin using the URL http://localhost:3000
4. Click on “Details” and enable the plugin in your organization
5. Go to the virtual whiteboard
6. Enable the plugin on your board in the Board configuration settings
Did it work? Great! Let’s deploy the plugin to the production environment.
Deployment
On GitHub’s repository, we’re using the following address to deploy the plugin and install it to the Whiteboards account — https://gtanczyk.github.io/giphy-whiteboards/. The deployment is automated using GitHub Actions.
The good thing is that we can do it for free, and we don’t need to worry about it. You build it, Github will run it ;).
Handy links
Check out the following handy links that will help you create custom plugins for your Whiteboards app.
- Plugin SDK repository
GitHub – Whiteboards-io/whiteboards-plugins - API documentation
@whiteboards-io/plugins - Sample plugins
whiteboards-plugins/sample-plugins at master · Whiteboards-io/whiteboards-plugins
GitHub – gtanczyk/whiteboards-notepad
GitHub – gtanczyk/giphy-whiteboards: Giphy integration for Whiteboards.io
Summary
Now you can use the API and SDK repository to create custom plugins for your Whiteboards.io account!
Build new features, customizations, automation, and much more. Adjust them to your team’s needs and unleash your potential, with Whiteboards plugins, the sky’s the limit!
