Objectives
To allow online users to easily search and find asset vehicles on the Operational Fleet web page , the Department of Fire & Emergency Services (DFES) had to replace the old traditional static operational fleet web page (See diagram 1) with a more modern approach that will meet the following business requirements:

Diagram 1 – Old static web page

  • Allow internal DFES staff to easily upload and maintain 18 asset vehicle images, PDF files, and the metadata property fields associated with each PDF file in a SharePoint 2010 document library;
  • The PDF documents and the images of vehicle stored in an image and document library will be automatically populated and displayed onto the Operational Fleet web page in real time;
  • The Operational Fleet web page will need to be mobile responsive on all mobile devices and tablets; and
  • Online users can do filtering on the vehicle assets by its category, mobility, class, service and incident types and return the search results based on the selection search criteria.

 

Overview

The Operational Fleet Catalog project was a time and material effort that was estimated for total 125 hours of development work. To meet this deadline, a pool of expert resources were hired, consisting of PM and 2 Developers.  The requirements was developed with the following technology framework:

  • Download the JQuery Multiple Select Plugin for Bootstrap – Contains a sample JQuery, CSS and modern drop down multiple select control that was re-used as a framework for the UX web form
  • Created a SharePoint 2010 custom blank site template solution in Visual Studio 2013. The solution was packaged and deployed in a SharePoint 2010 Central Admin farm to target a specific web application URL that hosted the operational fleet site;
  • A custom content type was developed and activated at a site collection level. The custom content type would be used as a list template for the document library that stores the PDF files;
  • One custom web part was developed and activated at a site collection level;
  • This web part would contain the i)back-end code that will retrieve all the asset vehicles stored in a document library list containing during page load event. The data is written and stored in a JavaScript file uploaded to the Asset library;
  • ii) front-end UX form that uses JQuery plugin to render the multiple select drop down control. As well as JavaScript to retrieve the asset vehicle and renders the search result onto the operational fleet web page.

The final outcome was a successful deployment release of the Operational Fleet web page. See the website screenshot below

Operational Fleet Catalog Search web part

Down the user manual below.