Brazos UI 4.x Upgrade Guide


Note: This guide is applicable to both v3.x to v4.x and v3.x to v5.x toolkit upgrades. No special changes are required to upgrade applications using v4.x to use v5.x of the toolkit.

The 4.x version of the Brazos UI Toolkit was released on 2015-07-19. The 4.0 version change mostly focused on upgrading the underlying technologies upon which Brazos was built. Here is a list of the major changes:

  • Upgraded from Bootstrap v2.3.2 to Bootstrap v3.3.4
  • Upgraded from jQuery v1.8 to jQuery v1.11.2 (Note: jQuery 2.x does not support Internet Explorer 8)
  • Upgraded from Font Awesome 3.2.1 to Font Awesome 4.3.0

These changes will provide BPM developers with an array of new features and open up the possibility of using many new third-party libraries that have been built on the newer versions of Bootstrap. However, this also means your Brazos toolkit upgrade requires a bit more work than usual.

In order to assist you with this migration, we've added functionality to our Neches analysis tool to point out areas that are affected by the upgrade. If you are not already registered for Neches, click the "SIGN UP" button and register. Once logged in, simply upload your process application. If any Brazos UI 4.0 upgrade concerns are found, you will see a red exclamation point (!) next to your process app.

Click on the exclamation point, and click each artifact listed to see additional details.

Note that you will need to inspect your code for each recommendation and modify your code as appropriate.


Here is a full list of what you will need to consider when upgrading from Brazos UI v3.x to Brazos UI v4.x/v5.x:

  • If you're starting from a pre-v3.17.0 release of Brazos, make sure you have followed these steps.
  • If you have customized the look and feel of your coaches using CSS, you'll need to modify your CSS changes to comply with Bootstrap 3. The Style Editor in the Brazos Examples process app has been updated to reflect the new class names. If you've made more extensive changes, you'll need to search your CSS for any classes listed in this Bootstrap upgrade guide. Specifically, these are the classes you're most likely to come across:
    Brazos 3.x Brazos 4.x/5.x
    .input-block-level .form-control
    .control-group .form-group
    .checkbox.inline .radio.inline .checkbox-inline .radio-inline
    .input-prepend .input-append .input-group
    .add-on .input-group-addon
    .accordion .accordion-* (See Bootstrap upgrade guide)
    .span* .col-md-*
    .controls .col-xs-9 
  • We have modified a few of our custom classes to match Bootstrap conventions as well.
    Brazos 3.x Brazos 4.x/5.x
    .accordion-group-bp3 .panel-bp3
    .accordion-heading-bp3 .panel-heading-bp3
    .accordion-heading-bp3-expanded .panel-heading-bp3-expanded
    .accordion-group-detailsInfo .panel-detailsInfo
    .accordion-heading-detailsInfo .panel-heading-detailsInfo
    .accordion-inner-info-details .panel-body-info-details
    .accordion-detailsInfo .panel-detailsInfo
    .accordion-border .panel-border
  • If you've built any custom controls to use in concert with Brazos, you'll want to check those controls for the classes listed in the upgrade guide above. Those classes are likely to be found in your Custom HTML, Inline CSS, or any of the JavaScript event handlers.
  • Font Awesome icons have new names in v4.3.0. Old names are backward compatible in Brazos 4.0.0 configuration options, but you might want to update your configuration options with new names. If you're using a deprecated icon name, you will be notified of the new icon name in your browser's JavaScript console. You can also see a list of the updated names in this Font Awesome upgrade guide. If you have used any Font Awesome icons in custom controls or custom HTML, you'll need to at least change class names from "icon-*" to "fa fa-*".
  • Bootstrap v3.3.4 handles horizontal forms (also known as "labels left of controls") differently from Bootstrap v2.3.2. Instead of giving the label a fixed width, these labels are allotted 25% of the .form-group (previously called .control-group). Brazos still supports the custom label width configuration option, but it is not recommended.

If you're having any issues with your upgrade, don't hesitate to send us a note at, and we'll be happy to help.

Brazos v4.0.0 also includes the following new features and improvements:

  • Improved performance
  • The Data Table and Table controls now include a button that allows users to download the underlying data in CSV format (Microsoft Excel compatible).
  • Form label alignment can now be inherited. This means if you like your labels to appear above your controls (or left of your controls), you can change that configuration once, and see that alignment in all child Sections.
  • Sections and Columns can also control the alignment of numerical inputs (and inherit this configuration from parent Sections and Columns). This means it's now easy to left-align the text inside of the Input Decimal and Input Integer controls.
  • Labels are automatically hidden in table cells unless they're wrapped in a column/section. This avoids a common development annoyance.
  • Tables and Data Tables now take up less vertical space than before, especially in the read-only configuration.
  • Brazos now supports the "HIDDEN" visibility option, introduced in IBM BPM 8.5.0.
  • Several bugs were fixed to create consistency in label and control visibility and behavior.
  • Full release notes for v4.0.0 and higher can be found here.
Have more questions? Submit a request


  • Avatar
    Gerhard Vanniekerk

    If upgrading from V4.9.0E to V5.0.1E do I have to apply any special activities other than to update the toolkit version?

  • Avatar
    David Bailie

    Hi Gerhard, sorry for the delay in reply. No special activities are needed when moving from 4.x to 5.x. Feel free to open a support ticket if you run into any issues.

Powered by Zendesk