Custom Components in BrazosOpen

Arda Tugay
Next Post
Previous Post

[Editor’s note: This is a guest post from one of our developers Arda Tugay.  Arda is about LI-Brazosto 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:

WithoutSlider

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:

WithSlider

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: '='},
        template:''+ 
        '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:

HTMLslidercode

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.