Custom Components in BrazosOpen

Post by
Andrew Paier

[Editor's note: This is a guest post from one of our developers Arda Tugay.? Arda is about


to celebrate his one year with BP3 and we are very lucky to have him on our team. Here Arda describes the ease of creating custom components with BrazosOpen - our framework for great UIs for open source BPM suites. If you would like a demo of BrazosOpen sign up here.]

Not long ago, David Parish posted an article showing how BrazosOpen provides a simple-yet-powerful framework for you to create a user-friendly and responsive UI for task forms. If you haven?t checked it out yet, make sure to do so after reading this article.

BrazosOpen comes with several UI Components out of the box: Text Input, File Upload, Radio Buttons, and Custom Tables to name a few. But what if you need a component that doesn't exist yet? BrazosOpen is designed to make it really easy to add a new component of your choosing. Since BrazosOpen is built on AngularJS and Bootstrap, you can virtually make any type of component you?d like.

Consider a simple form used to make a charitable donation:


Now, instead of having the users enter a dollar amount for the donation, you want them to use a slider to choose the donation amount. Since BrazosOpen is easily extendable, you can create your own slider component using an AngularJS directive, registering it with AngularJS, then adding it to your form, as shown below:


This implementation of a the slider required only a couple dozen lines with the help of a third-party Angular slider module (one of the thousands of different third-party open source AngularJS modules out there). Here is what this directive looks like:

function bzSliderDirective() {
return {
restrict: 'E', scope: {value: '='},
'input ng-model= "amount" type="text" slider options="options"/>'+
'', controller:'bzSliderController'

And here?s the one line of HTML I used to add it to my form:


The best part: this makes both the lives of end users and developers better. As the developer, you get the flexibility of developing tailored components for your end user. As the end user, you get the chance to develop your own components in your own environment and in your favorite editor.

More From Blog

You Might Also Like

BP3 and transformAI: Managed Intelligent Document Process Solutions and RPA
Read More
BP3 Global Acquires transformAI
Read More
Legendary Austin Burger Joint Takes on Minimum Wage
Read More
We Work With Companies Just Like Yours
Are You Ready?

Let’s Work Together

BP3 gets you there fast. Contact us today to see how we can bring more focus, foresight, and follow-up to your projects.