Sidebar

A Bootstrap Love Affair, Part Three

Development Tools / Utilities
Typography
  • Smaller Small Medium Big Bigger
  • Default Helvetica Segoe Georgia Times

Jump on the Bootstrap Carousel.

 

During the last couple of months, I have taken you around a part of the Bootstrap universe and hopefully covered enough of the elements and methods to give you an idea of what you, together with jQuery, can accomplish with it. My Aim Is True!

 

In the previous article, I promised you that I would combine all of what we have seen so far and, on top of that, give you some information about my lifelong passion for Elvis Costello, so that’s what I will try to do. In this article of our Bootstrap series, I’ll look at the Bootstrap Carousel plugin, which is a component for cycling through elements, like a carousel or slideshow.

 

The Carousel plugin is a part of the Bootstrap package, so you don’t need to do anything special to make it work—again, some classes and some HTML code and you’re done.

 

For Carousel to function, an ID is required on the outermost container, which then defines the Carousel with the class of the same name. The Carousel is controlled via the use of data attributes. These attributes are added in various places in the HTML structure to make the Carousel function the way you want. The data attributes can also be set/changed using JavaScript (jQuery) so that, for example, you can pause and start the Carousel programmatically.

 

The Carousel plugin has two events available: slide.bs.carousel and slid.bs.carousel. They’re fired like this:

 

  • slide.bs.carousel fires immediately when the slide instance method is invoked.
  • slid.bs.carousel is fired when the Carousel has completed its slide transition.

 

So with this knowledge inside our head, let’s take the Carousel for a spin and look at a real-time example. (Note: All the code shown here can be downloaded at the end of the article.)

 

Before I list a lot of code and start explaining, try having a look at the result first, because I think that will make it a little easier to comprehend. The example link below shows the first three Elvis Costello albums released. The cover will be shown, and the name of the album will be shown as caption text. You can navigate in the Carousel by clicking the arrows on the left orright or by using the control indicators to show a specific item.

 

http://agnethe.dk/mcpressonline/bootstrap-part-3/index_ex1.htm

 

Below is the code needed to create a simple bootstrap Carousel. I’ll explain it step by step, trying to point out what’s happening.

 

<!DOCTYPE html>

<html lang="en">

<head>

<title>MCpressonline.com -> Bootstrap part 3 - The Costello Tour</title>

 

1.0

      <meta charset="utf-8">

      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">

 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/

      jquery.min.js"></script>

    <script src="/bootstrap/js/bootstrap.min.js"></script>

 

<style>

 

2.0

 

.carousel-inner > .item > img {

   margin: 0 auto;

}

 

</style>

 

</head>

 

<body>

 

<div class="container">

 

<h3>Bootstrap carousel example 1</h3>

 

3.0

 

<div id="mycarousel" class="carousel slide" data-ride="carousel" data-interval=3000

data-pause="hover" data-wrap="true">

 

4.0

 

<!-- Indicators -->

<ol class="carousel-indicators">

   <li data-target="#mycarousel" data-slide-to="0" class="active"></li>

   <li data-target="#mycarousel" data-slide-to="1"></li>

   <li data-target="#mycarousel" data-slide-to="2"></li>

</ol>

 

5.0

 

<!-- Wrapper for slides -->

<div class="carousel-inner" role="listbox">

   <div class="item active">

     <img src="/images/ex1/1.jpg" alt="1">

     <div class="carousel-caption">My Aim Is True</div>

   </div>

   <div class="item">

     <img src="/images/ex1/2.jpg" alt="2">

     <div class="carousel-caption">This Years Model</div>

   </div>

   <div class="item">

     <img src="/images/ex1/3.jpg" alt="3">

     <div class="carousel-caption">Armed Forces</div>

   </div>

</div>

 

 

6.0

 

<!-- Controls -->

<a class="left carousel-control" href="#mycarousel" role="button" data-slide="prev">

   <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>

   <span class="sr-only">Previous</span>

</a>

<a class="right carousel-control" href="#mycarousel" role="button" data-slide="next">

   <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>

   <span class="sr-only">Next</span>

</a>

</div>

 

</div>

 

</body>

</html>

 

 

 

1.0

Declare the bootstrap and jQuery needed to make it all happen.

 

2.0

A little custom CSS centers the images shown in the example.

 

3.0

Define the outermost div of the Carousel with some attributes and classes specified. The following are used:

 

  • id="mycarousel" is the ID of the Carousel.
  • class="carousel slide"Classes tell Bootstrap what we’re creating.
  • data-ride="carousel"This attribute is used to mark a Carousel as animating starting at page load. If it is not specified, the Carousel will not start automatically.
  • data-interval=3000This attribute defines how many milliseconds are between each slide when running. Default is 5000.
  • data-pause="hover"When the mouse cursor is “over” the Carousel, it will be paused, and when the mouse is removed, it will start again.
  • data-wrap="trueThis attribute will make the Carousel wrap and start over again when the last slide is reached.

 

4.0

Define the control indicators. This is a simple ordered list with the carousel-indicators class specified. The data-slide-to specifies which slide will be shown when an indicator is clicked. Note that the slide-to is zero-based, which is different from RPG, for example.

 

5.0

Here, we define the slider items and the caption text that will be shown when the Carousel is running. Each item is straight HTML tags with the class “item” specified, which will control the showing of the slides. The “active” class controls which item will be shown first. If you want to show slide three first, that’s where to put the “active” class. Remember to change the Carousel-indicators or, even better, use the “carousel(number)” method and change it programmatically.

 

6.0

The controls shown on the left and right of the Carousel will change an item when clicked. The glyphicons are optional but are added to draw attention to the direction of the slides when clicked.

 

And that’s pretty much how you set up a Bootstrap Carousel and make it work! Very easy. And best of all, it’s all included in the Bootstrap package.

 

This could have been the end. You now know how to create a Bootstrap Carousel. But I wouldn’t have kept my promise to tell you something about Elvis Costello and to create an example that combines various techniques that include Bootstrap and jQuery elements. So if you’re up for some more, read on and learn something about a collector who went over the top. And see some programming that might even be useful in your daily life.

 

My Aim Is True

Let’s start with the Costello trivia. In July 1977, Elvis Costello released his first album, called My Aim Is True, on the small London record label Stiff Records. The album was recorded at some late-night studio session in about 24 hours and at a cost of £2000.

 

