Build Your First Custom Widget in Bonita UI Designer
Published: 2020-09-30 13:24:45

![Cover image](https://dev-to-uploads.s3.amazonaws.com/i/j4ptgm514sa6kvy7czh0.png)

A web developer always wants to have just the right widget handy - and sometimes they have to create their own when they can’t find just the right one among the widgets provided. This article is to help new Bonita users especially, but is for anyone who wants to learn how to create a custom widget in Bonita UI Designer. In this article, I am going to explain how to create a custom *Hello World!* widget to use on our application page.

####Prerequisite####
Bonita Studio must be installed on your computer to launch the Bonita UI Designer. You can download Bonita Studio from [here.](https://www.bonitasoft.com/downloads)

####Step 1####
- In the Bonita UI Designer home page, click on the *Create* button.
- Choose Custom widget in the **Type** section.
- Define a name for the widget (eg. HelloWorldWidget).
- Click on *Create*.
- The editor window for the widget “HelloWorldWidget” will appear.

![Step 1 image](https://dev-to-uploads.s3.amazonaws.com/i/bjp4cqtpcleoq422m5hn.png)  

A custom widget is composed of six different sections: **Description**, **Template**, **Controller**, **Assets**, **Required angular modules**, and **Properties**. Since we are creating a simple custom widget to display a “Hello World!” text, we will make some modifications in the **Template** section only.

####Step 2: Edit####
- First, remove everything from all the sections. 
- Now, our widget editor window looks like this:

![Step 2 image](https://dev-to-uploads.s3.amazonaws.com/i/d9sirm1q8amn4sbe9frs.png)

####Step 3: Create a template for the widget####
In the template section, we write the HTML for the widget we want to build and it will be shown to the end-users when we see the preview.
- In the template section, write the following HTML code;

*HTML*
```html
<h2>Hello World!</h2>
```

**Note:** The `<h2>` tag creates a second-level heading in the HTML document.

![Step 3 image](https://dev-to-uploads.s3.amazonaws.com/i/ym8ir686cp4vqej9o4ea.png)

- Click on the *Save* button.

####Step 4: Use the HelloWorldWidget into an application page####
- In the Bonita UI Designer homepage, click on the *Create* button.
- Choose the Application page in the **Type** section.
- Define a name for the page (eg. HelloWorld).
- Click on *Create*.
- A page editor window will open.
- Click on the custom widgets tab on the left.
- We can see now that HelloWorldWidget appears in the list.
- Now, drag and drop the HelloWorld widget onto the whiteboard.
- Set the width property to 12 columns.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/loomdmq6lwi2nipsweml.png)

- Click on the *Save* button.
- Click on the *Preview* button to see the output.

####Output####
We can now see *Hello World!* with a second-level heading format in the preview.

![Cover image](https://dev-to-uploads.s3.amazonaws.com/i/j4ptgm514sa6kvy7czh0.png)

Now that you can create a simple custom Hello World! widget easily. In my other article, I have explained how to create a custom search widget, how to change the look and feel of a custom widget that appears on the whiteboard, and a pro tip on how to change the custom widget icon when it appears on the list. The custom search widget will be the same as shown in the image below. Click [here](https://dev.to/vishalthapaliya/build-a-custom-search-widget-in-bonita-ui-designer-4m0j) to learn about building a custom search widget in Bonita UI Designer.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/8xq8nkjl7scwrct190cx.gif)

Stay tuned. Have fun with Bonita!