Using Bootstrap Modal with ReactJS

Using Bootstrap Modal with ReactJS

Here we will be creating a reusable React-component for Bootstrap Modal.

Setup

Let’s first create a skeleton for our component. Create a file bootstrap-modal.jsx which contains the following code:

var BootstrapModal = React.createClass({
    displayName: "BootstrapModal",
    render: function () {
        return (
            <div ref="modal" className="modal fade">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button"
                                className="close">
                                <span>&times;</span>
                            </button>
                            <h4 className="modal-title">Title</h4>
                        </div>
                        <div className="modal-body">
                            Modal Body
                        </div>
                        <div className="modal-footer">
                            <button type="button"
                                className="btn btn-success">
                                OK
                            </button>
                            <button type="button"
                                className="btn btn-danger">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});

Including Bootstrap Plugin

Now we must initiate the modal plugin when the component loads and destroy it when it unloads. Add the following code to file created in the previous step.

componentDidMount: function () {
    $(this.refs.modal.getDOMNode()).modal({
        backdrop: "static",
        show: false
    });
},
componentDidUnmount: function () {
    $(this.refs.modal.getDOMNode()).off();
}

Helpers

Now, let us write helpers for showing and hiding the modal. Add the following code to the file.

show: function () {
    $(this.refs.modal.getDOMNode()).modal("show");
},
hide: function () {
    $(this.refs.modal.getDOMNode()).modal("hide");
}

Final code

The final code must look something like this:

var BootstrapModal = React.createClass({
    displayName: "BootstrapModal",
    componentDidMount: function () {
        $(this.refs.modal.getDOMNode()).modal({
            backdrop: "static",
            show: false
        });
    },
    componentDidUnmount: function () {
        $(this.refs.modal.getDOMNode()).off();
    },
    render: function () {
        return (
            <div ref="modal" className="modal fade">
                <div className="modal-dialog">
                    <div className="modal-content">
                        <div className="modal-header">
                            <button type="button"
                                className="close">
                                <span>&times;</span>
                            </button>
                            <h4 className="modal-title">Title</h4>
                        </div>
                        <div className="modal-body">
                            Modal Body
                        </div>
                        <div className="modal-footer">
                            <button type="button"
                                className="btn btn-success">
                                OK
                            </button>
                            <button type="button"
                                className="btn btn-danger">
                                Cancel
                            </button>
                        </div>
                    </div>
                </div>
            </div>
        );
    },
    show: function () {
        $(this.refs.modal.getDOMNode()).modal("show");
    },
    hide: function () {
        $(this.refs.modal.getDOMNode()).modal("hide");
    }
});

Usage

The modal component created above can be used by creating a file app.jsx with the following code:

var App = React.createClass({
    showModal: function() {
        this.refs.modal.show()
    },
    render: function() {
        <div>
            <button type="button" className="btn btn-primary" onClick={this.showModal}>Show Modal</button>
            <BootstrapModal ref="modal"/>
        </div>
    }
});

React.render(<App />, document.getElementsByTagName('body')[0]);

As you can see, we have created a simple button when clicked will show the modal.

Test Drive

Create a index.html with the following code:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Bootstrap Modal with ReactJS</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
    <script src="//code.jquery.com/jquery-1.11.2.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
    <script src="http://fb.me/react-0.12.2.min.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.2.js"></script>
</head>
<body>

    <script type="text/jsx" src="path/to/bootstrap-modal.jsx"></script>
    <script type="text/jsx" src="path/to/app.jsx"></script>
</body>
</html>

When you open the file in browser (preferably via a server) and click on the button, you must see a modal.

How Bootstrap grid works (continued)

How Bootstarp grid works (continued)

In the last article, we had a look at the container, rows, columns and nesting. Now we are going to cover offset, push and pull.

Offset

Usually the columns come one after the other, but what if we want to provide some extra space between or center a ten column grid. The first thing that comes to mind is to create an “empty” div with required witdh/columns. But this leads to unnecessary mark in our HTML. This where offsets come into picture. You can skip certain number of columns using col-*-offset-*. Offset works by setting margin-left property on the column.

bootstrap-columns

Normal Columns
offset

Offset Columns

Push and Pull

Push and pull are used for ordering the columns regardless of the markup. Let us assume that you have the following code.

<div class="row">
    <div class="col-md-9">.col-md-9</div>
    <div class="col-md-3">.col-md-3</div>
</div>

Normally, the bigger div will come first and the smaller one will come next, as shown below:

push-pull-1

Normal flow

Now, if we want to interchange the div(s) but without change the markup, we can use the col-*-push-* and col-*-pull-* classes. And we’ll have something as shown below:

push-pull-2

Push and pull in effect

As the name suggests, push – pushes the columns to right by setting margin-left property on the column and pull – pulls the columns to left by setting margin-right property on the column.

Wrap up

I hope this gives you a better understanding of the bootstrap grid and its inner mechanism

How Bootstrap grid works

How Bootstarp grid works

Twitter bootstrap is one of the most well-known frontend framework out there on the web. It is very easy to get started with and can greatly speed up one’s workflow. It’s a great tool to quickly create a mock-ups. Although many websites use bootstrap in production, I will not recommend using it directly in production for two reasons. First is semantics and the other is bloat. But that is a whole other topic for discussion.

For now let’s just focus on the topic we have on our hands right now. I’ve been perplexed at times by the grid system and how it works? There might be other people out there who face similar problems. So here I try to explain how it works.

The Grid

The grid consists of mainly three components, namely: container, row and columns. Lets have a look at them individually.

Container

The container is the foundation of the grid. It serves 2 purposes:

  1. To provide width constraint on resonpsive widths
  2. To provide padding to the content (shown in blue), so that they do not stick to the edge of the browser.
bootstrap-container

There are two types of containers available in bootstrap:

  1. Fluid Container: As the name suggests, it always spans the entire width of the browser. It can used by using .container-fluid class on a element.
  2. Responsive Container: It provides a width constraint to content depending on the width of the browser. It can used by using .container class on a element.
breakpoint container width
<768px None (auto)
≥768px 750px
≥992px 970px
≥1200px 1170px

Please avoid wrapping a .container within another .container or a .container-fluid within another .container-fluid

 

Row

A row serves as a wrapper for columns. The columns must add upto 12 within a row. It also clears the float of the columns. A row has a negative margin of 15px on both sides (shown in green) which negates the 15px padding provided by the container. This is necessary for columns to work correctly as we’ll see later.

bootstrap-row

Do not use .row oustide .container or .container-fluid

 

Columns

A row must have columns that add up to 12. A column has a 15px padding (shown in pink), which touches the edge of the container (due to negative margin on row), thus behaves similar to a container. The padding also acts as a gutter (of 30px) between columns

bootstrap-columns

Do not use .col-* oustide .row

The 15px padding (shown in pink) of a column, doesn’t allow the content to touch the edge of the browser and also acts as separator between columns

bootstrap-columns-content

 

Extra small devices
Phones (< 768px)
Small devices
Tablets (≥ 768px)
Medium devices
Desktops (≥ 992px)
Large devices
Desktops (≥ 1200px)
Grid behavior Horizontal at all times Collapsed to start, horizontal above breakpoints
Container width None (auto) 750px 970px 1170px
Class prefix .col-xs- .col-sm- .col-md- .col-lg-

Detailed usage of columns can be found here

 

Nesting


After setting up container(blue), rows(outer green) and columns(outer pink), new grids can be created using rows(inner green) straight away (you don’t need containers) because of the fact that columns behave the same way as the containers, providing 15px of padding to rows, which in turn negate them via their negative 15px margins.

bootstrap-nesting

In next post, I’ll continue this discussion with offsets, push and pull.

Helical Dashboard Insight 1.0

Jaspersoft is world’s most commonly used Open Source BI software and boasts of more than 4 lakh community user. But many a times we come across situations when some kind of dynamic dashboard needs to be built, some custom input controls needs to be created, some java script or AJAX etc needs to be added, some real time charting needs to be done, or when we need to customize the dashboard with new logo or color or font or size etc. But the same is not possible using Jaspersoft out of the box components. Don’t you worry, keeping all these in mind, Helical has developed its own plugin working on top of Jaspersoft which removes all these limitations, allows the developers to develop dynamic dashboard which are highly developer friendly. Known as “Helical Dashboard Insight (HDI) 1.0”, the plugin allows you to create friendly, powerful and fully featured Dashboards on top of the Jaspersoft Business Intelligence server. Former Jaspersoft Dashboards had several drawbacks from a developer’s point of view.

“Helical Dashboard Insight (HDI)” emerged as a need for a framework that overcame all those difficulties. The final result is a powerful framework.

Heading Jaspersoft Helical Plugin
Dashboard Feature Availability Jaspersoft community version is not having dashboard features Using “Helical Dashboard Insight (HDI)”, even Jaspersoft community version can also have dashboard features.
Dashboard Feature Availability Jaspersoft Enterprise version is having dashboard feature but still dashboard designer is still having lot of limitations as discussed in details below. Using “Helical Dashboard Insight (HDI)” all the limitations can be removed. (point by point details listed below)
Adding new HTML There is no places in Jaspersoft where we can add our own HTML scripts. Thus we don’t have a lot of control on the dashboard and its difficult to control the UI of the same. Using the plugin, HTML code can be added. Hence the entire look and feel of the dashboard, layout changes can be made, color, font, size, images etc can be added/edited/changed at will. Hence the entire look and feel of the dashboard can be controlled using “Helical Dashboard Insight (HDI)”
Using Bootstrap Themes Not possible to use Bootstrap theme within community or enterprise edition of Jaspersoft. Bootstrap themes can be used to create dashboard and infoGraphics.
New Input Control Let’s say we want to create new input control into the dashboard like slider, multi-select dates, last 7/15/30 days selection, YTD etc Most of the commonly used input controls are already built into the “Helical Dashboard Insight (HDI)”. If the input control is not present then the same can be added very easily by merely adding into the html document.
Real Time Charting It’s not possible to develop real time report/dashboard with Jaspersoft. Maximum using setinterval predefined time can be set and at those times the chart will get updated. Thus not only this is inefficient and inflexible, but also at the setinterval database is being queries again and again, thus leading to lower performance Very easily possible using “Helical Dashboard Insight (HDI)”. The plugin takes care of the same using websockets. The chart updation will happen on realtime as soon as the same happens in the database. Also this will result in absolutely no load on the database.
Plugin Designing Plugin designing in most of the cases not possible in Jaspersoft. Most of the things are not developer friendly in this case. There are two kind of plugin designing we can do using our plugin. One is frontend plugin which can be done using HTML. The development of backend plugin can be done using Java Scripts. Hence a developer is having the flexibility to do almost anything he wants.
Adding new chart /visualization Adding a new chart or visualization which is not out of the box is very tedious job in Jaspersoft with an effort of multiple days involved. Adding a new chart is extremely easy with just adding of the code in one of the file.
Adding new AJAX AJAX is often used to update only certain section of a website which undergoes changes rather than entire page. Again adding of AJAX in Jaspersoft dashboard is not possible, hence anything like auto-refresh in case of data change is not possible. Usage of AJAX is very much possible in our case. Thus it’s possible to create dynamic self loading dashboards/charts in case of any changes. Also we can create chart which will fetch data and load on clicking of any other button without refreshing the page. Calling of multiple dashboards on any click event is a cake walk now.
Adding Java Script Javascript which is often used to add dynamicity like hover information, making a panel appear/disappear, rollover, crossover etc. Adding java scripts is not possible in Jaspersoft. Using our plugin, it’s very easy to add any new java scripts and thus we can make the dashboard extremely dynamic.
Adding new Javascripting Charts Jaspersoft does not support adding new javascript chart. Many of the leading market available charts like D3, Protovis, Raphael etc which are java charting libraries, it’s just not possible to use those charts inside Jaspersoft. This is also very much possible using our plugin. All we need to do is add the code inside one of the files and thus any new chart can be easily added.
Adding new resource Only those resources can be used which have been provided by Jaspersoft. There is no flexibility to add our own resources. Using java scripts, we can easily create and add our own new resources. Resources could be images, css, javascript, input control, external css, etc.
Managing and maintenance of internal resource It’s also possible in Jaspersoft to some extent but with some limitations and also there is hardly any flexibility in managing those resources. With the plugin, we can map directly input controls with various panels, can hide them, enable and disable, on click of submit button triggering/rendering of selected panels and not the entire dashboard is possible
Creation of dynamic dashboard In Jaspersoft, a dashboard can only contain a report or adhoc report or a custom URL. Nothing much can be done. With ability to add new charts, add java scripts, add HTML, add ajax, use bootstrap themes, design new plugins etc, extremely intuitive and dynamic dashboards can be created using “Helical Dashboard Insight 1.0”
Implementing Cascading parameters Cascading is possible in Jaspersoft, but there is no flexibility to selectively use them for selected panels. Implementation of cascading parameters within plugin is a cakewalk.
Creating a new button Not possible inside Jaspersoft Button creation is very easily possible, and further actions can be defined what should happen with button click.
Intra Dashboard Communication (IDC) This point means clicking on one panel, the drill down or the details of chart in another panel should change. The communication should happen between panels of dashboard, thus having more flexibility in designing dashboard and more optimal usage of screenspace of dashboard. This thing is not possible inside Jaspersoft. This function can be easily achieved using our plugin “Helical Dashboard Insights (HDI)”.

Please get in touch with us at nikhilesh@helicaltech.com to know about the features in detail, firstlook of the plugin, its integration with Jaspersoft, building dashboard in Jaspersoft community version, some of the feature rich dynamic dashboards demo etc.