Elvis Costello was backed by American country rock band Clover, which in the late 1970s was touring England as a supporting act for Thin Lizzy. This happened to be around the time when the album was to be recorded. Later, Clover split up and some of the members joined Huey Lewis and became The News, but that’s a totally different story.

 

In 1977, I was 13 years old, and as I lived in a small town, Elvis Costello was totally out of reach at the time. But in 1978 he released his second album, called This Year’s Model, and when I heard “Pump It Up,” ”Radio Radio,” and “Watching the Detectives,” I was lost and have been ever since.

 

Over the years, my Costello record collection grew and grew, and I found out that My Aim Is True was released in many variations with different colors, and they also varied from country to country. As a passionate record collector, I just had to own them all. After almost 40 years of collecting and spending quite a sum of money on eBay and at record fairs, I now think I have every one.

 

And how many is that? Well, I have 52 different copies on vinyl and also a huge number on CD and cassette tape, so in total I have 78 copies of this album, which of course makes people shake their heads and roll their eyes. But then I just top it by telling them that my whole Costello collection includes about 730 items. And that’s when their heads start spinning and they just run away from the madman.

 

So how can an MC Press Online article have anything to do with an old new-wave album released in 1977?

 

When I started to write this article, my first idea was to use pictures of various products and then add text to them, but then I thought, why not show (off) the various album covers so people can see what I’ve spent almost 40 years collecting? So, ladies and gentlemen, please allow me to present the Bootstrap Carousel containing about 50 My Aim Is True album covers.

 

"What’s in It for Me?" You Ask

Of course, you’ll see the fantastic covers, but that’s the smallest part of it.

 

Instead of typing all the information in one file, I have created JavaScript functions that will build the code based on some arrays containing all the cover names. This method can be used by presenting information stored somewhere on the IFS of your IBM i.

 

The data about each cover is stored in HTML files and displayed in the file, using AJAX to fetch it. This technique can be used to get information stored inside the IBM i database, and it doesn’t take much code to make this come true.

 

You can write the “ajax fetch” program in RPG or PHP or any language of your choice, and you can very easily combine various databases and platforms if your information is stored that way.

 

The program is about 370 lines long and involves 50 commented HTML files and about 90 image files. I know that sounds like a lot, but don’t worry; when you get the idea, you’ll see that things are pretty simple and easy to understand.

 

I have chosen to list all the code, and as with the first code example in this article, I have highlighted some of the points that I consider important to understand what’s happening.

 

I hope I’m not scaring you away! If you have questions or comments, please email me. I will do my utmost to clear up what might be unclear.

 

Let the Pictures Roll

When I have to create something new, I always think of how to solve the problem and then I combine my idea with the knowledge I might have about the solution I want to create. Then I ask Google, because there are people out there on the Internet who are much more clever than I am. They are also kind enough to share their work, so I can modify and benefit from their cleverness.

 

So after a little search, I found a good example that could get me started. You can see it here.

 

That was just what I needed, and after some hours of work, I ended up with the picture you see below.

 

 

081016JanFig1

Figure 1: The My Aim Is True Carousel is working!

 

To see the Carousel of My Aim Is True, click this link.

 

On the left, you see the cover. On the right, you see information about the cover shown. At the bottom is a list of thumbnails where you can navigate between the various elements. On the top are buttons you can use to control the slideshow.

 

I haven’t explained everything in this program because some of it is common Bootstrap/jQuery stuff and is likely something that you have seen before.

 

Well, that’s it. Let’s look at the code.

 

<!DOCTYPE html>

<html lang="en">

<head>

<title>MCpressonline.com -> Bootstrap part 3 - My Aim Is True</title>

 

1.0

      <meta charset="utf-8">

      <meta name="viewport" content="width=device-width, initial-scale=1">

      <link rel="stylesheet" href="/bootstrap/css/bootstrap.min.css">

 

      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

    <script src="/bootstrap/js/bootstrap.min.js"></script>

     

<style>

 

 

2.0

 

.hide-bullets

{

      list-style:none;

 

}

 

 

</style>

 

<script type='text/javascript'>

 

3.0

 

//======================================================================

// Build carousel

//======================================================================

function buildCarousel () {

 

3.1  

      // Get input

      var csvString = $('#csv-string-front').val();

     

      // Create array

      var frontImageAry = csvString.split('|');

     

      var i = 0;

 

      $('#carousel-div').html('');

     

3.2

      while (frontImageAry[i])

      {

 

            if ( i == 0 ) {

                  var activeClass = 'active';

            } else {

                  var activeClass = '';

            }

           

            // Split file because we want the name without extension

            var fileAry = frontImageAry[i].split('.');           

 

3.3

            // Create html line and append the data to the div

            var htmlLine = '<div id="' + fileAry[0] + '" class="' + activeClass + '

item" data-slide-number="' + i + '">'

                              + '<img class="img-responsive" src="/images\\front\\' +

frontImageAry[i] + '">'

                              + '</div>'

                              ;

                             

            $('#carousel-div').append( htmlLine );

 

            // Increase counter

            i++;

      }

 

 

}

 

4.0

 

//=====================================================================

// Build thumbnail grid

//=====================================================================

function buildThumbnails () {

     

      // Get input

      var csvString = $('#csv-string-front').val();

     

      // Create array

      var frontImageAry = csvString.split('|');

     

      var i = 0;

 

      $('#thumbnails-div').html('');

 

4.1

 

      while (frontImageAry[i])

      {

     

            // Split file because we want the name without extension

            var fileAry = frontImageAry[i].split('.');

 

            // Create html line and append the data to the div

            var htmlLine = '<li class="col-sm-2">'

                              + '<a class="thumbnail" id="' + i + '"

onclick="showThumbnail(this.id' + ',\'' + fileAry[0] + '\'' + ')"><img style="width:75px" src="/images/front/' + frontImageAry[i] + '"></a>'

                              + '</li>'

                              ;

            $('#thumbnails-div').append( htmlLine );

 

            // Increase counter

            i++;

      }

 

}

 

 

5.0 //========================================================

// Show thumbnail

//============================================================

function showThumbnail ( id ) {

 

      var id = parseInt(id);

      $('#myCarousel').carousel(id);

 

}

 

6.0

 

//============================================================

// Show image in modal

//============================================================

function showImage ( id ) {

     

      $('#show-picture').html('<img src="/images/back/' + id + '">');

     

      // Pause slide show

      $("#pause-button").click();

     

      $('#myModal').modal('show');

 

}

 

