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 15, 2020
  • Scott

Over the years, the members of our team have recorded a number of videos for us, to explain what we do, what m...

  • June 1, 2020
  • Scott

So McKinsey did a study published in October, 2018 on the subject of the value of design.  They defined the M...

  • May 21, 2020
  • Scott

Sven Boermeester is an entrepreneur with a publishing business: he collects compelling stories about innovativ...