Build responsive UI Designer pages

anthony.birembaut's picture
anthony.birembaut
Blog Categories: 

When designing your applications pages and your process forms, you want to make sure they will display correctly and will be usable on mobile devices. Hence you want their design to be responsive. Here are some tips on how to achieve that when using Bonita UI Designer to build your pages/forms.

Use bootstrap grid breakpoints CSS classes

Bonita UI designer pages use Bootstrap Grid system for layout. As a result, you can benefit from bootstrap’s responsive breakpoints media queries to design your page.

The whiteboard and containers are organized in a 12-column grid.

In Bonita Enterprise (and Performance and Efficiency) edition, you can specify the width of each widget or container (by number of columns) for each device size responsive-icons.png.

The breakpoints are set by bootstrap by default. Here are the CSS classes prefixes:

  • Extra small devices Phones (<768px) : .col-xs-
  • Small devices Tablets (≥768px) : .col-sm-
  • Medium devices Desktops (≥992px) : .col-md-
  • Large devices Desktops (≥1200px) : .col-lg-

In Bonita Community edition, you can also define the width of each widget or container by applying the classes with the prefix above. The number of columns that you set for the width of the widget will apply to the extra small devices (default in Bootstrap). So for example if you set the width to 8 columns, the class col-xs-8 will be applied to the widget/container. Then you can decide to change this for bigger devices. For example, if you want it to take only 4 columns on desktops, put col-md-4 in the classes property field of the widget. You can combine classes to add more resolution behaviors.

responsive-classes.png

Hide/show widgets/containers for small/large devices

You may want to hide some of the content on devices with a small resolution, or show more content on higher resolutions. A set of Bootstrap utility classes are available for this.

  • To hide a widget/container for some resolutions, use the classes hidden-xs, hidden-sm, hidden-md and hidden-lg.

responsive-hidden.png

  • To show them only for some resolutions, use the classes visible-xs-*, hidden-sm-*, hidden-md-* and hidden-lg-* (* should be replaced with block, inline or inline-block to set the display css attribute).

responsive-visible.png

Use media queries

When building a custom widget, you may want it to display differently depending on the device resolution. You can do this by using media queries in a CSS asset. It may be a good idea to use the same breakpoints a Bootstrap in order to limit the number of different device sizes and associated page designs. Here are those breakpoints and associated media queries:

/* Extra Small Devices, Phones */ 
//Default, no media query

/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}

For example, let’s say we built a menu using flexbox and want it to display horizontally instead of vertically only on small medium and large devices (not extra small). In the style.css asset we have:

.menu {
  display: flex;
  flex-direction: column;
}

Then we change the direction with a media query:

@media only screen and (min-width : 768px) {
  .menu {
    flex-direction: row;
  }
}

When you resize the browser window, you should see the menu change from horizontal display to vertical display.

Conclusion

As you can see, just by using Bootstrap CSS classes in the UI Designer, you should be able to get most of the job done! You can then also use media queries for more specific use cases such as for custom widgets.

Notifications