7.0

 

//============================================================

// Close modal

//============================================================

function closeModal() {

 

 

      // Pause slide show

      $("#cycle-button").click();

 

 

}

 

8.0

 

//============================================================

// Show big image in modal

//============================================================

function showImageAll ( id ) {

 

      $('#show-picture-all').html('<img class="img-responsive" src="/images/' + id + '">');

     

      $('#myModalAll').modal('show');

 

}  

 

 

9.0

 

//===========================================================

// Show comment

//===========================================================

function getPictureComment( picture_id ) {

 

9.1

 

            var commentPath = 'comments/' + picture_id + '.htm';

     

            $.ajax({

                  type: "GET",

                  url: commentPath,

                  dataType: "html",

                  cache: false,                

                  success: function( htmldata ) {

                       

9.2

 

                        $('#carousel-text').html( '<div class="label label-info">File: ' +

commentPath + '</div><p></p>' + htmldata );

                 

                  },

                  error:function (xhr, ajaxOptions, thrownError){      

                 

                        $('#carousel-text').html( 'Error retrieving data...' );

                 

                  }

                 

            });  

 

 

}

 

//================================================================

// Init it all

//================================================================

$(document).ready(function(){

 

10.0

 

      // Build data

      buildThumbnails();

      buildCarousel();

     

 

11.0

      //----------------------------------------------------------------------

      // Init slider

      //----------------------------------------------------------------------

      $('#myCarousel').carousel({

            interval: 5000

      });

     

      $("#carousel-status").html("<b>Running</b>");

     

     

      //----------------------------------------------------------------------

      // Pause slider

      //----------------------------------------------------------------------   

   $("#pause-button").click(function(){

       $("#myCarousel").carousel("pause");

            $("#carousel-status").html("<b>Paused</b>");

   });    

 

      //----------------------------------------------------------------------

      // Run slider

      //----------------------------------------------------------------------   

   $("#cycle-button").click(function(){

       $("#myCarousel").carousel("cycle");

            $("#carousel-status").html("<b>Running</b>");

   });    

     

 

12.0

 

      //----------------------------------------------------------------------

      // Get first comment

      //----------------------------------------------------------------------

      var picture_id = $('.item.active').attr('id');

      getPictureComment( picture_id );   

     

      //----------------------------------------------------------------------

      // When the carousel slides, auto update the text

      //----------------------------------------------------------------------

      $('#myCarousel').on('slide.bs.carousel', function (e) {

     

           

            $('#fire').text('slide');

     

 

      });

      //----------------------------------------------------------------------

     

13.0

 

      //----------------------------------------------------------------------

      // When the carousel slides, auto update the text

      //----------------------------------------------------------------------

      $('#myCarousel').on('slid.bs.carousel', function (e) {

           

            // Get slide number (not used but nice to know)

            var slide_id = $('.item.active').data('slide-number');

           

            // Get picture number

            var picture_id = $('.item.active').attr('id');

            getPictureComment( picture_id );

           

            $('#fire').text('slid');

 

      });

      //----------------------------------------------------------------------   

     

});

 

</script>

 

 

</head>

 

<body>

 

14.0

 

<input class="hidden" id="csv-string-front" size="1000" value="2122.jpg|2176.jpg|2192.jpg|2200.jpg|2304.jpg|2347.jpg|2608.jpg|261.jpg|

2664.jpg|2984.jpg|3001.jpg|3045.jpg|3087.jpg|3109.jpg|3212.jpg|3239.jpg|3399.jpg|

3400.jpg|3401.jpg|3402.jpg|3403.jpg|3404.jpg|3405.jpg|3406.jpg|3407.jpg|3408.jpg|

3409.jpg|3410.jpg|3411.jpg|3412.jpg|3413.jpg|3414.jpg|3415.jpg|3416.jpg|3417.jpg|

3418.jpg|3419.jpg|3420.jpg|3421.jpg|3422.jpg|3423.jpg|3424.jpg|3425.jpg|344.jpg|

3580.jpg|3581.jpg|3585.jpg|3610.jpg|3611.jpg|3652.jpg">

<input class="hidden" id="csv-string-back" size="1000" value="2608_2.jpg|3239_2.jpg|3399_2.jpg|3400_2.jpg|3401_2.jpg|3402_2.jpg|3403_2.jpg|

3404_2.jpg|3405_2.jpg|3406_2.jpg|3407_2.jpg|3408_2.jpg|3409_2.jpg|3410_2.jpg|

3411_2.jpg|3412_2.jpg|3413_2.jpg|3414_2.jpg|3415_2.jpg|3416_2.jpg|3417_2.jpg|

3418_2.jpg|3419_2.jpg|3420_2.jpg|3421_2.jpg|3422_2.jpg|3423_2.jpg|3424_2.jpg|

3425_2.jpg|3580_2.jpg|3581_2.jpg|3585_2.jpg|3610_2.jpg|3611_2.jpg|3652_2.jpg">

 

<div class="container">

 

      <hr>

 

      <div class="row">

            <div class="col-sm-7 col-xs-12">

                  <h3>Bootstrap part 3 - My Aim Is True</h3><span class="hidden" id="fire">

</span>

            </div>

           

 

15.0

            <div class="col-sm-2 hidden-xs">

                  <div onclick="showImageAll('all_front.jpg')" class="btn btn-primary">

All Front</div>

                  <div onclick="showImageAll('all_back.jpg')" class="btn btn-primary">

All Back</div>

            </div>                       

           

            <div class="col-sm-2 hidden-xs">

                  <div id="pause-button" class="btn btn-warning">Pause</div>

                  <div id="cycle-button" class="btn btn-success">Un-pause</div>

            </div>           

           

            <div class="col-sm-1 hidden-xs">

                  <div id="carousel-status"></div>

            </div>           

      </div>

 

      <hr>

 

   <!-- Slider -->

      <div class="row">

       <div class="col-sm-5 col-xs-10">

 

16.0

 

           <div class="carousel slide" id="myCarousel" style="width:65%">

                      

                                    <!-- Carousel items -->

16.1

 

                       <div class="carousel-inner" id="carousel-div"></div>

                                   

                                    <!-- Carousel nav -->

                       <a class="left carousel-control" href="#myCarousel"

