Build a Custom Search Widget in Bonita UI Designer
Tags: bonitasoft, uidesigner, customwidget
Published: 2020-10-15 09:24:43

![Banner image](https://dev-to-uploads.s3.amazonaws.com/i/h6h6ris7b5n4ls1wvjww.gif)

As a web developer, I love to provide users with good UX. In my opinion, this means, at the minimum, to have consistent pages, layouts, and consistent widgets within pages. When I can’t find the right widget in the toolkit provided, I create my own to be sure I can build a UX I can be proud of. As a side benefit, having widgets tailored to my needs saves my time and effort and allows me to be more efficient at my work. 

In this article, I am going to explain how to create a custom search widget in Bonita UI Designer. This article has 2 parts. The first part explains how to create a search widget and change the appearance of the widget when we drag and drop it onto the whiteboard in Bonita UI Designer.

The second part explains how to add some CSS to make the search widget functional to the end-users.

### Part I: Define the appearance of your custom widget ###

#### Step 1 ####
- Go to the Bonita UI Designer home page.
- Click on the *Create* button.
- Choose *Custom widget* in the **Type** section.
- Give a proper name to the widget (eg. searchWidget).
- Click on *Create*.

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

The custom widget editor window will appear. A custom widget is composed of six different sections: **Description**, **Template**, **Controller**, **Assets**, **Required angular modules**, and **Properties**. As we are creating a custom widget, we will make some modifications in the **Template**, **Assets**, and **Properties** sections.

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

#### Step 2 ####
- Remove everything from all the sections. We are going to create our widget from scratch.
- Now, our widget editor window looks like this:

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

#### Define the Properties section ####
	
#### Step 3: Property 1: Value ####
- Click on the *Create* button.
- A "Create new property" dialog box will appear.
- Set the properties:
 - Name = value
 - Label = Value
 - Treat value as = Bidirectional bond
- Click on *Create*.

**Note:** The value property saves the value we type in our widget.

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

#### Step 4: Property 2: Placeholder ####
- Click on the *Create* button.
- A "Create new property" dialog box will appear.
- Set the properties:
 - Name = placeholder
 - Label = Placeholder
 - Treat value as = Interpolation
- Click on *Create*.

**Note:** This property sets a custom placeholder for our widget.

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

#### The Template section ####

In the template section, we will write some internal CSS as well as HTML codes, which means the code applies to change the look and feel of a widget that appears on the whiteboard.

#### Step 5 ####
In the template section, write the following HTML and internal CSS codes:

*HTML*
```
<div ng-if="environment">
    <input class="search-input" />
    <span class="icon-container"><i class="glyphicon glyphicon-search"></i></span>
</div>
```
**Note:** in the HTML code above, `ng-if="environment"` detects that the widget is displayed within the UI Designer whiteboard. It allows us to define how the widget is displayed to the developer within the UI Designer (as opposed to now the widget displayed to the user within a web page at runtime).

*CSS*
```
<style>
.search-input {
    padding: 0 15px;
    height: 35px;
    border: 1px solid rgba(11,67,97,1);
    border-radius: 35px;
    outline: none;
    color: rgba(11,67,97,1);
    width: 100%;
    opacity: 1;
    background: #fff;
}

.icon-container {
    position: absolute;
    right: 17px;
    padding: 9px;
    height: 35px;
    width: 35px;
    border: 1px solid rgba(11,67,97,1);
    border-radius: 50%;
    z-index: 5;
    background: rgba(11,67,97,1);
}

.icon-container .glyphicon {
    font-size: 16px;
    color: #fff;
}
</style>
```
**Note:** All the CSS codes must be written inside the <style></style> tag. Since Bootstrap is embedded by default in the UI Designer, we can easily use the bootstrap glyphicons.

Now, the widget editor looks like this:

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

- Click on the Save button.
- **Bravo!!!** We have created our search widget successfully.

#### Step 6 (optional) ####

#### Pro tip - Defining the widget icon ####
Since Bonita will ultimately provide an easy way for Bonitasoft users to define the widget icon as per their need, **Step 6 is not mandatory**. Nevertheless, to give a real look and feel to the custom search widget icon, you can try this pro tip:
  
- Open the “customSearchWidget.json” file located inside your Bonita workspace (eg. /workspace/My project/web_widgets/customSearchWidget/customSearchWidget.json).
- Copy and paste the given code below after the “template” line inside the “customSearchWidget.json”.
```
"icon" : "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' fill='#fff'><g transform='translate(0.000000,512.000000) scale(0.100000,-0.100000)' fill='#fff' stroke='none'><path d='M1905 4794 c-512 -79 -967 -381 -1234 -817 -297 -485 -342 -1053 -124 -1570 160 -381 476 -715 848 -897 485 -237 1024 -237 1510 0 55 27 134 72 177 100 42 27 80 512 85 50 4 0 310 -301 678 -670 l670 -670 142 142 143 143 -667 667 c-665 665 -666 666 -650 690 9 13 48 66 87 118 124 169 241 432 284 641 79 384 26 776 -153 1127 -261 512 -751 865 -1312 947 -130 18 -361 18 -484 -1z m403 -195 c349 -38 647 -171 895 -399 390 -360 562 -928 445 -1469 -119 -555 -550 -1003 -1095 -1142 -169 -43 -265 -52 -463 -46 -307 10 -554 88 -801 252 -459 306 -709 829 -667 1399 58 801 700 1401 1511 1415 43 0 121 -4 175 -10z'/> </g> </svg>",
```
![Step 6 image](https://dev-to-uploads.s3.amazonaws.com/i/wh81gq2oz0tthw661aij.png)

- The SVG code generates a magnifying glass icon for our search widget.
- Save the file and close it.

**Hurray!!!!!!!!** We have now successfully changed an icon of the widget. Now, it's time to use our custom widget inside an application page.

#### Step 7 ####
- Go to the Bonita UI Designer home page.
- Click on the *Create* button.
- Choose *Application* page.
- Give a name to the page (eg. searchApplication).
- Click on *Create*.
- Now, in the page editor window, click on the *Custom widgets* tab on the left.
- We can see now that the searchWidget appears on the list and has a magnifying glass as an icon.
- Drag and drop the search widget onto the whiteboard.

#### Output ####
The widget on the whiteboard will be shown the same as in the image below;

![Step 7 image](https://dev-to-uploads.s3.amazonaws.com/i/zjtlr63kl5rwapgl5zma.PNG)

We have completed the definition of the custom search widget, and now we are going to make the search widget functional to end-users.

![Minnions image](https://dev-to-uploads.s3.amazonaws.com/i/4878twzoy8qsqotyznys.gif)

The implementation steps that follow are based on a large device screen resolution (i.e., screen width >= 1200px). You can change the responsiveness of the page by clicking on the different device screen size icon that appears on the top right corner in Bonita UI Designer.

### Part II: Implement the custom search widget controller ###

#### Step 8 ####
- Click and select the custom search widget on the whiteboard.
- Click on the **“...”** button next to the widget name on the right.
- Click on *Edit*.

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

- The widget editor window will appear.

#### Step 9 ####
- In the Template section after the end of `<div ng-if="environment"></div>` tag, write the following HTML code:

*HTML*
````
<div ng-if="!environment" class="search-input-container">
    <input 
        type= " text "
        ng-model= " properties.value "
        placeholder= " {{properties.placeholder | uiTranslate}} "
        onfocus= " this.value= '' " 
    />
    <div class="search-icon"></div>
</div>
```
**Note:** In the HTML code above, `ng-if="!environment"` detects that the widget displayed to the user within a web page at runtime. Additionally, `ng-modal="properties.value"` stores the value entered in the widget, and `placeholder="{{properties.placeholder}}"` defines the placeholder for the widget.

- Now the Template section looks like this:

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

#### Step 10 ####
- Create a CSS file somewhere on your computer (e.g., D:\search-wideget.css) and copy the following CSS code into it:

*CSS*
```
.search-input-container {
    width: 100%;
    height: auto;
}

.search-input-container .search-icon {
    position: absolute;
    top: 30px;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    width: 35px;
    height: 35px;
    background: rgba(11,67,97,1);
    border-radius: 50%;
    transition: all 1s;
    z-index: 5;
    box-shadow: 0 0 15px 0 rgba(0,0,0,0.4);
}

.search-input-container .search-icon:hover {
    cursor: pointer;
}

.search-input-container .search-icon::before {
    content: "";
    position: absolute;
    margin: auto;
    width: 8px;
    height: 3px;
    background: #fff;
    top: 12px;
    right: 0;
    bottom: 0;
    left: 12px;
    transform: rotate(45deg);
    transition: all .5s;
}

.search-input-container .search-icon::after {
    content: "";
    position: absolute;
    margin: auto;
    height: 15px;
    width: 15px;
    border: 2px solid #fff;
    border-radius: 50%;
    top: -5px;
    right: 0;
    bottom: 0;
    left: -5px;
    transition: all .5s
}

.search-input-container input {
    position: absolute;
    margin: auto;
    padding: 0 60px 0 15px;
    width: 35px;
    height: 35px;
    top: 30px;
    right: 0;
    bottom: 0;
    left: 0;
    border: 1px solid rgba(11,67,97,1);
    border-radius: 35px;
    background: #fff;
    outline: none;
    color: rgba(11,67,97,1);
    z-index: 6;
    opacity: 0;
    transition: all 1s;
}

.search-input-container input:hover {
    cursor: pointer;
}

.search-input-container input:focus {
    width: 90%;
    opacity: 1;
    cursor: text;
}

.search-input-container input:focus ~ .search-icon {
    right: calc(-90% + 35px);
    background: rgba(11,67,97,1);
    z-index: 6;
}

.search-input-container input:focus ~ .search-icon::before {
    width: 15px;
    top: 0;
    left: 0;
}

.search-input-container input:focus ~ .search-icon::after {
    height: 3px;
    width: 15px;
    border: none;
    border-radius: 0;
    transform: rotate(-45deg);
    background: #fff;
    top: 0;
    right: 0;
    left: 0;
}
```
**Note:** You can define the vertical and horizontal positioning properties such as; top, bottom, left, and right as you wish. In the CSS code above, `“.search-input-container .search-icon::before”` and `“.search-input-container .search-icon::after”` creates a magnifying glass icon. Similarly, `“.search-input-container input:focus ~ .search-icon::before”` and `“.search-input-container input:focus ~ .search-icon::after”` creates an “X” icon. 

- Now, save the CSS file and close it.

#### Step 11 ####
- In the widget editor window in the Bonita UI Designer, click on the *Add* button in the **Assets** section and upload the CSS file we created in the previous step.

![Step 11 image](https://dev-to-uploads.s3.amazonaws.com/i/qvqe8umk990soweiqonp.png)
- After uploading the CSS file, the Assets section should show the file in the list as shown below:

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

- Click on the *Save* button to save all the modifications applied to the widget.

#### Step 12 ####
- Go back to the Bonita UI Designer home page.
- Click on *searchApplication* (the page we created in part 1).

![Step 12 image](https://dev-to-uploads.s3.amazonaws.com/i/x9gfugdsuts52deffdhv.png)
- Clean the page if there is already a widget on it.

#### Step 13 ####
- Drag and drop a title widget to the whiteboard and set the properties:
 - Width = 12
 - Text = Custom Search Widget
 - Title level = Level 3
 - Alignment = center

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

#### Step 14 ####
- Drag and drop a container widget below the title and set the width property = 4.

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

#### Step 15 ####
- Click on the *Custom widget* tab on the left.
- Drag and drop the searchWidget next to the empty container and set the properties:
 - Width = 4
 - Placeholder = Search text goes here...

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

#### Step 16 ####
- Drag and drop another container widget right to the search widget and set the width = 4.
- Finally, save the page and see the preview.

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

#### Output ####
![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/2ntfuzzkgeb44b8q2x0q.gif)

![Minnions with a girl image](https://dev-to-uploads.s3.amazonaws.com/i/tpmt80r0dhbljci9jatc.gif)

I would love to know what other kinds of custom widgets you would like to implement with Bonita UI Designer. Please share your tips and examples.

Have fun with **Bonita!**