Why do I create custom widgets in UI Designer?
A good UX requires consistent page layouts and consistent widgets within pages. When I do not find the right widget as part of the provided ones, I create mine to make sure I can build the UX I would be proud of. As a side benefit, having widgets tailored to my needs, saves my time and efforts and allows me to be more efficient at my work.
Here, I am going to explain how to create a custom search widget in Bonita UI Designer.
Note : to follow those how-tos, you have to install Bonita Community Studio first.You can download Bonita Studio from here.
First of all, let me tell you how I create custom widgets.
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.
- The first step is to Create the custom widget
- The second step is to Edit it
- The third step is to Create a template widget
- The last step is to use the HelloWorldWidget into an application page
Everything is described in details in the article.
Now let's practice based on a very useful use case : Search widget.
Your "HellowWorldWidget" is working fine? Now let's move on a practice on a real use case. Follow my instructions to create a Search custom widget for your application.
This second 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.
Everything is described in details in the article.
You want to share your results and show your custom widgets to our Community?
In a next blog article, Anthony will tell you all the best practices to contribute to Bonita UI Designer widgets... stay tuned!