role="button" data-slide="prev">

                          <span class="glyphicon glyphicon-chevron-left"></span>                                      

                       </a>

                       <a class="right carousel-control" href="#myCarousel"

role="button" data-slide="next">

                           <span class="glyphicon glyphicon-chevron-right"></span>                                      

                       </a>                              

                  </div>

       </div>

                       

            <div class="col-sm-7 col-xs-2" id="carousel-text">

            </div>

      </div>

      <!--/Slider-->

 

                        <hr>

                       

               <div class="row hidden-xs" id="slider-thumbs"

style="height:300px;overflow:scroll">

 

17.0

                       <!-- Bottom switcher of slider -->

                       <ul class="hide-bullets">

                                   

                                          <div id="thumbnails-div"></div>

                      

                                    </ul>                

                                   

               </div>

                       

 

18.0

                        <!-- Modal -->

                        <div id="myModal" class="modal fade" role="dialog"

data-keyboard="false" data-backdrop="static">

 

                        <div class="modal-dialog">

 

                              <!-- Modal content-->

                              <div class="modal-content">

                              <div class="modal-header">

                                    <button type="button" onclick="closeModal()"

class="close" data-dismiss="modal">&times;</button>

                                    <h4 class="modal-title">Show backside of cover</h4>

                              </div>

                              <div class="modal-body text-center">

                                          <div id="show-picture"></div>

                              </div>

                              <div class="modal-footer">

                                    <button type="button" onclick="closeModal()"

class="btn btn-primary" data-dismiss="modal">Close</button>

                              </div>

                              </div>

 

                        </div>

                        </div>                       

                       

                       

                        <!-- Modal -->

                        <div id="myModalAll" class="modal fade" role="dialog">

 

                        <div class="modal-dialog modal-lg">

                              <!-- Modal content-->

                              <div class="modal-content">

 

                              <div class="modal-body text-center">

                                          <div id="show-picture-all"></div>

                              </div>

 

                              </div>

 

                        </div>

                        </div>                                         

                                               

      

 

</div>

 

 

</body>

</html>

 

 

OK. Here’s what happens. I’ll try to make the explanations short and easy.

 

1.0

Define the viewport to be responsive on all devices. Import Bootstrap and jQuery.

 

2.0

Customize CSS to hide the list bullet in the thumbnail section.

 

3.0

This JavaScript function dynamically builds the Carousel code. The information is based on the input CSV data stored in input field “csv-string-front” (see 14.0). This data could be retrieved from the server (e.g., IBM i) and “imported” into the program using AJAX or an “include” if PHP. Input could be JSON or XML if needed.

 

3.1

As the data is saved in a CSV string with a pipe, or bar, (|) as delimiter, we can treat it as an array and split it using the JavaScript split function.

 

3.2

Loop trough the array using a while loop.

 

3.3

Build the HTML line to handle the slide items. Output the result at the “carousel-div” id-attribute.

 

4.0

This JavaScript function dynamically builds the Carousel thumbnail code. The information is based on the input CSV data stored in input field “csv-string-front” (see 14.0).

 

4.1

As the data is saved in a CSV string with a pipe/bar (|) as a delimiter, we can treat is as an array and split it using the JavaScript split function and then loop through the array using a while loop. Build the HTML line to handle the thumbnail items. Output the result at the “thumbnails-div” id-attribute.

 

5.0

Use this function to show the thumbnail in the Carousel. The “.carousel(number)” method is used.

 

6.0

Show an image in a modal popup, and while showing it, pause the Carousel programmatically by “clicking” the pause button. The modal is another useful Bootstrap plugin included in the Bootstrap package. This modal can be closed only by clicking the Close button.

 

7.0

Close the modal, and start the Carousel again.

 

8.0

Display the big pictures showing all the albums at once. This modal can be closed by clicking outside the modal and does not have any header.

 

9.0

Use AJAX to load the comment for the album cover. The comment is stored in a simple HTML file and looks like this:

 

<table class="table table-bordered">

<tr>

      <th>Country</th>

      <th>Release year</th>

      <th>Label</th>

      <th>Label no</th>

      <th>Comment</th>

</tr>

<tr>

      <td valign="top">UK</td>

            <td valign="top">1986</td>

      <td valign="top">Demon</td>

      <td valign="top">FIEND 13</td>

      <td valign="top">no LP0028 of 1500. Includes 12 Page booklet<br>

(HMV classis collection)</td>

</tr>

</table>

 

As you see, this is a simple HTML file with a Bootstrap table.

When you download all the examples, you will find a PHP program called crttextfiles.php in dir create_files. I used this automatic program to create all the files used by AJAX and then modified the files where needed (saved me many hours of work).

 

Note: This data can of course be created on the fly by calling a server program, and the IBM i database is where this information should reside.

 

9.1

Build the call to AJAX and fetch the comment file.

 

9.2

Show the information in the “carousel-text” ID attribute. Use the label class to show the name of the HTML file (I just added it here for the demo).

 

10.0

Init the program by building the Carousel and the thumbnails.

 

11.0

Set the slider interval to 5 seconds. Define the functions to pause and un-pause the Carousel and to control the status text of the Carousel.

 

12.0

Get the first comment for the picture, based on the active class.

 

13.0

Define the Carousel events. Note that the ID named “fire” is used to show when the event fires. The div is hidden just under the header, but remove the hidden class and see it change when the Carousel runs. In this example, only the slid.bs.carousel is used, and it will fetch the cover comment and display just after the slide is done.

 

14.0

Input the fields that hold the picture array for the front and the back of the cover. Because there’s not a back cover to every entry, the “crttextfiles.php” took this into account when it created the comment file and only built the link to the back cover if there was one. The result is that only some of the covers have the “Show back cover” button.

 

15.0

Create Bootstrap grids to show the various information in the Carousel solution. This ensures that it is responsive when viewing on various devices. Note the hidden-xs calls; these make the information attached to them disappear when viewed on a mobile device because there’s no place for it. You can test it by resizing the browser window.

 

16.0

Define the div tags for the Carousel.

 

17.0

Define the div tags for the Carousel thumbnails.

 

18.0

Define the modals used to show the images.

 

 

Well, that was a lot! I really hope I haven’t scared you away. Are you still with me?

 

This completes what I have to say this time, but I promise to be back with more Bootstrap goodies when Version 4 hits the street in a final release.

 

Till then, drop me a line if you have questions or comments. And remember that My Aim Is True.

 

