Adding a header to the Bootstrap page, and a modal dialog box for product details.
In this tutorial series, we will explore another technology for Single Page Application (SPA) development - AngularJS (or just Angular). Angular is a popular web framework in North America, and is used by many companies for both internal and client-facing systems. These tutorials will parallel our SAPUI5 tutorials, building a visual interface using Angular, and connecting it to an OData back end service.
Step 6: Add additional screens to our Angular application. First, we will add a header to our list box, and second, we will add a Detail dialog box when the user clicks on a row.
The list on the screen is nice, but it would be better if it had a header describing the data below. We can add that header bar in Bootstrap. (Later, we will add to that header bar, and put in an automatic filter component.)
navbar. The navbar CSS tag puts a permanent “floating” header on the top of the page, which will not move when the page is scrolled.Add the following HTML to your index.html file, under the <body> tag:
<nav class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand">Product Overview</div>
</div>
</div>
</nav>
Don’t forget to save your file!
Now, if you run your application, you will find a navigation bar at the top. Unfortunately, it covers the first row of the list.
To fix this, we are going to add some CSS to move the body text.
Add this CSS to the top of the main.css file
body {
padding-top: 50px;
}
Run your application again. The header will now appear at the top, and will not cover anything
Next, let’s add some additional dynamic information to our header.
On the right side, we will add the length of the current list
Add the following HTML to your index.html file
<div class="nav navbar-nav navbar-right">
<p class="navbar-text">Items: {{productList.length}}</p>
</div>
The
lengthparameter is a part of JavaScript. All arrays have this property.
Run the application, and you will see the item count in the navigation bar.
When you click on a product, the application should respond with the details of that product. For our example, we will use a dialog box to show the details of the clicked item.
First, we need to add a Bootstrap Modal dialog box to our HTML page.
A modal dialog box looks complicated, but it’s not. It’s broken up in to three sections: the header, the body, and the footer. We will add the HTML for all three at the same time, and then modify it.
Start by adding this HTML to your index.html file, at the bottom after the last </div>, but before the closing </body> tag
<div class="modal fade" tabindex="-1" role="dialog" id="product-detail">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Title</h4>
</div>
<div class="modal-body">
<p>Modal body</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Next, we will add some JavaScript to our page to activate the modal, when a row is clicked.
Open your main.js file, and add the following JavaScript to the bottom of the helloController function:
$scope.selectedProduct = {};
$scope.selectProduct = function( product ) {
$scope.selectedProduct = product;
$('#product-detail').modal("show");
}
These lines do two things.
The first line sets up a scope variable called
selectedProduct. This gives us a place to store the product that was clicked, so the dialog box knows what to display.The second variable is a function. This will be called when a row is clicked.
Finally, we need to attach the Angular code to the HTML, when the user clicks on an object. To do this, we will use another built-in Angular function, called ng-click.
Modify the following attribute to your <button> element:
ng-click="selectProduct(product)"
Now run your application. When you click on a row, a dialog box will appear.
The ng-click attribute has sent the selected row to the function selectProduct() in our controller. Then we saved that passed variable in to our scope (as $scope.selectedProduct). Now we can use that variable to populate our modal dialog box.
Update the header of the dialog box. Replace the existing <h4> tag with the following HTML:
<h4 class="modal-title">Product Detail - {{selectedProduct.ProductName}}</h4>
You can run the project after each step, to see what changes in the dialog box..
Let’s add a close button to the top of the dialog box, too. Add the following line to the HTML above the new <h4> tag:
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
Now, let’s add the content to the body of the box. Add the following HTML to the box inside the <div class="modal-body"> tag:
<p>Product Name: {{selectedProduct.ProductName}}</p>
<p>Unit Price: {{selectedProduct.UnitPrice}}</p>
<p>Status: {{selectedProduct.Discontinued == true ? "Discontinued":"Available" }}</p>
<p>Category: {{selectedProduct.CategoryID}} </p>
Now run your application. When you click on a row, you will see this dialog appear:
Doesn’t look great, though. We will make it look better in the next tutorial, when we cover Bootstrap forms!
Updated 09/13/2017
Contributors Provide Feedback
15 Min.