Custom Components in BrazosOpen

  • June 11, 2015
  • Andrew

[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:


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.

Related Posts
  • June 13, 2019
  • Ariana

Join us on June 27th at 11 am EST for a webinar with iGrafx, myInvenio & BP3 to discuss the Robotics Journ...

  • May 31, 2019
  • Ariana

BP3 will be sponsoring the Austin Technology Council's Leadership Dinner on Wednesday, June 19, 2019. This eve...

  • April 16, 2019
  • Lance

If you have been thinking about automation or performing small pilots, now is the time to get very serious abo...