To download all the code used in this article, click here.

 

 

Jan Jorgensen

Jan Jorgensen is one of the owners of www.reeft.dk, which specializes in mobile and i5 solutions. He works with RPG, HTML, JavaScript, Perl, and PHP. You can reach him at jj@reeft.dk

 

BLOG COMMENTS POWERED BY DISQUS

LATEST COMMENTS

RESOURCE CENTER

  • WHITE PAPERS

  • WEBCAST

  • TRIAL SOFTWARE

  • Mobile Computing and the IBM i

    SB ASNA PPL 5450Mobile computing is rapidly maturing into a solid platform for delivering enterprise applications. Many IBM i shops today are realizing that integrating their IBM i with mobile applications is the fast path to improved business workflows, better customer relations, and more responsive business reporting.

    This ASNA whitepaper takes a look at mobile computing for the IBM i. It discusses the different ways mobile applications may be used within the enterprise and how ASNA products solve the challenges mobile presents. It also presents the case that you already have the mobile programming team your projects need: that team is your existing RPG development team!

    Get your copy today!

  • Automate IBM i Operations using Wireless Devices

    DDL SystemsDownload the technical whitepaper on MANAGING YOUR IBM i WIRELESSLY and (optionally) register to download an absolutely FREE software trail. This whitepaper provides an in-depth review of the native IBM i technology and ACO MONITOR's advanced two-way messaging features to remotely manage your IBM i while in or away from the office. Notify on-duty personnel of system events and remotely respond to complex problems (via your Smartphone) before they become critical-24/7. Problem solved!

    Order your copy here.

  • DR Strategy Guide from Maxava: Brand New Edition - now fully updated to include Cloud!

    SB Maxava PPL 5476PRACTICAL TOOLS TO IMPLEMENT DISASTER RECOVERY IN YOUR IBM i ENVIRONMENT

    CLOUD VS. ON-PREMISE?
    - COMPREHENSIVE CHECKLISTS
    - RISK COST CALCULATIONS
    - BUSINESS CASE FRAMEWORK
    - DR SOLUTIONS OVERVIEW
    - RFP BUILDER
    Download your free copy of DR Strategy Guide for IBM i from Maxava today.

     

  • White Paper: Node.js for Enterprise IBM i Modernization

    SB Profound WP 5539

    If your business is thinking about modernizing your legacy IBM i (also known as AS/400 or iSeries) applications, you will want to read this white paper first!

    Download this paper and learn how Node.js can ensure that you:
    - Modernize on-time and budget - no more lengthy, costly, disruptive app rewrites!
    - Retain your IBM i systems of record
    - Find and hire new development talent
    - Integrate new Node.js applications with your existing RPG, Java, .Net, and PHP apps
    - Extend your IBM i capabilties to include Watson API, Cloud, and Internet of Things


    Read Node.js for Enterprise IBM i Modernization Now!

     

  • 2020 IBM i Marketplace Survey Results

    HelpSystems

    This year marks the sixth edition of the popular IBM i Marketplace Survey Results. Each year, HelpSystems sets out to gather data about how businesses use the IBM i platform and the IT initiatives it supports. Year over year, the survey has begun to reveal long-term trends that give insight into the future of this trusted technology.

    More than 500 IBM i users from around the globe participated in this year’s survey, and we’re so happy to share the results with you. We hope you’ll find the information interesting and useful as you evaluate your own IT projects.

  • AIX Security Basics eCourse

    Core Security

    With so many organizations depending on AIX day to day, ensuring proper security and configuration is critical to ensure the safety of your environment. Don’t let common threats put your critical AIX servers at risk. Avoid simple mistakes and start to build a long-term plan with this AIX Security eCourse. Enroll today to get easy to follow instructions on topics like:

    • Removing extraneous files
    • Patching systems efficiently
    • Setting and validating permissions
    • Managing service considerations
    • Getting overall visibility into your networks

     

  • Developer Kit: Making a Business Case for Modernization and Beyond

    Profound Logic Software, Inc.

    Having trouble getting management approval for modernization projects? The problem may be you're not speaking enough "business" to them.

    This Developer Kit provides you study-backed data and a ready-to-use business case template to help get your very next development project approved!

  • What to Do When Your AS/400 Talent Retires

    HelpSystemsIT managers hoping to find new IBM i talent are discovering that the pool of experienced RPG programmers and operators or administrators is small.

    This guide offers strategies and software suggestions to help you plan IT staffing and resources and smooth the transition after your AS/400 talent retires. Read on to learn:

    • Why IBM i skills depletion is a top concern
    • How leading organizations are coping
    • Where automation will make the biggest impact

     

  • IBM i Resources Retiring?

    SB HelpSystems WC GenericLet’s face it: IBM i experts and RPG programmers are retiring from the workforce. Are you prepared to handle their departure?
    Our panel of IBM i experts—Chuck Losinski, Robin Tatam, Richard Schoen, and Tom Huntington—will outline strategies that allow your company to cope with IBM i skills depletion by adopting these strategies that allow you to get the job done without deep expertise on the OS:
    - Automate IBM i processes
    - Use managed services to help fill the gaps
    - Secure the system against data loss and viruses
    The strategies you discover in this webinar will help you ensure that your system of record—your IBM i—continues to deliver a powerful business advantage, even as staff retires.

     

  • Backup and Recovery Considerations for Security Data and Encrypted Backups

    SB PowerTech WC GenericSecurity expert Carol Woodbury is joined by Debbie Saugen. Debbie is an expert on IBM i backup and recovery, disaster recovery, and high availability, helping IBM i shops build and implement effective business continuity plans.
    In today’s business climate, business continuity is more important than ever. But 83 percent of organizations are not totally confident in their backup strategy.
    During this webinar, Carol and Debbie discuss the importance of a good backup plan, how to ensure you’re backing up your security information, and your options for encrypted back-ups.

  • Profound.js: The Agile Approach to Legacy Modernization

    SB Profound WC GenericIn this presentation, Alex Roytman and Liam Allan will unveil a completely new and unique way to modernize your legacy applications. Learn how Agile Modernization:
    - Uses the power of Node.js in place of costly system re-writes and migrations
    - Enables you to modernize legacy systems in an iterative, low-risk manner
    - Makes it easier to hire developers for your modernization efforts
    - Integrates with Profound UI (GUI modernization) for a seamless, end-to-end legacy modernization solution

     

  • Data Breaches: Is IBM i Really at Risk?

    SB PowerTech WC GenericIBM i is known for its security, but this OS could be more vulnerable than you think.
    Although Power Servers often live inside the safety of the perimeter firewall, the risk of suffering a data leak or data corruption remains high.
    Watch noted IBM i security expert Robin Tatam as he discusses common ways that this supposedly “secure” operating system may actually be vulnerable and who the culprits might be.

    Watch the webinar today!

     

  • Easy Mobile Development

    SB Profound WC GenericWatch this on-demand webinar and learn how to rapidly and easily deploy mobile apps to your organization – even when working with legacy RPG code! IBM Champion Scott Klement will demonstrate how to:
    - Develop RPG applications without mobile development experience
    - Deploy secure applications for any mobile device
    - Build one application for all platforms, including Apple and Android
    - Extend the life and reach of your IBM i (aka iSeries, AS400) platform
    You’ll see examples from customers who have used our products and services to deliver the mobile applications of their dreams, faster and easier than they ever thought possible!

     

  • Profound UI: Unlock True Modernization from your IBM i Enterprise

    SB Profound PPL 5491Modern, web-based applications can make your Enterprise more efficient, connected and engaged. This session will demonstrate how the Profound UI framework is the best and most native way to convert your existing RPG applications and develop new modern applications for your business. Additionally, you will learn how you can address modernization across your Enterprise, including databases and legacy source code, with Profound Logic.

  • Node Webinar Series Pt. 1: The World of Node.js on IBM i

    Profound Logic Software, Inc.Have you been wondering about Node.js? Our free Node.js Webinar Series takes you from total beginner to creating a fully-functional IBM i Node.js business application.

    Part 1 will teach you what Node.js is, why it's a great option for IBM i shops, and how to take advantage of the ecosystem surrounding Node.

    In addition to background information, our Director of Product Development Scott Klement will demonstrate applications that take advantage of the Node Package Manager (npm).

  • 5 New and Unique Ways to Use the IBM i Audit Journal

    SB HelpSystems ROBOT GenericYou must be asking yourself: am I doing everything I can to protect my organization’s data? Tune in as our panel of IBM i high availability experts discuss:


    - Why companies don’t test role swaps when they know they should
    - Whether high availability in the cloud makes sense for IBM i users
    - Why some organizations don’t have high availability yet
    - How to get high availability up and running at your organization
    - High availability considerations for today’s security concerns

  • Profound.js 2.0: Extend the Power of Node to your IBM i Applications

    SB Profound WC 5541In this Webinar, we'll demonstrate how Profound.js 2.0 enables you to easily adopt Node.js in your business, and to take advantage of the many benefits of Node, including access to a much larger pool of developers for IBM i and access to countless reusable open source code packages on npm (Node Package Manager).
    You will see how Profound.js 2.0 allows you to:

    • Provide RPG-like capabilities for server-side JavaScript.
    • Easily create web and mobile application interfaces for Node on IBM i.
    • Let existing RPG programs call Node.js modules directly, and vice versa.
    • Automatically generate code for Node.js.
    • Automatically converts existing RPGLE code into clean, simplified Node.js code.

    Download and watch today!

     

  • Make Modern Apps You'll Love with Profound UI & Profound.js

    SB Profound WC 5541Whether you have green screens or a drab GUI, your outdated apps can benefit from modern source code, modern GUIs, and modern tools.
    Profound Logic's Alex Roytman and Liam Allan are here to show you how Free-format RPG and Node.js make it possible to deliver applications your whole business will love:

    • Transform legacy RPG code to modern free-format RPG and Node.js
    • Deliver truly modern application interfaces with Profound UI
    • Extend your RPG applications to include Web Services and NPM packages with Node.js

     

  • Accelerating Programmer Productivity with Sequel

    SB_HelpSystems_WC_Generic

    Most business intelligence tools are just that: tools, a means to an end but not an accelerator. Yours could even be slowing you down. But what if your BI tool didn't just give you a platform for query-writing but also improved programmer productivity?
    Watch the recorded webinar to see how Sequel:

    • Makes creating complex results simple
    • Eliminates barriers to data sources
    • Increases flexibility with data usage and distribution

    Accelerated productivity makes everyone happy, from programmer to business user.

  • Business Intelligence is Changing: Make Your Game Plan

    SB_HelpSystems_WC_GenericIt’s time to develop a strategy that will help you meet your informational challenges head-on. Watch the webinar to learn how to set your IT department up for business intelligence success. You’ll learn how the right data access tool will help you:

    • Access IBM i data faster
    • Deliver useful information to executives and business users
    • Empower users with secure data access

    Ready to make your game plan and finally keep up with your data access requests?

     

  • Controlling Insider Threats on IBM i

    SB_HelpSystems_WC_GenericLet’s face facts: servers don’t hack other servers. Despite the avalanche of regulations, news headlines remain chock full of stories about data breaches, all initiated by insiders or intruders masquerading as insiders.
    User profiles are often duplicated or restored and are rarely reviewed for the appropriateness of their current configuration. This increases the risk of the profile being able to access data without the intended authority or having privileges that should be reserved for administrators.
    Watch security expert Robin Tatam as he discusses a new approach for onboarding new users on IBM i and best-practices techniques for managing and monitoring activities after they sign on.

  • Don't Just Settle for Query/400...

    SB_HelpSystems_WC_GenericWhile introducing Sequel Data Access, we’ll address common frustrations with Query/400, discuss major data access, distribution trends, and more advanced query tools. Plus, you’ll learn how a tool like Sequel lightens IT’s load by:

    - Accessing real-time data, so you can make real-time decisions
    - Providing run-time prompts, so users can help themselves
    - Delivering instant results in Microsoft Excel and PDF, without the wait
    - Automating the query process with on-demand data, dashboards, and scheduled jobs

  • How to Manage Documents the Easy Way

    SB_HelpSystems_WC_GenericWhat happens when your company depends on an outdated document management strategy?
    Everything is harder.
    You don’t need to stick with status quo anymore.
    Watch the webinar to learn how to put effective document management into practice and:

    • Capture documents faster, instead of wasting everyone’s time
    • Manage documents easily, so you can always find them
    • Distribute documents automatically, and move on to the next task

     

  • Lessons Learned from the AS/400 Breach

    SB_PowerTech_WC_GenericGet actionable info to avoid becoming the next cyberattack victim.
    In “Data breach digest—Scenarios from the field,” Verizon documented an AS/400 security breach. Whether you call it AS/400, iSeries, or IBM i, you now have proof that the system has been breached.
    Watch IBM i security expert Robin Tatam give an insightful discussion of the issues surrounding this specific scenario.
    Robin will also draw on his extensive cybersecurity experience to discuss policies, processes, and configuration details that you can implement to help reduce the risk of your system being the next victim of an attack.

  • Overwhelmed by Operating Systems?

    SB_HelpSystems_WC_GenericIn this 30-minute recorded webinar, our experts demonstrate how you can:

    • Manage multiple platforms from a central location
    • View monitoring results in a single pane of glass on your desktop or mobile device
    • Take advantage of best practice, plug-and-play monitoring templates
    • Create rules to automate daily checks across your entire infrastructure
    • Receive notification if something is wrong or about to go wrong

    This presentation includes a live demo of Network Server Suite.

     

  • Real-Time Disk Monitoring with Robot Monitor

    SB_HelpSystems_WC_GenericYou need to know when IBM i disk space starts to disappear and where it has gone before system performance and productivity start to suffer. Our experts will show you how Robot Monitor can help you pinpoint exactly when your auxiliary storage starts to disappear and why, so you can start taking a proactive approach to disk monitoring and analysis. You’ll also get insight into:

    • The main sources of disk consumption
    • How to monitor temporary storage and QTEMP objects in real time
    • How to monitor objects and libraries in real time and near-real time
    • How to track long-term disk trends

     

     

  • Stop Re-keying Data Between IBM I and Other Applications

    SB_HelpSystems_WC_GenericMany business still depend on RPG for their daily business processes and report generation.Wouldn’t it be nice if you could stop re-keying data between IBM i and other applications? Or if you could stop replicating data and start processing orders faster? Or what if you could automatically extract data from existing reports instead of re-keying? It’s all possible. Watch this webinar to learn about:

    • The data dilemma
    • 3 ways to stop re-keying data
    • Data automation in practice

    Plus, see how HelpSystems data automation software will help you stop re-keying data.

     

  • The Top Five RPG Open Access Myths....BUSTED!

    SB_Profound_WC_GenericWhen it comes to IBM Rational Open Access: RPG Edition, there are still many misconceptions - especially where application modernization is concerned!

    In this Webinar, we'll address some of the biggest myths about RPG Open Access, including:

    • Modernizing with RPG OA requires significant changes to the source code
    • The RPG language is outdated and impractical for modernizing applications
    • Modernizing with RPG OA is the equivalent to "screen scraping"

     

  • Time to Remove the Paper from Your Desk and Become More Efficient

    SB_HelpSystems_WC_GenericToo much paper is wasted. Attempts to locate documents in endless filing cabinets.And distributing documents is expensive and takes up far too much time.
    These are just three common reasons why it might be time for your company to implement a paperless document management system.
    Watch the webinar to learn more and discover how easy it can be to:

    • Capture
    • Manage
    • And distribute documents digitally

     

  • IBM i: It’s Not Just AS/400

    SB_HelpSystems_WC_Generic

    IBM’s Steve Will talks AS/400, POWER9, cognitive systems, and everything in between

    Are there still companies that use AS400? Of course!

    IBM i was built on the same foundation.
    Watch this recorded webinar with IBM i Chief Architect Steve Will and IBM Power Champion Tom Huntington to gain a unique perspective on the direction of this platform, including:

    • IBM i development strategies in progress at IBM
    • Ways that Watson will shake hands with IBM i
    • Key takeaways from the AS/400 days

     

  • Ask the RDi Experts

    SB_HelpSystems_WC_GenericWatch this recording where Jim Buck, Susan Gantner, and Charlie Guarino answered your questions, including:

    • What are the “hidden gems” in RDi that can make me more productive?
    • What makes RDi Debug better than the STRDBG green screen debugger?
    • How can RDi help me find out if I’ve tested all lines of a program?
    • What’s the best way to transition from PDM to RDi?
    • How do I convince my long-term developers to use RDi?

    This is a unique, online opportunity to hear how you can get more out of RDi.

     

  • Node.js on IBM i Webinar Series Pt. 2: Setting Up Your Development Tools

    Profound Logic Software, Inc.Have you been wondering about Node.js? Our free Node.js Webinar Series takes you from total beginner to creating a fully-functional IBM i Node.js business application. In Part 2, Brian May teaches you the different tooling options available for writing code, debugging, and using Git for version control. Attend this webinar to learn:

    • Different tools to develop Node.js applications on IBM i
    • Debugging Node.js
    • The basics of Git and tools to help those new to it
    • Using NodeRun.com as a pre-built development environment

     

     

  • Inside the Integrated File System (IFS)

    SB_HelpSystems_WC_GenericDuring this webinar, you’ll learn basic tips, helpful tools, and integrated file system commands—including WRKLNK—for managing your IFS directories and Access Client Solutions (ACS). We’ll answer your most pressing IFS questions, including:

    • What is stored inside my IFS directories?
    • How do I monitor the IFS?
    • How do I replicate the IFS or back it up?
    • How do I secure the IFS?

    Understanding what the integrated file system is and how to work with it must be a critical part of your systems management plans for IBM i.

     

  • Expert Tips for IBM i Security: Beyond the Basics

    SB PowerTech WC GenericIn this session, IBM i security expert Robin Tatam provides a quick recap of IBM i security basics and guides you through some advanced cybersecurity techniques that can help you take data protection to the next level. Robin will cover:

    • Reducing the risk posed by special authorities
    • Establishing object-level security
    • Overseeing user actions and data access

    Don't miss this chance to take your knowledge of IBM i security beyond the basics.

     

     

  • 5 IBM i Security Quick Wins

    SB PowerTech WC GenericIn today’s threat landscape, upper management is laser-focused on cybersecurity. You need to make progress in securing your systems—and make it fast.
    There’s no shortage of actions you could take, but what tactics will actually deliver the results you need? And how can you find a security strategy that fits your budget and time constraints?
    Join top IBM i security expert Robin Tatam as he outlines the five fastest and most impactful changes you can make to strengthen IBM i security this year.
    Your system didn’t become unsecure overnight and you won’t be able to turn it around overnight either. But quick wins are possible with IBM i security, and Robin Tatam will show you how to achieve them.

  • How to Meet the Newest Encryption Requirements on IBM i

    SB PowerTech WC GenericA growing number of compliance mandates require sensitive data to be encrypted. But what kind of encryption solution will satisfy an auditor and how can you implement encryption on IBM i? Watch this on-demand webinar to find out how to meet today’s most common encryption requirements on IBM i. You’ll also learn:

    • Why disk encryption isn’t enough
    • What sets strong encryption apart from other solutions
    • Important considerations before implementing encryption

     

     

  • Security Bulletin: Malware Infection Discovered on IBM i Server!

    SB PowerTech WC GenericMalicious programs can bring entire businesses to their knees—and IBM i shops are not immune. It’s critical to grasp the true impact malware can have on IBM i and the network that connects to it. Attend this webinar to gain a thorough understanding of the relationships between:

    • Viruses, native objects, and the integrated file system (IFS)
    • Power Systems and Windows-based viruses and malware
    • PC-based anti-virus scanning versus native IBM i scanning

    There are a number of ways you can minimize your exposure to viruses. IBM i security expert Sandi Moore explains the facts, including how to ensure you're fully protected and compliant with regulations such as PCI.

     

     

  • Fight Cyber Threats with IBM i Encryption

    SB PowerTech WC GenericCyber attacks often target mission-critical servers, and those attack strategies are constantly changing. To stay on top of these threats, your cybersecurity strategies must evolve, too. In this session, IBM i security expert Robin Tatam provides a quick recap of IBM i security basics and guides you through some advanced cybersecurity techniques that can help you take data protection to the next level. Robin will cover:

    • Reducing the risk posed by special authorities
    • Establishing object-level security
    • Overseeing user actions and data access

     

     

     

  • 10 Practical IBM i Security Tips for Surviving Covid-19 and Working From Home

    SB PowerTech WC GenericNow that many organizations have moved to a work from home model, security concerns have risen.

    During this session Carol Woodbury will discuss the issues that the world is currently seeing such as increased malware attacks and then provide practical actions you can take to both monitor and protect your IBM i during this challenging time.

     

  • How to Transfer IBM i Data to Microsoft Excel

    SB_HelpSystems_WC_Generic3 easy ways to get IBM i data into Excel every time
    There’s an easy, more reliable way to import your IBM i data to Excel? It’s called Sequel. During this webinar, our data access experts demonstrate how you can simplify the process of getting data from multiple sources—including Db2 for i—into Excel. Watch to learn how to:

    • Download your IBM i data to Excel in a single step
    • Deliver data to business users in Excel via email or a scheduled job
    • Access IBM i data directly using the Excel add-in in Sequel

    Make 2020 the year you finally see your data clearly, quickly, and securely. Start by giving business users the ability to access crucial business data from IBM i the way they want it—in Microsoft Excel.

     

     

  • HA Alternatives: MIMIX Is Not Your Only Option on IBM i

    SB_HelpSystems_WC_GenericIn this recorded webinar, our experts introduce you to the new HA transition technology available with our Robot HA software. You’ll learn how to:

    • Transition your rules from MIMIX (if you’re happy with them)
    • Simplify your day-to-day activities around high availability
    • Gain back time in your work week
    • Make your CEO happy about reducing IT costs

    Don’t stick with a legacy high availability solution that makes you uncomfortable when transitioning to something better can be simple, safe, and cost-effective.

     

     

  • Comply in 5! Well, actually UNDER 5 minutes!!

    SB CYBRA PPL 5382

    TRY the one package that solves all your document design and printing challenges on all your platforms.

    Produce bar code labels, electronic forms, ad hoc reports, and RFID tags – without programming! MarkMagic is the only document design and print solution that combines report writing, WYSIWYG label and forms design, and conditional printing in one integrated product.

    Request your trial now!

  • Backup and Recovery on IBM i: Your Strategy for the Unexpected

    SB HelpSystems SC 5413Robot automates the routine tasks of iSeries backup and recovery, saving you time and money and making the process safer and more reliable. Automate your backups with the Robot Backup and Recovery Solution. Key features include:
    - Simplified backup procedures
    - Easy data encryption
    - Save media management
    - Guided restoration
    - Seamless product integration
    Make sure your data survives when catastrophe hits. Try the Robot Backup and Recovery Solution FREE for 30 days.

  • Manage IBM i Messages by Exception with Robot

    SB HelpSystems SC 5413Managing messages on your IBM i can be more than a full-time job if you have to do it manually. How can you be sure you won’t miss important system events?
    Automate your message center with the Robot Message Management Solution. Key features include:
    - Automated message management
    - Tailored notifications and automatic escalation
    - System-wide control of your IBM i partitions
    - Two-way system notifications from your mobile device
    - Seamless product integration
    Try the Robot Message Management Solution FREE for 30 days.

  • Easiest Way to Save Money? Stop Printing IBM i Reports

    SB HelpSystems SC 5413Robot automates report bursting, distribution, bundling, and archiving, and offers secure, selective online report viewing.
    Manage your reports with the Robot Report Management Solution. Key features include:

    - Automated report distribution
    - View online without delay
    - Browser interface to make notes
    - Custom retention capabilities
    - Seamless product integration
    Rerun another report? Never again. Try the Robot Report Management Solution FREE for 30 days.

  • Hassle-Free IBM i Operations around the Clock

    SB HelpSystems SC 5413For over 30 years, Robot has been a leader in systems management for IBM i.
    Manage your job schedule with the Robot Job Scheduling Solution. Key features include:
    - Automated batch, interactive, and cross-platform scheduling
    - Event-driven dependency processing
    - Centralized monitoring and reporting
    - Audit log and ready-to-use reports
    - Seamless product integration
    Scale your software, not your staff. Try the Robot Job Scheduling Solution FREE for 30 days.

  • ACO MONITOR Manages your IBM i 24/7 and Notifies You When Your IBM i Needs Assistance!

    SB DDL Systems 5429More than a paging system - ACO MONITOR is a complete systems management solution for your Power Systems running IBM i. ACO MONITOR manages your Power System 24/7, uses advanced technology (like two-way messaging) to notify on-duty support personnel, and responds to complex problems before they reach critical status.

    ACO MONITOR is proven technology and is capable of processing thousands of mission-critical events daily. The software is pre-configured, easy to install, scalable, and greatly improves data center efficiency.