From f51a3e2b128f0b96bc9ed67dfc3081f4b41d1303 Mon Sep 17 00:00:00 2001
From: "Kishore Reddy, Gujja (kg811t)" <kg811t@research.att.com>
Date: Fri, 8 Jun 2018 16:40:16 -0400
Subject: Junit Test Cases & Raptors

Issue-ID: PORTAL-273. PORTAL-301
Covered JUNITS for sdk modules and RAPTOR reports fixes

Change-Id: Ifaf3bf06f0ec123051a791cc8e7f10662f97a525
Signed-off-by: Kishore Reddy, Gujja (kg811t) <kg811t@research.att.com>
---
 ecomp-sdk/epsdk-app-overlay/pom.xml                |    2 +-
 .../ds2-reports/report-chart-controller.js         |   56 +-
 .../DS2-controllers/ds2-reports/report-router.js   |   80 +-
 .../ds2-reports/report-run-controller.js           |   99 +-
 .../ds2-reports/report-search-controller.js        |   70 +-
 .../ds2-reports/report-step-controller.js          | 1850 +++++++------------
 .../ds2-raptor-report/raptorReportFactory.js       |   79 +
 .../ds2-raptor-report/reportModalControllers.js    |  423 +++++
 .../DS2-view-models/ds2-reports/all-reports.html   |    9 +-
 .../ds2-reports/directive/dynamicform.js           |   39 +-
 .../ds2-reports/modal/report-del-confirm.html      |   38 +-
 .../modal/report-formfield-del-confirm.html        |   37 +-
 .../modal/report-security-role-del-confirm.html    |   39 +-
 .../modal/report-security-user-del-confirm.html    |   38 +-
 .../modal/report-user-role-confirm-toggle.html     |   41 +-
 .../ds2-reports/modal/report-wizard-col-edit.html  |  338 ++--
 .../modal/report-wizard-formfield-edit.html        |  253 +--
 .../modal/report-wizard-test-run-sql.html          |   89 +-
 .../ds2-reports/report-chart-wizard.html           | 1897 +++++++++++---------
 .../DS2-view-models/ds2-reports/report-run.html    |  156 +-
 .../DS2-view-models/ds2-reports/report-search.html |    7 +-
 .../DS2-view-models/ds2-reports/report-step.html   |   35 +
 .../DS2-view-models/ds2-reports/steps/step1.html   |  213 +++
 .../DS2-view-models/ds2-reports/steps/step2.html   |   26 +
 .../DS2-view-models/ds2-reports/steps/step3.html   |   34 +
 .../DS2-view-models/ds2-reports/steps/step4.html   |   47 +
 .../DS2-view-models/ds2-reports/steps/step5.html   |  172 ++
 .../DS2-view-models/ds2-reports/steps/step6.html   |   34 +
 .../DS2-view-models/ds2-reports/steps/step7.html   |   16 +
 .../ds2-reports/wz_steps/json/step1.json           |   22 +-
 30 files changed, 3640 insertions(+), 2599 deletions(-)
 create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-services/ds2-raptor-report/reportModalControllers.js
 create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/report-step.html
 create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step1.html
 create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step2.html
 create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step3.html
 create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step4.html
 create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step5.html
 create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step6.html
 create mode 100644 ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step7.html

(limited to 'ecomp-sdk/epsdk-app-overlay')

diff --git a/ecomp-sdk/epsdk-app-overlay/pom.xml b/ecomp-sdk/epsdk-app-overlay/pom.xml
index f0d15a73..98143b71 100644
--- a/ecomp-sdk/epsdk-app-overlay/pom.xml
+++ b/ecomp-sdk/epsdk-app-overlay/pom.xml
@@ -5,7 +5,7 @@
 	<parent>
 		<groupId>org.onap.portal.sdk</groupId>
 		<artifactId>epsdk-project</artifactId>
-		<version>2.4.0-SNAPSHOT</version>
+		<version>2.5.0-SNAPSHOT</version>
 	</parent>
 
 	<!-- GroupId is inherited from parent -->
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-chart-controller.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-chart-controller.js
index 8fa14643..b15205fc 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-chart-controller.js
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-chart-controller.js
@@ -1,4 +1,4 @@
-appDS2.controller('reportChartController', function ($scope, $rootScope, $timeout, $window, $http, $routeParams,modalService) {
+appDS2.controller('reportChartController', function ($scope, $rootScope, $timeout, $window, $modal, $http, $routeParams,modalService) {
 	$scope.showLoader = true;
     $scope.commonOptionOpen = false;
     $scope.additionalOptionOpen = false;
@@ -15,11 +15,16 @@ appDS2.controller('reportChartController', function ($scope, $rootScope, $timeou
         
 	$scope.populateChrtWzdFields = function() {
 		$scope.reportRunJson = {};
+		$scope.showLoader=true;
 		$http.get("raptor.htm?action=chart.json&c_master="+$routeParams.reportId).then(function (response) {
+			$scope.showLoader=false;
 			$scope.reportRunJson = response.data;
 			  //Set chart type
-			$scope.reportRunJson.commonChartOptions.animateAnimatedChart = $scope.reportRunJson.commonChartOptions.animateAnimatedChart+"";
-			$scope.reportRunJson.commonChartOptions.hideLegend = $scope.reportRunJson.commonChartOptions.hideLegend + "";
+			if($scope.reportRunJson.commonChartOptions!=null){
+				$scope.reportRunJson.commonChartOptions.animateAnimatedChart = $scope.reportRunJson.commonChartOptions.animateAnimatedChart+"";
+				$scope.reportRunJson.commonChartOptions.hideLegend = $scope.reportRunJson.commonChartOptions.hideLegend + "";
+			}
+			
 			$scope.reportRunJson.showTitle = $scope.reportRunJson.showTitle + "";
 			
 			// if barChartOptions is not null
@@ -126,9 +131,11 @@ appDS2.controller('reportChartController', function ($scope, $rootScope, $timeou
 	
 	$scope.saveChartData = function() {
 		$scope.showLoader = true;
-
-		$scope.reportRunJson.commonChartOptions.animateAnimatedChart = ($scope.reportRunJson.commonChartOptions.animateAnimatedChart=="true")
-		$scope.reportRunJson.commonChartOptions.hideLegend = ($scope.reportRunJson.commonChartOptions.hideLegend=="true");
+		if($scope.reportRunJson.commonChartOptions){
+			$scope.reportRunJson.commonChartOptions.animateAnimatedChart = ($scope.reportRunJson.commonChartOptions.animateAnimatedChart=="true")
+			$scope.reportRunJson.commonChartOptions.hideLegend = ($scope.reportRunJson.commonChartOptions.hideLegend=="true");
+		}
+		
 		$scope.reportRunJson.showTitle = ($scope.reportRunJson.showTitle=="true");
 		
 		$scope.reportRunJson.chartTypeJSON = {
@@ -190,12 +197,12 @@ appDS2.controller('reportChartController', function ($scope, $rootScope, $timeou
 		//add the remove list to the json
 		$scope.reportRunJson.rangeAxisRemoveList= $scope.rangeAxisRemoveList;
 		$http.post("save_chart", JSON.stringify($scope.reportRunJson)).success(function(data, status) {
-			 $scope.successSubmit=true;  
+			$scope.successSubmit=true;  
 			$scope.showLoader = false;
 			$scope.reportRunJson.commonChartOptions.animateAnimatedChart = $scope.reportRunJson.commonChartOptions.animateAnimatedChart+"";
 			$scope.reportRunJson.commonChartOptions.hideLegend = $scope.reportRunJson.commonChartOptions.hideLegend + "";
 			$scope.reportRunJson.showTitle = $scope.reportRunJson.showTitle + "";			
-			if ($scope.reportRunJson.chartType == "BarChart3D") {
+			if ($scope.reportRunJson.chartType == "BarChart3D" && $scope.reportRunJson.barChartOptions) {
 				$scope.reportRunJson.barChartOptions.displayBarControls = $scope.reportRunJson.barChartOptions.displayBarControls+"";
 				$scope.reportRunJson.barChartOptions.minimizeXAxisTickers = $scope.reportRunJson.barChartOptions.minimizeXAxisTickers+"";
 				$scope.reportRunJson.barChartOptions.stackedChart = $scope.reportRunJson.barChartOptions.stackedChart+"";
@@ -203,6 +210,7 @@ appDS2.controller('reportChartController', function ($scope, $rootScope, $timeou
 				$scope.reportRunJson.barChartOptions.verticalOrientation = $scope.reportRunJson.barChartOptions.verticalOrientation +"";
 				$scope.reportRunJson.barChartOptions.xAxisDateType = $scope.reportRunJson.barChartOptions.xAxisDateType +"";
 			}	
+			$scope.successPopUp();
 			$scope.populateChrtWzdFields();
 		})
 	}
@@ -419,6 +427,38 @@ appDS2.controller('reportChartController', function ($scope, $rootScope, $timeou
 			$rootScope.isViewRendering = false;
 			});
 
+	 	$scope.successPopUp = function (msg) {
+	    	var modalInstance = $modal.open({
+				templateUrl: 'app/fusion/scripts/DS2-modal/success_modal.html',
+				controller: ModalInstanceCtrl,
+				sizeClass: 'modal-small',
+				resolve: {
+					msg: function () {
+						var message = {
+							title:    '',
+	                   		text:     msg
+		                };
+						return message;			        	
+	                }
+		        }
+			});
+	    };
+	    
+	    $scope.errorPopUp = function (msg) {
+	    	var modalInstance = $modal.open({
+				templateUrl: 'app/fusion/scripts/DS2-modal/error_modal.html',
+				controller: ModalInstanceCtrl,
+				sizeClass: 'modal-small',
+				resolve: {
+					msg: function () {
+						return msg;			        	
+	                }
+		        }
+			});
+	    };
+	    var ModalInstanceCtrl = function ($scope, $modalInstance, msg,$rootScope) {
+			$scope.msg=msg;
+		}
 
 });
 
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-router.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-router.js
index 1e22cca3..58913a40 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-router.js
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-router.js
@@ -1,41 +1,41 @@
 appDS2.config(['$routeProvider',
-                  function($routeProvider) {
-                    $routeProvider.
-                    when('/', {
-                    	templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/report-search.html',
-                    	controller: 'reportSearchController'
-                    		}).
-                    when('/report_search', {
-                    	templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/report-search.html',
-                    	controller: 'reportSearchController'
-                    		}).
-                    when('/report_run/:reportUrlParams*', {
-                      	templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/report-run.html',
-                      	controller: 'reportRunController'
-                      		}).
-                    when('/report_chart_wizard/:reportId', {
-                        templateUrl: 'static/fusion/raptor/ebz/report_chart_wizard.html',
-                        controller: 'ChartController'
-                      		}).
-                    when('/report_chart/:reportId', {
-                        templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/report-chart-wizard.html',
-                        controller: 'reportChartController'
-                      		}).                      		
-                    when("/report_wizard", {
-              	        templateUrl : "app/fusion/scripts/DS2-view-models/ds2-reports/wz_steps/report-step.html",
-              	        controller: "reportStepController"
-              	    		}).                      		                      		
-                    when("/report_wizard/:reportId", {
-              	        templateUrl : "app/fusion/scripts/DS2-view-models/ds2-reports/wz_steps/report-step.html",
-              	        controller: "reportStepController"
-              	    		}).
-      	    				when("/report_wizard/:reportMode/:reportId", {
-              	        templateUrl : "app/fusion/scripts/DS2-view-models/ds2-reports/wz_steps/report-step.html",
-              	        controller: "reportStepController"
-              	    		}).              	    		
-										when("/report_import", {
-              	        templateUrl : "app/fusion/scripts/DS2-view-models/ds2-reports/report-import.html",
-              	        controller: "reportImportController"
-              	    		})
-												;
-                }]);
\ No newline at end of file
+	function($routeProvider) {
+	$routeProvider.
+	when('/', {
+		templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/report-search.html',
+		controller: 'reportSearchController'
+	}).
+	when('/report_search', {
+		templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/report-search.html',
+		controller: 'reportSearchController'
+	}).
+	when('/report_run/:reportUrlParams*', {
+		templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/report-run.html',
+		controller: 'reportRunController'
+	}).
+	when('/report_chart_wizard/:reportId', {
+		templateUrl: 'static/fusion/raptor/ebz/report_chart_wizard.html',
+		controller: 'ChartController'
+	}).
+	when('/report_chart/:reportId', {
+		templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/report-chart-wizard.html',
+		controller: 'reportChartController'
+	}).                      		
+	when("/report_wizard", {
+		templateUrl : "app/fusion/scripts/DS2-view-models/ds2-reports/report-step.html",
+		controller: "reportStepController"
+	}).                      		                      		
+	when("/report_wizard/:reportId", {
+		templateUrl : "app/fusion/scripts/DS2-view-models/ds2-reports/report-step.html",
+		controller: "reportStepController"
+	}).
+	when("/report_wizard/:reportMode/:reportId", {
+		templateUrl : "app/fusion/scripts/DS2-view-models/ds2-reports/report-step.html",
+		controller: "reportStepController"
+	}).              	    		
+	when("/report_import", {
+		templateUrl : "app/fusion/scripts/DS2-view-models/ds2-reports/report-import.html",
+		controller: "reportImportController"
+	})
+	;
+}]);
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-run-controller.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-run-controller.js
index 6eb0afe6..daa47900 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-run-controller.js
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-run-controller.js
@@ -1,5 +1,5 @@
-appDS2.controller("reportRunController", ['$scope','$rootScope','$routeParams','$http','dateFilter', '$window', '$timeout', 'rowSorter',
-                                       function ($scope,$rootScope,$routeParams,$http,dateFilter,$window,$timeout,rowSorter) { 
+appDS2.controller("reportRunController", ['$scope','$rootScope','$routeParams','$http','dateFilter', '$window', '$timeout', 'rowSorter','$modal',
+                                       function ($scope,$rootScope,$routeParams,$http,dateFilter,$window,$timeout,rowSorter,$modal) { 
 	$scope.dateformat = "MM/dd/yyyy";
 	$scope.datetimeformat = "MM/dd/yyyy hh:mm a";
 	$scope.showFormFields =  false;
@@ -14,7 +14,7 @@ appDS2.controller("reportRunController", ['$scope','$rootScope','$routeParams','
             value: false
         };
 	$scope.isInProgress = true;
-	
+	$scope.showLoader=false;
 	if($routeParams.reportUrlParams.indexOf("parent___params===")>-1) {
 		$scope.showBackButton = true;
 		$scope.parentReportUrlParams = $routeParams.reportUrlParams.substring($routeParams.reportUrlParams.indexOf("parent___params===")+18);
@@ -67,36 +67,41 @@ appDS2.controller("reportRunController", ['$scope','$rootScope','$routeParams','
 		function(response){
 			// console.log(response);
 			$scope.isInProgress = false;
-			$scope.reportData = response.data;
-			// console.log('reportData report run container response',$scope.reportData);
-			if ($scope.reportData.reportTitle) {
-				$scope.reportData.reportHeading = $scope.reportData.reportTitle;
-				if ($scope.reportData.reportSubTitle) {
-					$scope.reportData.reportSubTitle = $scope.reportData.reportSubTitle;
+			if(response.data.errormessage!=null && response.data.errormessage!=''){
+				$scope.errorPopUp(response.data.errormessage);
+			}else{
+				$scope.reportData = response.data;
+				// console.log('reportData report run container response',$scope.reportData);
+				if ($scope.reportData.reportTitle) {
+					$scope.reportData.reportHeading = $scope.reportData.reportTitle;
+					if ($scope.reportData.reportSubTitle) {
+						$scope.reportData.reportSubTitle = $scope.reportData.reportSubTitle;
+					}
 				}
+				else
+					$scope.reportData.reportHeading = $scope.reportData.reportName;
+				if(!$scope.urlParams.hideChart && $scope.reportData.chartAvailable && $scope.reportData.totalRows>1){
+		      		// console.log('raptor.htm?action=chart.run&'+convertQueryString($scope.urlParams));
+			    	$http.get('raptor.htm?action=chart.run&'+convertQueryString($scope.urlParams)).then(
+			      		 	function(response){
+			      		 	  $scope.showChart =  true;
+			      			  document.getElementById('chartiframe').contentWindow.document.write(response.data);
+			      		 	  document.getElementById('chartiframe').contentWindow.document.close();
+			      			});
+		    	}
+		
+		        if($scope.reportData.displayForm && $scope.reportData.formFieldList && $scope.reportData.formFieldList.length>0 && !$scope.urlParams.hideFormFields){
+				  $scope.showFormFields = true;
+			    }
 			}
-			else
-				$scope.reportData.reportHeading = $scope.reportData.reportName;
-			if(!$scope.urlParams.hideChart && $scope.reportData.chartAvailable && $scope.reportData.totalRows>1){
-	      		// console.log('raptor.htm?action=chart.run&'+convertQueryString($scope.urlParams));
-		    	$http.get('raptor.htm?action=chart.run&'+convertQueryString($scope.urlParams)).then(
-		      		 	function(response){
-		      		 	  $scope.showChart =  true;
-		      			  document.getElementById('chartiframe').contentWindow.document.write(response.data);
-		      		 	  document.getElementById('chartiframe').contentWindow.document.close();
-		      			});
-	    	}
-	
-	        if($scope.reportData.displayForm && $scope.reportData.formFieldList && $scope.reportData.formFieldList.length>0 && !$scope.urlParams.hideFormFields){
-			  $scope.showFormFields = true;
-		    }
+			
 		});
     $scope.getFormFieldSelectedValuesAsURL = function(){
     	var formFieldsUrl = '';
     	$scope.reportData.formFieldList.forEach(function(formField) {
 	   		if(formField.fieldType==='LIST_BOX') {
-	   			if($scope.formFieldSelectedValues && $scope.formFieldSelectedValues[formField.fieldId] && $scope.formFieldSelectedValues[formField.fieldId].value != '') {
-	   				formFieldsUrl = formFieldsUrl+formField.fieldId+'='+$scope.formFieldSelectedValues[formField.fieldId].value+'&';
+	   			if($scope.formFieldSelectedValues && $scope.formFieldSelectedValues[formField.fieldId] ) {
+	   				formFieldsUrl = formFieldsUrl+formField.fieldId+'='+$scope.formFieldSelectedValues[formField.fieldId]+'&';
 	   			}
 	   		} else if(formField.fieldType==='LIST_MULTI_SELECT') {
 	   			if($scope.formFieldSelectedValues[formField.fieldId].length >0) {
@@ -114,11 +119,13 @@ appDS2.controller("reportRunController", ['$scope','$rootScope','$routeParams','
 	   			formFieldsUrl = formFieldsUrl+formField.fieldId+'='+$scope.formFieldSelectedValues[formField.fieldId]+'&';
 	   		}
     	});
+    	//formFieldsUrl = str.slice(0, -1); 
     	return formFieldsUrl;
 
     }
 
     $scope.runReport = function(pagination){
+    	$scope.showLoader=true;
     	var formFieldsUrl = $scope.getFormFieldSelectedValuesAsURL();
 		/*if ($scope.reportData.reportTitle)
 			$scope.reportData.reportHeading = $scope.reportData.reportTitle;
@@ -149,6 +156,7 @@ appDS2.controller("reportRunController", ['$scope','$rootScope','$routeParams','
     	// console.log('raptor.htm?action=report.run.container&c_master='+$scope.urlParams.c_master+'&'+formFieldsUrl+'refresh=Y&display_content=Y&r_page='+(paginationOptions.pageNumber-1));
     	  $http.get('raptor.htm?action=report.run.container&c_master='+$scope.urlParams.c_master+'&'+formFieldsUrl+'refresh=Y&display_content=Y&r_page='+(paginationOptions.pageNumber-1)).then(
     		function(response){
+    			$scope.showLoader=false;
 		    	$scope.reportData = response.data;
 		    	if ($scope.reportData.reportTitle) {
 					$scope.reportData.reportHeading = $scope.reportData.reportTitle;
@@ -207,6 +215,7 @@ appDS2.controller("reportRunController", ['$scope','$rootScope','$routeParams','
 				paginationTemplate: correctTotalPaginationTemplate,
 				columnDefs: [],
 				data: [],
+				enableSorting: true,
 			    enableGridMenu: true,
 			    enableSelectAll: true,
 				gridMenuCustomItems : [
@@ -218,10 +227,10 @@ appDS2.controller("reportRunController", ['$scope','$rootScope','$routeParams','
 						action : function($event) {
 							$window.open($scope.reportEditURL,'_self');
 							},	order : 211	},
-					{	title : 'Export All data as Excel 2007',
+					/*{	title : 'Export All data as Excel 2007',
 						action : function($event) {
 							$window.open('raptor.htm?c_master='+$scope.reportData.reportID+'&r_action=report.download.excel2007.session','_self');
-							},	order : 212	},
+							},	order : 212	},*/
 					{	title : 'Export All data as Excel',
 						action : function($event) {
 							$window.open('raptor.htm?c_master='+$scope.reportData.reportID+'&r_action=report.download.excel.session','_self');
@@ -323,9 +332,43 @@ appDS2.controller("reportRunController", ['$scope','$rootScope','$routeParams','
 	    	$http.get('raptor.htm?action=report.formfields.run.container&c_master='+$scope.reportData.reportID+'&'+formFieldsUrl).then(
 	      		 	function(response){
 	    		    	$scope.reportData = response.data;
+	    		    	if($scope.reportData.reportHeading==null || $scope.reportData.reportHeading=='')
+	    		    		$scope.reportData.reportHeading = ($scope.reportData.reportTitle=='')?$scope.reportData.reportName:$scope.reportData.reportTitle;
 	      			});
 		};
 		$timeout(function() {
 			$rootScope.isViewRendering = false;
 			});
+		$scope.successPopUp = function (msg) {
+	    	var modalInstance = $modal.open({
+				templateUrl: 'app/fusion/scripts/DS2-modal/success_modal.html',
+				controller: ModalInstanceCtrl,
+				sizeClass: 'modal-small',
+				resolve: {
+					msg: function () {
+						var message = {
+							title:    '',
+	                   		text:     msg
+		                };
+						return message;			        	
+	                }
+		        }
+			});
+	    };
+	    
+	    $scope.errorPopUp = function (msg) {
+	    	var modalInstance = $modal.open({
+				templateUrl: 'app/fusion/scripts/DS2-modal/error_modal.html',
+				controller: ModalInstanceCtrl,
+				sizeClass: 'modal-small',
+				resolve: {
+					msg: function () {
+						return msg;			        	
+	                }
+		        }
+			});
+	    };
+	    var ModalInstanceCtrl = function ($scope, $modalInstance, msg,$rootScope) {
+			$scope.msg=msg;
+		}
 }]);
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-search-controller.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-search-controller.js
index e1c5e1e8..36a541ed 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-search-controller.js
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-search-controller.js
@@ -2,13 +2,17 @@ appDS2.requires.push('ui.grid');
 appDS2.requires.push('ui.grid.pagination');
 appDS2.requires.push('ui.grid.resizeColumns');
 appDS2.controller("reportSearchController", ['$scope','$rootScope','$http','$timeout','uiGridConstants','$modal','$q','$log','raptorReportFactory',function ($scope,$rootScope,$http,$timeout,uiGridConstants,$modal,$q,$log,raptorReportFactory) { 
-	    
+	$scope.showLoader=false;
 	$scope.getSearchData = function(){
+		$scope.showLoader=true;
+
 		raptorReportFactory.getSearchData().then(function(data){
 			$scope.searchdData = data;
 		},function(error){
 			$log.error("raptorReportFactory: getSearchData failed.");
-		});
+		}).finally(function() {
+			$scope.showLoader=false;// Always execute this on both error and success
+		});;
 	}
 	
 	$scope.getSearchData();
@@ -21,12 +25,15 @@ appDS2.controller("reportSearchController", ['$scope','$rootScope','$http','$tim
 			if($scope.reportName && $scope.reportName!=''){
 				searchParams = searchParams+'&rep_name='+$scope.reportName+'&rep_name_options='+$scope.operatorRepName.index;
 			}
-			
+			$scope.showLoader=true;
 			var pageSearchParameter = ($scope.paginationOptions.pageNumber-1)+searchParams
 			raptorReportFactory.getSearchDataAtPage(pageSearchParameter).then(function(data){
 				$scope.searchdData = data
 			},function(error){
 				$log.error("raptorReportFactory: getSearchDataAtPage failed.");
+			}).finally(function() {
+				$scope.showLoader=false;// Always execute this on both error and success
+				
 			});
 	};
 
@@ -37,6 +44,57 @@ appDS2.controller("reportSearchController", ['$scope','$rootScope','$http','$tim
 		    sort: null
 	};
 	  
+	function convertValue(v){
+		return parseInt(v.displayValue);
+	}
+	
+	$scope.getSortingAlgorithm= function (columnName) {
+	    return function(a, b, rowA, rowB, direction) {
+	        console.log("sorting by column " + columnName,a,b);
+	        if(columnName=='rep_id'){
+	        if(a && b && a.displayValue && b.displayValue){
+	        if (convertValue(a) == convertValue(b)) return 0;
+	        if (convertValue(a) < convertValue(b)) return -1;
+	        if (convertValue(a) > convertValue(b)) return 1;
+	        }else{
+	        	return 0;
+	        }
+	       }else if(columnName=='rep_name'){
+	   	        if(a && b && a.displayValue && b.displayValue){
+	   	         if (a.displayValue == b.displayValue) return 0;
+	 	        if (a.displayValue < b.displayValue) return -1;
+	 	        if (a.displayValue > b.displayValue) return 1;
+	   	        }else{
+	   	        	return 0;
+	   	        }
+	   	   }else if(columnName=='descr'){
+	   	        if(a && b && a.displayValue && b.displayValue){
+	   	         if (a.displayValue == b.displayValue) return 0;
+	 	        if (a.displayValue < b.displayValue) return -1;
+	 	        if (a.displayValue > b.displayValue) return 1;
+	   	        }else{
+	   	        	return 0;
+	   	        }
+	   	   }else if(columnName=='owner'){
+	   	        if(a && b && a.displayValue && b.displayValue){
+		   	         if (a.displayValue == b.displayValue) return 0;
+		 	        if (a.displayValue < b.displayValue) return -1;
+		 	        if (a.displayValue > b.displayValue) return 1;
+		   	        }else{
+		   	        	return 0;
+		   	        }
+		   }else if(columnName=='create_date'){
+	   	        if(a && b && a.displayValue && b.displayValue){
+		   	         if (a.displayValue == b.displayValue) return 0;
+		 	        if (a.displayValue < b.displayValue) return -1;
+		 	        if (a.displayValue > b.displayValue) return 1;
+		   	        }else{
+		   	        	return 0;
+		   	        }
+		   }
+	      }
+	    };  
+	
 	var correctTotalPaginationTemplate = 
 		  //same as normal template, but fixed totals:  {{(((grid.options.paginationCurrentPage-1)*grid.options.paginationPageSize)+1)}}   {{(grid.options.paginationCurrentPage*grid.options.paginationPageSize>grid.options.totalItems?grid.options.totalItems:grid.options.paginationCurrentPage*grid.options.paginationPageSize)}}
 		  "<div role=\"contentinfo\" class=\"ui-grid-pager-panel\" ui-grid-pager ng-show=\"grid.options.enablePaginationControls\"><div role=\"navigation\" class=\"ui-grid-pager-container\"><div role=\"menubar\" class=\"ui-grid-pager-control\"><button type=\"button\" role=\"menuitem\" class=\"ui-grid-pager-first\" ui-grid-one-bind-title=\"aria.pageToFirst\" ui-grid-one-bind-aria-label=\"aria.pageToFirst\" ng-click=\"pageFirstPageClick()\" ng-disabled=\"cantPageBackward()\"><div class=\"first-triangle\"><div class=\"first-bar\"></div></div></button> <button type=\"button\" role=\"menuitem\" class=\"ui-grid-pager-previous\" ui-grid-one-bind-title=\"aria.pageBack\" ui-grid-one-bind-aria-label=\"aria.pageBack\" ng-click=\"pagePreviousPageClick()\" ng-disabled=\"cantPageBackward()\"><div class=\"first-triangle prev-triangle\"></div></button> <input type=\"number\" ui-grid-one-bind-title=\"aria.pageSelected\" ui-grid-one-bind-aria-label=\"aria.pageSelected\" class=\"ui-grid-pager-control-input\" ng-model=\"grid.options.paginationCurrentPage\" min=\"1\" max=\"{{ paginationApi.getTotalPages() }}\" required> <span class=\"ui-grid-pager-max-pages-number\" ng-show=\"paginationApi.getTotalPages() > 0\"><abbr ui-grid-one-bind-title=\"paginationOf\">/</abbr> {{ paginationApi.getTotalPages() }}</span> <button type=\"button\" role=\"menuitem\" class=\"ui-grid-pager-next\" ui-grid-one-bind-title=\"aria.pageForward\" ui-grid-one-bind-aria-label=\"aria.pageForward\" ng-click=\"pageNextPageClick()\" ng-disabled=\"cantPageForward()\"><div class=\"last-triangle next-triangle\"></div></button> <button type=\"button\" role=\"menuitem\" class=\"ui-grid-pager-last\" ui-grid-one-bind-title=\"aria.pageToLast\" ui-grid-one-bind-aria-label=\"aria.pageToLast\" ng-click=\"pageLastPageClick()\" ng-disabled=\"cantPageToLast()\"><div class=\"last-triangle\"><div class=\"last-bar\"></div></div></button></div><div class=\"ui-grid-pager-row-count-picker\" ng-if=\"grid.options.paginationPageSizes.length > 1\"><select ui-grid-one-bind-aria-labelledby-grid=\"'items-per-page-label'\" ng-model=\"grid.options.paginationPageSize\" ng-options=\"o as o for o in grid.options.paginationPageSizes\"></select><span ui-grid-one-bind-id-grid=\"'items-per-page-label'\" class=\"ui-grid-pager-row-count-label\">&nbsp;{{sizesLabel}}</span></div><span ng-if=\"grid.options.paginationPageSizes.length <= 1\" class=\"ui-grid-pager-row-count-label\">{{grid.options.paginationPageSize}}&nbsp;{{sizesLabel}}</span></div><div class=\"ui-grid-pager-count-container\"><div class=\"ui-grid-pager-count\"><span ng-show=\"grid.options.totalItems > 0\">{{(((grid.options.paginationCurrentPage-1)*grid.options.paginationPageSize)+1)}} <abbr ui-grid-one-bind-title=\"paginationThrough\">-</abbr> {{(grid.options.paginationCurrentPage*grid.options.paginationPageSize>grid.options.totalItems?grid.options.totalItems:grid.options.paginationCurrentPage*grid.options.paginationPageSize)}} {{paginationOf}} {{grid.options.totalItems}} {{totalItemsLabel}}</span></div></div></div>";
@@ -103,15 +161,15 @@ appDS2.controller("reportSearchController", ['$scope','$rootScope','$http','$tim
 			} else {
 					$scope.gridOptions.columnDefs.push({ displayName: entry.columnTitle, field: entry.columnId, 
 						enableSorting: true,
+						sortingAlgorithm: $scope.getSortingAlgorithm(entry.columnId),
 				        cellTemplate: '<div class="ui-grid-cell-contents"  style="text-align:{{COL_FIELD.alignment}};" title="TOOLTIP"> <div>{{COL_FIELD.displayValue}}</div> </div>'	
 				       });
 			}
 		});
-		
+		$scope.gridOptions.useExternalPagination=true;
 		$scope.gridOptions.paginationPageSizes= [$scope.searchdData.metaReport.pageSize];
-		$scope.gridOptions.paginationPageSize= $scope.searchdData.metaReport.pageSize;
+		$scope.gridOptions.paginationPageSize= 50;//$scope.searchdData.metaReport.pageSize;
 		$scope.gridOptions.totalItems = $scope.searchdData.metaReport.totalSize;
-		
 		$scope.gridOptions.data = [];
 		$scope.searchdData.rows[0].forEach(function(entry) {
 			var localData = {};
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-step-controller.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-step-controller.js
index 3196b336..43f877c3 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-step-controller.js
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-controllers/ds2-reports/report-step-controller.js
@@ -1,1263 +1,763 @@
 appDS2.controller('reportStepController', function($scope,$http,$location, $routeParams, $q, $modal,$log,$window, raptorReportFactory, stepFormFactory) {
+	/*****************Init values*********************/
+	$scope.reportIdURL = $routeParams.reportId;
+	$scope.isEdit = ($scope.reportIdURL==null||$scope.reportIdURL=='')?false:true;
+	$scope.isDefReady = $scope.isEdit;
+	$scope.activeTabsId = 'definition';
+	$scope.pageMsg =''
+	$scope.stepNum = 0;
+	$scope.stepTabs=[
+		 {
+             title: 'Definition',
+             id: 'definition',
+             uniqueId: 'uniqueStep1',
+             tabPanelId: 'definitionTab',
+             disabled: false
+             
+         }, {
+             title: 'SQL',
+             id: 'sql',
+             uniqueId: 'uniqueStep2',
+             tabPanelId: 'sqlTab',
+             disabled: (!$scope.isDefReady)
+         }, {
+             title: 'Columns',
+             id: 'columns',
+             uniqueId: 'uniqueTab3x',
+             tabPanelId: 'columnsTab',
+             disabled: (!$scope.isDefReady)
+         }, {
+             title: 'Form Fields',
+             id: 'formFields',
+             uniqueId: 'uniqueTab4x',
+             tabPanelId: 'formFieldsTab',
+             disabled: (!$scope.isDefReady)
+         }, {
+             title: 'Security',
+             id: 'security',
+             uniqueId: 'uniqueTab5x',
+             tabPanelId: 'securityTab',
+             disabled: (!$scope.isDefReady)
+         }, {
+             title: 'Log',
+             id: 'log',
+             uniqueId: 'uniqueTab6x',
+             tabPanelId: 'logTab',
+             disabled: (!$scope.isDefReady)
+         }, {
+             title: 'Run',
+             id: 'run',
+             uniqueId: 'uniqueTab7x',
+             tabPanelId: 'runTab',
+             disabled: (!$scope.isDefReady)
+         }
+         
+	];
+	$scope.$watch('activeTabsId', function (newVal, oldVal) {
+		if(newVal !== oldVal) {
+			$scope.init();
+		}
+	});	 
 
-	$scope.showLoader = true;
-	// tabs for report wizard steps:
-	$scope.activeTabsId = 'Definition';
-	$scope.addReportUserId = {'id':''};
-	$scope.addReportRoleId = {'id':''};
-	// For all the dropdown box, please declare the active selection variable in the following manner:
-	// $scope.selectedOpt = {}; 
-	// $scope.selectedOpt.value = "";
+	$scope.renderStep = function(stepNum){
+    	var containerElement = angular.element(document.getElementById("stepView"));
+        containerElement.empty();
+        $scope.stepNum = stepNum;
+        var jsonSrcName = getJsonSrcName(stepNum);
+        stepFormFactory.renderForm(jsonSrcName, containerElement, $scope);
+    }
+	 $scope.next = function(){
+	   	$scope.stepNum = $scope.stepNum +1;
+    	$scope.activeTabsId = $scope.stepTabs[$scope.stepNum].id;
+    };   
+	    
+	    
+    $scope.previous = function(){
+		$scope.stepNum = $scope.stepNum -1;
+    	$scope.activeTabsId = $scope.stepTabs[$scope.stepNum].id;	
+	}
+	
+	/*******************Step 1 Definitions****************/
+	$scope.displayOptions={
+			hideFormFields:false,
+			hideChart:false,
+			hideReportData:false,
+			hideExcel:false,
+			hidePdf:false
+	}
+	$scope.reportIdURL = $routeParams.reportId;
+	$scope.definitionData={};
+	$scope.definitionData.displayOptions=[
+		{name:'HideFormFields', selected:false},
+		{name:'HideChart', selected:false},
+		{name:'HideReportData', selected:false},
+		{name:'HideExcel', selected:false},
+		{name:'HidePdf', selected:false}
+	]
+	
+	$scope.pageSizeValues=['10','25','50','100','500'];
+	$scope.pageSizeOptions =[];
+	$scope.maxRowValues = ['500','1000','2000','3000','4000','5000','10000','15000','20000','25000','30000','35000','40000','45000','50000','65000']
+	$scope.maxRowOptions =[];
+	$scope.frozenColValues = ['0','1','2','3','4'];
+	$scope.frozenColOptions =[];
+	$scope.dataGridAlignValues = ['Left','Right','Center'];
+	$scope.dataGridAlignOptions =[];
+	$scope.dataContainerValues = ['10','20','30','40','50','60','70','80','90','100','110','120','130','140','150','160','170','180','190','200'];
+	$scope.dataContainerOptions =[];
+	$scope.runTimeFormNumValues = ['1','2','3','4'];
+	$scope.runTimeFormNumOptions =[];
+	/******create*****/
+	if(!$scope.isEdit){
+		$scope.definitionData.reportType = 'Linear';
+		$scope.definitionData.dbInfo = 'Local';
+	}
+	/****end create***/
+	
+	/*functions*/
 	$scope.getDefinitionById = function(id) {
+		$scope.showLoader=true;
 		raptorReportFactory.getDefinitionByReportId(id).then(function(data){
-			$scope.loadDefinition(data);
+			$scope.showLoader=false;
 			$scope.definitionData = data;
 			$scope.showLoader = false;
+			for(x in data.displayOptions){
+				if(data.displayOptions[x].name=='HideFormFields')
+					$scope.displayOptions.hideFormFields = data.displayOptions[x].selected;
+				else if(data.displayOptions[x].name=='HideChart')
+					$scope.displayOptions.hideChart = data.displayOptions[x].selected;
+				else if(data.displayOptions[x].name=='HideReportData')
+					$scope.displayOptions.hideReportData = data.displayOptions[x].selected;
+				else if(data.displayOptions[x].name=='HideExcel')
+					$scope.displayOptions.hideExcel = data.displayOptions[x].selected;
+				else if(data.displayOptions[x].name=='HidePdf')
+					$scope.displayOptions.hidePdf = data.displayOptions[x].selected;
+			}
+			
+			$scope.definitionData.frozenColumns = $scope.definitionData.frozenColumns+'';
+			$scope.definitionData.numFormCols = $scope.definitionData.numFormCols+'';
+			$scope.definitionData.allowScheduler = data.allowScheduler=='Y'?true:false;
+			$scope.definitionData.sizedByContent = data.sizedByContent=='Y'?true:false;
+			
+			$scope.definitionData.oneTimeRec = data.oneTimeRec=='Y'?true:false;
+			$scope.definitionData.hourlyRec = data.hourlyRec=='Y'?true:false;
+			$scope.definitionData.dailyRec = data.dailyRec=='Y'?true:false;
+			$scope.definitionData.dailyMFRec = data.dailyMFRec=='Y'?true:false;
+			$scope.definitionData.weeklyRec = data.weeklyRec=='Y'?true:false;
+			$scope.definitionData.monthlyRec = data.monthlyRec=='Y'?true:false;
+			
+			if($scope.definitionData.reportTitle==null || $scope.definitionData.reportTitle=='')
+				$scope.definitionData.reportTitle = $scope.definitionData.reportName;
 		},function(error){
-			$log.error("raptorReportFactory: getSearchData failed.");
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: getDefinitionById failed.");
 			$scope.showLoader = false;
 		});
 	}
 
-	$scope.addReportSecurityUser = function(userId) {		
-		raptorReportFactory.addReportSecurityUser(userId).then(function(data){
-			$scope.loadSecurityPage();
-		},function(error){
-			$log.error("raptorReportFactory: addReportSecurityUser failed.");
-		});	
+	$scope.constructureDefDropDown = function(){
+		for(i in $scope.pageSizeValues){
+			var v = {
+				value :$scope.pageSizeValues[i],
+				text :$scope.pageSizeValues[i]
+			}
+			$scope.pageSizeOptions.push(v);
+		}
+		for(i in $scope.maxRowValues){
+			var v = {
+				value :$scope.maxRowValues[i],
+				text :$scope.maxRowValues[i]
+			}
+			$scope.maxRowOptions.push(v);
+		}
+		for(i in $scope.frozenColValues){
+			var v = {
+				value :$scope.frozenColValues[i]+'',
+				text :$scope.frozenColValues[i]
+			}
+			$scope.frozenColOptions.push(v);
+		}
+		for(i in $scope.dataGridAlignValues){
+			var v = {
+				value :$scope.dataGridAlignValues[i].toLowerCase(),
+				text :$scope.dataGridAlignValues[i]
+			}
+			$scope.dataGridAlignOptions.push(v);
+		}
+		for(i in $scope.dataContainerValues){
+			var v = {
+				value :$scope.dataContainerValues[i],
+				text :$scope.dataContainerValues[i]
+			}
+			$scope.dataContainerOptions.push(v);
+		}
+		for(i in $scope.runTimeFormNumValues){
+			var v = {
+				value :$scope.runTimeFormNumValues[i],
+				text :$scope.runTimeFormNumValues[i]
+			}
+			$scope.runTimeFormNumOptions.push(v);
+		}
 	}
-	
-	$scope.removeReportSecurityUser = function(securityUser) {
-		   var modalInstance = $modal.open({
-				 scope: $scope,
-				 animation: $scope.animationsEnabled,
-				 templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-security-user-del-confirm.html',
-				 sizeClass: 'modal-large',
-				 controller: ['$scope', '$modalInstance', '$http', '$log','raptorReportFactory','securityUser', function ($scope, $modalInstance, $http, $log, raptorReportFactory,securityUser) {					 
-					 $scope.securityUserName = securityUser.name;
-					 $scope.ok = function() {
-							raptorReportFactory.removeReportSecurityUser(securityUser.id).then(function(data){
-								$modalInstance.close();		
-							},function(error){
-								$log.error("raptorReportFactory: removeReportSecurityUser failed.");
-							});							 
-						}					 
-					 $scope.cancel = function() {
-			      		$modalInstance.dismiss();
-			      	 };
-			    }],
-				resolve:{
-					securityUser: function(){
-		   			return securityUser;
-					}
-				 }
-			  });
-		      modalInstance.result.then(function () {
-		    	  $scope.loadSecurityPage();
-		      }, function () {
-		      });
-	};	
-	
-	
-	$scope.addReportSecurityRole = function(roleId) {			
-		raptorReportFactory.addReportSecurityRole(roleId).then(function(data){
-			$scope.loadSecurityPage();
-		},function(error){
-			$log.error("raptorReportFactory: addReportSecurityRole failed.");
-		});	
-	}	
-			
-	$scope.removeReportSecurityRole = function(securityRole) {
-		   var modalInstance = $modal.open({
-				 scope: $scope,
-				 animation: $scope.animationsEnabled,
-				 templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-security-role-del-confirm.html',
-				 sizeClass: 'modal-large',
-				 controller: ['$scope', '$modalInstance', '$http', '$log','raptorReportFactory','securityRole', function ($scope, $modalInstance, $http, $log, raptorReportFactory,securityRole) {					 
-					 $scope.securityRoleName = securityRole.name;
-					 $scope.ok = function() {
-							raptorReportFactory.removeReportSecurityRole(securityRole.id).then(function(data){
-								$modalInstance.close();		
-							},function(error){
-								$log.error("raptorReportFactory: removeReportSecurityRole failed.");
-							});	
-						}					 
-					 $scope.cancel = function() {
-			      		$modalInstance.dismiss();
-			      	 };
-			    }],
-				resolve:{
-					securityRole: function(){
-		   			return securityRole;
-					}
-				 }
-			  });
-		      modalInstance.result.then(function () {
-		    	  $scope.loadSecurityPage();
-		      }, function () {
-		      });
-	}			
 
-	$scope.saveReportSecurityInfo = function(userId, isPublic) {		
-		var securityInfo = {'userId':userId+"",'isPublic':isPublic};
-		raptorReportFactory.updateReportSecurityInfo(securityInfo).then(function(data){
-			$scope.loadSecurityPage();
-		},function(error){
-			$log.error("raptorReportFactory: updateReportSecurityInfo failed.");
-		});	
-	};
-	
-	$scope.createNewDefinition = function() {
-		raptorReportFactory.createNewDefinition().then(function(data){
-			$scope.loadDefinition(data);
-			$scope.definitionData = data;
-			$scope.showLoader = false;
+	$scope.constructDef = function(){
+		var data =Object.assign({}, $scope.definitionData);
+		for(x in $scope.definitionData.displayOptions){
+			if($scope.definitionData.displayOptions[x].name=='HideFormFields')
+				data.displayOptions[x].selected = $scope.displayOptions.hideFormFields
+			else if($scope.definitionData.displayOptions[x].name=='HideChart')
+				data.displayOptions[x].selected = $scope.displayOptions.hideChart
+			else if($scope.definitionData.displayOptions[x].name=='HideReportData')
+				data.displayOptions[x].selected = $scope.displayOptions.hideReportData
+			else if($scope.definitionData.displayOptions[x].name=='HideExcel')
+				data.displayOptions[x].selected = $scope.displayOptions.hideExcel
+			else if($scope.definitionData.displayOptions[x].name=='HidePdf')
+				data.displayOptions[x].selected = $scope.displayOptions.hidePdf
+		}
+		if(data.pageSize==null || data.pageSize.startsWith("Select"))
+			data.pageSize = null;
+		if(data.maxRowsInExcelCSVDownload==null || data.maxRowsInExcelCSVDownload.startsWith("Select"))
+			data.maxRowsInExcelCSVDownload = null;
+		if(data.frozenColumns==null || data.frozenColumns.startsWith("Select"))
+			data.frozenColumns = null;
+		if(data.dataGridAlign==null || data.dataGridAlign.startsWith("Select"))
+			data.dataGridAlign = null;
+		if(data.dataContainerHeight==null || data.dataContainerHeight.startsWith("Select"))
+			data.dataContainerHeight = null;
+		if(data.dataContainerWidth ==null || data.dataContainerWidth.startsWith("Select"))
+			data.dataContainerWidth = null;
+		if(data.numFormCols ==null || data.numFormCols.startsWith("Select"))
+			data.numFormCols = null;
+		
+		if(!$scope.isEdit)
+			data.reportId=-1;
+		if(data.reportTitle==null || data.reportTitle=='')
+			data.reportTitle = data.reportName;
+		return data;
+	}
+	$scope.updateDef = function(){
+		$scope.showLoader=true;
+		var dataToSave = $scope.constructDef();
+		raptorReportFactory.updateDefinition(dataToSave,$scope.isEdit).then(function(data){
+			$scope.successPopUp('Definition is updated');
+			for(x in $scope.stepTabs){
+				$scope.stepTabs[x].disabled=false;
+			}
+			$scope.showLoader=false;
 		},function(error){
-			$log.error("raptorReportFactory: getSearchData failed.");
+			$scope.errorPopUp(error);
+			$log.error("report-step-controller: updateDefinition by Id failed.");
 		});
-	}	
-	
-	var initializeCreateReport = function() {
-		$scope["selectedReportType"] ={};
-		$scope.selectedReportType.value ="linear";
-		$scope.selectedReportType2 ={};
-		$scope.selectedReportType2.value ="";
-		$scope.selectedDataSource ={};
-		$scope.selectedDataSource.value="local";
-		$scope.sqlScript = "SELECT ";
-		$scope.pageSize = {"value":"50"};
 	}
-
-	
-	var loadSqlInSession = function(){		
+	/*******************Step1 Ends****************/
+	/*******************Step2 SQL****************/
+	$scope.pageisCreating = false;
+	$scope.sqlScript={
+			value:''
+	};
+	$scope.sqlTestTableData='';
+	/*function*/
+	$scope.getSql = function(){
+		$scope.showLoader = true;
 		raptorReportFactory.getSqlInSession().then(function(data){
 			$scope.sqlInSessionJSON = data;
-			$scope.sqlScript = data.query;
-	    	$scope.showLoader = false;
+			$scope.sqlScript.value = data.query;
+			$scope.showLoader = false;
 		},function(error){
+			$scope.errorPopUp(error);
 			$log.error("raptorReportFactory: getSearchData failed.");
 		});
-	};
-	
-	initializeCreateReport();
-	if ($routeParams.reportMode) {
-		if ($routeParams.reportMode=="copy") {
-			raptorReportFactory.copyReportById($routeParams.reportId).then(function(data){
-				  $scope.$emit('RefreshInsession');
-			},function(error){
-				$log.error("raptorReportFactory: deleteFormFieldById failed.");
-			});										 			
-		} else if ($routeParams.reportMode=="import") {
-			$scope.$emit('RefreshInsession');
-		}
-	} else if ($routeParams.reportId) {
-		$scope.getDefinitionById($routeParams.reportId);
-		$scope.isEdit = true;
-		$scope.reportId = $routeParams.reportId;
-	} else {
-		$scope.isEdit = false;
-		$scope.createNewDefinition();
-	}
-	
-	
-	$scope.RunCurrentReport = function (){
-		$window.location.href = "#/report_run/c_master="+$scope.reportId+"&refresh=Y";
-	}
-	
-	$scope.deleteFormField = function(rowData) {		
-		   var modalInstance = $modal.open({
-				 scope: $scope,
-				 animation: $scope.animationsEnabled,
-				 templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-formfield-del-confirm.html',
-				 sizeClass: 'modal-large',
-				 controller: ['$scope', '$modalInstance', '$http', '$log','raptorReportFactory','rowData', function ($scope, $modalInstance, $http, $log, raptorReportFactory, rowData) {
-					 $scope.tempFieldId = rowData.id;
-					 $scope.ok = function() {
-							raptorReportFactory.deleteFormFieldById(rowData.id).then(function(data){
-					      		$modalInstance.close();																									
-							},function(error){
-								$log.error("raptorReportFactory: deleteFormFieldById failed.");
-							});										 
-					 }					 
-					 $scope.cancel = function() {
-			      		$modalInstance.dismiss();
-			      	 };
-			    }],
-				resolve:{
-					rowData: function(){
-		   			return rowData;
-					}
-				 }
-			  });
-		      modalInstance.result.then(function () {
-		    	  $scope.$emit('RefreshFormField');
-		      }, function () {
-		      });		
-	}
-	
-	$scope.loadDefinition = function(definitionData) {
-		$scope.reportId =  definitionData.reportId+"";
-		$scope.reportName = definitionData.reportName;
-		$scope.reportDescr = definitionData.reportDescr;
-		$scope.formHelpText = definitionData.formHelpText;
-		$scope.selectedPageSize = {"value": definitionData.pageSize+''};
-		$scope.selectedMaxRowsInExcelCSVDownload = {"value": definitionData.maxRowsInExcelCSVDownload};
-		$scope.reportTitle = definitionData.reportTitle;
-		$scope.reportSubTitle = definitionData.reportSubTitle;
-		$scope.selectedNumFormCols ={"value": definitionData.numFormCols+''}; 
-		$scope.selectedFrozenColumns={"value": definitionData.frozenColumns+''};
-		$scope.selectedDataGridAlign = {"value":definitionData.dataGridAlign+''};
-		$scope.emptyMessage = definitionData.emptyMessage+'';
-		$scope.selectedDataContainerHeight = {"value":definitionData.dataContainerHeight+''};
-		$scope.selectedDataContainerWidth = {"value":definitionData.dataContainerWidth+''};
-		var displayAreaValue = "null"
-		for (var i=0; i<3; i++ ) {
-			if (definitionData.displayArea[i].selected) {
-				displayAreaValue = definitionData.displayArea[i].name;
-			}
-		}
-		$scope.selectedDisplayArea = {"value":displayAreaValue+""}; 
-		
-		$scope.hideFormFieldsAfterRunSelected = {"value": definitionData.hideFormFieldsAfterRun}
-
-		$scope.hideFormFieldsSelected = {"value":definitionData.displayOptions[0].selected};
-		$scope.hideChartSelected = {"value":definitionData.displayOptions[1].selected};
-		$scope.hideReportDataSelected = {"value":definitionData.displayOptions[2].selected};
-		$scope.hideExcelSelected = {"value":definitionData.displayOptions[3].selected};
-		$scope.hidePdfSelected = {"value":definitionData.displayOptions[4].selected};
-		$scope.runtimeColSortDisabled = {"value":definitionData.runtimeColSortDisabled};
-		$scope.showLoader = false;
-	} 
-	
-	
-	var setDefinition = function(){
- 		$scope.updatedDefJson = {
-				  "tabName" : "Definition",
-				  "tabId" : "Def",
-				  "reportId" : ($scope.isEdit?$scope.reportId+'':"-1"),
-				  "reportName" : $scope.reportName,
-				  "reportDescr" :  $scope.reportDescr,
-				  "reportType" : "Linear",
-				  "dbInfo" : "local",
-				  "formHelpText" : $scope.formHelpText,
-				  "pageSize" : Number($scope.selectedPageSize.value),
-				  "displayArea" : [ {
-				    "id" : "HOME",
-				    "name" : "HOME",
-				    "selected" : ($scope.selectedDisplayArea.value=="HOME")
-				  }, {
-				    "id" : "CUSTOMER",
-				    "name" : "CUSTOMER",
-				    "selected" : ($scope.selectedDisplayArea.value==="CUSTOMER")
-				  }, {
-				    "id" : "REPORTS",
-				    "name" : "REPORTS",
-				    "selected" : ($scope.selectedDisplayArea.value==="REPORTS")
-				  } ],
-				  "hideFormFieldsAfterRun" : $scope.hideFormFieldsAfterRunSelected.value,
-				  "maxRowsInExcelCSVDownload" : Number($scope.selectedMaxRowsInExcelCSVDownload.value),
-				  "frozenColumns" : Number($scope.selectedFrozenColumns.value),
-				  "dataGridAlign" : $scope.selectedDataGridAlign.value,
-				  "emptyMessage" : $scope.emptyMessage,
-				  "dataContainerHeight" : $scope.selectedDataContainerHeight.value,
-				  "dataContainerWidth" : $scope.selectedDataContainerWidth.value,
-				  "displayOptions" : [ {
-				    "name" : "HideFormFields",
-				    "selected" : $scope.hideFormFieldsSelected.value
-				  }, {
-				    "name" : "HideChart",
-				    "selected" : $scope.hideChartSelected.value
-				  }, {
-				    "name" : "HideReportData",
-				    "selected" : $scope.hideReportDataSelected.value
-				  }, {
-				    "name" : "HideExcel",
-				    "selected" : $scope.hideExcelSelected.value
-				  }, {
-				    "name" : "HidePdf",
-				    "selected" : $scope.hidePdfSelected.value
-				  } ],
-				  "runtimeColSortDisabled" : $scope.runtimeColSortDisabled.value,
-				  "numFormCols" :  Number($scope.selectedNumFormCols.value),
-				  "reportTitle" : $scope.reportTitle,
-				  "reportSubTitle" : $scope.reportSubTitle
-				}
-
 	}
-	
-	var updateDefinitionData = function() {
-			setDefinition();
-			raptorReportFactory.updateDefinition($scope.updatedDefJson,$scope.isEdit).then(function(data){
-			},function(error){
-				$log.error("raptorReportFactory: updateDefinition by Id failed.");
-			});				
-	}
-	
-	var saveNewDefinitionData = function() {
-		setDefinition();
-		raptorReportFactory.saveNewDefinition($scope.updatedDefJson).then(function(data){
-		},function(error){
-			$log.error("raptorReportFactory: saveNewDefinition by Id failed.");
-		});		
-	}
-	
 	$scope.testRunSql = function(){
-		var queryJSON = {query: $scope.sqlScript};
+		$scope.showLoader=true;
+		var queryJSON = {query: $scope.sqlScript.value};
 		queryJSON = JSON.stringify(queryJSON);
 		raptorReportFactory.testRunSQL(queryJSON).then(function(data){
+			$scope.showLoader=false;
 			var modalInstance = $modal.open({
-				 scope: $scope,
-				 animation: $scope.animationsEnabled,
-				 templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-test-run-sql.html',
-				 sizeClass: 'modal-large',
-				 controller: ['$scope', '$modalInstance', '$http', '$log','raptorReportFactory','queriedData', function ($scope, $modalInstance, $http, $log, raptorReportFactory, queriedData) {
-					 var init = function() {
-						 $scope.isError = false;
-						 if (queriedData.errormessage) {
-							 $scope.isError = true;
-							 $scope.errormessage = queriedData.errormessage;
-							 $scope.stacktrace = queriedData.stacktrace;
-						 } else {
-							 $scope.queryData = queriedData;
-						}
-					 }
-					 init();	 		
-			      	  $scope.close = function() {
-			      		$modalInstance.dismiss();
-			      	  };
-			    }],
+				scope: $scope,
+				animation: $scope.animationsEnabled,
+				templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-test-run-sql.html',
+				windowClass:'modal-docked',
+				sizeClass: 'modal-large',
+				controller: testRunSqlController,
 				resolve:{
 					queriedData: function(){
-		   			return data;
+						return data;
 					}
-				 }
-		   })			
+				}
+			});
 			
+			modalInstance.result.finally(function () {	
+				if(!$scope.isEdit){
+					$scope.showLoader=true;
+					$scope.pageisCreating = true;
+					$scope.pageMsg = 'Please wait while we are creating the report. Page will be reloaded after the creation is done.'
+					raptorReportFactory.getDefinitionInSession().then(function(data){
+						var newReportId = data.reportId;
+						if(newReportId!=null && newReportId!='' && newReportId!=-1)
+							$window.location.href = "#/report_wizard/"+newReportId;
+						
+						$scope.showLoader = false;
+						$scope.pageisCreating = false;
+					},function(error){
+						$scope.errorPopUp(error);
+						$log.error("raptorReportFactory: get Definition In Session failed.");
+						$scope.showLoader = false;
+					});		
+				}				
+			});
+
 		},function(error){
+			$scope.errorPopUp(error);
 			$log.error("raptorReportFactory: test run SQL failed.");
 		});		
 	}
+	
+	/*******************Step2 End****************/
+	/*******************Step3 Column****************/
+	$scope.colTableRowData='';
+	$scope.isEditCol= true;
+	
+	$scope.getColumn = function(){
+		$scope.showLoader = true;
+		raptorReportFactory.getColumnList().then(function(data){
+			$scope.colTableRowData = data;
+			$scope.showLoader = false;
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: get column list failed.");           
+		});	
+	}
+		
+	$scope.openColumnPopup = function (rowData) {
+		var modalInstance = $modal.open({
+			scope: $scope,
+			animation: $scope.animationsEnabled,
+			templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-col-edit.html',
+			windowClass:'modal-docked',
+			sizeClass: 'modal-jumbo',
+			controller: openColumnPopupController,
+			resolve:{
+				colData: function(){
+					return rowData;
+				}
+			}
+		});
+		modalInstance.result.finally(function () {
+			$scope.getColumn();
+		});
+	};
 
+	/*******************Step3 End****************/
+	/*******************Step4 Starts Form Fields****************/
+	
+	$scope.dataProcessing = false;
+	$scope.formFieldData = [];
+	$scope.getFormFieldList = function(){
+		$scope.showLoader= true;
+		$scope.formFieldData = [];
+		raptorReportFactory.getFormFieldList().then(function(data){
+			$scope.showLoader= false;
+			$scope.formFieldData = data;
+			$scope.formFieldData.sort(function(obj1, obj2) {
+				// Ascending: first age less than the previous
+				return obj1.orderSeq - obj2.orderSeq;
+			});
 
+			$scope.showLoader = false;
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: get formfields failed."); 
+			$scope.showLoader = false;
+		});
+	}
+	
+	$scope.formFieldReOrder = function(upID, downID){
+		
+		$scope.moveUpFF={};
+		$scope.moveDownFF={};
+		$scope.showLoader=true;
+		raptorReportFactory.getFormFieldEditInfoById(upID).then(function(data){
+			$scope.moveUpFF = data;
+			raptorReportFactory.getFormFieldEditInfoById(downID).then(function(data){
+				$scope.moveDownFF = data;
+				var downOrder = $scope.moveDownFF.orderSeq;
+				$scope.moveDownFF.orderSeq = $scope.moveUpFF.orderSeq;
+				$scope.moveUpFF.orderSeq = downOrder;
+				raptorReportFactory.saveFormFieldEditInfo($scope.moveDownFF).then(function(data){
+					raptorReportFactory.saveFormFieldEditInfo($scope.moveUpFF).then(function(data){
+						$scope.successPopUp('');
+					},function(error){
+						$scope.errorPopUp(error);
+						$log.error("raptorReportFactory: saveFormFieldEditInfo failed.");
+					}).finally(function() {
+						$scope.showLoader=false; 
+						$scope.getFormFieldList();
+					})
+				},function(error){
+					$scope.errorPopUp(error);
+					$log.error("raptorReportFactory: saveFormFieldEditInfo failed.");
+				});		
+				
+			},function(error){
+				$scope.errorPopUp(error);
+				$log.error("raptorReportFactory: getColumnEditInfoById failed.");
+			});	
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: getColumnEditInfoById failed.");
+		})
+		
+		
+	}
+	
 	$scope.formFieldVerifySQL= function(sqlScript){
 		var queryJSON = {query: sqlScript};
 		queryJSON = JSON.stringify(queryJSON);
 		raptorReportFactory.formFieldVerifySQL(queryJSON).then(function(data){
 			var modalInstance = $modal.open({
-				 scope: $scope,
-				 animation: $scope.animationsEnabled,
-				 templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-test-run-sql.html',
-				 sizeClass: 'modal-large',
-				 controller: ['$scope', '$modalInstance', '$http', '$log','raptorReportFactory','queriedData', function ($scope, $modalInstance, $http, $log, raptorReportFactory, queriedData) {
-					 var init = function() {
-						 $scope.isError = false;
-						 if (queriedData.errormessage) {
-							 $scope.isError = true;
-							 $scope.errormessage = queriedData.errormessage;
-							 $scope.stacktrace = queriedData.stacktrace;
-						 } else {
-							 $scope.queryData = queriedData;
-						}
-					 }
-					 init();	 		
-			      	  $scope.close = function() {
-			      		$modalInstance.dismiss();
-			      	  };
-			    }],
+				scope: $scope,
+				animation: $scope.animationsEnabled,
+				templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-test-run-sql.html',
+				sizeClass: 'modal-large',
+				controller: formFieldVerifySQLController,
 				resolve:{
 					queriedData: function(){
-		   			return data;
+						return data;
 					}
-				 }
-		   })			
-			
+				}
+			})			
+
 		},function(error){
+			$scope.errorPopUp(error);
 			$log.error("raptorReportFactory: test run SQL failed.");
 		});		
 	}
 	
 	
-	/*	$scope.selectedDataSource.allowSchedule={};
-	$scope.selectedDataSource.allowSchedule.value=""*/
-	
-    var getJsonSrcName = function(stepNum){
-    	var JsonSrcPrefix = "app/fusion/scripts/DS2-view-models/ds2-reports/wz_steps/json/step"
-    	return JsonSrcPrefix + stepNum +".json";
-    }
-        
-	$scope.gTabs = [
-         {
-             title: 'Definition',
-             id: 'Definition',
-             uniqueId: 'uniqueTab1x',
-             tabPanelId: 'threetab1x'
-         }, {
-             title: 'SQL',
-             id: 'SQL',
-             uniqueId: 'uniqueTab2x',
-             tabPanelId: 'threetab2x',
-             disabled: (!$scope.isEdit)
-         }, {
-             title: 'Columns',
-             id: 'Columns',
-             uniqueId: 'uniqueTab3x',
-             tabPanelId: 'threetab3x',
-             disabled: (!$scope.isEdit)
-         }, {
-             title: 'Form Fields',
-             id: 'Form Fields',
-             uniqueId: 'uniqueTab4x',
-             tabPanelId: 'threetab4x',
-             disabled: (!$scope.isEdit)
-         }, {
-             title: 'Security',
-             id: 'Security',
-             uniqueId: 'uniqueTab5x',
-             tabPanelId: 'threetab5x',
-             disabled: (!$scope.isEdit)
-         }, {
-             title: 'Run',
-             id: 'Run',
-             uniqueId: 'uniqueTab6x',
-             tabPanelId: 'threetab6x',
-             disabled: (!$scope.isEdit)
-         }
-     ];
-	
-	$scope.unhideAllOtherTabs = function(){
-		for (var selectedTab = 0; selectedTab < $scope.gTabs.length; selectedTab++) {
-			$scope.gTabs[selectedTab].disabled = false;
-		}
-	}
-    
-	$scope.openColumnPopup = function (rowData) {
-		   var modalInstance = $modal.open({
-				 scope: $scope,
-				 animation: $scope.animationsEnabled,
-				 templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-col-edit.html',
-				 sizeClass: 'modal-large',
-				 controller: ['$scope', '$modalInstance', '$http', '$log','raptorReportFactory','colData', function ($scope, $modalInstance, $http, $log, raptorReportFactory, colData) {
-					 raptorReportFactory.getColumnEditInfoById(colData.id).then(function(data){
-							$scope.columnEditData = data;
-							$scope.colId = data.colId;
-/*							$scope.colName = data.colName;*/
-							$scope.colName = {'value':data.colName+''};
-							$scope.selectedDisplayAlignment = {"value":data.displayAlignment+''};
-							$scope.selectedDisplayHeaderAlignment = {"value":data.displayHeaderAlignment+''};
-							$scope.sortable = {"value":''+data.sortable};
-							$scope.visible = {"value":''+data.visible};
-							$scope.drilldownURL = data.drilldownURL;
-							$scope.drilldownParams = data.drilldownParams;
-							$scope.drilldownType = data.drilldownType;					
-							$scope.selectedDrillDownReport = {"value":""};
-						 							
-							
-							},function(error){
-							$log.error("raptorReportFactory: getColumnEditInfoById failed.");
-						}); 						 
-
-					 var init = function() {
-						 
-						 raptorReportFactory.getDrillDownReportList().then(function(data2){
-							 $scope.drilldownReports = data2;
-								},function(error){
-								$log.error("raptorReportFactory: getDrillDownReportList failed.");
-							}); 
-						 
-/*						 $scope.colTableRowData = colData;*/
-						 $scope.displayAlignmentOptions = [
-							 {value:"null", text:""},							 
-							 {value:"Left", text:"Left"},
-							 {value:"Center", text:"Center"},
-							 {value:"Right", text:"Right"}
-						 ];
-						 $scope.ynOptions = [
-							 {value:"true", text:"Yes"},
-							 {value:"false", text:"No"}							 
-						 ];
-						 $scope.drillDownOptions = [
-							 {value:"drillDownOpt1", text:"drillDownOpt1"},
-							 {value:"drillDownOpt2", text:"drillDownOpt2"},
-							 {value:"drillDownOpt3", text:"drillDownOpt3"}
-						 ];
-					 }
-					 
-					 init();
-					 $scope.$watch('selectedDrillDownReport.value',function(){
-						 if ($scope.selectedDrillDownReport) {
-						     $scope.$emit('openDrillDownpage',$scope.selectedDrillDownReport.value);
-						 }
-					 });
-					 
-					 $scope.save = function() {
-						 var drilldownURL = "";//raptorReportFactory.drillDownPopupOptions
-						//raptorReportFactory.drillDownPopupOptions.radioGroup
-						 var colInfo = {
-								  "tabId" : "ColEdit",
-								  "tabName" : "Column Edit",
-								  "colId" : $scope.colId,
-								  "colName" : $scope.colName.value,
-								  "displayAlignment" : ($scope.selectedDisplayAlignment.value=="null")?null:$scope.selectedDisplayAlignment.value,
-								  "displayHeaderAlignment" : ($scope.selectedDisplayHeaderAlignment.value=="null")?null:$scope.selectedDisplayHeaderAlignment.value,
-								  "sortable" : ($scope.sortable.value=="true"),
-								  "visible" : ($scope.visible.value=="true"),
-								  "drilldownURL" : raptorReportFactory.drillDownURL,
-								  "drilldownParams" : raptorReportFactory.drillDownParams,
-								  "drilldownType" : ""
-								}
-						 raptorReportFactory.saveColumnEditInfo(colInfo).then(function(data){
-					      		$modalInstance.close();																	
-								},function(error){
-								$log.error("raptorReportFactory: getColumnEditInfoById failed.");
-							}); 						 
-			      	  };					
-			
-			      	  $scope.cancel = function() {
-			      		$modalInstance.dismiss();
-			      	  };
-			    }],
-				resolve:{
-					colData: function(){
-		   			return rowData;
-					}
-				 }
-			  });
-
-		      modalInstance.result.then(function () {
-			    	$scope.$emit('RefreshColumnList');
-		      }, function () {
-		      });
-    };
-    
-    
-    $scope.throwReportNameMissingError = function () {
-		   var modalInstance = $modal.open({
-				 scope: $scope,
-				 animation: $scope.animationsEnabled,
-				 templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-report-name-validation.html',
-				 sizeClass: 'modal-small',
-				 controller: ['$scope', '$modalInstance', '$http', '$log', function ($scope, $modalInstance, $http, $log) {			
-			      	  $scope.close = function() {
-			      		$modalInstance.dismiss();
-			      	  };
-			    }]
-			  });
-		      modalInstance.result.then(function () {
-		      }, function () {
-		      });		   
- };
-
-    
-    $scope.addNewFormField = function () {
-		   var modalInstance = $modal.open({
-				 scope: $scope,
-				 animation: $scope.animationsEnabled,
-				 templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-formfield-edit.html',
-				 sizeClass: 'modal-large',
-				 controller: ['$scope', '$modalInstance', '$http', '$log','raptorReportFactory', function ($scope, $modalInstance, $http, $log, raptorReportFactory) {    	
-					 raptorReportFactory.getFormFieldEditInfoById("add").then(function(data){
-					 	 $scope.formFieldEditData = data;
-					 	 $scope.fieldId = $scope.formFieldEditData.fieldId;
-					 	 $scope.fieldName ={"value": $scope.formFieldEditData.fieldName};
-						 $scope.selectedVisible = {"value":$scope.formFieldEditData.visible+''};
-						 $scope.defaultValue = {"value": $scope.formFieldEditData.defaultValue};
-						 $scope.fieldDefaultSQL = {"value": $scope.formFieldEditData.fieldDefaultSQL};
-						 $scope.fieldSqlContent = {"value": $scope.formFieldEditData.fieldSQL};
-						 $scope.selectedValidationType = {"value":$scope.formFieldEditData.validationType +''};
-						 $scope.selectedFieldType = {"value":$scope.formFieldEditData.fieldType +''};
-						$scope.sqlDefaultValueSelected= {value:false};
-						$scope.sqlDefaultValueSelected ={"value":false};
-						if (($scope.fieldDefaultSQL.value)&&($scope.fieldDefaultSQL.value!="")) {
-							$scope.sqlDefaultValueSelected.value =true;
-						} 
-						},function(error){
-						$log.error("raptorReportFactory: getColumnEditInfoById failed.");
-					});
-					 
-
-					 $scope.ynOptions = [
-						 {value:"true", text:"Yes"},
-						 {value:"false", text:"No"}							 
-					 ];
-					 
-					 $scope.verifyFieldValueOptions = [
-						 {value:"DATE", text:"Date"},
-						 {value:"TIME_STAMP_HOUR", text:"TimeStamp (Hour)"},
-						 {value:"TIME_STAMP_HOUR_MIN", text:"TimeStamp (Hour,Min)"},
-						 {value:"HIDDEN", text:"Hidden"}						 							 						 							 
-					 ]					 
-					 
-					 $scope.fieldTypeOptions = [
-						 {value:"TEXT", text:"Text Box"},
-						 {value:"LIST_BOX", text:"List Box"},
-						 {value:"LIST_MULTI_SELECT", text:"Multi-select List Box"},
-						 {value:"HIDDEN", text:"Hidden"}						 							 						 
-					];
-					 
-					 $scope.save = function() {
-						 var formFieldJSON = {
-							  "tabId" : "FormEdit",
-							  "tabName" : "Form Edit",
-							  "fieldId" : $scope.fieldId,
-							  "fieldName" : $scope.fieldName.value,
-							  "fieldType" : $scope.selectedFieldType.value,
-							  "visible" : ($scope.selectedVisible.value=="true"),
-							  "defaultValue" : ($scope.sqlDefaultValueSelected.value?'':$scope.defaultValue.value),
-							  "fieldDefaultSQL" : ($scope.sqlDefaultValueSelected.value?$scope.fieldDefaultSQL.value:""),
-							  "fieldSQL" :$scope.fieldSqlContent.value,
-							  "validationType" : "NONE",
-							  "predefinedValueList" :null
-							}
-						 raptorReportFactory.saveFormFieldEditInfo(formFieldJSON).then(function(data){
-					      		$modalInstance.close();	
-								},function(error){
-								$log.error("raptorReportFactory: saveFormFieldEditInfo failed.");
-							});			      	  
-			      	  };
-			
-			      	  $scope.cancel = function() {
-			      		$modalInstance.dismiss();
-			      	  };
-			    }]
-			  });
-		      modalInstance.result.then(function () {
-			    	$scope.$emit('RefreshFormField');
-		      }, function () {
-		      });		   
-    };
-        
-	$scope.openFormFieldPopup = function (rowData) {
-		   var modalInstance = $modal.open({
-				 scope: $scope,
-				 animation: $scope.animationsEnabled,
-				 templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-formfield-edit.html',
-				 sizeClass: 'modal-large',
-				 controller: ['$scope', '$modalInstance', '$http', '$log','raptorReportFactory','fieldData', function ($scope, $modalInstance, $http, $log, raptorReportFactory, fieldData) {
-					 var init = function() {
-						 raptorReportFactory.getFormFieldEditInfoById(fieldData.id).then(function(data){
-							 	 $scope.formFieldEditData = data;
-							 	 $scope.fieldId = $scope.formFieldEditData.fieldId;
-							 	 $scope.fieldName = {"value":$scope.formFieldEditData.fieldName};
-								 $scope.selectedVisible = {"value":$scope.formFieldEditData.visible+''};
-								 $scope.defaultValue = {"value":$scope.formFieldEditData.defaultValue};
-								 $scope.fieldDefaultSQL = {"value": $scope.formFieldEditData.fieldDefaultSQL};
-								 $scope.fieldSqlContent = {"value": $scope.formFieldEditData.fieldSQL};
-								 $scope.selectedValidationType = {"value":$scope.formFieldEditData.validationType +''};
-								 $scope.selectedFieldType = {"value":$scope.formFieldEditData.fieldType +''};
-								$scope.sqlDefaultValueSelected ={"value":false};
-								if (($scope.fieldDefaultSQL.value)&&($scope.fieldDefaultSQL.value!="")) {
-									$scope.sqlDefaultValueSelected.value =true;
-								} 
-								},function(error){
-								$log.error("raptorReportFactory: getColumnEditInfoById failed.");
-							});						 						
-						 
-						 $scope.ynOptions = [
-							 {value:"true", text:"Yes"},
-							 {value:"false", text:"No"}							 
-						 ];
-						 
-						 $scope.verifyFieldValueOptions = [
-							 {value:"DATE", text:"Date"},
-							 {value:"TIME_STAMP_HOUR", text:"TimeStamp (Hour)"},
-							 {value:"TIME_STAMP_HOUR_MIN", text:"TimeStamp (Hour,Min)"},
-							 {value:"HIDDEN", text:"Hidden"}						 							 						 							 
-						 ]
-						 
-						 $scope.fieldTypeOptions = [
-							 {value:"TEXT", text:"Text Box"},
-							 {value:"LIST_BOX", text:"List Box"},
-							 {value:"LIST_MULTI_SELECT", text:"Multi-select List Box"},
-							 {value:"HIDDEN", text:"Hidden"}						 							 						 
-						];
-						
-					 }
-					 
-					 init();
-					 
-					 $scope.save = function() {
-						 var formFieldJSON = {
-							  "tabId" : "FormEdit",
-							  "tabName" : "Form Edit",
-							  "fieldId" : $scope.fieldId,
-							  "fieldName" : $scope.fieldName.value,
-							  "fieldType" : $scope.selectedFieldType.value,
-							  "visible" : ($scope.selectedVisible.value=="true"),
-							  "defaultValue" : ($scope.sqlDefaultValueSelected.value?'':$scope.defaultValue.value),
-							  "fieldDefaultSQL" : ($scope.sqlDefaultValueSelected.value?$scope.fieldDefaultSQL.value:""),
-							  "fieldSQL" :$scope.fieldSqlContent.value,
-							  "validationType" : "NONE",
-							  "predefinedValueList" :null
-							}
-						 raptorReportFactory.saveFormFieldEditInfo(formFieldJSON).then(function(data){
-					      		$modalInstance.close();	
-								},function(error){
-								$log.error("raptorReportFactory: saveFormFieldEditInfo failed.");
-							});			      	  
-			      	  };
-			
-			      	  $scope.cancel = function() {
-			      		$modalInstance.dismiss();
-			      	  };
-			    }],
-				resolve:{
-					fieldData: function(){
-		   			return rowData;
-					}
-				 }
-			  });
-
-		      modalInstance.result.then(function () {
-			    	$scope.$emit('RefreshFormField');
-		      }, function () {
-		      });
- };
-    
-	$scope.openDrillDownReportPopup = function (reportId,parentReportId) {
-		   var modalInstance = $modal.open({
-				 scope: $scope,
-				 animation: $scope.animationsEnabled,
-				 templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-drilldown-edit.html',
-				 sizeClass: 'modal-large',
-				 controller: ['$scope', '$modalInstance', '$http', '$log','raptorReportFactory','reportId', function ($scope, $modalInstance, $http, $log, raptorReportFactory, reportId) {
-					 
-					 $scope.drillDownOptionList =[];
-					 $scope.selectedvalueradioGroup = {"name":""};
-					 $scope.selectedChildReportFormField = {"value":""};
-					 $scope.selectedChildReportColumn = {"value":""};
-					 $scope.fixedValue = {"value":""};
-					 $scope.suppressValues = {"value":""};
+	$scope.openFormFieldPopup = function (rowData,type) {	
+		$scope.type= type;
+		var modalInstance = $modal.open({
+			scope: $scope,
+			animation: true,
+			templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-formfield-edit.html',
+			sizeClass: 'modal-large',
+			controller: openFormFieldPopupController,
+			resolve:{
+				fieldData: function(){
+					return rowData;
+				}
+			}
+		});
 
-				    	raptorReportFactory.getChildReportFormField(reportId).then(function(data){				    		
-				    		for (var i=0;i<data.length;i++) {
-				    			$scope.drillDownOptionList.push(
-				    					{
-				    					"name": data[i].name,
-				    					"id": data[i].id,
-				    					"selectedvalueradioGroup":{"name":""},
-				    					"selectedChildReportFormField":{"value":""},
-				    					"selectedChildReportColumn":{"value":""},
-				    					"fixedValue":{"value":""},
-				    					"suppressValues":{"value":""}				    					
-				    					}
-				    					)
-				    		}
-						},function(error){
-							$log.error("raptorReportFactory: getChildReportFormField failed.");  
-							});
+		modalInstance.result.finally(function () {
+			$scope.getFormFieldList();
+		});
+	};
+	$scope.addFormField = function(){
+		$scope.openFormFieldPopup('','add');
+	}
+	
 
-				    	raptorReportFactory.getChildReportFormField(parentReportId).then(function(data){
-				    		$scope.childReportFF =data;
-						},function(error){
-							$log.error("raptorReportFactory: getChildReportFormField failed.");  
-							});				    	
+	$scope.deleteFormField = function(rowData) {		
+		var modalInstance = $modal.open({
+			scope: $scope,
+			animation: $scope.animationsEnabled,
+			templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-formfield-del-confirm.html',
+			sizeClass: 'modal-small',
+			controller: deleteFormFieldController,
+			resolve:{
+				rowData: function(){
+					return rowData;
+				}
+			}
+		});
+		modalInstance.result.then(function () {
+			$scope.getFormFieldList();
+		}, function () {
+		});		
+	}
 
-				    	raptorReportFactory.getChildReportColumn(parentReportId).then(function(data){
-				    		$scope.childReportCol =data;
-						},function(error){
-							$log.error("raptorReportFactory: getChildReportFormField failed.");  
-							});
-				    	
-				    	raptorReportFactory.setDrillDownPopupOptions(null);				    					    					    	
-			
-			      	  $scope.complete = function() {			      		
-			      		var drillDownPopupOptions= {
-			      				radioGroup : $scope.selectedvalueradioGroup.name,
-			      				reportFF: $scope.selectedChildReportFormField.value,
-			      				reportCol:  $scope.selectedChildReportColumn.value,
-			      				fixedValue:  $scope.fixedValue.value,
-			      				suppressValues: $scope.suppressValues.value
-			      		}
-			      		var drillDownParams = "";
-			      		var ampStr ="";
-			      		for (var i=0;i<$scope.drillDownOptionList.length; i++) {
-			      			if (drillDownParams!="") {
-			      				ampStr = "&amp;";
-			      			} 
-			      			if ($scope.drillDownOptionList[i].selectedvalueradioGroup.name=="fixedValue"){
-			      				drillDownParams = drillDownParams + ampStr + $scope.drillDownOptionList[i].id + "="+$scope.drillDownOptionList[i].fixedValue.value;
-			      			} else if ($scope.drillDownOptionList[i].selectedvalueradioGroup.name=="reportFF"){
-			      				drillDownParams = drillDownParams + ampStr + $scope.drillDownOptionList[i].id + "=[!"+$scope.drillDownOptionList[i].selectedChildReportFormField.value + "]";			      				
-			      			} else if ($scope.drillDownOptionList[i].selectedvalueradioGroup.name=="reportCol"){
-			      				drillDownParams = drillDownParams + ampStr + $scope.drillDownOptionList[i].id + "=["+$scope.drillDownOptionList[i].selectedChildReportColumn.value + "]";			      							      				
-			      			}			      				
-			      		}
-				      	raptorReportFactory.setDrillDownPopupOptions(reportId,drillDownParams);
-			      		
-			      		$modalInstance.close();
-			      	  };
-			    }],
-				resolve:{
-					reportId: function(){
-		   			return reportId;
-					}
-				 }
-			  });
+	/*******************Step4 End****************/
+	/*******************Step5 Starts Security****************/
+	$scope.ynOptions = [
+		{value:"true", text:"Yes"},
+		{value:"false", text:"No"}							 
+	];
+	$scope.addReportUserId={
+			id:''
+	};
+	$scope.addReportRoleId={
+			id:''
+	};
+	$scope.loadSecurityPage = function() {
+		$scope.showLoader = true;
+		raptorReportFactory.resetSecurityLoadingCounter();
 
-		      modalInstance.result.then(function () {
-/*			    	$scope.$emit('RefreshFormField');*/
-		      }, function () {
-		      });
-};
- 
-    $scope.$watch('activeTabsId', function (newVal, oldVal) {
-        if(newVal !== oldVal) {
-        	$scope.showLoader = true;
-            var selectedTab;
-            for (selectedTab = 0; selectedTab < $scope.gTabs.length; selectedTab++) {
-                if ($scope.gTabs[selectedTab].id === newVal) {
-                    $scope.stepNum = selectedTab;
-/*                    stepFormFactory.getStepJSONData(getJsonSrcName($scope.stepNum))*/
-            		$scope.isColumnStep = false;              	  	                    
-            		$scope.isFormFieldStep = false;
-            		$scope.isSecurityStep = false;
-                	$scope.renderStep(selectedTab+1);
-                	if ($scope.stepNum == 1) {
-                    	$scope.showLoader = false;
-                	}
-                	else if ($scope.stepNum == 2) {
-                		loadSqlInSession();
-                	}	else if ($scope.stepNum == 3) {
-                		$scope.isColumnStep = true;
-                		raptorReportFactory.getColumnList().then(function(data){
-                			$scope.colTableRowData = data;
-                        	$scope.showLoader = false;
-                		},function(error){
-                			$log.error("raptorReportFactory: get column list failed.");
-                			$scope.showLoader = false;});
-                    	                		
-                	}  else if ($scope.stepNum == 4) {
-                		$scope.isFormFieldStep = true;
-                		// put within then function:
-                		raptorReportFactory.getFormFieldList().then(function(data){
-                			$scope.formFieldData = data;
-                        	$scope.showLoader = false;
-                		},function(error){
-                			$log.error("raptorReportFactory: get formfields failed."); 
-                			$scope.showLoader = false;});
-                	}  else if ($scope.stepNum == 5) {
-                		$scope.isSecurityStep = true;
-                		$scope.reportOwnerId={'id':''};
-                		$scope.isPublicOptionList = [
-                			{'value':'true','text':'Yes'},
-                			{'value':'false','text':'No'},                			
-                		];
-                		$scope.loadSecurityPage();
-                		
-                	}
-                	else if ($scope.stepNum == 6) {
-                		raptorReportFactory.getDefinitionInSession().then(function(data){
-                    		$scope.reportId = data.reportId;
-                        	$scope.showLoader = false;
-                    	},function(error){
-                    		$log.error("raptorReportFactory: getDefinitionInSession failed."); 
-                    		$scope.showLoader = false;});		
-                	}
-                	
-                	if ($scope.stepNum>1){
-                		$scope.unhideAllOtherTabs();
-                	}
-                    break;
-                }
-            }
-        }
-    });	 
-	 
-    $scope.loadSecurityPage = function() {
-    	$scope.showLoader = true;
-    	raptorReportFactory.resetSecurityLoadingCounter();
-    	
-    	//API call 1:
+		//API call 1:
 		raptorReportFactory.getSecurityReportOwnerList().then(function(data){
-    		$scope.reportOwnerList = data;
+			$scope.reportOwnerList = data;
 			raptorReportFactory.icrementSecurityLoadingCounter();
 			if(raptorReportFactory.checkSecurityLoadingCounter()){$scope.showLoader = false;};
-    	},function(error){
-    		$log.error("raptorReportFactory: getSecurityReportOwnerList failed."); 
-    		});
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: getSecurityReportOwnerList failed."); 
+		});
 
 		//API call 2: get report role list
 		raptorReportFactory.getReportRoleList().then(function(data){
-    		$scope.reportRoleList = data;
+			$scope.reportRoleList = data;
 			raptorReportFactory.icrementSecurityLoadingCounter();
 			if(raptorReportFactory.checkSecurityLoadingCounter()){$scope.showLoader = false;};
 		},function(error){
-    		$log.error("raptorReportFactory: getReportRoleList failed."); 
-    		});	
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: getReportRoleList failed."); 
+		});	
 
 		//API call 3: get security page basic info
 		raptorReportFactory.getReportSecurityInfo().then(function(data){
-    		$scope.reportSecurityInfo = data;
-    		$scope.reportOwnerId ={id: $scope.reportSecurityInfo.ownerId};        	
+			$scope.reportSecurityInfo = data;
+			$scope.reportOwnerId ={id: $scope.reportSecurityInfo.ownerId};        	
 			raptorReportFactory.icrementSecurityLoadingCounter();
 			if(raptorReportFactory.checkSecurityLoadingCounter()){$scope.showLoader = false;};
-    	},function(error){
-    		$log.error("raptorReportFactory: getReportSecurityInfo failed."); 
-    		$scope.showLoader = false;});
-		               		
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: getReportSecurityInfo failed."); 
+			$scope.showLoader = false;});
+
 		//API call 4: retrieve security users
 		raptorReportFactory.getReportSecurityUsers().then(function(data){
-    		$scope.reportSecurityUsers = data;
-    		for (var i=0; i<$scope.reportSecurityUsers.length;i++) {
-    			$scope.reportSecurityUsers[i]["accessAllowed"] = !$scope.reportSecurityUsers[i]["readOnly"];
-    		}
-    		raptorReportFactory.icrementSecurityLoadingCounter();
+
+			$scope.reportSecurityUsers = data;
+			for (var i=0; i<$scope.reportSecurityUsers.length;i++) {
+				$scope.reportSecurityUsers[i]["accessAllowed"] = !$scope.reportSecurityUsers[i]["readOnly"];
+				$scope.reportSecurityUsers[i].runAccess = true; // need to check why 1702 version is making it true always
+			}
+			raptorReportFactory.icrementSecurityLoadingCounter();
 			if(raptorReportFactory.checkSecurityLoadingCounter()){$scope.showLoader = false;};
-    	},function(error){
-    		$log.error("raptorReportFactory: reportSecurityUsers failed."); 
-    		});
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: reportSecurityUsers failed."); 
+		});
 
 		//API call 5: retrieve security roles
 		raptorReportFactory.getReportSecurityRoles().then(function(data){
-    		$scope.reportSecurityRoles = data;
-    		for (var i=0; i<$scope.reportSecurityRoles.length;i++) {
-    			$scope.reportSecurityRoles[i]["accessAllowed"] = !$scope.reportSecurityRoles[i]["readOnly"];
-    		}
-    		
+			$scope.reportSecurityRoles = data;
+			for (var i=0; i<$scope.reportSecurityRoles.length;i++) {
+				$scope.reportSecurityRoles[i]["accessAllowed"] = !$scope.reportSecurityRoles[i]["readOnly"];
+				$scope.reportSecurityRoles[i].runAccess = true; // need to check why 1702 version is making it true always
+			}
+
 			raptorReportFactory.icrementSecurityLoadingCounter();
 			if(raptorReportFactory.checkSecurityLoadingCounter()){$scope.showLoader = false;};			
-    	},function(error){
-    		$log.error("raptorReportFactory: reportSecurityRoles failed."); 
-    		});     	
-    }
-    
-    
-    $scope.renderStep = function(stepNum){
-    	var containerElement = angular.element(document.getElementById("stepView"));
-        containerElement.empty();
-        $scope.stepNum = stepNum;
-        var jsonSrcName = getJsonSrcName(stepNum);
-        stepFormFactory.renderForm(jsonSrcName, containerElement, $scope);
-    }
-
-    $scope.toggleUserEditAccessActive = function(rowData) {
-		   var modalInstance = $modal.open({
-				 scope: $scope,
-				 animation: $scope.animationsEnabled,
-				 templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-user-role-confirm-toggle.html',
-				 sizeClass: 'modal-small',
-				 controller: ['$scope', '$modalInstance', '$http', '$log','raptorReportFactory','rowData', function ($scope, $modalInstance, $http, $log, raptorReportFactory, rowData) {
-					$scope.rowData = rowData;
-					$scope.toggleEditAccessStatus = function(rowData) {
-						raptorReportFactory.toggleUserEditAccess(rowData);
-				        $modalInstance.close();
-					};
-					 
-					$scope.cancelEditAccessToggle = function(rowData) {
-						rowData.accessAllowed = ! rowData.accessAllowed;
-						$modalInstance.dismiss('cancel');}
-			    }],
-				resolve:{
-					rowData: function(){
-		   			return rowData;
-					}
-				 }
-			  });
-		      modalInstance.result.then(function () {
-		    	  
-		      }, function () {
-		      });		
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: reportSecurityRoles failed."); 
+		});     	
 	}
-    
-    $scope.toggleRoleEditAccessActive = function(rowData) {
-		   var modalInstance = $modal.open({
-				 scope: $scope,
-				 animation: $scope.animationsEnabled,
-				 templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-user-role-confirm-toggle.html',
-				 sizeClass: 'modal-small',
-				 controller: ['$scope', '$modalInstance', '$http', '$log','raptorReportFactory','rowData', function ($scope, $modalInstance, $http, $log, raptorReportFactory, rowData) {
-					$scope.rowData = rowData;
-					$scope.toggleEditAccessStatus = function(rowData) {
-						raptorReportFactory.toggleRoleEditAccess(rowData); 
-				        $modalInstance.close();
-					};
-					 
-					$scope.cancelEditAccessToggle = function(rowData) {
-						rowData.accessAllowed = ! rowData.accessAllowed;
-						$modalInstance.dismiss('cancel');}
-			    }],
-				resolve:{
-					rowData: function(){
-		   			return rowData;
-					}
-				 }
-			  });
-		      modalInstance.result.then(function () {
-		    	  
-		      }, function () {
-		      });		
+	$scope.addReportSecurityUser = function(userId) {	
+		$scope.showLoader=true; 
+		raptorReportFactory.addReportSecurityUser(userId).then(function(data){
+			$scope.loadSecurityPage();
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: addReportSecurityUser failed.");
+		}).finally(function() {
+			$scope.showLoader=false; 
+		});
 	}
-    
-    
-    
-    
-    
-	// initialize the page at step 1;
-    $scope.renderStep(1);
-    
-	// create a message to display in our view
-	$scope.allProjects = [];
-	if(!$routeParams.step && $routeParams.step == "") $routeParams.step = 1;
-	if($routeParams.proj && $routeParams.proj > 0) 
-		$scope.projid  = $routeParams.proj;
-	if($routeParams.step)
-		$scope.stepNum = $routeParams.step;
-	else
-		$scope.stepNum = 1;	
-
-    $scope.jsonSrcName = getJsonSrcName($scope.stepNum);
-    
-    $scope.selectAction = function () {
-      var containerElement = angular.element(document.getElementById("stepView"));
-      containerElement.empty();
-      $scope.project_name = this.prj.projectName;
-      $scope.stepNum = 1;
-      var stepNum = $scope.stepNum;      
-      var jsonSrcName = 	getJsonSrcName(stepNum);
-      stepFormFactory.renderForm(jsonSrcName, containerElement, $scope);
-      renderProject(this.prj.id, 1);
-    };
-
-    
-    $scope.createAction = function () {
-      var containerElement = angular.element(document.getElementById("stepView"));
-      containerElement.empty();
-      $scope.stepNum = 1;
-      var stepNum = $scope.stepNum;
-      $scope.jsonSrcName = "app/fusion/scripts/DS2-view-models/ds2-reports/wz_steps/json/step"+$scope.stepNum +".json";
-        var jsonSrcName = $scope.jsonSrcName;
-      stepFormFactory.renderForm(jsonSrcName, containerElement, $scope);
-    };
 
-    // select current project
-    renderProject = function (proj_id, stepNum) {
-        var userSelectedPrjId = proj_id;
-    	$http({
-            method: 'GET',
-            url: 'get_selected_project_data',   
-            params:{'selectedPrjId':userSelectedPrjId, 'step': stepNum}
-    		}).then(function successCallback(response) {
-           	 var selectedproject = response.data;
-           	$scope.projid  = userSelectedPrjId;
-             //$scope.allProjects = projectLists; 
-             //$location.path('/'+userSelectedPrjId+'/'+stepNum);
-             var div = d3.select("#stepView");
-             div.select("[name='proj_id']").text(userSelectedPrjId);
-             div.select("[name='proj_id']").property("value", userSelectedPrjId);
-             d3.select("[name='project_id']").property("value", userSelectedPrjId);
-             var h3Text = div.select("h3").text();
-             div.select("h3").text($scope.project_name+ " - " + h3Text);
-             for (var key in selectedproject) {
-            	  if (selectedproject.hasOwnProperty(key)) {
-            	    var val = selectedproject[key];
-            	    var formElement = d3.selectAll("[name='" + key +  "']");            	    
-            	    if(formElement[0].length > 0)
-            	     console.log(formElement.attr("type"));
-            	    if(formElement[0].length > 0 && formElement.attr("type") === "radio") {
-            	    	var formRadio = d3.selectAll("[id='" + key +"_"+val +  "']");
-            	    	formRadio.property('checked', true);
-            	    }
-            	    if(formElement[0].length > 0 && formElement.property("type") === "textarea") {
-            	    	div.select("textarea[name='" + key +"']").property('value', val);
-            	    }
-            	    if(formElement[0].length > 0 && formElement.attr("type") === "text") {
-            	    	var formText = d3.selectAll("[name='" + key +  "']");
-            	    	formText.property("value", val);            	    	
-            	    }
-            	    if(formElement[0].length > 0 && formElement.html().startsWith("<option")) {
-            	    	var formSelect = d3.selectAll("[name='" + key + "']");
-            	    	
-            	    	var checkOption = function (e) {
-            	    	    if(e.label === val){
-            	    	        return formSelect.property("selectedIndex", e.index );
-            	    	    }
-            	    	};
+	$scope.removeReportSecurityUser = function(securityUser) {
+		var modalInstance = $modal.open({
+			scope: $scope,
+			animation: $scope.animationsEnabled,
+			templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-security-user-del-confirm.html',
+			sizeClass: 'modal-small',
+			controller: removeReportSecurityUserController,
+			resolve:{
+				securityUser: function(){
+					return securityUser;
+				}
+			}
+		});
+		modalInstance.result.then(function () {
+			$scope.loadSecurityPage();
+		}, function () {
+		});
+	};	
+	$scope.addReportSecurityRole = function(roleId) {	
+		raptorReportFactory.addReportSecurityRole(roleId).then(function(data){
+			$scope.loadSecurityPage();
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: addReportSecurityRole failed.");
+		});	
+	}	
 
-            	    	formSelect.selectAll("option").forEach(function(d) {d.forEach(function(optionD) {checkOption(optionD); }) });
-            	    }
-            	    	 
-            	    if(formElement[0].length == 0) {
-            	    	if(key != 'step') {
-                            if( Object.prototype.toString.call( val ) === '[object Array]' ) {
-                    	    	val.forEach(function(d){
-                    	    		for (var keyCheck in d) {
-                    	    			if (d.hasOwnProperty(keyCheck)) {
-                    	    				var valCheck = d[keyCheck];
-                    	    				var formCheck = d3.selectAll("[name='" + key + "_"+keyCheck + "']");
-                    	    				if(valCheck === true)
-                    	    				formCheck.property('checked', true);
-                    	    			}
-                    	    		}
-                    	    	});
-                           }
-            	    	}
-            	    	var formElementOther = d3.selectAll("[name='" + key + "_"+ val + "']");
-            	    	if(formElementOther[0].length > 0 && formElementOther.attr("type") === "checkbox") {
-            	    		var formCheckbox = d3.selectAll("[name='" + key +"_"+val +  "']");
-                	    	formRadio.property('checked', true);
-            	    	}
-            	    }
-            	  }
-            	}
-             
-             
-             
-    	});
-    }
-        
-  //submit function
-    $scope.submit = function(){
-        let defer = $q.defer();
-      
-      	var div = d3.select("#stepView");
-        var jsonSrcName = $scope.jsonSrcName;
-        var stepNum = $scope.stepNum;
-    	var values = "";
-    	 $http({
-             method: 'GET',
-             url: jsonSrcName
-             }).then(function successCallback(response) {
-            	 var json = response.data;
-            	 var step = json.step;
-            	 if(step > 0) {
-            		 var sections = json.content.sections;            		 
-                     sections.forEach(function(d, i) {
-                    	 var elements = d.elements;
-                    	 if(elements) {
-                             //elements.forEach(function(element, elementIndex) {
-                    		 values += "{";
-                    		 values += "\"step\""+ ":\"" + step + "\",";
-                    		 values += "\"proj_id\""+ ":\"" + d3.select('input[name="project_id"]').property("value") + "\",";
-                    		 
-                    		 for (elementIndex = 0; elementIndex < elements.length; elementIndex++) {
-                    			 var element = elements[elementIndex];
-                            	 
-                            	 if(elementIndex > 0) values += ",";  
-                            	 values += "\""+element.name +"\""+ ":" ;
-                            	 if(element.input === "hidden") {
-                            		  values += "\""+div.select('input[name="'+element.name+'"]').property("value") +"\"";
-                            	 }
-                            	 if(element.input === "radio") {
-                            		 values += "\""+ div.select('input[name="'+element.name+'"]:checked').property("value") +"\"";                            		 
-                            	 }
-                            	 if(element.input === "checkbox") {
-                            		 var checkOptions = element.options;
-                            		 values += "[{";
-                            		 checkOptions.forEach(function(d, i) {
-                                       // if(document.getElementById("'"+element.name+"_"+d.id+"'") != null)
-                                		  values += "\""+d.id+"\""+ ":" + div.select('input[name="'+element.name+"_"+d.id+'"]').property("checked") ;
-                                		  if(i<checkOptions.length-1) {
-                                			  values +=  ",";
-                                		  }
-                            		 })
-                            		 values += "}]";
-                            	 }
-                            	 if(element.input === "text") {
-                            		 values += "\""+div.select('input[name="'+element.name+'"]').property("value") +"\"";
-                            	 }                            	 
-                            	 if(element.input === "textarea") {
-                            		 values += "\""+div.select('textarea[name="'+element.name+'"]').node().value +"\"";
-                            	 }                            	 
-                            	 if(element.input === "select") {
-                            		 values += "\""+ div.select('select[name="'+element.name+'"]').property("value") + "\"";
-                            	 } 
-                            	 
-                             };
-                             values += "}";
-                    	 }
-                     });
-            	 }
-        		 var valueJSON = JSON.parse(values);
-        		 var valueStr = JSON.stringify(valueJSON, null, 4);
-            	 $http({method:'POST', url:'save_steps', data: jsonSrcName, params:{'result' : valueStr, 'proj_id' : values.proj_id}}).success(function(data, status) {
-                    if(data.project_name)
-                        $scope.project_name = data.project_name;
-       	            div.select("[name='proj_id']").property("value", data.proj_id);
-       	            d3.select("[name='project_id']").property("value", data.proj_id);
-       	            //$scope.projid = data.proj_id;
-       	            valueStr=JSON.stringify(data, null, 4);
-                    defer.resolve();
-                    //stepNum = Number(stepNum || 0)+1;
-       	            //document.getElementById('itestframe').src = data;
-       	       
-       	    	}) 
+	
+	$scope.removeReportSecurityRole = function(securityRole) {
+		var modalInstance = $modal.open({
+			scope: $scope,
+			animation: $scope.animationsEnabled,
+			templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-security-role-del-confirm.html',
+			sizeClass: 'modal-small',
+			controller: removeReportSecurityRoleController,
+			resolve:{
+				securityRole: function(){
+					return securityRole;
+				}
+			}
+		});
+		modalInstance.result.then(function () {
+			$scope.loadSecurityPage();
+		}, function () {
+		});
+	}			
 
-                defer.resolve();           	 
-            	 
-             });
-       // $location.path('/step'+($scope.stepNum+1));
-        return defer.promise;
-    
-    };
-    
-    //Save function
-    $scope.save = function() {
-	 	if ($scope.stepNum ==1) {	 		
-	 		updateDefinitionData();
-	 	} else if($scope.stepNum ==5) {
-	 		$scope.saveReportSecurityInfo($scope.reportOwnerId.id,$scope.reportSecurityInfo.isPublic);
-	 	}
+	$scope.saveReportSecurityInfo = function() {
+		$scope.showLoader = true;
+		var securityInfo = {'userId':$scope.reportSecurityInfo.ownerId+"",'isPublic':$scope.reportSecurityInfo.isPublic};
+		raptorReportFactory.updateReportSecurityInfo(securityInfo).then(function(data){
+			$scope.successPopUp('');
+			$scope.loadSecurityPage();
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: updateReportSecurityInfo failed.");
+		});	
 	};
-
-    //Next function
-    $scope.next = function(){
-	 	if ($scope.stepNum ==1) {	 		
-	 		if ($scope.reportName==="") {
-	 			$scope.throwReportNameMissingError();
-	 			return;
-	 		}
-	 		updateDefinitionData();
-	 	}
-    	$scope.stepNum = $scope.stepNum +1;
-    	$scope.activeTabsId = $scope.gTabs[$scope.stepNum-1].id;
-    };   
-
-    //Previous function
-    $scope.previous = function(){
-    	$scope.stepNum = $scope.stepNum -1;
-    	$scope.activeTabsId = $scope.gTabs[$scope.stepNum-1].id;
-    	
-    };
-
-	$scope.$on('RefreshInsession', function(event) {
-		$scope.isEdit = true;
-		$scope.reportId = -1;				
-		$scope.getDefinitionById(-1);
-	});
 	
-	    $scope.$on('openDrillDownpage', function(event, reportId) {
-    	if (reportId!="") {
-				$scope.openDrillDownReportPopup(reportId,$scope.reportId);
-    	}
-	});
+	$scope.toggleUserEditAccessActive = function(rowData) {
+		var modalInstance = $modal.open({
+			scope: $scope,
+			animation: $scope.animationsEnabled,
+			templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-user-role-confirm-toggle.html',
+			sizeClass: 'modal-small',
+			controller: toggleUserEditAccessActiveController,
+			resolve:{
+				rowData: function(){
+					return rowData;
+				}
+			}
+		});	
+	}
 
-    
-	$scope.$on('RefreshFormField', function(event) {
-		raptorReportFactory.getFormFieldList().then(function(data){
-			$scope.formFieldData = data;
+	$scope.toggleRoleEditAccessActive = function(rowData) {
+		var modalInstance = $modal.open({
+			scope: $scope,
+			animation: $scope.animationsEnabled,
+			templateUrl: 'app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-user-role-confirm-toggle.html',
+			sizeClass: 'modal-small',
+			controller: toggleRoleEditAccessActiveController,
+			resolve:{
+				rowData: function(){
+					return rowData;
+				}
+			}
+		});
+	}
+	
+	/*******************Step5 End****************/
+	/*******************Step6 Starts****************/
+	$scope.logs = [];
+	$scope.getReportID = function(){
+		$scope.showLoader = true;
+		raptorReportFactory.getReportLogs($routeParams.reportId).then(function(data){
+			$scope.logs = data;
+			$scope.showLoader = false;
+			
 		},function(error){
-			$log.error("raptorReportFactory: get formfields failed.");  
-			});
-	});
-
-	$scope.$on('RefreshColumnList', function(event) {
-		raptorReportFactory.getColumnList().then(function(data){
-			$scope.colTableRowData = data;
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: getReportID failed."+ error);  
+		});
+	}
+			
+	
+	/*******************Step6 End****************/
+	/*******************Step7 Starts Run****************/
+	$scope.loadDefinitionInSession = function(){
+		$scope.showLoader = true;
+		raptorReportFactory.getDefinitionInSession().then(function(data){
+			$scope.reportId = data.reportId;
+			$scope.showLoader = false;
 		},function(error){
-			$log.error("raptorReportFactory: get column list failed.");           
-		});		
-	});
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: getDefinitionInSession failed."); 
+			$scope.showLoader = false;
+		});
+	}
+	$scope.runReport = function(){
+		$window.location.href = "#/report_run/c_master="+$scope.reportId+"&refresh=Y";
+	}
+	/*******************Step7 End****************/
 	
-    $scope.getAllProjects = function(){
-    	$http({
-            method: 'GET',
-            url: 'get_projects'   
-            }).then(function successCallback(response) {
-           	 var projectLists = response.data;
-             $scope.allProjects = projectLists; 
-         });
-    }
-
-    // getAllProjects();
-
+	/********************Init*************/
+	$scope.init = function(){
+		if ($routeParams.reportMode=="copy") {
+			raptorReportFactory.copyReportById($routeParams.reportId).then(function(data){
+				$scope.isEdit = true;
+				$scope.reportId = -1;				
+				$scope.getDefinitionById(-1);
+			},function(error){
+				$log.error("raptorReportFactory: deleteFormFieldById failed.");
+			});										 			
+		} /*else if ($routeParams.reportMode=="import") {
+			$scope.$emit('RefreshInsession');
+		}*/
+		
+		
+		if($scope.activeTabsId=='definition'){ /*Step 1*/
+			$scope.constructureDefDropDown();		
+			if($scope.isEdit)
+				$scope.getDefinitionById($scope.reportIdURL); //edit
+			else
+				$scope.getDefinitionById(-1); //create
+		}else if($scope.activeTabsId=='sql'){ /*Step 2*/
+			$scope.getSql();
+		}else if($scope.activeTabsId=='columns'){
+			$scope.getColumn();
+		}else if($scope.activeTabsId=='formFields'){
+			$scope.getFormFieldList();
+		}else if($scope.activeTabsId=='security'){
+			$scope.loadSecurityPage();
+		}else if($scope.activeTabsId=='log'){
+			$scope.getReportID();
+		}else if($scope.activeTabsId=='run'){
+			$scope.reportId = $scope.reportIdURL;
+			if($scope.reportId==null || $scope.reportId=='')
+				$scope.loadDefinitionInSession();
+		}
+	}
+	
+	$scope.successPopUp = function (msg) {
+    	var modalInstance = $modal.open({
+			templateUrl: 'app/fusion/scripts/DS2-modal/success_modal.html',
+			controller: ModalInstanceCtrl,
+			sizeClass: 'modal-small',
+			resolve: {
+				msg: function () {
+					var message = {
+						title:    '',
+                   		text:     msg
+	                };
+					return message;			        	
+                }
+	        }
+		});
+    };
+    
+    $scope.errorPopUp = function (msg) {
+    	var modalInstance = $modal.open({
+			templateUrl: 'app/fusion/scripts/DS2-modal/error_modal.html',
+			controller: ModalInstanceCtrl,
+			sizeClass: 'modal-small',
+			resolve: {
+				msg: function () {
+					return msg;			        	
+                }
+	        }
+		});
+    };
+    
+	$scope.init();
 });
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-services/ds2-raptor-report/raptorReportFactory.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-services/ds2-raptor-report/raptorReportFactory.js
index 83c051db..37845a60 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-services/ds2-raptor-report/raptorReportFactory.js
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-services/ds2-raptor-report/raptorReportFactory.js
@@ -175,6 +175,38 @@ appDS2.factory('raptorReportFactory', function($http, $q) {
 				return $q.reject("raptorReportFactory: getDrillDownReportList callback failed");				
 			});
 		},
+		getTotalColList: function() {
+			return $http({
+				method: "GET",
+                url: "report/wizard/list_drilldown_reports",
+			}).then(function(response) {
+				if (typeof response.data === 'object') {
+					return response.data;
+				} else {
+					return $q.reject("raptorReportFactory: getDrillDownReportList did not return a valid JSON object.");
+				}
+				return response.data;
+			}, function(response) {
+				// something went wrong
+				return $q.reject("raptorReportFactory: getDrillDownReportList callback failed");				
+			});
+		},
+		getTotalForTheColList : function(){
+			return $http({
+				method: "GET",
+                url: "report/wizard/retrieveTotalForTheColList",
+			}).then(function(response) {
+				if (typeof response.data === 'object') {
+					return response.data;
+				} else {
+					return $q.reject("raptorReportFactory: retrieveTotalForTheColList did not return a valid JSON object.");
+				}
+				return response.data;
+			}, function(response) {
+				// something went wrong
+				return $q.reject("raptorReportFactory: retrieveTotalForTheColList callback failed");				
+			});
+		},
 		getChildReportFormField: function(reportId) {
 			return $http({
 				method: "GET",
@@ -285,6 +317,23 @@ appDS2.factory('raptorReportFactory', function($http, $q) {
 				return $q.reject("raptorReportFactory: saveFormFieldEditInfo callback failed");
 			});			
 		},
+		addFormFieldEditInfo: function(addFormFieldJson){
+			return $http({
+				method: "POST",
+                url: "report/wizard/add_formfield_tab_data",
+                data: addFormFieldJson
+			}).then(function(response) {
+				if (typeof response.data === 'object') {
+					return response.data;
+				} else {
+					return $q.reject("raptorReportFactory: saveFormFieldEditInfo did not return a valid JSON object.");
+				}
+			}, function(response) {
+				// something went wrong
+				return $q.reject("raptorReportFactory: saveFormFieldEditInfo callback failed");
+			});			
+		},
+		
 		getFormFieldList: function() {
 			return $http({
 				method: "GET",
@@ -546,6 +595,21 @@ appDS2.factory('raptorReportFactory', function($http, $q) {
 					return $q.reject("raptorReportFactory: updateReportSecurityInfo callback failed");
 				});
 			},
+			getReportLogs: function(reportId) {
+				return $http({
+					method: "GET",
+	                url: "report/wizard/get_report_log/"+reportId
+				}).then(function(response) {
+					if (typeof response.data === 'object') {
+						return response.data;
+					} else {
+						return $q.reject("raptorReportFactory: getReportLogs did not return a valid JSON object.");
+					}
+				}, function(response) {
+					// something went wrong
+					return $q.reject("raptorReportFactory: getReportLogs callback failed");
+				});
+			},
 
 			toggleUserEditAccess: function(reportUser) {
 				var readOnly = reportUser.accessAllowed?"N":"Y"; 
@@ -590,6 +654,21 @@ appDS2.factory('raptorReportFactory', function($http, $q) {
 			},
 			checkSecurityLoadingCounter: function() {
 				return (this.securityPageApiCounter ==this.securityPageApiTotalCount);
+			},
+			getDrillDownParamDef: function(param) {
+				return $http({
+					method: "GET",
+	                url: "report/wizard/drill_down_param/"+param
+				}).then(function(response) {
+					if (typeof response.data === 'object') {
+						return response.data;
+					} else {
+						return $q.reject("raptorReportFactory: getDrillDownParamDef did not return a valid JSON object.");
+					}
+				}, function(response) {
+					// something went wrong
+					return $q.reject("raptorReportFactory: getDrillDownParamDef callback failed");
+				});
 			}
 	};
 });
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-services/ds2-raptor-report/reportModalControllers.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-services/ds2-raptor-report/reportModalControllers.js
new file mode 100644
index 00000000..2b59c578
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-services/ds2-raptor-report/reportModalControllers.js
@@ -0,0 +1,423 @@
+var ModalInstanceCtrl = function ($scope, $modalInstance, msg,$rootScope) {
+	$scope.msg=msg;
+}
+
+var testRunSqlController = function ($scope, $modalInstance, $http, $log, raptorReportFactory, queriedData) {
+	var init = function() {
+		$scope.isError = false;
+		if (queriedData.errormessage) {
+			$scope.isError = true;
+			$scope.errormessage = queriedData.errormessage;
+			$scope.stacktrace = queriedData.stacktrace;
+		} else {
+			$scope.queryData = queriedData;
+		}
+	}
+	init();	 		
+	$scope.close = function() {
+		$modalInstance.dismiss();
+	};
+}
+
+var openColumnPopupController = function ($scope, $modalInstance, $http, $log, raptorReportFactory, colData, $routeParams) {
+	$scope.processingData=true;
+	$scope.colInfo={};
+	$scope.drilldownReports={};
+	$scope.isEditCol = true;
+	var init = function() {		
+		$scope.displayAlignmentOptions = [
+			{value:"null", text:""},							 
+			{value:"Left", text:"Left"},
+			{value:"Center", text:"Center"},
+			{value:"Right", text:"Right"}
+		];
+		$scope.dataTypeOptions = [
+			{value:"Number", text:"Number"},							 
+			{value:"Date", text:"Date"},
+			{value:"VARCHAR2", text:"Character"},
+			{value:"Hyperlink", text:"Hyperlink"}
+		];
+		
+		$scope.multiGroupColLevel = [
+			{value:"1", text:"1"},
+			{value:"2", text:"2"},
+			{value:"3", text:"3"},
+			{value:"4", text:"4"}
+		];
+		$scope.indentValues = [
+			{value:"1", text:"1"},
+			{value:"2", text:"2"},
+			{value:"3", text:"3"},
+		];
+	}
+	
+	$scope.totalForTheColList= [];
+	raptorReportFactory.getTotalForTheColList().then(function(data){
+		$scope.totalForTheColList = data;
+	},function(error){
+		$scope.errorPopUp(error);
+		$log.error("raptorReportFactory: retrieveTotalForTheColList failed.");
+	}); 	
+	
+	raptorReportFactory.getDrillDownReportList().then(function(data2){
+		$scope.drilldownReports = data2;
+		raptorReportFactory.getColumnEditInfoById(colData.id).then(function(data){
+			$scope.colInfo = data;
+			if($scope.colInfo.noWrap!=null && ($scope.colInfo.noWrap=='Y' || $scope.colInfo.noWrap==true))
+				$scope.colInfo.noWrap=true;
+			else
+				$scope.colInfo.noWrap=false;
+			$scope.processingData=false;
+			init();
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: getColumnEditInfoById failed.");
+		}); 	
+	},function(error){
+		$scope.errorPopUp(error);
+		$log.error("raptorReportFactory: getDrillDownReportList failed.");
+	});
+	
+	$scope.massageData = function(){
+		if(!Number.isInteger($scope.colInfo.level))
+			$scope.colInfo.level = null;
+		if(!Number.isInteger($scope.colInfo.indentation))
+			$scope.colInfo.indentation = null;
+	}
+						 
+	$scope.save = function() {
+		$scope.processingData=true;
+		$scope.colInfo.noWrap=($scope.colInfo.noWrap==true)?'Y':'N';	
+		if($scope.colInfo.level && $scope.colInfo.level.startsWith("Select"))
+			$scope.colInfo.level = null;
+		if($scope.colInfo.displayTotal && $scope.colInfo.displayTotal.startsWith("Select"))
+			$scope.colInfo.displayTotal = null;
+			
+		if($scope.colInfo.indentation && $scope.colInfo.indentation.startsWith("Select"))
+			$scope.colInfo.indentation = null;
+		raptorReportFactory.saveColumnEditInfo($scope.colInfo).then(function(data){
+			$scope.successPopUp('');
+			$scope.processingData=false;
+			$modalInstance.close();																	
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: save failed.");
+			$scope.processingData=false;
+		}); 						 
+	};					
+
+	$scope.cancel = function() {
+		$modalInstance.dismiss();
+	};
+	
+	
+	/****Drill***/
+	$scope.drilDownValues=[];			
+	$scope.childReportFF =[];
+	$scope.childReportCol = [];
+	$scope.complete = function() {		
+		var drillDownParams='';
+		var ampStr = "&";
+		var count =0;
+		for(var i in $scope.selectedDrillReportFormField){	
+			var selectedRadio = $scope.selectedDrillReportFormField[i];
+			if( selectedRadio != (i+'-0')){// if it's not 'No Value' 
+				if (typeof($scope.drillDownParams[i].fieldName) == "undefined"){	
+					if(i>=($scope.drilDownFormField.length-1)){
+						var id = $scope.drilDownFormField[i].id;
+						drillDownParams+= id+"=";
+					}		
+				}else
+					drillDownParams+=$scope.drillDownParams[i].fieldName+"=";
+				if( selectedRadio == (i+'-1')){//'Fixed Value'	
+					drillDownParams+= $scope.drillDownParams[i].valValue+ampStr;
+				}else if( selectedRadio == (i+'-2')){//'Value of Column'
+					drillDownParams+= ('['+$scope.drillDownParams[i].valColId+']'+ampStr);
+				}else if( selectedRadio == (i+'-3')){//'Value of form field'
+					drillDownParams+= ('[!'+$scope.drillDownParams[i].valFieldId+']'+ampStr);
+				}else if( selectedRadio == (i+'-4')){//'Value set'
+					if($scope.drillDownParams[i].valColId!='' && $scope.drillDownParams[i].valFieldId!='' && $scope.drillDownParams[i].valColId!='Select' && $scope.drillDownParams[i].valFieldId!='Select')	
+						drillDownParams+= ('['+$scope.drillDownParams[i].valColId+'!'+$scope.drillDownParams[i].valFieldId+']'+ampStr);						
+				}
+			}
+		}
+		drillDownParams = drillDownParams.substring(0, drillDownParams.length - 1);
+		$scope.colInfo.drilldownParams = drillDownParams;
+		$scope.isEditCol=true;
+	};
+	$scope.selectedDrillReportFormField = [];
+	$scope.drillDownParams = {};
+	$scope.getDrillReportFormField = function(ddReportId,param){
+		$scope.isEditCol = false;
+		$scope.processingData = true;
+		
+		raptorReportFactory.getChildReportFormField(ddReportId).then(function(data){				    		
+			$scope.drilDownFormField = data;
+			for(var i in data){
+				var array = [
+					{selection: 'No Value', value:'Accept Default', radioGroup :i+'-'+'0'},
+					{selection: 'Fixed Value', value:'Accept Default' , radioGroup :i+'-'+'1'},
+					{selection: 'Value of Column', value:'Accept Default', radioGroup :i+'-'+'2'},
+					{selection: 'Value of form field', value:'Accept Default', radioGroup :i+'-'+'3'},
+					{selection: 'Value set', value:'Pass the value of the selected column if not empty, otherwise pass the value of the selected form field', radioGroup :i+'-'+'4'}
+				]
+				$scope.drilDownValues.push(array);
+			}
+			
+			if(param!=''){
+				raptorReportFactory.getDrillDownParamDef(param).then(function(dataDD){				
+					var temp = $scope.drilDownFormField;
+					$scope.drillDownParams = [];
+					for(var i in $scope.drilDownFormField){
+						$scope.selectedDrillReportFormField[i] = i+'-0';
+						var tmp = {
+								fieldName: $scope.drilDownFormField[i].id,
+								valColId:'',
+								ValFieldId:'',
+								valType:'',
+								valValue:''
+						};
+						$scope.drillDownParams.push(tmp);
+					}
+					for(var i in $scope.drilDownFormField){
+						for(var j in dataDD){
+							if($scope.drilDownFormField[i].id == dataDD[j].fieldName){
+								$scope.selectedDrillReportFormField[i] = i+'-'+dataDD[j].valType;	
+								$scope.drillDownParams[i] = dataDD[j];
+							}		
+						}
+					}
+				},function(error){
+					$scope.errorPopUp(error);
+					$log.error("raptorReportFactory: getChildReportFormField failed.");  
+				}).finally(function() {
+					$scope.processingData=false;
+				});	
+			}else{
+				$scope.processingData = false;
+			}
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: getChildReportFormField failed.");  
+		});
+
+		raptorReportFactory.getChildReportFormField($scope.colInfo.drilldownURL).then(function(data){
+			$scope.childReportFF =data;
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: getChildReportFormField failed.");  
+		});	
+		
+		raptorReportFactory.getChildReportColumn($routeParams.reportId).then(function(data){
+			$scope.childReportCol =data;
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: getChildReportFormField failed.");  
+		});
+	}			    	
+}
+
+
+var openFormFieldPopupController = function ($scope, $modalInstance, $http, $log, raptorReportFactory, fieldData) {
+	$scope.formFieldEditData = {};
+	$scope.sqlAsDefaultValue ={
+			value:false
+	};
+	$scope.predefinedValues ={
+			value:''
+	};
+	var init = function() {
+		if($scope.type=='edit'){
+			$scope.dataProcessing = true;
+			raptorReportFactory.getFormFieldEditInfoById(fieldData.id).then(function(data){
+				$scope.dataProcessing = false;
+				$scope.formFieldEditData = data;
+				if($scope.formFieldEditData.fieldDefaultSQL)
+					$scope.sqlAsDefaultValue.value = true;
+			},function(error){
+				$scope.errorPopUp(error);
+				$log.error("raptorReportFactory: getColumnEditInfoById failed.");
+			}).finally(function() {
+				$scope.dataProcessing=false; 
+			});			
+		}else{
+			$scope.formFieldEditData ={
+				groupFormField: false,
+				visible:"true"
+			};
+		}		 						
+		$scope.ynOptions = [
+			{value:"true", text:"Yes"},
+			{value:"false", text:"No"}							 
+			];
+		$scope.verifyFieldValueOptions = [
+			{value:null, text:"--- Do Not Perform Validation ---"},
+			{value:"DATE", text:"Date"},
+			{value:"TIMESTAMP_HR", text:"TimeStamp (Hour)"},
+			{value:"TIMESTAMP_MIN", text:"TimeStamp (Hour,Min)"},
+			{value:"TIMESTAMP_SEC", text:"TimeStamp (Hour,Min,Sec)"},
+			{value:"INTEGER", text:"Integer"},
+			{value:"POSITIVE_INTEGER", text:"Positive Integer"},
+			{value:"NON_NEGATIVE_INTEGER", text:"Positive Integer. Cannot Be Zero"},
+			{value:"FLOAT", text:"Any Number"},
+			{value:"NON_NEGATIVE_FLOAT", text:"Positive Number"},
+			{value:"POSITIVE_FLOAT", text:"Positive Number. Cannot Be Zero"}
+			]
+		$scope.fieldTypeOptions = [
+			{value:"TEXT", text:"Text Box"},
+			{value:"LIST_BOX", text:"List Box"},
+			{value:"LIST_MULTI_SELECT", text:"Multi-select List Box"},
+			{value:"HIDDEN", text:"Hidden"}						 							 						 
+			];
+	}
+	init();
+	$scope.save = function() {
+		if($scope.sqlAsDefaultValue.value && ($scope.formFieldEditData.fieldDefaultSQL==null || $scope.formFieldEditData.fieldDefaultSQL=='')){
+			$scope.errorPopUp("if SQL as Default Value is checked, 'Default SQL' and 'SQL Generating Custom List of Values' fields cannot be empty");
+			return;
+		}else if(!$scope.sqlAsDefaultValue.value){
+			$scope.formFieldEditData.fieldDefaultSQL=null;
+		}
+		$scope.dataProcessing = true;
+		console.log($scope.formFieldEditData.validationType);
+		if($scope.formFieldEditData.validationType=='Select')
+			$scope.formFieldEditData.validationType = '';
+		raptorReportFactory.saveFormFieldEditInfo($scope.formFieldEditData).then(function(data){
+			$scope.dataProcessing = false;
+			$scope.successPopUp('');
+			$modalInstance.close();	
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: saveFormFieldEditInfo failed.");
+		}).finally(function() {
+			$scope.dataProcessing=false; 
+		});		      	  
+	};
+	
+	$scope.add = function() {
+		$scope.dataProcessing = true;
+		$scope.formFieldEditData.visible==
+		raptorReportFactory.addFormFieldEditInfo($scope.formFieldEditData).then(function(data){
+			$scope.dataProcessing = false;
+			$modalInstance.close();	
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: add FormFieldEditInfo failed.");
+		}).finally(function() {
+			$scope.dataProcessing=false; 
+		});
+	};
+	
+	$scope.addPredefinedValueList = function() {
+		if($scope.formFieldEditData.predefinedValueList==null)
+			$scope.formFieldEditData.predefinedValueList=[];
+		var item ={
+				id:$scope.predefinedValues.value,
+				name:$scope.predefinedValues.value,
+				selected:false
+		};
+		if($scope.predefinedValues.value!=null && $scope.predefinedValues.value!='')
+			$scope.formFieldEditData.predefinedValueList.push(item);
+	};
+	
+	$scope.removePredefinedValueList = function(removeVal) {
+		var removeIndex = null;
+		for(i in $scope.formFieldEditData.predefinedValueList){
+			if($scope.formFieldEditData.predefinedValueList[i].id == removeVal){
+				removeIndex= i;
+				break;
+			}
+		}
+		$scope.formFieldEditData.predefinedValueList.splice(removeIndex, 1)
+	};
+
+	$scope.cancel = function() {
+		$modalInstance.dismiss();
+	};
+}
+
+
+var deleteFormFieldController = function ($scope, $modalInstance, $http, $log, raptorReportFactory, rowData) {
+	$scope.tempFieldId = rowData.id;
+	$scope.ok = function() {
+		raptorReportFactory.deleteFormFieldById(rowData.id).then(function(data){
+			$modalInstance.close();																									
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: deleteFormFieldById failed.");
+		});										 
+	}					 
+	$scope.cancel = function() {
+		$modalInstance.dismiss();
+	};
+}
+
+var removeReportSecurityUserController = function ($scope, $modalInstance, $http, $log, raptorReportFactory,securityUser) {					 
+	$scope.securityUserName = securityUser.name;
+	$scope.ok = function() {
+		raptorReportFactory.removeReportSecurityUser(securityUser.id).then(function(data){
+			$modalInstance.close();		
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: removeReportSecurityUser failed.");
+		});							 
+	}					 
+	$scope.cancel = function() {
+		$modalInstance.dismiss();
+	};
+}
+
+var removeReportSecurityRoleController = function ($scope, $modalInstance, $http, $log, raptorReportFactory,securityRole) {					 
+	$scope.securityRoleName = securityRole.name;
+	$scope.ok = function() {
+		raptorReportFactory.removeReportSecurityRole(securityRole.id).then(function(data){
+			$modalInstance.close();		
+		},function(error){
+			$scope.errorPopUp(error);
+			$log.error("raptorReportFactory: removeReportSecurityRole failed.");
+		});	
+	}					 
+	$scope.cancel = function() {
+		$modalInstance.dismiss();
+	};
+}
+
+var formFieldVerifySQLController = function ($scope, $modalInstance, $http, $log, raptorReportFactory, queriedData) {
+	var init = function() {
+		$scope.isError = false;
+		if (queriedData.errormessage) {
+			$scope.isError = true;
+			$scope.errormessage = queriedData.errormessage;
+			$scope.stacktrace = queriedData.stacktrace;
+		} else {
+			$scope.queryData = queriedData;
+		}
+	}
+	init();	 		
+	$scope.close = function() {
+		$modalInstance.dismiss();
+	};
+}
+var toggleUserEditAccessActiveController = function ($scope, $modalInstance, $http, $log, raptorReportFactory, rowData) {
+	$scope.rowData = rowData;
+	$scope.toggleEditAccessStatus = function(rowData) {
+		raptorReportFactory.toggleUserEditAccess(rowData);
+		$modalInstance.close();
+	};
+
+	$scope.cancelEditAccessToggle = function(rowData) {
+		rowData.accessAllowed = ! rowData.accessAllowed;
+		$modalInstance.dismiss('cancel');}
+}
+
+var toggleRoleEditAccessActiveController = function ($scope, $modalInstance, $http, $log, raptorReportFactory, rowData) {
+	$scope.rowData = rowData;
+	$scope.toggleEditAccessStatus = function(rowData) {
+		raptorReportFactory.toggleRoleEditAccess(rowData); 
+		$modalInstance.close();
+	};
+
+	$scope.cancelEditAccessToggle = function(rowData) {
+		rowData.accessAllowed = ! rowData.accessAllowed;
+		$modalInstance.dismiss('cancel');}
+}
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/all-reports.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/all-reports.html
index 7f470d40..ce70dc58 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/all-reports.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/all-reports.html
@@ -21,7 +21,6 @@
 	<link rel="stylesheet" type="text/css" href="app/fusion/external/angular-bootstrap/ui-bootstrap-csp.css">
 	<link rel="stylesheet" type="text/css" href="app/fusion/external/angular-gridster/dist/angular-gridster.min.css">
 	<!-- digital-design-library must be loaded late -->
-	<link rel="stylesheet" type="text/css" href="app/fusion/external/ds2/css/digital-ng-library/digital-design-library.css">
 	<link rel="stylesheet" type="text/css" href="app/fusion/styles/ecomp.css">
 
 	<!-- Common scripts -->	
@@ -66,12 +65,14 @@
 	<script src="./app/fusion/scripts/DS2-controllers/ds2-reports/report-chart-controller.js"></script>
 	<script src="./app/fusion/scripts/DS2-view-models/ds2-reports/directive/dynamicform.js"></script>
 	<script src="./app/fusion/scripts/DS2-controllers/ds2-reports/report-router.js"></script>
+	<script src= "app/fusion/scripts/DS2-services/ds2-raptor-report/reportModalControllers.js"></script>
+	
 		
 </head>
 	<body class="appBody" ng-app="abs">
-		<div ds2-Header class="header-container" ></div>
-		<div ds2-menu id="menuContainer" class="menu-container" ></div>
+	 	<div ds2-Header class="header-container" ></div>
+		<div ds2-menu id="menuContainer" class="menu-container" ></div> 
 		<div ng-view id="rightContentProfile" class="content-container"></div>	
-		<div ds2-Footer class="footer-container"></div>
+	 	<div ds2-Footer class="footer-container"></div>
 	</body>
 </html>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/directive/dynamicform.js b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/directive/dynamicform.js
index 9064b0dc..5147719f 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/directive/dynamicform.js
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/directive/dynamicform.js
@@ -12,22 +12,42 @@ appDS2
       link: function ($scope, element, attrs) {
     	  $scope.element=element;
     	  $scope.datetimeformat = "MM/dd/yyyy hh:mm a";
-    	  console.log("$scope");
-    	  console.log($scope);
     	  $scope.buildField = function (field, parentElement) {
             var x = '';
             if(field.visible) {
+            	
             	if (field.fieldType === 'LIST_MULTI_SELECT') {
-            		x = angular.element('<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label><br>'+
+            		/*x = angular.element('<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label><br>'+
   			          	'<div class="select2-container ebz-listbox form-field" style="height:100px;" tabindex="0" >'+
   			      			'<label ng-repeat="item in ngModel.'+field.fieldId+'" style="display:block;">'+
   			      			'<input type="checkbox" style="margin-top: 10px;" ng-model="item.defaultValue" ng-change="triggerFormFields('+field.triggerOtherFormFields+')" att-checkbox title="{{item.title}}"/> {{item.title}}<br/>'+
   			      			'</label>'+
-  			      		'</div>');
+  			      		'</div>');*/
+            	
+            		x = angular.element(
+            			'<div class="listbox-container">'+
+                			'<h3 id="source_listbox-2---multiselectable">'+field.fieldDisplayName+'</h3>'+
+                			'<div class="listbox-list" tabindex="-1">'+
+                				'<b2b-list-box listbox-data= "ngModel.'+field.fieldId+'" aria-multiselectable="true">'+
+                					'<div tabindex="-1" data-index="{{$index}}" b2b-accessibility-click="13,32" ng-repeat="number in ngModel.'+field.fieldId+'" role="option" class="b2b-list-box-item" ng-class="{'+
+                					"'b2b-list-box-item--selected'"+
+                					': number.selected}" ng-bind-html="number.title | unsafe"></div>'+
+                				'</b2b-list-box>'+
+                			'</div>'+
+                		'</div>');
                 } else if (field.fieldType === 'LIST_BOX') {
-                    	x = angular.element('<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label><br> <div class="form-field" att-select="formFieldLuValues.'+field.fieldId+'" ng-model="ngModel.'+field.fieldId+'" ng-change="triggerFormFields('+field.triggerOtherFormFields+')"></div>');
+                	var temp = 
+                		'<div >'+
+                			'<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label>'+
+					        '<select id="dropdown1" name="dropdown1" aria-describedby="dropdown1" b2b-dropdown placeholder-text="Select"  ng-model="ngModel.'+field.fieldId+'"   ng-change="triggerFormFields('+field.triggerOtherFormFields+')">'+
+					           ' <option b2b-dropdown-list option-repeat="d in formFieldLuValues.'+ field.fieldId +'" value="{{d.value}}">{{d.title}}</option>'+
+					       ' </select>'+
+						'</div>';
+						          
+                    x = angular.element(temp);
+                	//x = angular.element('<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label><br> <div class="form-field" att-select="formFieldLuValues.'+field.fieldId+'" ng-model="ngModel.'+field.fieldId+'" ng-change="triggerFormFields('+field.triggerOtherFormFields+')"></div>');
                 } else if((field.fieldType === 'text' || field.fieldType === 'TEXT') && field.validationType === 'DATE'){
-                	x = angular.element('<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label><br> <input id="'+field.fieldId+'" type="text" ng-model="ngModel.'+field.fieldId+'" tabindex="0" ng-change="triggerFormFields('+field.triggerOtherFormFields+')" att-datepicker>');
+                	x = angular.element('<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label><br>  <div class="datepicker-container" > <input id="'+field.fieldId+'" type="text" ng-model="ngModel.'+field.fieldId+'" tabindex="0" ng-change="triggerFormFields('+field.triggerOtherFormFields+')" b2b-datepicker></div>');
                 } else if((field.fieldType === 'text' || field.fieldType === 'TEXT') && field.validationType === 'TIMESTAMP_MIN'){
                 	x = angular.element('<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label><br> <input id="'+field.fieldId+'" type="text" date-format="datetimeformat" ng-model="ngModel.'+field.fieldId+'" tabindex="0" ng-change="triggerFormFields('+field.triggerOtherFormFields+')" att-date-time-picker>');
                 } else if(field.fieldType === 'text' || field.fieldType === 'TEXT'){
@@ -35,9 +55,10 @@ appDS2
                 } else if(field.fieldType === 'CHECK_BOX'){
                 	x = angular.element('<label><i>'+field.fieldDisplayName+'<span ng-show="ngShowFieldId"> [ '+field.fieldId+' ] </span>:</i></label><br> <input type="checkbox" ng-model="ngModel.'+field.fieldId+'" tabindex="0" ng-change="triggerFormFields('+field.triggerOtherFormFields+')" att-checkbox>');
                 }
+            	parentElement.append(x);
+                $compile(x)($scope);
             }
-          	parentElement.append(x);
-            $compile(x)($scope);
+          	
           };
           $scope.buildForm = function() {
   	        // create elements <table> and a <tbody>
@@ -80,7 +101,7 @@ appDS2
 	    		   		 	formField.formFieldValues.forEach(function(entry,i) {
 	    		   		 		$scope.formFieldLuValues[formField.fieldId].push({ index: i, value: entry.id, title: entry.name});
 	    		   		 		if(entry.defaultValue){
-	    		   		 			$scope.ngModel[formField.fieldId]={ index: i, value: entry.id, title: entry.name};
+	    		   		 			//$scope.ngModel[formField.fieldId]={ index: i, value: entry.id, title: entry.name};
 	    		   		 		}
 	    			   		});
     		   			}
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-del-confirm.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-del-confirm.html
index da255bbf..3f0338c9 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-del-confirm.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-del-confirm.html
@@ -1,26 +1,18 @@
-<div style="height:400px">
-    <div class="b2b-modal-header ng-scope in">
-        <h2 id="myModalLabel" modal-title="">Remove Report</h2>
-			<div class="corner-button in">
-			<button type="button" class="close" aria-label="Close"
-				ng-click="$dismiss('cancel')"></button>
-		</div>
+
+<div class="b2b-modal-header ng-scope in">
+	<h2 id="myModalLabel" modal-title="">Remove Report</h2>
+	<div class="corner-button in">
+		<button type="button" class="close" aria-label="Close"
+			ng-click="$dismiss('cancel')"></button>
 	</div>
-	<div class="b2b-modal-body ng-scope ng-isolate-scope in"  style="margin-bottom: -50px;">
-		<form name="workflowForm" class="css-form" novalidate>
-			
-			<div class="form-row input-emphasized-field">
-				<label class="span12 input-emphasized" for="textinputID-2a">The selected report will be removed. Do you want to continue</label>
-			</div>
-						
-					<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
-		<div class="cta-button-group in">
-					<button class="btn btn-alt btn-small" type="button"  ng-click="ok()">OK</button>
-			<button class="btn btn-alt btn-small" type="button"
-				ng-click="cancel()">Cancel</button>
-		</div>
-	</div>
-		</form>
-		<br />
+</div>
+<div class="b2b-modal-body ng-scope ng-isolate-scope in">
+	<h2>The selected report will be removed. Do you want to continue</h2>
+</div>
+<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
+	<div class="cta-button-group in">
+		<button class="btn btn-alt btn-small" type="button" ng-click="ok()">OK</button>
+		<button class="btn btn-alt btn-small" type="button"
+			ng-click="cancel()">Cancel</button>
 	</div>
 </div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-formfield-del-confirm.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-formfield-del-confirm.html
index 7bdf5a29..20dd9202 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-formfield-del-confirm.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-formfield-del-confirm.html
@@ -1,26 +1,17 @@
-<div style="height:400px">
-    <div class="b2b-modal-header ng-scope in">
-        <h2 id="myModalLabel" modal-title="">Remove Formfield</h2>
-			<div class="corner-button in">
-			<button type="button" class="close" aria-label="Close"
-				ng-click="$dismiss('cancel')"></button>
-		</div>
+<div class="b2b-modal-header">
+	<h2 id="myModalLabel" modal-title="">Remove Formfield</h2>
+	<div class="corner-button in">
+		<button type="button" class="close" aria-label="Close"
+			ng-click="$dismiss('cancel')"></button>
 	</div>
-	<div class="b2b-modal-body ng-scope ng-isolate-scope in"  style="margin-bottom: -50px;">
-		<form name="workflowForm" class="css-form" novalidate>
-			
-			<div class="form-row input-emphasized-field">
-				<label class="span12 input-emphasized" for="textinputID-2a">The selected formfield {{tempFieldId}} will be removed. Do you want to continue</label>
-			</div>
-						
-					<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
-		<div class="cta-button-group in">
-					<button class="btn btn-alt btn-small" type="button"  ng-click="ok()">OK</button>
-			<button class="btn btn-alt btn-small" type="button"
-				ng-click="cancel()">Cancel</button>
-		</div>
-	</div>
-		</form>
-		<br />
+</div>
+<div class="b2b-modal-body">
+	The selected formfield {{tempFieldId}} will be removed. Do you want to continue?
+</div>
+<div class="b2b-modal-footer">
+	<div class="cta-button-group in">
+		<button class="btn btn-alt btn-small" type="button" ng-click="ok()">OK</button>
+		<button class="btn btn-alt btn-small" type="button"
+			ng-click="cancel()">Cancel</button>
 	</div>
 </div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-security-role-del-confirm.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-security-role-del-confirm.html
index 01d1e609..629b9a91 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-security-role-del-confirm.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-security-role-del-confirm.html
@@ -1,26 +1,19 @@
-<div style="height:300px">
-    <div class="b2b-modal-header ng-scope in">
-        <h2 id="myModalLabel" modal-title="">Remove Report Role</h2>
-			<div class="corner-button in">
-			<button type="button" class="close" aria-label="Close"
-				ng-click="$dismiss('cancel')"></button>
-		</div>
+
+<div class="b2b-modal-header">
+	<h2 id="myModalLabel" modal-title="">Remove Report Role</h2>
+	<div class="corner-button in">
+		<button type="button" class="close" aria-label="Close"
+			ng-click="$dismiss('cancel')"></button>
 	</div>
-	<div class="b2b-modal-body ng-scope ng-isolate-scope in"  style="margin-bottom: -50px;">
-		<form name="workflowForm" class="css-form" novalidate>
-			
-			<div class="form-row input-emphasized-field">
-				<label class="span12 input-emphasized" for="textinputID-2a">{{securityRoleName}} will be removed. Would you want to continue?</label>
-			</div>
-						
-					<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
-		<div class="cta-button-group in">
-					<button class="btn btn-alt btn-small" type="button"  ng-click="ok()">OK</button>
-			<button class="btn btn-alt btn-small" type="button"
-				ng-click="cancel()">Cancel</button>
-		</div>
-	</div>
-		</form>
-		<br />
+</div>
+<div class="b2b-modal-body">
+		{{securityRoleName}}
+			will be removed. Would you want to continue?
+</div>
+<div class="b2b-modal-footer">
+	<div class="cta-button-group in">
+		<button class="btn btn-alt btn-small" type="button" ng-click="ok()">OK</button>
+		<button class="btn btn-alt btn-small" type="button"
+			ng-click="cancel()">Cancel</button>
 	</div>
 </div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-security-user-del-confirm.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-security-user-del-confirm.html
index 6620fe7c..5af1b227 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-security-user-del-confirm.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-security-user-del-confirm.html
@@ -1,26 +1,18 @@
-<div style="height:300px">
-    <div class="b2b-modal-header ng-scope in">
-        <h2 id="myModalLabel" modal-title="">Remove Report User</h2>
-			<div class="corner-button in">
-			<button type="button" class="close" aria-label="Close"
-				ng-click="$dismiss('cancel')"></button>
-		</div>
+<div class="b2b-modal-header">
+	<h2 id="myModalLabel" modal-title="">Remove Report User</h2>
+	<div class="corner-button in">
+		<button type="button" class="close" aria-label="Close"
+			ng-click="$dismiss('cancel')"></button>
 	</div>
-	<div class="b2b-modal-body ng-scope ng-isolate-scope in"  style="margin-bottom: -50px;">
-		<form name="workflowForm" class="css-form" novalidate>
-			
-			<div class="form-row input-emphasized-field">
-				<label class="span12 input-emphasized" for="textinputID-2a">{{securityUserName}} will be removed. Would you want to continue?</label>
-			</div>
-						
-					<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
-		<div class="cta-button-group in">
-					<button class="btn btn-alt btn-small" type="button"  ng-click="ok()">OK</button>
-			<button class="btn btn-alt btn-small" type="button"
-				ng-click="cancel()">Cancel</button>
-		</div>
-	</div>
-		</form>
-		<br />
+</div>
+<div class="b2b-modal-body"">
+	{{securityUserName}}
+			will be removed. Would you want to continue?
+</div>
+<div class="b2b-modal-footer">
+	<div class="cta-button-group in">
+		<button class="btn btn-alt btn-small" type="button" ng-click="ok()">OK</button>
+		<button class="btn btn-alt btn-small" type="button"
+			ng-click="cancel()">Cancel</button>
 	</div>
 </div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-user-role-confirm-toggle.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-user-role-confirm-toggle.html
index 21bb046f..06f2049a 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-user-role-confirm-toggle.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-user-role-confirm-toggle.html
@@ -1,23 +1,24 @@
-<div>
-	<div class="b2b-modal-header ng-scope in">
-		<h1><i class="icon-primary-alert"></i></h1>
-		<h2 id="myModalLabel" modal-title="">Confirm</h2>
-		<div class="corner-button in">
-			<button type="button" class="close" aria-label="Close"
-				ng-click="$dismiss('cancel')"></button>
-		</div>
+
+<div class="b2b-modal-header">
+	<h1>
+		<i class="icon-primary-alert"></i>
+	</h1>
+	<h2 id="myModalLabel" modal-title="">Confirm</h2>
+	<div class="corner-button in">
+		<button type="button" class="close" aria-label="Close"
+			ng-click="$dismiss('cancel')"></button>
 	</div>
-	<div class="b2b-modal-body ng-scope ng-isolate-scope in" tabindex="0"
-		role="region" aria-label="Modal header text content"
-		style="height: 55px;">
-		You are about to {{rowData.accessAllowed?"grant":"revoke"}} {{rowData.name}} edit access. Would you like to continue?
-	</div>
-	<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
-		<div class="cta-button-group in">
-			<button class="btn btn-alt btn-medium" type="button"
-				ng-click="toggleEditAccessStatus(rowData);">Ok</button>
-			<button class="btn btn-clear btn-medium" type="button"
-				ng-click="cancelEditAccessToggle(rowData);">Cancel</button>
-		</div>
+</div>
+<div class="b2b-modal-body" tabindex="0" role="region"
+	aria-label="Modal header text content" style="height: 55px;">
+	You are about to {{rowData.accessAllowed?"grant":"revoke"}}
+		{{rowData.name}} edit access. Would you like to continue?
+</div>
+<div class="b2b-modal-footer">
+	<div class="cta-button-group in">
+		<button class="btn btn-alt btn-medium" type="button"
+			ng-click="toggleEditAccessStatus(rowData);">Ok</button>
+		<button class="btn btn-clear btn-medium" type="button"
+			ng-click="cancelEditAccessToggle(rowData);">Cancel</button>
 	</div>
 </div>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-col-edit.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-col-edit.html
index e74f89a8..3aadf27e 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-col-edit.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-col-edit.html
@@ -1,130 +1,232 @@
 <style>
 #columnEditTable table tbody td {
-    border: none;
+	border: none;
 }
 
 #columnEditTable table tbody tr {
-    border: none;
+	border: none;
 }
 
-.colTableLeftColumn {
-	width: 45%;
-	text-align: right;
-	vertical-align:middle;
-}
-
-.colTableInput {
-	width:220px;
-}
-
-#columnEditTable .selectWrap{
-	width:220px;
-}
 
-
-#drilldownOption .selectWrap{
-	width:450px;
-}
 </style>
 
-<div style="height: 700px;">
-    <div class="b2b-modal-header ng-scope in">
-        <h2 id="myModalLabel" modal-title="">Report Column - Edit </h2>
-			<div class="corner-button in">
-			<button type="button" class="close" aria-label="Close"
-				ng-click="$dismiss('cancel')"></button>
-		</div>
+<div class="b2b-modal-header">
+	<h2 id="myModalLabel" modal-title="">Report Column - Edit</h2>
+	<div class="corner-button in">
+		<button type="button" class="close" aria-label="Close"
+			ng-click="$dismiss('cancel')"></button>
 	</div>
-	<div class="b2b-modal-body ng-scope ng-isolate-scope in"  style="margin-bottom: -50px;">
-		<form name="workflowForm" class="css-form" novalidate>
-			
-<!-- 			<div class="form-row input-emphasized-field">
-				<label class="span12 input-emphasized" for="textinputID-2a">The selected report will be removed. Do you want to continue</label>
-			</div> -->
-	<div id="columnEditTable">
-    <table class="striped">
-<!--         <caption><span>Table caption</span></caption> -->
-<!--         <thead>
-            <tr>
-                <th>Column ID:</th>
-                <th>Name</th>
-                <th>ID</th>
-                <th>Edit</th>
-            </tr>
-        </thead> -->
-        <tbody>
-            <tr>
-                <td class="colTableLeftColumn">Column ID:</td>
-                <td>{{columnEditData.colId}}</td>
-            </tr>
-
-            <tr>
-                <td class="colTableLeftColumn">Display Name:</td>
-                <td><input type="text" name="displayName" ng-model="colName.value" class="colTableInput"></td>
-            </tr>
-
-<!--             <tr>
-                <td class="colTableLeftColumn">Display Width (px):</td>
-				<td><input type="text" name="displayWidth" ng-model="displayWidth" class="colTableInput"></td>            
-			</tr> -->
-            
-            <tr>
-                <td class="colTableLeftColumn">Display Alignment: </td>
-				<td>
-					<select name="displayAlignment" b2b-dropdown ng-model="selectedDisplayAlignment.value" placeholder-text="Select">
-						<option b2b-dropdown-list option-repeat="d in displayAlignmentOptions" value="{{d.value}}">{{d.text}}</option>
-                    </select>
-				</td>
-            </tr>
-            
-            <tr>
-                <td class="colTableLeftColumn">Display Header Alignment:</td>
-				<td>
-					<select name="displayHeaderAlignment" b2b-dropdown ng-model="selectedDisplayHeaderAlignment.value" placeholder-text="Select">
-						<option b2b-dropdown-list option-repeat="d in displayAlignmentOptions" value="{{d.value}}">{{d.text}}</option>
-                    </select>
-				</td>
-            </tr>                        
-
-            <tr>
-                <td class="colTableLeftColumn">Sortable:</td>
-				<td>
-					<select name="sortable" b2b-dropdown ng-model="sortable.value" placeholder-text="Select">
-						<option b2b-dropdown-list option-repeat="d in ynOptions" value="{{d.value}}">{{d.text}}</option>
-                    </select>
-				</td>
-            </tr>                        
-
-            <tr>
-                <td class="colTableLeftColumn">Visible:</td>
-				<td>
-					<select name="visible" b2b-dropdown ng-model="visible.value" placeholder-text="Select">
-						<option b2b-dropdown-list option-repeat="d in ynOptions" value="{{d.value}}">{{d.text}}</option>
-                    </select>
-				</td>
-            </tr>                        
-
-             <tr>
-                <td class="colTableLeftColumn" style="width:350px;">Drill-down Link:</td>
-				<td id="drilldownOption">
-					<select name="drillDown" b2b-dropdown ng-model="selectedDrillDownReport.value" placeholder-text="Select">
-						<option  b2b-dropdown-list option-repeat="d in drilldownReports" value="{{d.id}}">{{d.name}}</option>
-                    </select>
-				</td>
-            </tr>                         
-
-
-        </tbody>
-      </table>
-      </div>				
-					<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
-		<div class="cta-button-group in">
-					<button class="btn btn-alt btn-small" type="button"  ng-click="save()">Save</button>
-			<button class="btn btn-alt btn-small" type="button"
-				ng-click="cancel()">Cancel</button>
+</div>
+<div class="b2b-modal-body">
+		<div ng-show="processingData" class="span loader-container">
+			<i class="icon-primary-spinner" role="img"
+				aria-label="Please wait while we load your content"></i>
 		</div>
-	</div>
-		</form>
-		<br />
-	</div>
-</div>
\ No newline at end of file
+	
+		<div id="columnEditTable" ng-hide="processingData">
+			<table class="striped">
+				<tbody>
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Column ID:</td>
+						<td>{{colInfo.colId}}</td>
+					</tr>
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Column Name:</td>
+						<td>{{colInfo.colName}}</td>
+					</tr>
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Depends on formfield:</td>
+						<td><input type="text" name="dependsOnFF"
+							ng-model="colInfo.depeondsOnForField" class="colTableInput"></td>
+					</tr>
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Datatype:</td>
+						<td>
+							<select id="dataTypeDD" name="dataTypeDD" aria-describedby="dataTypeDD" b2b-dropdown placeholder-text="Select Data Type" ng-model="colInfo.dataType">
+					            <option b2b-dropdown-list option-repeat="d in dataTypeOptions" value="{{d.value}}">{{d.text}}</option>
+					        </select>
+					    </td>
+					</tr>
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Group By Pos:</td>
+						<td>
+							<input type="text" name="groupByPos" ng-model="colInfo.groupByPos" class="colTableInput">
+						</td>
+					</tr>
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Custom Text for Sub-Total:</td>
+						<td><input type="text" name="subTotalCus"
+							ng-model="colInfo.subTotalCustomText" class="colTableInput"></td>
+					</tr>
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Hide Repeated Values:</td>
+						<td>
+							<label for="noWrap" class="checkbox">		
+								<input id="hideFormFieldsRun" type="checkbox" ng-model="colInfo.hideRepeatedKey" />	<i class="skin"></i>
+							</label>	
+						</td>
+					</tr>
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Multi Group Column Level:</td>
+						<td>
+							<select id="mgcLevel" name="mgcLevel" aria-describedby="mgcLevel" b2b-dropdown placeholder-text="Select Level" ng-model="colInfo.level">
+					            <option b2b-dropdown-list option-repeat="d in multiGroupColLevel" value="{{d.value}}">{{d.text}}</option>
+					        </select>						
+					    </td>
+					</tr>
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Multi group Column Range : Colspan:</td>
+						<td>
+							<input type="text" name="colSpan" ng-model="colInfo.colspan" class="colTableInput">
+						</td>
+					</tr>					
+					<!-- <tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Dataformat:</td>
+						<td>
+							<select id="mgcLevel" name="mgcLevel" aria-describedby="mgcLevel" b2b-dropdown placeholder-text="Select Level" ng-model="colInfo.level">
+					            <option b2b-dropdown-list option-repeat="d in multiGroupColLevel" value="{{d.value}}">{{d.text}}</option>
+					        </select>						
+					    </td>
+					</tr> -->
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Display Name:</td>
+						<td>
+							<input type="text" name="colSpan" ng-model="colInfo.displayName" class="colTableInput">
+						</td>
+					</tr>
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Display Width (In Pxls):</td>
+						<td>
+							<input type="text" id="displayWidth" name="displayWidth" ng-model="colInfo.displayWidth" class="colTableInput">
+						</td>
+					</tr>
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">No Wrap ?:</td>
+						<td>
+							<label for="noWrap" class="checkbox">		
+								<input id="noWrap" type="checkbox" ng-model="colInfo.noWrap" /><i class="skin"></i>
+							</label>
+						</td>
+					</tr>
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Indent Parameter to display value:</td>
+						<td>
+							<select id="indentPara" name="indentPara" aria-describedby="indentPara" b2b-dropdown placeholder-text="Select Indent" ng-model="colInfo.indentation">
+					            <option b2b-dropdown-list option-repeat="d in indentValues" value="{{d.value}}">{{d.text}}</option>
+					        </select>							
+					    </td>
+					</tr>
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Display Alignment:</td>
+						<td>
+							<select id="displayAlign" name="displayAlign" aria-describedby="displayAlign" b2b-dropdown placeholder-text="Select Display Alignment" ng-model="colInfo.displayAlignment">
+					            <option b2b-dropdown-list option-repeat="d in displayAlignmentOptions" value="{{d.value}}">{{d.text}}</option>
+					        </select>						
+					    </td>
+					</tr>
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Display Header Alignment:</td>
+						<td>
+							<select id="displayHAlign" name="displayHAlign" aria-describedby="displayAlign" b2b-dropdown placeholder-text="Select Display Header Alignment" ng-model="colInfo.displayHeaderAlignment">
+					            <option b2b-dropdown-list option-repeat="d in displayAlignmentOptions" value="{{d.value}}">{{d.text}}</option>
+					        </select>						
+					    </td>
+					</tr>
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Sortable:</td>
+						<td>
+							<label for="sortable" class="checkbox">					
+								<input id="sortable" type="checkbox" ng-model="colInfo.sortable" /><i class="skin"></i>				
+							</label>		
+					    </td>
+					</tr>
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Visible:</td>
+						<td>
+						   <label for="visibleCheck" class="checkbox">					
+								<input id="visibleCheck" type="checkbox" ng-model="colInfo.visible" /><i class="skin"></i>
+							</label>						
+					    </td>	
+					</tr>
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Drill-down Link:	<a href="javascript:void(0);" ng-click="getDrillReportFormField(colInfo.drilldownURL,colInfo.drilldownParams)"><span class="icon-misc-pen" ></span></a></td>
+						<td id="drilldownOption">
+							<select name="drillDown" b2b-dropdown ng-model="colInfo.drilldownURL">
+								<option b2b-dropdown-list option-repeat="d in drilldownReports" value="{{d.id}}">{{d.name}}</option>
+							</select>					
+						</td>						
+					</tr> 
+					
+					<tr ng-hide="!isEditCol">
+						<td class="colTableLeftColumn">Total for the column:</td>
+						<td id="totalForTheCol">
+							<select name="totalForTheCol" b2b-dropdown ng-model="colInfo.displayTotal" placeholder-text="Select">
+								<option b2b-dropdown-list option-repeat="d in totalForTheColList" 	value="{{d.id}}">{{d.name}}</option>
+							</select>
+						</td>
+					</tr> 
+					<tr >
+						<table class="striped" ng-repeat="ff in drilDownFormField" ng-init="outerIndex=$index" ng-show="!isEditCol">
+							<thead> 
+								<tr>
+									<th>{{ff.name}}</th>
+									<th></th>
+								</tr>
+							</thead>
+							<tbody type="body" ng-repeat="dd in drilDownValues[$index]" ng-init="innerIndex=$index">
+								<tr>
+									<td>
+										<label for="{{dd.radioGroup}}" class="radio">
+							                <input type="radio" ng-model="selectedDrillReportFormField[outerIndex]"  id="{{dd.radioGroup}}" name="optionsRadio{{outerIndex}}" value="{{dd.radioGroup}}">
+							                <i class="skin"></i>
+							            </label>
+									</td>
+									<td>{{ dd.selection }} </td>
+									<td ng-if="dd.selection=='Value set'" ng-bind="dd.value"></td>
+									<td  ng-if='dd.selection=="No Value"'>
+											Accept default
+									</td>
+									<td  ng-if='dd.selection=="Fixed Value"'>
+										<div class="field-group">
+											<input id="emptyMessage" ddh-reset="" class="span12" type="text" data-ng-model="drillDownParams[outerIndex].valValue">
+										</div>	
+									</td>
+									<td  ng-if='dd.selection=="Value of Column"'>
+										<select name="drillDown" b2b-dropdown ng-model="drillDownParams[outerIndex].valColId" placeholder-text="Select">
+											<option b2b-dropdown-list option-repeat="d in childReportCol" value="{{d.id}}">{{d.name}}</option>
+										</select>
+									</td>
+									<td  ng-if='dd.selection=="Value of form field"'>
+										<select name="drillDownField" b2b-dropdown ng-model="drillDownParams[outerIndex].valFieldId" placeholder-text="Select">
+											<option b2b-dropdown-list option-repeat="d in childReportFF" value="{{d.id}}">{{d.name}}</option>
+										</select>									
+									</td>
+								</tr>
+							</tbody>
+						</table>
+					</tr>
+					
+					<!-- <tr>
+						<td class="colTableLeftColumn">Advanced Display Formatting:</td>
+						<td id="drilldownOption">
+							<select name="drillDown" b2b-dropdown ng-model="colInfo.drilldownURL" placeholder-text="Select">
+								<option b2b-dropdown-list option-repeat="d in drilldownReports" 	value="{{d.id}}">{{d.name}}</option>
+							</select>
+						</td>
+					</tr>  -->
+				
+				</tbody>
+			</table>
+		</div>
+		
+</div>
+<div class="b2b-modal-footer ng-scope">
+			<div class="cta-button-group in">
+				<button class="btn btn-alt btn-small" type="button" ng-show="isEditCol"
+					ng-click="save()">Save</button>
+				<button class="btn btn-alt btn-small" type="button" ng-hide="isEditCol"
+					ng-click="complete()">Complete</button>
+				<button class="btn btn-alt btn-small" type="button"
+					ng-click="cancel()">Cancel</button>
+			</div>
+		</div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-formfield-edit.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-formfield-edit.html
index c88eb596..3c17ff7b 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-formfield-edit.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-formfield-edit.html
@@ -1,149 +1,154 @@
 <style>
 #columnEditTable table tbody td {
-    border: none;
+	border: none;
 }
 
 #columnEditTable table tbody tr {
-    border: none;
+	border: none;
 }
 
 .colTableLeftColumn {
 	width: 45%;
 	text-align: right;
-	vertical-align:middle;
+	vertical-align: middle;
 }
 
 .colTableInput {
-	width:220px;
+	width: 220px;
 }
 
-#columnEditTable .selectWrap{
-	width:220px;
+#columnEditTable .selectWrap {
+	width: 220px;
+}
+table {
+     border-bottom: none;
 }
 </style>
 
-<div style="height: 700px;">
-    <div class="b2b-modal-header ng-scope in">
-        <h2 id="myModalLabel" modal-title="">Report Form Field - Edit</h2>
-			<div class="corner-button in">
-			<button type="button" class="close" aria-label="Close"
-				ng-click="$dismiss('cancel')"></button>
-		</div>
+<div class="b2b-modal-header">
+	<h2 id="myModalLabel" modal-title="">Report Form Field - Edit</h2>
+	<div class="corner-button in">
+		<button type="button" class="close" aria-label="Close"
+			ng-click="$dismiss('cancel')"></button>
 	</div>
-	<div class="b2b-modal-body ng-scope ng-isolate-scope in"  style="margin-bottom: -50px;">
-		<form name="workflowForm" class="css-form" novalidate>
-			
-<!-- 			<div class="form-row input-emphasized-field">
-				<label class="span12 input-emphasized" for="textinputID-2a">The selected report will be removed. Do you want to continue</label>
-			</div> -->
-	<div id="columnEditTable">
-    <table class="striped">
-<!--         <caption><span>Table caption</span></caption> -->
-<!--         <thead>
-            <tr>
-                <th>Column ID:</th>
-                <th>Name</th>
-                <th>ID</th>
-                <th>Edit</th>
-            </tr>
-        </thead> -->
-        <tbody>
-<!--             <tr>
-                <td class="colTableLeftColumn">Field ID:</td>
-                <td>{{formFieldEditData.fieldId}}</td>
-            </tr> -->
-
-            <tr>
-                <td class="colTableLeftColumn">Field Name:</td>
-                <td><input type="text" name="displayName" ng-model="fieldName.value" class="colTableInput"></td>
-            </tr>
-            
-            <tr>
-                <td class="colTableLeftColumn">Field Type: </td>
-				<td>
-					<select name="displayAlignment" b2b-dropdown ng-model="selectedFieldType.value" placeholder-text="Select">
-						<option b2b-dropdown-list option-repeat="d in fieldTypeOptions" value="{{d.value}}">{{d.text}}</option>
-                    </select>
-				</td>
-            </tr>
-            
-            <tr>
-                <td class="colTableLeftColumn">Visible:</td>
-				<td>
-					<select name="displayHeaderAlignment" b2b-dropdown ng-model="selectedVisible.value" placeholder-text="Select">
-						<option b2b-dropdown-list option-repeat="d in ynOptions" value="{{d.value}}">{{d.text}}</option>
-                    </select>
-				</td>
-            </tr>
-            
-            <tr>
-                <td class="colTableLeftColumn">SQL as Default Value:</td>
-				<td>
-	                <label for="checkbox1" class="checkbox">
-	                    <input id="checkbox1" type="checkbox" ng-model="sqlDefaultValueSelected.value" /><i class="skin"></i><span></span>
-	                </label>
-				</td>
-            </tr>
-                                    
-            <tr ng-hide="sqlDefaultValueSelected.value">	
-                <td class="colTableLeftColumn">Default Value:</td>
-                <td><input type="text" name="defaultValue" ng-model="defaultValue.value" class="colTableInput"></td>
-            </tr>
-
-
-            <tr ng-show="sqlDefaultValueSelected.value">
-                <td class="colTableLeftColumn">Default SQL:</td>
-                <td>
-                <textarea b2b-reset b2b-dragon-input b2b-reset-textarea ng-model="fieldDefaultSQL.value" style="height:80px">
-                </textarea>                
-                </td>
-                <td>
-                <p><button ng-click="formFieldVerifySQL(fieldDefaultSQL.value)" class="btn btn-alt btn-small">Verify</button></p>
-                </td>
-            </tr>
-            
-<!--             <tr>
-                <td class="colTableLeftColumn">Verify Field Value As: </td>
-				<td>
-					<select name="displayAlignment" b2b-dropdown ng-model="selectedVerifyFieldValue.value" placeholder-text="Select">
-						<option b2b-dropdown-list option-repeat="d in verifyFieldValueOptions" value="{{d.value}}">{{d.text}}</option>
-                    </select>
-				</td>
-            </tr> -->
-            
-            <tr>
-                <td class="colTableLeftColumn">SQL Generating Custom List of Values:</td>
-                <td>
-                <textarea b2b-reset b2b-dragon-input b2b-reset-textarea ng-model="fieldSqlContent.value" style="height:80px">
-                </textarea>                
-                </td>
-                <td>
-                <p><button ng-click="formFieldVerifySQL(fieldSqlContent.value)" class="btn btn-alt btn-small">Verify</button></p>
-                </td>
-            </tr>
+</div>
+<div class="b2b-modal-body">
+	<div ng-show="dataProcessing" class="span loader-container">
+		<i class="icon-primary-spinner" role="img"
+			aria-label="Please wait while we load your content"></i>
+	</div>
+	<div id="columnEditTable" ng-hide="dataProcessing">
+		<table class="striped">
+			<tbody>
+				<tr>
+					<td class="colTableLeftColumn">Field Name:</td>
+					<td><input type="text" name="displayName"
+						ng-model="formFieldEditData.fieldName" class="colTableInput"></td>
+				</tr>
 
-<!--             <tr>
-                <td class="colTableLeftColumn">Drill-down Link:</td>
-				<td>
-					<select name="drillDown" b2b-dropdown ng-model="selectedDrillDownLink.value" placeholder-text="Select">
-						<option b2b-dropdown-list option-repeat="d in drillDownOptions" value="{{d.value}}">{{d.text}}</option>
-                    </select>
-				</td>
-            </tr>                         -->
+				<tr>
+					<td class="colTableLeftColumn">Field Type:</td>
+					<td><select name="fieldType" b2b-dropdown
+						ng-model="formFieldEditData.fieldType" placeholder-text="Select">
+							<option b2b-dropdown-list option-repeat="d in fieldTypeOptions"
+								value="{{d.value}}">{{d.text}}</option>
+					</select></td>
+				</tr>
+				<tr>
+					<td class="colTableLeftColumn">Visible:</td>
+					<td>
+						<select name="visible" b2b-dropdown	ng-model="formFieldEditData.visible">
+							<option b2b-dropdown-list option-repeat="d in ynOptions" value="{{d.value}}">{{d.text}}</option>
+						</select>
+					</td>
+				</tr>
+				<tr>
+					<td class="colTableLeftColumn">Is used in Group By Clause?</td>
+					<td>
+						<label for="checkboxGrp" class="checkbox"> 
+						<input	id="checkboxGrp" type="checkbox" ng-model="formFieldEditData.groupFormField" /><i class="skin"></i><span></span>
+						</label>	
+					</td>
+				</tr>
+			 	<tr>
+					<td class="colTableLeftColumn">SQL as Default Value:</td>
+					<td>
+						<label for="cehckboxSql" class="checkbox"> <input
+							id="cehckboxSql" type="checkbox"
+							ng-model="sqlAsDefaultValue.value" /><i class="skin"></i><span></span>
+						</label>
+					</td>
+				</tr> 
+				<tr ng-show="sqlAsDefaultValue.value">
+					<td class="colTableLeftColumn">Default SQL:</td>
+					<td>
+						<textarea b2b-reset b2b-dragon-input b2b-reset-textarea
+							ng-model="formFieldEditData.fieldDefaultSQL" style="height: 80px">
+                		</textarea>
+                	</td>
+					<td>
+						<p>
+							<button ng-click="formFieldVerifySQL(formFieldEditData.fieldDefaultSQL)"
+								class="btn btn-alt btn-small">Verify</button>
+						</p>
+					</td>
+				</tr>
+				<tr ng-hide="formFieldEditData.fieldDefaultSQL">
+					<td class="colTableLeftColumn">Default Value:</td>
+					<td><input type="text" name="defaultValue"
+						ng-model="formFieldEditData.defaultValue" class="colTableInput"></td>
+				</tr>
 
 
-        </tbody>
-      </table>
-      </div>				
-					<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
-		<div class="cta-button-group in">
-					<button class="btn btn-alt btn-small" type="button"  ng-click="save()">Save</button>
-			<button class="btn btn-alt btn-small" type="button"
-				ng-click="cancel()">Cancel</button>
-		</div>
-		
+				<tr>
+					<td class="colTableLeftColumn">Verify Field Value As:</td>
+					<td><select name="visible" b2b-dropdown
+						ng-model="formFieldEditData.validationType" placeholder-text="Select">
+							<option b2b-dropdown-list option-repeat="d in verifyFieldValueOptions"
+								value="{{d.value}}">{{d.text}}</option>
+					</select></td>
+				</tr>
+				<tr>
+					<td class="colTableLeftColumn">SQL Generating Custom List of
+						Values:</td>
+					<td><textarea b2b-reset b2b-dragon-input b2b-reset-textarea
+							ng-model="formFieldEditData.fieldSQL" style="height: 80px">
+                </textarea></td>
+					<td>
+						<p>
+							<button ng-click="formFieldVerifySQL(formFieldEditData.fieldSQL)"
+								class="btn btn-alt btn-small">Verify</button>
+						</p>
+					</td>
+				</tr>
+				<tr>
+					<td class="colTableLeftColumn">Provide Predefined List of Values:	Do not use Predefined list - Generate list from database :</td>
+					<td>
+                		<input type="text" name="defaultValue" 	ng-model="predefinedValues.value" class="colTableInput">
+                	</td>
+					<td>
+						<p>
+							<button ng-click="addPredefinedValueList();"	class="btn btn-alt btn-small">Add to List</button>
+						</p>
+					</td>
+				</tr>
+				<tr>
+					<td class="colTableLeftColumn"></td>
+					<td>
+                		<div ng-repeat = "rowData in formFieldEditData.predefinedValueList">
+                			<span>{{rowData.id}}</span>
+                			<a ng-click="removePredefinedValueList(rowData.id)" class="icon-misc-trash"></a>
+                		</div>
+                	</td>
+				</tr>
+			</tbody>
+		</table>
 	</div>
-		</form>
-		<br />
+</div>
+<div class="b2b-modal-footer">
+	<div class="cta-button-group in">
+		<button class="btn btn-alt btn-small" type="button" ng-click="save()" ng-show="type=='edit'">Save</button>
+		<button class="btn btn-alt btn-small" type="button" ng-click="add()" ng-show="type=='add'">Add</button>
+		<button class="btn btn-alt btn-small" type="button" ng-click="cancel()">Cancel</button>
 	</div>
 </div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-test-run-sql.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-test-run-sql.html
index a7955cad..e3fda72b 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-test-run-sql.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/modal/report-wizard-test-run-sql.html
@@ -1,62 +1,57 @@
-<style>
+<!-- <style>
 .colTableLeftColumn {
 	width: 45%;
 	text-align: right;
-	vertical-align:middle;
+	vertical-align: middle;
 }
 
 .colTableInput {
-	width:220px;
+	width: 220px;
 }
 
-#columnEditTable .selectWrap{
-	width:220px;
+#columnEditTable .selectWrap {
+	width: 220px;
 }
 </style>
-
-<div style="height: 700px;">
-    <div class="b2b-modal-header ng-scope in">
-        <h2 id="myModalLabel" modal-title="">SQL Test Run - {{isError?'Failed':'Executed'}}</h2>
-			<div class="corner-button in">
-			<button type="button" class="close" aria-label="Close"
-				ng-click="$dismiss('cancel')"></button>
-		</div>
+ -->
+<div class="b2b-modal-header">
+	<h2 id="myModalLabel" modal-title="">SQL Test Run -
+		{{isError?'Failed':'Executed'}}</h2>
+	<div class="corner-button in">
+		<button type="button" class="close" aria-label="Close"
+			ng-click="$dismiss('cancel')"></button>
 	</div>
-	<div class="b2b-modal-body ng-scope ng-isolate-scope in"  style="margin-bottom: -50px;">
-		<form name="workflowForm" class="css-form" novalidate>
-<!-- 			<div class="form-row input-emphasized-field">
-				<label class="span12 input-emphasized" for="textinputID-2a">The selected report will be removed. Do you want to continue</label>
-			</div> -->
-	<div>
-	
-	<div ng-show="isError">
-	<h2>Error Message:</h2><br>
-	<p>{{errormessage}}</p>
-	<h2>Stack Trace:</h2><br>
-	<p>{{stacktrace}}</p>
+</div>
+<div class="b2b-modal-body">
+		<div>
 
-	</div>
-    <table class="striped">
-         <thead>
-            <tr>
-                <th ng-repeat="colName in queryData.reportDataColumns">{{colName}}</th>
-            </tr>
-        </thead>
-        <tbody>
-            <tr ng-repeat="rowData in queryData.reportDataRows">
-                <td ng-repeat="keyName in queryData.reportDataColumns">{{rowData[keyName]}}</td>
-            </tr>
+			<div ng-show="isError">
+				<h2>Error Message:</h2>
+				<br>
+				<p>{{errormessage}}</p>
+				<h2>Stack Trace:</h2>
+				<br>
+				<p>{{stacktrace}}</p>
 
-        </tbody>
-      </table>
-      </div>				
-					<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
-		<div class="cta-button-group in">
-			<button class="btn btn-alt btn-small" type="button"
-				ng-click="close()">Close</button>
+			</div>
+			<table class="striped">
+				<thead>
+					<tr>
+						<th ng-repeat="colName in queryData.reportDataColumns">{{colName}}</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr ng-repeat="rowData in queryData.reportDataRows">
+						<td ng-repeat="keyName in queryData.reportDataColumns">{{rowData[keyName]}}</td>
+					</tr>
+
+				</tbody>
+			</table>
 		</div>
+
+</div>
+<div class="b2b-modal-footer ng-scope ng-isolate-scope in">
+	<div class="cta-button-group in">
+		<button class="btn btn-alt btn-small" type="button" ng-click="close()">Close</button>
 	</div>
-		</form>
-		<br />
-	</div>
-</div>
\ No newline at end of file
+</div>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/report-chart-wizard.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/report-chart-wizard.html
index 8558729e..ed3c4ba9 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/report-chart-wizard.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/report-chart-wizard.html
@@ -1,897 +1,1080 @@
 <style>
 table tbody td {
-    border: none;
+	border: none;
 }
 
 table tbody tr {
-    border: none;
+	border: none;
 }
 
-table{
-    border: none;
-    margin-bottom:0px;
+table {
+	border: none;
+	margin-bottom: 0px;
 }
 
-#RangeTable{
+#RangeTable {
 	margin-top: 5px;
 	border: 1px solid black;
 }
 </style>
 
 <div id="page-content">
-<h1 class="heading-page">Report Chart Configuration</h1>
+	<h1 class="heading-page">Report Chart Configuration</h1>
 
-<div ng-show="showLoader" class="span loader-container">
-	<i class="icon-primary-spinner" role="img"
-		aria-label="Please wait while we load your content"></i>
-</div>
+	<div ng-show="showLoader" class="span loader-container">
+		<i class="icon-primary-spinner" role="img"
+			aria-label="Please wait while we load your content"></i>
+	</div>
 
 
-<div ng-hide="showLoader">
-<div>
-<table>
-	<thead>
-	    <tr>
-	        <th width="30%">Chart Type</th>
-	        <th></th>
-	    </tr>
-	</thead>
-	
-    <tbody>
-        <tr>
-            <td>
-				<select name="chartType" b2b-dropdown ng-model="reportRunJson.chartType">
-					<option b2b-dropdown-list option-repeat="d in chartTypeOptions" value="{{d.value}}">{{d.text}}</option>
-	            </select>
-            </td>
-            <td></td>
-        </tr>
-    </tbody>
-</table>
-
-<table>	
-	<thead>
-	    <tr>
-	        <th width="50px">Width (px)</th>
-	        <th>Height (px)</th>
-	    </tr>
-	</thead>
-    <tbody>
-        <tr>
-            <td>
-            <input type="text" name="displayName" ng-model="reportRunJson.width" style="width:100px;">
-            </td>
-            <td>
-            <input type="text" name="displayName" ng-model="reportRunJson.height" style="width:100px;">
-            </td>
-        </tr>
-    </tbody>
-</table>
-
-<table>	
-	<thead>
-	    <tr>
-	        <th width="50px">Title</th>
-	    </tr>
-	</thead>
-    <tbody>
-        <tr>
-    		<fieldset role="radiogroup" radio-group-accessibility>
-            <td>
-            <label for="optionsRadiosShowTitleTrue" class="radio">
-                <input type="radio" ng-model="reportRunJson.showTitle" id="optionsRadiosShowTitleTrue" name="optionsRadiosShowTitleTrue" value="true">
-                <i class="skin"></i>
-                <span>Show</span>
-            </label>            
-            </td>
-            <td>
-            <label for="optionsRadiosShowTitleFalse" class="radio">
-                <input type="radio" ng-model="reportRunJson.showTitle" id="optionsRadiosShowTitleFalse" name="optionsRadiosShowTitleFalse" value="false">
-                <i class="skin"></i>
-                <span>Hide</span>
-            </label>            
-            </td>
-            </fieldset>
-        </tr>
-        
-    </tbody>
-</table>
-
-<table>	
-	<thead>
-	    <tr>
-	        <th width="30%">Domain Axis</th>
-	        <th  width="30%">Category</th>
-	        <th  width="40%"></th>
-	    </tr>
-	</thead>
-    <tbody>
-        <tr>
-            <td>
-				<select name="chartType" b2b-dropdown ng-model="reportRunJson.domainAxis">
-					<option b2b-dropdown-list option-repeat="d in reportRunJson.chartColumnJSONList" value="{{d.value}}">{{d.title}}</option>
-	            </select>
-            </td>
-            <td>
-				<select name="chartType" b2b-dropdown ng-model="reportRunJson.categoryAxis">
-					<option b2b-dropdown-list option-repeat="d in reportRunJson.chartColumnJSONList" value="{{d.value}}">{{d.title}}</option>
-	            </select>
-            </td>
-        </tr>
-    </tbody>
-</table>
-
-
-	<div id="RangeTable">
-
-<table ng-repeat="rangeReport in reportRunJson.rangeAxisList">
-	<thead>
-	    <tr>
-	        <th width="18%">Range Axis</th>
-	        <th  width="15%">Y Axis</th>
-	        <th  width="15%">Chart Title</th>
-	        <th  width="22%">Color</th>
-	        <th  width="25%">Line Type</th>
-	        <th></th>	        
-	    </tr>
-	</thead>
-    <tbody>
-        <tr>
-            <td>
-				<select name="chartType" b2b-dropdown ng-model="rangeReport.rangeAxisLabelJSON.value" placeholder-text="Select" ng-disabled="rangeReport.removed=='true'">
-					<option b2b-dropdown-list option-repeat="d in reportRunJson.chartColumnJSONList" value="{{d.value}}">{{d.title}}</option>
-				</select>
-            </td>
-            <td>
-            	<input type="text" name="displayName" ng-model="rangeReport.rangeYAxis" ng-disabled="rangeReport.removed=='true'" style="width:100px;">
-            </td>
-            <td>
-            	<input type="text" name="displayName" ng-model="rangeReport.rangeChartGroup" ng-disabled="rangeReport.removed=='true'" style="width:150px;">
-            </td>
-            <td>
-				<select name="chartType" b2b-dropdown ng-model="rangeReport.rangeColor" ng-disabled="rangeReport.removed=='true'">
-					<option b2b-dropdown-list option-repeat="d in rangeColors" value="{{d.value}}">{{d.title}}</option>
-				</select>
-            </td>
-            <td>
-				<select name="lineType" b2b-dropdown ng-model="rangeReport.rangeLineType" ng-disabled="rangeReport.removed=='true'">
-					<option b2b-dropdown-list option-repeat="d in lineTypes"  value="{{d.value}}">{{d.title}}</option>
-				</select>
-            </td>
-            <td>
-            	<button ng-show="$index==0" type="submit" style="width: 90px; height:35px;margin-left:5px;" class="btn btn-secondary btn-small" ng-click="addRangeAxisRow()">Add</button>
-            	<span ng-hide="$index==0">
-            		<button ng-if="rangeReport.removed!='true'" type="submit" style="width: 90px; height:35px;margin-left:5px;" class="btn btn-secondary btn-small" ng-click="removeRangeAxisRow($index)">Remove</button>
-            		<button ng-if="rangeReport.removed=='true'" type="submit" style="width: 90px; height:35px;margin-left:5px;" class="btn btn-secondary btn-small" disabled="disabled">Removed</button>
-            	</span>
-            </td>
-        </tr>
-      
-    </tbody>
-</table>
-</div>
+	<div ng-hide="showLoader">
+		<div>
+			<div class="form-row">
+				<label for="checkbox1" class="checkbox"> <input
+					id="checkbox1" type="checkbox" ng-model="reportRunJson.animation" /><i
+					class="skin"></i><span>Animation</span>
+				</label>
+			</div>
+			<table>
+				<thead>
+					<tr>
+						<th width="30%">Chart Type</th>
+						<th></th>
+					</tr>
+				</thead>
 
-</div>
-             
-<div ng-show=false style="min-height:500px" data-ng-init="init()">
-	<div class="fn-ebz-container" >
-		<label class="fn-ebz-text-label">Chart Type</label><BR>
-		<div class="form-field" att-select="chartTypes" ng-model="reportRunJson.chartTypeJSON" placeholder="Select an Option" show-input-filter="true" ng-change="actionClicked()"></div>
-	</div>
-	
-	
-	<div class="fn-ebz-container" style="position:relative; top: -8px;">
-		<label class="fn-ebz-text-label">Animate</label><BR>
-			<div><input type="checkbox" ng-model="reportRunJson.animation" att-checkbox data-ng-value="true"></div>
-	</div>
-	<BR>
-	
-	<div class="fn-ebz-container" >
-		<label class="fn-ebz-text-label">Width (Px)</label><BR>
-		<input type="text"  name="chartWidth"  maxlength=4  only-digits ng-model="reportRunJson.width" style="width:80px"/>
-	</div> 
-	
-	<div class="fn-ebz-container" >
-		<label class="fn-ebz-text-label">Height (Px)</label><BR>
-		<input type="text" name="chartHeight" maxlength=4  only-digits ng-model="reportRunJson.height" style="width:80px"/>
-	</div>
-	<BR>
-	
-	<div class="fn-ebz-container">
-		<label class="fn-ebz-text-label">Title</label><BR>
-		<span><input  name="tle" type="radio" ng-model="reportRunJson.showTitle"  data-ng-value="true"/>Show</span>
-		<span><input name="tle" type="radio" ng-model="reportRunJson.showTitle" data-ng-value="false"/>Hide</span>
-	</div>
-	<BR>
-	
-
-	<div class="fn-ebz-container" >
-		<label class="fn-ebz-text-label">Domain Axis</label><BR>
-		<div class="form-field" att-select="reportRunJson.chartColumnJSONList" ng-model="reportRunJson.domainAxisJSON" placeholder="Select an Option" show-input-filter="true"></div>
-	</div>  
-	
-	<div class="fn-ebz-container" >
-		<label class="fn-ebz-text-label">Category</label><BR>
-		<div class="form-field" att-select="reportRunJson.chartColumnJSONList" ng-model="reportRunJson.categoryAxis" placeholder="" show-input-filter="true"></div>
-	</div>
-	<BR>
-
-<div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">	
-<div ng-repeat="rangeReport in reportRunJson.rangeAxisList">	
-	<div style="margin-left:5px">
-	<div class="fn-ebz-container">
-		<label class="fn-ebz-text-label">Range Axis</label><BR>
-		<div class="form-field" att-select="reportRunJson.chartColumnJSONList" 
-			ng-model="rangeReport.rangeAxisLabelJSON" placeholder="Select an Option" show-input-filter="true"></div>
-	</div>
-	
-	
-	<div class="fn-ebz-container" >
-		<label class="fn-ebz-text-label">Y Axis</label><BR>
-		<input id="yaxs" type="text" name="yAxis" maxlength=50 ng-model=rangeReport.rangeYAxis style="width:100px"/>
-	</div>
-	
-	<div class="fn-ebz-container" >
-		<label class="fn-ebz-text-label">Chart Title</label><BR>
-		<input type="text" name="chartTitle"  maxlength=50 ng-model="rangeReport.rangeChartGroup" style="width:200px"/>
-	</div>
-	
-	<div class="fn-ebz-container" >
-		<label class="fn-ebz-text-label">Color</label><BR>
-		<div class="form-field" att-select="rangeColors" ng-model="rangeReport.rangeColorJSON" placeholder="Select an Option" show-input-filter="true"></div>
-	</div>
-	
-	<div class="fn-ebz-container" >
-		<label class="fn-ebz-text-label">Line Type</label><BR>
-		<div class="form-field" att-select="lineTypes" ng-model="rangeReport.rangeLineTypeJSON" placeholder="Select an Option" show-input-filter="true"></div>
-	</div>
-	
-	<div class="fn-ebz-container" ng-show="reportRunJson.chartTypeJSON.value=='FlexTimeChart' || 
-			reportRunJson.chartTypeJSON.value=='AnnotationChart'" style="position:relative; top: -8px;">
-		<label class="fn-ebz-text-label">Area</label><BR>
-		<input type="checkbox" ng-model="rangeReport.showAsArea" att-checkbox data-ng-value="true">
-	</div>
-	
-	<div class="fn-ebz-container" style="position:relative; top: 25px;">
-	<a href="javascript:void(0)" ng-show="{{$index==0}}" style="float: right;" att-button btn-type="secondary" size="small" att-accessibility-click="13,32" 
-			ng-click="addRangeAxisRow(rangeReport);" >Add</a>
-	<a href="javascript:void(0)" ng-show="{{$index>0}}" style="float: right;" att-button btn-type="secondary" size="small" att-accessibility-click="13,32" ng-click="removeRangeAxisRow($index);" >
-			Remove</a>
-	  </div>
-	  </div>
-	 </div>
-	</div>
-	<BR>
-	
-<accordion close-others="true" css="att-accordion--no-box">
-	<accordion-group id="additionalOptions" heading="Additional Options"  child-length="10">
-	<div class="fn-ebz-container">
-		<label class="fn-ebz-text-label">Primary Axis Label</label><BR>
-		<input type="text" name="prAxis" maxlength=50 ng-model="reportRunJson.primaryAxisLabel" style="width:210px"/>
-	</div>
-	<div class="fn-ebz-container" >
-		<label class="fn-ebz-text-label">Secondary Axis Label</label><BR>
-		<input type="text" name="secAxis" maxlength=75 ng-model="reportRunJson.secondaryAxisLabel"  style="width:210px"/>
-	</div>
-	<BR>
-	<div class="fn-ebz-container" >
-		<label class="fn-ebz-text-label">Range Axis Minimum Range</label><BR>
-		<input type="text" name="rAxisMinRange" only-digits ng-model="reportRunJson.minRange" style="width:210px"/>
-	</div>
-	<div class="fn-ebz-container">
-		<label class="fn-ebz-text-label">Maximum Range</label><BR>
-		<input type="text" name="rAxisMaxRange" only-digits ng-model="reportRunJson.maxRange"  ng-maxLength="35" style="width:210px"/>
-	</div><BR>
-	</accordion-group>
-</accordion>
-	
-	
-	
-
-<div ng-show="reportRunJson.chartType=='BarChart3D'">
-  
-  	<accordion close-others="true" css="att-accordion--no-box">
-	<accordion-group id="accBar" heading="Bar Chart Options"  child-length="10">
-  				
-	
-	<div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
-		<div class="fn-ebz-container" style="position:relative;margin:10px;" >
-			<label class="fn-ebz-text-label">Orientation</label><BR>
-			<span><input  name="orient" type="radio" ng-model="reportRunJson.barChartOptions.verticalOrientation"  data-ng-value="true"/>Vertical</span>
-			<span><input name="orient" type="radio" ng-model="reportRunJson.barChartOptions.verticalOrientation" data-ng-value="false"/>Horizontal</span>
+				<tbody>
+					<tr>
+						<td><select name="chartType" b2b-dropdown
+							ng-model="reportRunJson.chartType">
+								<option b2b-dropdown-list option-repeat="d in chartTypeOptions"
+									value="{{d.value}}">{{d.text}}</option>
+						</select></td>
+						<td></td>
+					</tr>
+				</tbody>
+			</table>
+
+			<table>
+				<thead>
+					<tr>
+						<th width="50px">Width (px)</th>
+						<th>Height (px)</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td><input type="text" name="displayName"
+							ng-model="reportRunJson.width" style="width: 100px;"></td>
+						<td><input type="text" name="displayName"
+							ng-model="reportRunJson.height" style="width: 100px;"></td>
+					</tr>
+				</tbody>
+			</table>
+
+			<table>
+				<thead>
+					<tr>
+						<th width="50px">Title</th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<fieldset role="radiogroup" radio-group-accessibility>
+							<td><label for="optionsRadiosShowTitleTrue" class="radio">
+									<input type="radio" ng-model="reportRunJson.showTitle"
+									id="optionsRadiosShowTitleTrue"
+									name="optionsRadiosShowTitleTrue" value="true"> <i
+									class="skin"></i> <span>Show</span>
+							</label></td>
+							<td><label for="optionsRadiosShowTitleFalse" class="radio">
+									<input type="radio" ng-model="reportRunJson.showTitle"
+									id="optionsRadiosShowTitleFalse"
+									name="optionsRadiosShowTitleFalse" value="false"> <i
+									class="skin"></i> <span>Hide</span>
+							</label></td>
+						</fieldset>
+					</tr>
+
+				</tbody>
+			</table>
+
+			<table>
+				<thead>
+					<tr>
+						<th width="30%">Domain Axis</th>
+						<th width="30%">Category</th>
+						<th width="40%"></th>
+					</tr>
+				</thead>
+				<tbody>
+					<tr>
+						<td><select name="chartType" b2b-dropdown
+							ng-model="reportRunJson.domainAxis">
+								<option b2b-dropdown-list
+									option-repeat="d in reportRunJson.chartColumnJSONList"
+									value="{{d.value}}">{{d.title}}</option>
+						</select></td>
+						<td><select name="chartType" b2b-dropdown
+							ng-model="reportRunJson.categoryAxis">
+								<option b2b-dropdown-list
+									option-repeat="d in reportRunJson.chartColumnJSONList"
+									value="{{d.value}}">{{d.title}}</option>
+						</select></td>
+					</tr>
+				</tbody>
+			</table>
+
+
+			<div id="RangeTable">
+			
+				<table ng-repeat="rangeReport in reportRunJson.rangeAxisList">
+					<thead>
+						<tr>
+							<th width="18%">Range Axis</th>
+							<th width="15%">Y Axis</th>
+							<th width="15%">Chart Title</th>
+							<th width="22%">Color</th>
+							<th width="25%">Line Type</th>
+							<th></th>
+						</tr>
+					</thead>
+					<tbody>
+						<tr>
+							<td><select name="chartType" b2b-dropdown
+								ng-model="rangeReport.rangeAxisLabelJSON.value"
+								placeholder-text="Select"
+								ng-disabled="rangeReport.removed=='true'">
+									<option b2b-dropdown-list
+										option-repeat="d in reportRunJson.chartColumnJSONList"
+										value="{{d.value}}">{{d.title}}</option>
+							</select></td>
+							<td><input type="text" name="displayName"
+								ng-model="rangeReport.rangeYAxis"
+								ng-disabled="rangeReport.removed=='true'" style="width: 100px;">
+							</td>
+							<td><input type="text" name="displayName"
+								ng-model="rangeReport.rangeChartGroup"
+								ng-disabled="rangeReport.removed=='true'" style="width: 150px;">
+							</td>
+							<td><select name="chartType" b2b-dropdown
+								ng-model="rangeReport.rangeColor"
+								ng-disabled="rangeReport.removed=='true'">
+									<option b2b-dropdown-list option-repeat="d in rangeColors"
+										value="{{d.value}}">{{d.title}}</option>
+							</select></td>
+							<td><select name="lineType" b2b-dropdown
+								ng-model="rangeReport.rangeLineType"
+								ng-disabled="rangeReport.removed=='true'">
+									<option b2b-dropdown-list option-repeat="d in lineTypes"
+										value="{{d.value}}">{{d.title}}</option>
+							</select></td>
+							<td><span>
+									<button ng-if="rangeReport.removed!='true'" type="submit"
+										style="width: 90px; height: 35px; margin-left: 5px;"
+										class="btn btn-secondary btn-small"
+										ng-click="removeRangeAxisRow($index)">Remove</button>
+									<button ng-if="rangeReport.removed=='true'" type="submit"
+										style="width: 90px; height: 35px; margin-left: 5px;"
+										class="btn btn-secondary btn-small" disabled="disabled">Removed</button>
+							</span></td>
+						</tr>
+
+					</tbody>
+				</table>
+				<div align="right" style="margin-right:20px">
+					<button type="submit" class="btn btn-secondary btn-small" ng-click="addRangeAxisRow()">Add</button>
+				</div>
+			</div>
 		</div>
-	
-	<div class="fn-ebz-container" style="position:relative;margin:10px;">
-		<label class="fn-ebz-text-label">Stacked</label><BR>
-		<span><input  name="stack" type="radio" ng-model="reportRunJson.barChartOptions.stackedChart"  data-ng-value="true"/>Yes</span>
-		<span><input name="stack" type="radio" ng-model="reportRunJson.barChartOptions.stackedChart" data-ng-value="false"/>No</span>
-	</div>
-	
-	<div class="fn-ebz-container" style="position:relative;margin:10px;">
-		<label class="fn-ebz-text-label">Show Controls</label><BR>
-		<span><input  name="shwcontrol" type="radio" ng-model="reportRunJson.barChartOptions.displayBarControls"  data-ng-value="true"/>Yes</span>
-		<span><input name="shwcontrol" type="radio" ng-model="reportRunJson.barChartOptions.displayBarControls" data-ng-value="false"/>No</span>
-	</div>
-	
-	<div class="fn-ebz-container" style="position:relative;margin:10px;">
-		<label class="fn-ebz-text-label">XAxis Date Type</label><BR>
-		<span><input  name="xAxisDtype" type="radio" ng-model="reportRunJson.barChartOptions.xAxisDateType"  data-ng-value="true"/>Yes</span>
-		<span><input name="xAxisDtype" type="radio" ng-model="reportRunJson.barChartOptions.xAxisDateType" data-ng-value="false"/>No</span>
-	</div>
-	
-	<div class="fn-ebz-container" style="position:relative;margin:10px;">
-		<label class="fn-ebz-text-label">Display less XAxis tickers</label><BR>
-		<span><input  name="xTicker" type="radio" ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers"  data-ng-value="true"/>Yes</span>
-		<span><input name="xTicker" type="radio" ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers" data-ng-value="false"/>No</span>
-	</div><BR>
-	
-	<div class="fn-ebz-container" style="position:relative;margin:10px;">
-		<label class="fn-ebz-text-label">Is Time Axis?</label><BR>
-		<span><input  name="timeAxis" type="radio" ng-model="reportRunJson.barChartOptions.timeAxis"  data-ng-value="true"/>Yes</span>
-		<span><input name="timeAxis" type="radio" ng-model="reportRunJson.barChartOptions.timeAxis" data-ng-value="false"/>No</span>
-	</div>
-	
-	<div class="fn-ebz-container" style="position:relative;margin:10px;">
-		<label class="fn-ebz-text-label">Log Scale (Y Axis)</label><BR>
-		<span><input type="checkbox" ng-model="reportRunJson.barChartOptions.yAxisLogScale" att-checkbox data-ng-value="true"></span>
-		
-	</div>
- </div>
 
-  </accordion-group>
-</accordion>
-</div>
-	{{reportRunJson.chartType}}
-	<div ng-show="reportRunJson.chartType=='TimeSeriesChart'">
-	 <accordion close-others="true" css="att-accordion--no-box">
-		<accordion-group id="accTimeChart"  heading="Time Series Chart Options"  child-length="10">
-		
-		<div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
-			<div style="margin-left:5px">
+		<div ng-show=false style="min-height: 500px" data-ng-init="init()">
 			<div class="fn-ebz-container">
-				<label class="fn-ebz-text-label">Render as</label><BR>
-				<span><input  name="renderAs" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer"  value="line"/>Line</span>
-				<span><input name="orient" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer" value="area"/>Area</span>
+				<label class="fn-ebz-text-label">Chart Type</label><BR>
+				<div class="form-field" att-select="chartTypes"
+					ng-model="reportRunJson.chartTypeJSON"
+					placeholder="Select an Option" show-input-filter="true"
+					ng-change="actionClicked()"></div>
 			</div>
-	
-		<div class="fn-ebz-container" style="position:relative;margin:10px;">
-			<label class="fn-ebz-text-label">X Axis Label</label><BR>
-			<span><input type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.showXAxisLabel" att-checkbox data-ng-value="true"></span>
-		</div><BR>
-		
-		<div class="fn-ebz-container" style="position:relative;bottom:10px;">
-			<label class="fn-ebz-text-label">X Axis <br>Tickers</label><BR>
-			<span style="position:relative;top:10px;"><input type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.addXAxisTicker" att-checkbox data-ng-value="true"></span>
-		</div>
-		
-		<div class="fn-ebz-container" style="position:relative;margin:20px;">
-			<label class="fn-ebz-text-label">Is Time Axis?</label><BR>
-			<span><input  name="timeAxisChart" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.nonTimeAxis"  data-ng-value="true"/>Yes</span>
-			<span><input name="timeAxisChart" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.nonTimeAxis" data-ng-value="false"/>No</span>
-		</div>
-		
-		<div class="fn-ebz-container" style="position:relative;margin:10px;">
-			<label class="fn-ebz-text-label">Multi Series?</label><BR>
-			<span><input  name="mSeries" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.multiSeries"  data-ng-value="true"/>Yes</span>
-			<span><input name="mSeries" type="radio" ng-model="reportRunJson.timeSeriesChartOptions.multiSeries" data-ng-value="false"/>No</span>
-		</div>
-		 </div>
-		</div>
-	
-	 </accordion-group>
-	</accordion>
-	
-	</div>
-	
-	<div>		
-		
-		<accordion close-others="true" css="att-accordion--no-box">
-		<accordion-group id="accFlexTimeChart"  heading="Flex Time Series Chart Options"  child-length="10">
-		
-		<div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
-			<div style="margin-left:5px">
-		<div class="fn-ebz-container">
-			<label class="fn-ebz-text-label">Zoom-In Window</label><BR>
-			<span><input type="text" name="zWindow" only-digits maxlength=3 ng-model="reportRunJson.flexTimeSeriesChartOptions.zoomIn"></span>
-		</div>
-		
-		<div class="fn-ebz-container" style="position:relative;margin:10px;">
-			<label class="fn-ebz-text-label">Time Axis Type</label><BR>
-			<span><input  name="timeAxisType" type="radio" ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType"  value="weekly"/>Weekly</span>
-			<span><input name="timeAxisType" type="radio" ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType" value="daily"/>Daily</span>
-			<span><input name="timeAxisType" type="radio" ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType" value="hourly"/>Hourly</span>
-			<span><input name="timeAxisType" type="radio" ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType" value="30min"/>30 Min</span>
+
+
+			<div class="fn-ebz-container" style="position: relative; top: -8px;">
+				<label class="fn-ebz-text-label">Animate</label><BR>
+				<div>
+					<input type="checkbox" ng-model="reportRunJson.animation"
+						att-checkbox data-ng-value="true">
+				</div>
+			</div>
+			<BR>
+
+			<div class="fn-ebz-container">
+				<label class="fn-ebz-text-label">Width (Px)</label><BR> <input
+					type="text" name="chartWidth" maxlength=4 only-digits
+					ng-model="reportRunJson.width" style="width: 80px" />
+			</div>
+
+			<div class="fn-ebz-container">
+				<label class="fn-ebz-text-label">Height (Px)</label><BR> <input
+					type="text" name="chartHeight" maxlength=4 only-digits
+					ng-model="reportRunJson.height" style="width: 80px" />
+			</div>
+			<BR>
+
+			<div class="fn-ebz-container">
+				<label class="fn-ebz-text-label">Title</label><BR> <span><input
+					name="tle" type="radio" ng-model="reportRunJson.showTitle"
+					data-ng-value="true" />Show</span> <span><input name="tle"
+					type="radio" ng-model="reportRunJson.showTitle"
+					data-ng-value="false" />Hide</span>
+			</div>
+			<BR>
+
+
+			<div class="fn-ebz-container">
+				<label class="fn-ebz-text-label">Domain Axis</label><BR>
+				<div class="form-field"
+					att-select="reportRunJson.chartColumnJSONList"
+					ng-model="reportRunJson.domainAxisJSON"
+					placeholder="Select an Option" show-input-filter="true"></div>
+			</div>
+
+			<div class="fn-ebz-container">
+				<label class="fn-ebz-text-label">Category</label><BR>
+				<div class="form-field"
+					att-select="reportRunJson.chartColumnJSONList"
+					ng-model="reportRunJson.categoryAxis" placeholder=""
+					show-input-filter="true"></div>
+			</div>
+			<BR>
+
+			<div
+				style="border: 2px; border-style: solid; border-color: #808080; margin-bottom: 9px">
+				<div ng-repeat="rangeReport in reportRunJson.rangeAxisList">
+					<div style="margin-left: 5px">
+						<div class="fn-ebz-container">
+							<label class="fn-ebz-text-label">Range Axis</label><BR>
+							<div class="form-field"
+								att-select="reportRunJson.chartColumnJSONList"
+								ng-model="rangeReport.rangeAxisLabelJSON"
+								placeholder="Select an Option" show-input-filter="true"></div>
+						</div>
+
+
+						<div class="fn-ebz-container">
+							<label class="fn-ebz-text-label">Y Axis</label><BR> <input
+								id="yaxs" type="text" name="yAxis" maxlength=50
+								ng-model=rangeReport.rangeYAxis style="width: 100px" />
+						</div>
+
+						<div class="fn-ebz-container">
+							<label class="fn-ebz-text-label">Chart Title</label><BR> <input
+								type="text" name="chartTitle" maxlength=50
+								ng-model="rangeReport.rangeChartGroup" style="width: 200px" />
+						</div>
+
+						<div class="fn-ebz-container">
+							<label class="fn-ebz-text-label">Color</label><BR>
+							<div class="form-field" att-select="rangeColors"
+								ng-model="rangeReport.rangeColorJSON"
+								placeholder="Select an Option" show-input-filter="true"></div>
+						</div>
+
+						<div class="fn-ebz-container">
+							<label class="fn-ebz-text-label">Line Type</label><BR>
+							<div class="form-field" att-select="lineTypes"
+								ng-model="rangeReport.rangeLineTypeJSON"
+								placeholder="Select an Option" show-input-filter="true"></div>
+						</div>
+
+						<div class="fn-ebz-container"
+							ng-show="reportRunJson.chartTypeJSON.value=='FlexTimeChart' || 
+			reportRunJson.chartTypeJSON.value=='AnnotationChart'"
+							style="position: relative; top: -8px;">
+							<label class="fn-ebz-text-label">Area</label><BR> <input
+								type="checkbox" ng-model="rangeReport.showAsArea" att-checkbox
+								data-ng-value="true">
+						</div>
+
+						<div class="fn-ebz-container"
+							style="position: relative; top: 25px;">
+							<a href="javascript:void(0)" ng-show="{{$index==0}}"
+								style="float: right;" att-button btn-type="secondary"
+								size="small" att-accessibility-click="13,32"
+								ng-click="addRangeAxisRow(rangeReport);">Add</a> <a
+								href="javascript:void(0)" ng-show="{{$index>0}}"
+								style="float: right;" att-button btn-type="secondary"
+								size="small" att-accessibility-click="13,32"
+								ng-click="removeRangeAxisRow($index);"> Remove</a>
+						</div>
+					</div>
+				</div>
+			</div>
+			<BR>
+
+			<accordion close-others="true" css="att-accordion--no-box">
+			<accordion-group id="additionalOptions" heading="Additional Options"
+				child-length="10">
+			<div class="fn-ebz-container">
+				<label class="fn-ebz-text-label">Primary Axis Label</label><BR>
+				<input type="text" name="prAxis" maxlength=50
+					ng-model="reportRunJson.primaryAxisLabel" style="width: 210px" />
+			</div>
+			<div class="fn-ebz-container">
+				<label class="fn-ebz-text-label">Secondary Axis Label</label><BR>
+				<input type="text" name="secAxis" maxlength=75
+					ng-model="reportRunJson.secondaryAxisLabel" style="width: 210px" />
+			</div>
+			<BR>
+			<div class="fn-ebz-container">
+				<label class="fn-ebz-text-label">Range Axis Minimum Range</label><BR>
+				<input type="text" name="rAxisMinRange" only-digits
+					ng-model="reportRunJson.minRange" style="width: 210px" />
+			</div>
+			<div class="fn-ebz-container">
+				<label class="fn-ebz-text-label">Maximum Range</label><BR> <input
+					type="text" name="rAxisMaxRange" only-digits
+					ng-model="reportRunJson.maxRange" ng-maxLength="35"
+					style="width: 210px" />
+			</div>
+			<BR>
+			</accordion-group> </accordion>
+
+
+
+
+			<div ng-show="reportRunJson.chartType=='BarChart3D'">
+
+				<accordion close-others="true" css="att-accordion--no-box">
+				<accordion-group id="accBar" heading="Bar Chart Options"
+					child-length="10">
+
+
+				<div
+					style="border: 2px; border-style: solid; border-color: #808080; margin-bottom: 9px">
+					<div class="fn-ebz-container"
+						style="position: relative; margin: 10px;">
+						<label class="fn-ebz-text-label">Orientation</label><BR> <span><input
+							name="orient" type="radio"
+							ng-model="reportRunJson.barChartOptions.verticalOrientation"
+							data-ng-value="true" />Vertical</span> <span><input name="orient"
+							type="radio"
+							ng-model="reportRunJson.barChartOptions.verticalOrientation"
+							data-ng-value="false" />Horizontal</span>
+					</div>
+
+					<div class="fn-ebz-container"
+						style="position: relative; margin: 10px;">
+						<label class="fn-ebz-text-label">Stacked</label><BR> <span><input
+							name="stack" type="radio"
+							ng-model="reportRunJson.barChartOptions.stackedChart"
+							data-ng-value="true" />Yes</span> <span><input name="stack"
+							type="radio"
+							ng-model="reportRunJson.barChartOptions.stackedChart"
+							data-ng-value="false" />No</span>
+					</div>
+
+					<div class="fn-ebz-container"
+						style="position: relative; margin: 10px;">
+						<label class="fn-ebz-text-label">Show Controls</label><BR> <span><input
+							name="shwcontrol" type="radio"
+							ng-model="reportRunJson.barChartOptions.displayBarControls"
+							data-ng-value="true" />Yes</span> <span><input name="shwcontrol"
+							type="radio"
+							ng-model="reportRunJson.barChartOptions.displayBarControls"
+							data-ng-value="false" />No</span>
+					</div>
+
+					<div class="fn-ebz-container"
+						style="position: relative; margin: 10px;">
+						<label class="fn-ebz-text-label">XAxis Date Type</label><BR>
+						<span><input name="xAxisDtype" type="radio"
+							ng-model="reportRunJson.barChartOptions.xAxisDateType"
+							data-ng-value="true" />Yes</span> <span><input name="xAxisDtype"
+							type="radio"
+							ng-model="reportRunJson.barChartOptions.xAxisDateType"
+							data-ng-value="false" />No</span>
+					</div>
+
+					<div class="fn-ebz-container"
+						style="position: relative; margin: 10px;">
+						<label class="fn-ebz-text-label">Display less XAxis
+							tickers</label><BR> <span><input name="xTicker" type="radio"
+							ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers"
+							data-ng-value="true" />Yes</span> <span><input name="xTicker"
+							type="radio"
+							ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers"
+							data-ng-value="false" />No</span>
+					</div>
+					<BR>
+
+					<div class="fn-ebz-container"
+						style="position: relative; margin: 10px;">
+						<label class="fn-ebz-text-label">Is Time Axis?</label><BR> <span><input
+							name="timeAxis" type="radio"
+							ng-model="reportRunJson.barChartOptions.timeAxis"
+							data-ng-value="true" />Yes</span> <span><input name="timeAxis"
+							type="radio" ng-model="reportRunJson.barChartOptions.timeAxis"
+							data-ng-value="false" />No</span>
+					</div>
+
+					<div class="fn-ebz-container"
+						style="position: relative; margin: 10px;">
+						<label class="fn-ebz-text-label">Log Scale (Y Axis)</label><BR>
+						<span><input type="checkbox"
+							ng-model="reportRunJson.barChartOptions.yAxisLogScale"
+							att-checkbox data-ng-value="true"></span>
+
+					</div>
+				</div>
+
+				</accordion-group> </accordion>
+			</div>
+			{{reportRunJson.chartType}}
+			<div ng-show="reportRunJson.chartType=='TimeSeriesChart'">
+				<accordion close-others="true" css="att-accordion--no-box">
+				<accordion-group id="accTimeChart"
+					heading="Time Series Chart Options" child-length="10">
+
+				<div
+					style="border: 2px; border-style: solid; border-color: #808080; margin-bottom: 9px">
+					<div style="margin-left: 5px">
+						<div class="fn-ebz-container">
+							<label class="fn-ebz-text-label">Render as</label><BR> <span><input
+								name="renderAs" type="radio"
+								ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer"
+								value="line" />Line</span> <span><input name="orient"
+								type="radio"
+								ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer"
+								value="area" />Area</span>
+						</div>
+
+						<div class="fn-ebz-container"
+							style="position: relative; margin: 10px;">
+							<label class="fn-ebz-text-label">X Axis Label</label><BR> <span><input
+								type="checkbox"
+								ng-model="reportRunJson.timeSeriesChartOptions.showXAxisLabel"
+								att-checkbox data-ng-value="true"></span>
+						</div>
+						<BR>
+
+						<div class="fn-ebz-container"
+							style="position: relative; bottom: 10px;">
+							<label class="fn-ebz-text-label">X Axis <br>Tickers
+							</label><BR> <span style="position: relative; top: 10px;"><input
+								type="checkbox"
+								ng-model="reportRunJson.timeSeriesChartOptions.addXAxisTicker"
+								att-checkbox data-ng-value="true"></span>
+						</div>
+
+						<div class="fn-ebz-container"
+							style="position: relative; margin: 20px;">
+							<label class="fn-ebz-text-label">Is Time Axis?</label><BR> <span><input
+								name="timeAxisChart" type="radio"
+								ng-model="reportRunJson.timeSeriesChartOptions.nonTimeAxis"
+								data-ng-value="true" />Yes</span> <span><input
+								name="timeAxisChart" type="radio"
+								ng-model="reportRunJson.timeSeriesChartOptions.nonTimeAxis"
+								data-ng-value="false" />No</span>
+						</div>
+
+						<div class="fn-ebz-container"
+							style="position: relative; margin: 10px;">
+							<label class="fn-ebz-text-label">Multi Series?</label><BR> <span><input
+								name="mSeries" type="radio"
+								ng-model="reportRunJson.timeSeriesChartOptions.multiSeries"
+								data-ng-value="true" />Yes</span> <span><input name="mSeries"
+								type="radio"
+								ng-model="reportRunJson.timeSeriesChartOptions.multiSeries"
+								data-ng-value="false" />No</span>
+						</div>
+					</div>
+				</div>
+
+				</accordion-group> </accordion>
+
+			</div>
+
+			<div>
+
+				<accordion close-others="true" css="att-accordion--no-box">
+				<accordion-group id="accFlexTimeChart"
+					heading="Flex Time Series Chart Options" child-length="10">
+
+				<div
+					style="border: 2px; border-style: solid; border-color: #808080; margin-bottom: 9px">
+					<div style="margin-left: 5px">
+						<div class="fn-ebz-container">
+							<label class="fn-ebz-text-label">Zoom-In Window</label><BR>
+							<span><input type="text" name="zWindow" only-digits
+								maxlength=3
+								ng-model="reportRunJson.flexTimeSeriesChartOptions.zoomIn"></span>
+						</div>
+
+						<div class="fn-ebz-container"
+							style="position: relative; margin: 10px;">
+							<label class="fn-ebz-text-label">Time Axis Type</label><BR>
+							<span><input name="timeAxisType" type="radio"
+								ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType"
+								value="weekly" />Weekly</span> <span><input name="timeAxisType"
+								type="radio"
+								ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType"
+								value="daily" />Daily</span> <span><input name="timeAxisType"
+								type="radio"
+								ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType"
+								value="hourly" />Hourly</span> <span><input name="timeAxisType"
+								type="radio"
+								ng-model="reportRunJson.flexTimeSeriesChartOptions.timeAxisType"
+								value="30min" />30 Min</span>
+						</div>
+					</div>
+				</div>
+				</accordion-group> </accordion>
+
+			</div>
+
+
+
+
+
+
+
+
+			<accordion close-others="true" css="att-accordion--no-box">
+			<accordion-group id="accCommonOptions" heading="Common Options"
+				child-length="10">
+
+			<div
+				style="border: 2px; border-style: solid; border-color: #808080; margin-bottom: 9px">
+				<div style="margin-left: 5px">
+					<div class="fn-ebz-container">
+						<label class="fn-ebz-text-label">Legend Angle</label><BR> <span><input
+							name="langle" type="radio"
+							ng-model="reportRunJson.commonChartOptions.legendLabelAngle"
+							value="up45" />up 45&deg;</span> <span><input name="langle"
+							type="radio"
+							ng-model="reportRunJson.commonChartOptions.legendLabelAngle"
+							value="up90" />up 90&deg;</span> <span><input name="langle"
+							type="radio"
+							ng-model="reportRunJson.commonChartOptions.legendLabelAngle"
+							value="down45" />down 45&deg;</span> <span><input name="langle"
+							type="radio"
+							ng-model="reportRunJson.commonChartOptions.legendLabelAngle"
+							value="down90" />down 90&deg;</span> <span><input name="langle"
+							type="radio"
+							ng-model="reportRunJson.commonChartOptions.legendLabelAngle"
+							value="standard" />Standard</span>
+					</div>
+
+					<div class="fn-ebz-container"
+						style="position: relative; margin: 15px;">
+						<label class="fn-ebz-text-label">Legend Position</label><BR>
+						<span><input name="lgPosition" type="radio"
+							ng-model="reportRunJson.commonChartOptions.legendPosition"
+							value="top" />Top</span> <span><input name="lgPosition"
+							type="radio"
+							ng-model="reportRunJson.commonChartOptions.legendPosition"
+							value="bottom" />Bottom</span>
+					</div>
+					<BR>
+
+					<div class="fn-ebz-container">
+						<label class="fn-ebz-text-label">Legend</label><BR> <span><input
+							name="lgd" type="radio"
+							ng-model="reportRunJson.commonChartOptions.hideLegend"
+							data-ng-value="false" />Yes</span> <span><input name="lgd"
+							type="radio"
+							ng-model="reportRunJson.commonChartOptions.hideLegend"
+							data-ng-value="true" />No</span>
+					</div>
+
+					<div class="fn-ebz-container"
+						style="position: relative; margin: 10px;">
+						<label class="fn-ebz-text-label">Animation</label><BR> <span><input
+							name="anmtate" type="radio"
+							ng-model="reportRunJson.commonChartOptions.animateAnimatedChart"
+							data-ng-value="true" />Yes</span> <span><input name="anmtate"
+							type="radio"
+							ng-model="reportRunJson.commonChartOptions.animateAnimatedChart"
+							data-ng-value="false" />No</span>
+					</div>
+					<BR>
+
+					<div class="fn-ebz-container">
+						<label class="fn-ebz-text-label">Top Margin</label><BR> <input
+							type="text" name="reportRunJson.commonChartOptions.topMargin"
+							only-digits maxlength=3
+							ng-model="reportRunJson.commonChartOptions.topMargin"
+							style="width: 210px" />
+					</div>
+					<div class="fn-ebz-container">
+						<label class="fn-ebz-text-label">Bottom Margin</label><BR> <input
+							type="text" name="reportRunJson.commonChartOptions.bottomMargin"
+							only-digits maxlength=3
+							ng-model="reportRunJson.commonChartOptions.bottomMargin"
+							style="width: 210px" />
+					</div>
+					<div class="fn-ebz-container">
+						<label class="fn-ebz-text-label">Left Margin</label><BR> <input
+							type="text" name="reportRunJson.commonChartOptions.leftMargin"
+							only-digits maxlength=3
+							ng-model="reportRunJson.commonChartOptions.leftMargin"
+							style="width: 210px" />
+					</div>
+					<div class="fn-ebz-container">
+						<label class="fn-ebz-text-label">Right Margin</label><BR> <input
+							type="text" name="reportRunJson.commonChartOptions.rightMargin"
+							only-digits maxlength=3
+							ng-model="reportRunJson.commonChartOptions.rightMargin"
+							style="width: 210px">
+					</div>
+					<BR>
+				</div>
+			</div>
+			</accordion-group> </accordion>
+			<br />
+			<br /> <a href="javascript:void(0)" att-button btn-type="primary"
+				att-accessibility-click="13,32" ng-click="saveChartData();">Save</a>
+			<a
+				href="report#/report_run/c_master={{reportRunJson.reportID}}&refresh=Y"
+				att-button btn-type="primary" att-accessibility-click="13,32">Run</a>
 		</div>
-	  </div>
-	 </div>
-		</accordion-group>
-	</accordion>
-	
-	</div>	
-	
-	
-	
-	
-	
-	
-	 
-	
-	<accordion close-others="true" css="att-accordion--no-box">
-	<accordion-group id="accCommonOptions"  heading="Common Options"  child-length="10">
-	
-	<div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
-	<div style="margin-left:5px">
-	<div class="fn-ebz-container">
-		<label class="fn-ebz-text-label">Legend Angle</label><BR>
-		<span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="up45"/>up 45&deg;</span>
-		<span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="up90"/>up 90&deg;</span>
- 	    <span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="down45"/>down 45&deg;</span>
- 	    <span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="down90"/>down 90&deg;</span>
- 	    <span><input name="langle" type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" value="standard"/>Standard</span>
-	</div>
-	
-	<div class="fn-ebz-container" style="position:relative;margin:15px;">
-		<label class="fn-ebz-text-label">Legend Position</label><BR>
-		<span><input  name="lgPosition" type="radio" ng-model="reportRunJson.commonChartOptions.legendPosition"  value="top"/>Top</span>
-		<span><input name="lgPosition" type="radio" ng-model="reportRunJson.commonChartOptions.legendPosition" value="bottom"/>Bottom</span>
-	</div><BR>
-	
-	<div class="fn-ebz-container">
-		<label class="fn-ebz-text-label">Legend</label><BR>
-		<span><input name="lgd" type="radio" ng-model="reportRunJson.commonChartOptions.hideLegend" data-ng-value="false"/>Yes</span>
-		<span><input name="lgd" type="radio" ng-model="reportRunJson.commonChartOptions.hideLegend" data-ng-value="true"/>No</span>
-	</div>
-	
-	<div class="fn-ebz-container" style="position:relative;margin:10px;">
-		<label class="fn-ebz-text-label">Animation</label><BR>
-		<span><input name="anmtate"  type="radio" ng-model="reportRunJson.commonChartOptions.animateAnimatedChart" data-ng-value="true" />Yes</span>
-		<span><input name="anmtate"  type="radio" ng-model="reportRunJson.commonChartOptions.animateAnimatedChart" data-ng-value="false"/>No</span>
-	</div><BR>
-	
-	<div class="fn-ebz-container">
-		<label class="fn-ebz-text-label">Top Margin</label><BR>
-		<input type="text" name="reportRunJson.commonChartOptions.topMargin" only-digits maxlength=3 ng-model="reportRunJson.commonChartOptions.topMargin" style="width:210px"/>
-	</div>
-	<div class="fn-ebz-container">
-		<label class="fn-ebz-text-label">Bottom Margin</label><BR>
-		<input type="text" name="reportRunJson.commonChartOptions.bottomMargin" only-digits maxlength=3 ng-model="reportRunJson.commonChartOptions.bottomMargin"  style="width:210px"/>
-	</div>
-	<div class="fn-ebz-container">
-		<label class="fn-ebz-text-label">Left Margin</label><BR>
-		<input type="text" name="reportRunJson.commonChartOptions.leftMargin" only-digits maxlength=3 ng-model="reportRunJson.commonChartOptions.leftMargin" style="width:210px"/>
-	</div>
-	<div class="fn-ebz-container">
-		<label class="fn-ebz-text-label">Right Margin</label><BR>
-		<input type="text" name="reportRunJson.commonChartOptions.rightMargin" only-digits maxlength=3 ng-model="reportRunJson.commonChartOptions.rightMargin" style="width:210px">
-	  </div><BR>
-	 </div>
-	</div>
- </accordion-group>
-</accordion>
-	<br/><br/>
-	<a href="javascript:void(0)" att-button btn-type="primary" att-accessibility-click="13,32" ng-click="saveChartData();">Save</a>
-	<a href="report#/report_run/c_master={{reportRunJson.reportID}}&refresh=Y" att-button btn-type="primary" att-accessibility-click="13,32">Run</a>
-</div>
 
-<div>
-    <b2b-expanders class="mpc-expanders" is-open="additionalOptionOpen">            
-        <b2b-expander-heading>
-            <div class="row">    
-                <div class="span6">
-                    <div class="heading-medium b2b-blue" ng-class=" { 'b2b-toggle-header-active': !additionalOptionOpen, 'b2b-toggle-header-inactive': additionalOptionOpen } ">Additional Options</div>
-                    <p class="p-small">
-                    </p>                    
-                </div>
-                <div style="position: absolute;right: 250px;" class="span1">
-                	<i class="pull-right b2b-toggle-header-icon" b2b-expander-toggle b2b-accessibility-click="13,32" expand-icon="icon-primary-collapsed" collapse-icon="icon-primary-expanded" tabindex="0" aria-posinset="1" aria-setsize="2"></i>
-                </div>  
-            </div>    
-        </b2b-expander-heading>               
-        <b2b-expander-body>                   
-            <div>	 
-				<div id="RangeTable">
-				<table>
-					<thead>
-					    <tr>
-					        <th width="30%">Primary Axis Label</th>
-					        <th  width="30%">Secondary Axis Label</th>
-					        <th></th>	        
-					    </tr>
-					</thead>
-				    <tbody>
-				        <tr>
-				            <td>
-				            	<input type="text" name="primaryAxisLabel" ng-model="reportRunJson.primaryAxisLabel" style="width:200px;">
-				            </td>
-				            <td>
-				            	<input type="text" name="secondaryAxisLabel" ng-model="reportRunJson.secondaryAxisLabel" style="width:200px;">
-				            </td>
-				        </tr>
-				    </tbody>
-				</table>
-				<table>
-					<thead>
-					    <tr>
-					        <th width="30%">Range Axis Minimum Range</th>
-					        <th  width="30%">Maximum Range</th>
-					        <th></th>
-					    </tr>
-					</thead>
-				    <tbody>
-				        <tr>
-				            <td>
-				            	<input type="text" name="minRange" ng-model="reportRunJson.minRange" style="width:200px;">
-				            </td>
-				            <td>
-				            	<input type="text" name="maxRange" ng-model="reportRunJson.maxRange" style="width:200px;">
-				            </td>
-				        </tr>
-				    </tbody>
-				</table>
-				</div>            	
+		<div>
+			<b2b-expanders class="mpc-expanders" is-open="additionalOptionOpen">
+			<b2b-expander-heading>
+			<div class="row">
+				<div class="span6">
+					<div class="heading-medium b2b-blue"
+						ng-class=" { 'b2b-toggle-header-active': !additionalOptionOpen, 'b2b-toggle-header-inactive': additionalOptionOpen } ">Additional
+						Options</div>
+					<p class="p-small"></p>
+				</div>
+				<div style="position: absolute; right: 250px;" class="span1">
+					<i class="pull-right b2b-toggle-header-icon" b2b-expander-toggle
+						b2b-accessibility-click="13,32"
+						expand-icon="icon-primary-collapsed"
+						collapse-icon="icon-primary-expanded" tabindex="0"
+						aria-posinset="1" aria-setsize="2"></i>
+				</div>
 			</div>
-        </b2b-expander-body>     
-    </b2b-expanders>
-
-	<!-- BAR CHART OPTION SECTION STARTS HERE -->
-    <b2b-expanders ng-show="reportRunJson.chartType=='BarChart3D'" class="mpc-expanders" is-open="barChartOptionOpen">            
-        <b2b-expander-heading>
-            <div class="row">    
-                <div class="span6">
-                    <div class="heading-medium b2b-blue" ng-class=" { 'b2b-toggle-header-active': !barChartOptionOpen, 'b2b-toggle-header-inactive': barChartOptionOpen } ">Bar Chart Options</div>
-                    <p class="p-small">
-                    </p>                    
-                </div>
-                <div style="position: absolute;right: 250px;" class="span1">
-                	<i class="pull-right b2b-toggle-header-icon" b2b-expander-toggle b2b-accessibility-click="13,32" expand-icon="icon-primary-collapsed" collapse-icon="icon-primary-expanded" tabindex="0" aria-posinset="1" aria-setsize="2"></i>
-                </div>
-            </div>    
-        </b2b-expander-heading>               
-        <b2b-expander-body>                   
-            <div>	 
+			</b2b-expander-heading> <b2b-expander-body>
+			<div>
 				<div id="RangeTable">
-				<table>
-					<thead>
-					    <tr>
-					        <th width="25%">Orientation</th>
-					        <th  width="18%">Stacked</th>
-					        <th  width="18%">Show Controls</th>
-					        <th  width="18%">XAxis Date Type</th>
-					        <th  width="21%">Display less XAxis tickers</th>					        
-					        <th></th>	        
-					    </tr>
-					</thead>
-				    <tbody>
-				        <tr>
-				            <td>
-						            <label for="optionsOrientationVertical" class="radio">
-						                <input type="radio" ng-model="reportRunJson.barChartOptions.verticalOrientation" id="optionsOrientationVertical" name="optionsOrientationVertical" value="true">
-						                <i class="skin"></i>
-						                <span>Vertical</span>
-						            </label>            
-						            <label for="optionsOrientationHorizontal" class="radio">
-						                <input type="radio" ng-model="reportRunJson.barChartOptions.verticalOrientation" id="optionsOrientationHorizontal" name="optionsOrientationHorizontal" value="false">
-						                <i class="skin"></i>
-						                <span>Horizontal</span>
-						            </label>            
-				            </td>
-   				            
-				            <td>
-						            <label for="optionsStackedYes" class="radio">
-						                <input type="radio" ng-model="reportRunJson.barChartOptions.stackedChart" id="optionsStackedYes" name="optionsStackedYes" value="true">
-						                <i class="skin"></i>
-						                <span>Yes</span>
-						            </label>            
-						            <label for="optionsStackedNo" class="radio">
-						                <input type="radio" ng-model="reportRunJson.barChartOptions.stackedChart" id="optionsStackedNo" name="optionsStackedNo" value="false">
-						                <i class="skin"></i>
-						                <span>No</span>
-						            </label>  				            
-				            </td>
-				            <td>
-						            <label for="optionsShowControlYes" class="radio">
-						                <input type="radio" ng-model="reportRunJson.barChartOptions.displayBarControls" id="optionsShowControlYes" name="optionsShowControlYes" value="true">
-						                <i class="skin"></i>
-						                <span>Yes</span>
-						            </label>            
-						            <label for="optionsShowControlNo" class="radio">
-						                <input type="radio" ng-model="reportRunJson.barChartOptions.displayBarControls" id="optionsShowControlNo" name="optionsShowControlNo" value="false">
-						                <i class="skin"></i>
-						                <span>No</span>
-						            </label>  				            
-				            </td>
-				            <td>
-						            <label for="optionsXAxisDateTypeYes" class="radio">
-						                <input type="radio" ng-model="reportRunJson.barChartOptions.xAxisDateType" id="optionsXAxisDateTypeYes" name="optionsXAxisDateTypeYes" value="true">
-						                <i class="skin"></i>
-						                <span>Yes</span>
-						            </label>            
-						            <label for="optionsXAxisDateTypeNo" class="radio">
-						                <input type="radio" ng-model="reportRunJson.barChartOptions.xAxisDateType" id="optionsXAxisDateTypeNo" name="optionsXAxisDateTypeNo" value="false">
-						                <i class="skin"></i>
-						                <span>No</span>
-						            </label>  				            
-				            </td>				            
-				            <td>
-						            <label for="optionsMinimizeXAxisTickersYes" class="radio">
-						                <input type="radio" ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers" id="optionsMinimizeXAxisTickersYes" name="optionsMinimizeXAxisTickersYes" value="true">
-						                <i class="skin"></i>
-						                <span>Yes</span>
-						            </label>            
-						            <label for="optionsMinimizeXAxisTickersNo" class="radio">
-						                <input type="radio" ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers" id="optionsMinimizeXAxisTickersNo" name="optionsMinimizeXAxisTickersNo" value="false">
-						                <i class="skin"></i>
-						                <span>No</span>
-						            </label>  				            
-				            </td>				            
-				        </tr>
-				    </tbody>
-				</table>
-				<table>
-					<thead>
-					    <tr>
-					        <th width="25%">Is Time Axis?</th>
-					        <th  width="25%">Log Scale (Y Axis)</th>
-					        <th></th>
-					    </tr>
-					</thead>
-				    <tbody>
-				        <tr>
-				            <td>
-					            <label for="optionsTimeAxisYes" class="radio">
-					                <input type="radio" ng-model="reportRunJson.barChartOptions.timeAxis" id="optionsTimeAxisYes" name="optionsTimeAxisYes" value="true">
-					                <i class="skin"></i>
-					                <span>Yes</span>
-					            </label>            
-					            <label for="optionsTimeAxisNo" class="radio">
-					                <input type="radio" ng-model="reportRunJson.barChartOptions.timeAxis" id="optionsTimeAxisNo" name="optionsTimeAxisNo" value="false">
-					                <i class="skin"></i>
-					                <span>No</span>
-					            </label>  				            
-				            </td>
-				            <td>
-				                <label for="logScaleYAxisCheckBox" class="checkbox">
-				                    <input id="logScaleYAxisCheckBox" type="checkbox" ng-model="reportRunJson.barChartOptions.yAxisLogScale" /><i class="skin"></i><span></span>
-				                </label>            				            
-				            </td>
-				        </tr>
-				    </tbody>
-				</table>
-				</div>            	
+					<table>
+						<thead>
+							<tr>
+								<th width="30%">Primary Axis Label</th>
+								<th width="30%">Secondary Axis Label</th>
+								<th></th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<td><input type="text" name="primaryAxisLabel"
+									ng-model="reportRunJson.primaryAxisLabel" style="width: 200px;">
+								</td>
+								<td><input type="text" name="secondaryAxisLabel"
+									ng-model="reportRunJson.secondaryAxisLabel"
+									style="width: 200px;"></td>
+							</tr>
+						</tbody>
+					</table>
+					<table>
+						<thead>
+							<tr>
+								<th width="30%">Range Axis Minimum Range</th>
+								<th width="30%">Maximum Range</th>
+								<th></th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<td><input type="text" name="minRange"
+									ng-model="reportRunJson.minRange" style="width: 200px;">
+								</td>
+								<td><input type="text" name="maxRange"
+									ng-model="reportRunJson.maxRange" style="width: 200px;">
+								</td>
+							</tr>
+						</tbody>
+					</table>
+				</div>
 			</div>
-        </b2b-expander-body>     
-    </b2b-expanders>
-	<!-- BAR CHART OPTION SECTION ENDS HERE -->
-
-	<!-- TIME SERIES CHART OPTION SECTION STARTS HERE -->
-    <b2b-expanders ng-show="reportRunJson.chartType=='TimeSeriesChart'" class="mpc-expanders" is-open="timeSeriesChartOptionOpen">            
-        <b2b-expander-heading>
-            <div class="row">    
-                <div class="span6">
-                    <div class="heading-medium b2b-blue" ng-class=" { 'b2b-toggle-header-active': !timeSeriesChartOptionOpen, 'b2b-toggle-header-inactive': timeSeriesChartOptionOpen } ">Time Series Chart Options</div>
-                    <p class="p-small">
-                    </p>                    
-                </div>
-                <div style="position: absolute;right: 250px;" class="span1">
-                	<i class="pull-right b2b-toggle-header-icon" b2b-expander-toggle b2b-accessibility-click="13,32" expand-icon="icon-primary-collapsed" collapse-icon="icon-primary-expanded" tabindex="0" aria-posinset="1" aria-setsize="2"></i>
-                </div>  
-            </div>    
-        </b2b-expander-heading>               
-        <b2b-expander-body>                   
-            <div>	 
-				<div>
-				<table>
-					<thead>
-					    <tr>
-					        <th width="20%">Render as</th>
-					        <th width="20%">X Axis Label</th>
-					        <th width="20%">X Axis Tickers</th>
-					        <th width="20%">Is Time Axis?</th>
-					        <th width="20%">Multi Series</th>					        					        
-					    </tr>
-					</thead>
-				    <tbody>
-				        <tr>
-				            <td>
-					            <label for="optionsLineChartRendererLine" class="radio">
-					                <input type="radio" ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer" id="optionsLineChartRendererLine" name="optionsLineChartRendererLine" value="line">
-					                <i class="skin"></i>
-					                <span>Line</span>
-					            </label>            
-					            <label for="optionsLineChartRendererArea" class="radio">
-					                <input type="radio" ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer" id="optionsLineChartRendererArea" name="optionsLineChartRendererArea" value="area">
-					                <i class="skin"></i>
-					                <span>Area</span>
-					            </label>  				            
-				            </td>
-				            <td>
-				                <label for="xAxisLabelCheckBox" class="checkbox">
-				                    <input id="xAxisLabelCheckBox" type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.showXAxisLabel" /><i class="skin"></i><span></span>
-				                </label>            				            				            
-				            </td>
-				            <td>
-				                <label for="addXAxisTickerCheckBox" class="checkbox">
-				                    <input id="addXAxisTickerCheckBox" type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.addXAxisTicker" /><i class="skin"></i><span></span>
-				                </label>            				            				            
-				            </td>
-				            <td>
-				                <label for="isTimeAxisCheckBox" class="checkbox">
-				                    <input id="isTimeAxisCheckBox" type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.nonTimeAxis" /><i class="skin"></i><span></span>
-				                </label>
-				            </td>
-				            <td>
-				                <label for="multiSeriesCheckBox" class="checkbox">
-				                    <input id="multiSeriesCheckBox" type="checkbox" ng-model="reportRunJson.timeSeriesChartOptions.multiSeries" /><i class="skin"></i><span></span>
-				                </label>
-				            </td>
-				        </tr>
-				    </tbody>
-				</table>
-				</div>            	
+			</b2b-expander-body> </b2b-expanders>
+
+			<!-- BAR CHART OPTION SECTION STARTS HERE -->
+			<b2b-expanders ng-show="reportRunJson.chartType=='BarChart3D'"
+				class="mpc-expanders" is-open="barChartOptionOpen">
+			<b2b-expander-heading>
+			<div class="row">
+				<div class="span6">
+					<div class="heading-medium b2b-blue"
+						ng-class=" { 'b2b-toggle-header-active': !barChartOptionOpen, 'b2b-toggle-header-inactive': barChartOptionOpen } ">Bar
+						Chart Options</div>
+					<p class="p-small"></p>
+				</div>
+				<div style="position: absolute; right: 250px;" class="span1">
+					<i class="pull-right b2b-toggle-header-icon" b2b-expander-toggle
+						b2b-accessibility-click="13,32"
+						expand-icon="icon-primary-collapsed"
+						collapse-icon="icon-primary-expanded" tabindex="0"
+						aria-posinset="1" aria-setsize="2"></i>
+				</div>
 			</div>
-        </b2b-expander-body>     
-    </b2b-expanders>
-	<!-- TIME SERIES CHART OPTION SECTION ENDS HERE -->
-
-    <b2b-expanders class="mpc-expanders" is-open="commonOptionOpen">            
-        <b2b-expander-heading>
-            <div class="row">    
-                <div class="span6">
-                    <div class="heading-medium b2b-blue" ng-class=" { 'b2b-toggle-header-active': !commonOptionOpen, 'b2b-toggle-header-inactive': commonOptionOpen } ">Common Options</div>
-                    <p class="p-small">
-                    </p>                    
-                </div>
-                <div style="position: absolute;right: 250px;" class="span1">
-                	<i class="pull-right b2b-toggle-header-icon" b2b-expander-toggle b2b-accessibility-click="13,32" expand-icon="icon-primary-collapsed" collapse-icon="icon-primary-expanded" tabindex="0" aria-posinset="1" aria-setsize="2"></i>
-                </div>  
-            </div>    
-        </b2b-expander-heading>               
-        <b2b-expander-body>                   
-            <div >
-                <div>
-					<div style="border:2px;border-style:solid;border-color:#808080;margin-bottom:9px">
-						<div style="margin-left:0px">
-							<table>	
-							<thead>
-							    <tr>
-							        <th>Legend Angle</th>
-							        <th>Legend Position</th>
-							    </tr>
-							</thead>
-						    <tbody>
-						        <tr>
-						    		<fieldset role="radiogroup" radio-group-accessibility>
-						            <td>
-						            <label for="optionsRadios1" class="radio">
-						                <input type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" id="optionsRadios1" name="optionsRadio1" value="up45">
-						                <i class="skin"></i>
-						                <span>up 45&deg;</span>
-						            </label>            
-						            <label for="optionsRadios2" class="radio">
-						                <input type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" id="optionsRadios2" name="optionsRadio2" value="up90">
-						                <i class="skin"></i>
-						                <span>up 90&deg;</span>
-						            </label>            
-						            <label for="optionsRadios3" class="radio">
-						                <input type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" id="optionsRadios3" name="optionsRadio3" value="down45">
-						                <i class="skin"></i>
-						                <span>down 45&deg;</span>
-						            </label>            
-						            <label for="optionsRadios4444" class="radio">
-						                <input type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" id="optionsRadios4444" name="optionsRadio44" value="down90">
-						                <i class="skin"></i>
-						                <span>down 90&deg;</span>
-						            </label>            
-						            <label for="optionsRadios5555" class="radio">
-						                <input type="radio" ng-model="reportRunJson.commonChartOptions.legendLabelAngle" id="optionsRadios5555" name="optionsRadio55" value="standard">
-						                <i class="skin"></i>
-						                <span>Standard</span>
-						            </label>            
-						            </td>    
-						            </fieldset>
-						            
-						            <fieldset role="radiogroup" radio-group-accessibility>
-						            <td>
-						            <label for="optionsRadiosTop" class="radio">
-						                <input type="radio" ng-model="reportRunJson.commonChartOptions.legendPosition" id="optionsRadiosTop" name="optionsRadioTop" value="top">
-						                <i class="skin"></i>
-						                <span>Top</span>
-						            </label>            
-						            <label for="optionsRadiosBottom" class="radio">
-						                <input type="radio" ng-model="reportRunJson.commonChartOptions.legendPosition" id="optionsRadiosBottom" name="optionsRadioBottom" value="bottom">
-						                <i class="skin"></i>
-						                <span>Bottom</span>
-						            </label>            
-						            </td>                    
-						            </fieldset>
-						        </tr>
-						    </tbody>
-						</table>
-
-
-						<table>	
+			</b2b-expander-heading> <b2b-expander-body>
+			<div>
+				<div id="RangeTable">
+					<table>
 						<thead>
-						    <tr>
-						        <th width="20%">Legend</th>
-						        <th width="20%">Animation</th>
-						        <th></th>
-						    </tr>
+							<tr>
+								<th width="25%">Orientation</th>
+								<th width="18%">Stacked</th>
+								<th width="18%">Show Controls</th>
+								<th width="18%">XAxis Date Type</th>
+								<th width="21%">Display less XAxis tickers</th>
+								<th></th>
+							</tr>
 						</thead>
-					    <tbody>
-					        <tr>
-					    		<fieldset role="radiogroup" radio-group-accessibility>
-					            <td>
-					            <label for="optionsRadiosHideLegendFalse" class="radio">
-					                <input type="radio" ng-model="reportRunJson.commonChartOptions.hideLegend" id="optionsRadiosHideLegendFalse" name="optionsRadiosHideLegendFalse" value="false">
-					                <i class="skin"></i>
-					                <span>Yes</span>
-					            </label>            
-					            <label for="optionsRadiosHideLegendTrue" class="radio">
-					                <input type="radio" ng-model="reportRunJson.commonChartOptions.hideLegend" id="optionsRadiosHideLegendTrue" name="optionsRadiosHideLegendTrue" value="true">
-					                <i class="skin"></i>
-					                <span>No</span>
-					            </label>            
-					            </td>    
-					            </fieldset>
-					            
-					            <fieldset role="radiogroup" radio-group-accessibility>
-					            <td>
-					            <label for="optionsRadiosAnimateChartTrue" class="radio">
-					                <input type="radio" ng-model="reportRunJson.commonChartOptions.animateAnimatedChart" id="optionsRadiosAnimateChartTrue" name="optionsRadiosAnimateChartTrue" value="true">
-					                <i class="skin"></i>
-					                <span>Yes</span>
-					            </label>            
-					            <label for="optionsRadiosAnimateChartFalse" class="radio">
-					                <input type="radio" ng-model="reportRunJson.commonChartOptions.animateAnimatedChart" id="optionsRadiosAnimateChartFalse" name="optionsRadiosAnimateChartFalse" value="false">
-					                <i class="skin"></i>
-					                <span>No</span>
-					            </label>            
-					            </td>                    
-					            </fieldset>
-					            <td>
-					            </td>
-					        </tr>
-					    </tbody>
+						<tbody>
+							<tr>
+								<td><label for="optionsOrientationVertical" class="radio">
+										<input type="radio"
+										ng-model="reportRunJson.barChartOptions.verticalOrientation"
+										id="optionsOrientationVertical"
+										name="optionsOrientationVertical" value="true"> <i
+										class="skin"></i> <span>Vertical</span>
+								</label> <label for="optionsOrientationHorizontal" class="radio">
+										<input type="radio"
+										ng-model="reportRunJson.barChartOptions.verticalOrientation"
+										id="optionsOrientationHorizontal"
+										name="optionsOrientationHorizontal" value="false"> <i
+										class="skin"></i> <span>Horizontal</span>
+								</label></td>
+
+								<td><label for="optionsStackedYes" class="radio"> <input
+										type="radio"
+										ng-model="reportRunJson.barChartOptions.stackedChart"
+										id="optionsStackedYes" name="optionsStackedYes" value="true">
+										<i class="skin"></i> <span>Yes</span>
+								</label> <label for="optionsStackedNo" class="radio"> <input
+										type="radio"
+										ng-model="reportRunJson.barChartOptions.stackedChart"
+										id="optionsStackedNo" name="optionsStackedNo" value="false">
+										<i class="skin"></i> <span>No</span>
+								</label></td>
+								<td><label for="optionsShowControlYes" class="radio">
+										<input type="radio"
+										ng-model="reportRunJson.barChartOptions.displayBarControls"
+										id="optionsShowControlYes" name="optionsShowControlYes"
+										value="true"> <i class="skin"></i> <span>Yes</span>
+								</label> <label for="optionsShowControlNo" class="radio"> <input
+										type="radio"
+										ng-model="reportRunJson.barChartOptions.displayBarControls"
+										id="optionsShowControlNo" name="optionsShowControlNo"
+										value="false"> <i class="skin"></i> <span>No</span>
+								</label></td>
+								<td><label for="optionsXAxisDateTypeYes" class="radio">
+										<input type="radio"
+										ng-model="reportRunJson.barChartOptions.xAxisDateType"
+										id="optionsXAxisDateTypeYes" name="optionsXAxisDateTypeYes"
+										value="true"> <i class="skin"></i> <span>Yes</span>
+								</label> <label for="optionsXAxisDateTypeNo" class="radio"> <input
+										type="radio"
+										ng-model="reportRunJson.barChartOptions.xAxisDateType"
+										id="optionsXAxisDateTypeNo" name="optionsXAxisDateTypeNo"
+										value="false"> <i class="skin"></i> <span>No</span>
+								</label></td>
+								<td><label for="optionsMinimizeXAxisTickersYes"
+									class="radio"> <input type="radio"
+										ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers"
+										id="optionsMinimizeXAxisTickersYes"
+										name="optionsMinimizeXAxisTickersYes" value="true"> <i
+										class="skin"></i> <span>Yes</span>
+								</label> <label for="optionsMinimizeXAxisTickersNo" class="radio">
+										<input type="radio"
+										ng-model="reportRunJson.barChartOptions.minimizeXAxisTickers"
+										id="optionsMinimizeXAxisTickersNo"
+										name="optionsMinimizeXAxisTickersNo" value="false"> <i
+										class="skin"></i> <span>No</span>
+								</label></td>
+							</tr>
+						</tbody>
+					</table>
+					<table>
+						<thead>
+							<tr>
+								<th width="25%">Is Time Axis?</th>
+								<th width="25%">Log Scale (Y Axis)</th>
+								<th></th>
+							</tr>
+						</thead>
+						<tbody>
+							<tr>
+								<td><label for="optionsTimeAxisYes" class="radio">
+										<input type="radio"
+										ng-model="reportRunJson.barChartOptions.timeAxis"
+										id="optionsTimeAxisYes" name="optionsTimeAxisYes" value="true">
+										<i class="skin"></i> <span>Yes</span>
+								</label> <label for="optionsTimeAxisNo" class="radio"> <input
+										type="radio" ng-model="reportRunJson.barChartOptions.timeAxis"
+										id="optionsTimeAxisNo" name="optionsTimeAxisNo" value="false">
+										<i class="skin"></i> <span>No</span>
+								</label></td>
+								<td><label for="logScaleYAxisCheckBox" class="checkbox">
+										<input id="logScaleYAxisCheckBox" type="checkbox"
+										ng-model="reportRunJson.barChartOptions.yAxisLogScale" /><i
+										class="skin"></i><span></span>
+								</label></td>
+							</tr>
+						</tbody>
 					</table>
+				</div>
+			</div>
+			</b2b-expander-body> </b2b-expanders>
+			<!-- BAR CHART OPTION SECTION ENDS HERE -->
 
+			<!-- TIME SERIES CHART OPTION SECTION STARTS HERE -->
+			<b2b-expanders ng-show="reportRunJson.chartType=='TimeSeriesChart'"
+				class="mpc-expanders" is-open="timeSeriesChartOptionOpen">
+			<b2b-expander-heading>
+			<div class="row">
+				<div class="span6">
+					<div class="heading-medium b2b-blue"
+						ng-class=" { 'b2b-toggle-header-active': !timeSeriesChartOptionOpen, 'b2b-toggle-header-inactive': timeSeriesChartOptionOpen } ">Time
+						Series Chart Options</div>
+					<p class="p-small"></p>
+				</div>
+				<div style="position: absolute; right: 250px;" class="span1">
+					<i class="pull-right b2b-toggle-header-icon" b2b-expander-toggle
+						b2b-accessibility-click="13,32"
+						expand-icon="icon-primary-collapsed"
+						collapse-icon="icon-primary-expanded" tabindex="0"
+						aria-posinset="1" aria-setsize="2"></i>
+				</div>
+			</div>
+			</b2b-expander-heading> <b2b-expander-body>
+			<div>
+				<div>
 					<table>
 						<thead>
-						    <tr>
-						        <th width="25%">Top Margin</th>
-						        <th width="25%">Bottom Margin</th>
-						        <th width="25%">Left Margin</th>
-						        <th width="25%">Right Margin</th>
-						    </tr>
+							<tr>
+								<th width="20%">Render as</th>
+								<th width="20%">X Axis Label</th>
+								<th width="20%">X Axis Tickers</th>
+								<th width="20%">Is Time Axis?</th>
+								<th width="20%">Multi Series</th>
+							</tr>
 						</thead>
-					    <tbody>
-					        <tr>
-					            <td>
-					            	<input type="text" name="topMargin" ng-model="reportRunJson.commonChartOptions.topMargin" style="width:200px;">
-					            </td>
-					            <td>
-					            	<input type="text" name="bottomMargin" ng-model="reportRunJson.commonChartOptions.bottomMargin" style="width:200px;">
-					            </td>
-					            <td>
-					            	<input type="text" name="leftMargin" ng-model="reportRunJson.commonChartOptions.leftMargin" style="width:200px;">
-					            </td>
-					            <td>
-					            	<input type="text" name="rightMargin" ng-model="reportRunJson.commonChartOptions.rightMargin" style="width:200px;">
-					            </td>
-					        </tr>
-					    </tbody>
+						<tbody>
+							<tr>
+								<td><label for="optionsLineChartRendererLine" class="radio">
+										<input type="radio"
+										ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer"
+										id="optionsLineChartRendererLine"
+										name="optionsLineChartRendererLine" value="line"> <i
+										class="skin"></i> <span>Line</span>
+								</label> <label for="optionsLineChartRendererArea" class="radio">
+										<input type="radio"
+										ng-model="reportRunJson.timeSeriesChartOptions.lineChartRenderer"
+										id="optionsLineChartRendererArea"
+										name="optionsLineChartRendererArea" value="area"> <i
+										class="skin"></i> <span>Area</span>
+								</label></td>
+								<td><label for="xAxisLabelCheckBox" class="checkbox">
+										<input id="xAxisLabelCheckBox" type="checkbox"
+										ng-model="reportRunJson.timeSeriesChartOptions.showXAxisLabel" /><i
+										class="skin"></i><span></span>
+								</label></td>
+								<td><label for="addXAxisTickerCheckBox" class="checkbox">
+										<input id="addXAxisTickerCheckBox" type="checkbox"
+										ng-model="reportRunJson.timeSeriesChartOptions.addXAxisTicker" /><i
+										class="skin"></i><span></span>
+								</label></td>
+								<td><label for="isTimeAxisCheckBox" class="checkbox">
+										<input id="isTimeAxisCheckBox" type="checkbox"
+										ng-model="reportRunJson.timeSeriesChartOptions.nonTimeAxis" /><i
+										class="skin"></i><span></span>
+								</label></td>
+								<td><label for="multiSeriesCheckBox" class="checkbox">
+										<input id="multiSeriesCheckBox" type="checkbox"
+										ng-model="reportRunJson.timeSeriesChartOptions.multiSeries" /><i
+										class="skin"></i><span></span>
+								</label></td>
+							</tr>
+						</tbody>
 					</table>
-				</div>                	
-            </div>
-           </div>
-        </b2b-expander-body>     
-    </b2b-expanders>
+				</div>
+			</div>
+			</b2b-expander-body> </b2b-expanders>
+			<!-- TIME SERIES CHART OPTION SECTION ENDS HERE -->
 
-</div>
-</div>
+			<b2b-expanders class="mpc-expanders" is-open="commonOptionOpen">
+			<b2b-expander-heading>
+			<div class="row">
+				<div class="span6">
+					<div class="heading-medium b2b-blue"
+						ng-class=" { 'b2b-toggle-header-active': !commonOptionOpen, 'b2b-toggle-header-inactive': commonOptionOpen } ">Common
+						Options</div>
+					<p class="p-small"></p>
+				</div>
+				<div style="position: absolute; right: 250px;" class="span1">
+					<i class="pull-right b2b-toggle-header-icon" b2b-expander-toggle
+						b2b-accessibility-click="13,32"
+						expand-icon="icon-primary-collapsed"
+						collapse-icon="icon-primary-expanded" tabindex="0"
+						aria-posinset="1" aria-setsize="2"></i>
+				</div>
+			</div>
+			</b2b-expander-heading> <b2b-expander-body>
+			<div>
+				<div>
+					<div
+						style="border: 2px; border-style: solid; border-color: #808080; margin-bottom: 9px">
+						<div style="margin-left: 0px">
+							<table>
+								<thead>
+									<tr>
+										<th>Legend Angle</th>
+										<th>Legend Position</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<fieldset role="radiogroup" radio-group-accessibility>
+											<td><label for="optionsRadios1" class="radio"> <input
+													type="radio"
+													ng-model="reportRunJson.commonChartOptions.legendLabelAngle"
+													id="optionsRadios1" name="optionsRadio1" value="up45">
+													<i class="skin"></i> <span>up 45&deg;</span>
+											</label> <label for="optionsRadios2" class="radio"> <input
+													type="radio"
+													ng-model="reportRunJson.commonChartOptions.legendLabelAngle"
+													id="optionsRadios2" name="optionsRadio2" value="up90">
+													<i class="skin"></i> <span>up 90&deg;</span>
+											</label> <label for="optionsRadios3" class="radio"> <input
+													type="radio"
+													ng-model="reportRunJson.commonChartOptions.legendLabelAngle"
+													id="optionsRadios3" name="optionsRadio3" value="down45">
+													<i class="skin"></i> <span>down 45&deg;</span>
+											</label> <label for="optionsRadios4444" class="radio"> <input
+													type="radio"
+													ng-model="reportRunJson.commonChartOptions.legendLabelAngle"
+													id="optionsRadios4444" name="optionsRadio44" value="down90">
+													<i class="skin"></i> <span>down 90&deg;</span>
+											</label> <label for="optionsRadios5555" class="radio"> <input
+													type="radio"
+													ng-model="reportRunJson.commonChartOptions.legendLabelAngle"
+													id="optionsRadios5555" name="optionsRadio55"
+													value="standard"> <i class="skin"></i> <span>Standard</span>
+											</label></td>
+										</fieldset>
+
+										<fieldset role="radiogroup" radio-group-accessibility>
+											<td><label for="optionsRadiosTop" class="radio">
+													<input type="radio"
+													ng-model="reportRunJson.commonChartOptions.legendPosition"
+													id="optionsRadiosTop" name="optionsRadioTop" value="top">
+													<i class="skin"></i> <span>Top</span>
+											</label> <label for="optionsRadiosBottom" class="radio"> <input
+													type="radio"
+													ng-model="reportRunJson.commonChartOptions.legendPosition"
+													id="optionsRadiosBottom" name="optionsRadioBottom"
+													value="bottom"> <i class="skin"></i> <span>Bottom</span>
+											</label></td>
+										</fieldset>
+									</tr>
+								</tbody>
+							</table>
+
+
+							<table>
+								<thead>
+									<tr>
+										<th width="20%">Legend</th>
+										<th width="20%">Animation</th>
+										<th></th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<fieldset role="radiogroup" radio-group-accessibility>
+											<td><label for="optionsRadiosHideLegendFalse"
+												class="radio"> <input type="radio"
+													ng-model="reportRunJson.commonChartOptions.hideLegend"
+													id="optionsRadiosHideLegendFalse"
+													name="optionsRadiosHideLegendFalse" value="false">
+													<i class="skin"></i> <span>Yes</span>
+											</label> <label for="optionsRadiosHideLegendTrue" class="radio">
+													<input type="radio"
+													ng-model="reportRunJson.commonChartOptions.hideLegend"
+													id="optionsRadiosHideLegendTrue"
+													name="optionsRadiosHideLegendTrue" value="true"> <i
+													class="skin"></i> <span>No</span>
+											</label></td>
+										</fieldset>
+
+										<fieldset role="radiogroup" radio-group-accessibility>
+											<td><label for="optionsRadiosAnimateChartTrue"
+												class="radio"> <input type="radio"
+													ng-model="reportRunJson.commonChartOptions.animateAnimatedChart"
+													id="optionsRadiosAnimateChartTrue"
+													name="optionsRadiosAnimateChartTrue" value="true">
+													<i class="skin"></i> <span>Yes</span>
+											</label> <label for="optionsRadiosAnimateChartFalse" class="radio">
+													<input type="radio"
+													ng-model="reportRunJson.commonChartOptions.animateAnimatedChart"
+													id="optionsRadiosAnimateChartFalse"
+													name="optionsRadiosAnimateChartFalse" value="false">
+													<i class="skin"></i> <span>No</span>
+											</label></td>
+										</fieldset>
+										<td></td>
+									</tr>
+								</tbody>
+							</table>
+
+							<table>
+								<thead>
+									<tr>
+										<th width="25%">Top Margin</th>
+										<th width="25%">Bottom Margin</th>
+										<th width="25%">Left Margin</th>
+										<th width="25%">Right Margin</th>
+									</tr>
+								</thead>
+								<tbody>
+									<tr>
+										<td><input type="text" name="topMargin"
+											ng-model="reportRunJson.commonChartOptions.topMargin"
+											style="width: 200px;"></td>
+										<td><input type="text" name="bottomMargin"
+											ng-model="reportRunJson.commonChartOptions.bottomMargin"
+											style="width: 200px;"></td>
+										<td><input type="text" name="leftMargin"
+											ng-model="reportRunJson.commonChartOptions.leftMargin"
+											style="width: 200px;"></td>
+										<td><input type="text" name="rightMargin"
+											ng-model="reportRunJson.commonChartOptions.rightMargin"
+											style="width: 200px;"></td>
+									</tr>
+								</tbody>
+							</table>
+						</div>
+					</div>
+				</div>
+			</b2b-expander-body> </b2b-expanders>
+
+		</div>
+	</div>
 	<div>
-	<button type="submit" style="width: 90px; height:35px;margin-top:20px; margin-left:5px;" class="btn btn-alt btn-small" ng-click="saveChartData();">Save</button>	
-	<a href="report#/report_run/c_master={{reportRunJson.reportID}}&refresh=Y">
-	<button type="submit" style="width: 90px; height:35px;margin-top:20px; margin-left:5px;" class="btn btn-alt btn-small">Run</button>
-	</a>
-	</div>    
+		<button type="submit"
+			style="width: 90px; height: 35px; margin-top: 20px; margin-left: 5px;"
+			class="btn btn-alt btn-small" ng-click="saveChartData();">Save</button>
+		<a
+			href="report#/report_run/c_master={{reportRunJson.reportID}}&refresh=Y">
+			<button type="submit"
+				style="width: 90px; height: 35px; margin-top: 20px; margin-left: 5px;"
+				class="btn btn-alt btn-small">Run</button>
+		</a>
+	</div>
 </div>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/report-run.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/report-run.html
index aaa1cac0..7b2c23e1 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/report-run.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/report-run.html
@@ -1,96 +1,124 @@
 <style>
 table tbody td {
-    border: none;
+	border: none;
 }
 
 table tbody tr {
-    border: none;
+	border: none;
 }
 
-table tbody{
-    border: none;
+table tbody {
+	border: none;
 }
 
 table {
-    border: none;
+	border: none;
 }
 
 .grid {
-  width: 100%;
-  height: 400;
+	width: 100%;
+	height: 400;
 }
+
 .no-rows {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  width: 100%;
-  background: rgba(0, 0, 0, 0.4);
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	width: 100%;
+	background: rgba(0, 0, 0, 0.4);
 }
 
 .no-rows .msg {
-  opacity: 1;
-  position: absolute;
-  top: 20%;
-  left: 20%;
-  width: 60%;
-  height: 50%;
-  line-height: 200%;
-  background-color: #eee;
-  border-radius: 4px;
-  border: 1px solid #555;
-  text-align: center;
-  font-size: 24px;
-  display: table;
+	opacity: 1;
+	position: absolute;
+	top: 20%;
+	left: 20%;
+	width: 60%;
+	height: 50%;
+	line-height: 200%;
+	background-color: #eee;
+	border-radius: 4px;
+	border: 1px solid #555;
+	text-align: center;
+	font-size: 24px;
+	display: table;
 }
 
 .no-rows .msg span {
-  display: table-cell;
-  vertical-align: middle;
+	display: table-cell;
+	vertical-align: middle;
 }
+
 .grid .ui-grid-header-cell {
-  text-align:center;
+	text-align: center;
 }
+
 body {
-	font-size:13px;
+	font-size: 13px;
 }
 </style>
 
-<div id="page-content">	
-	<div style="width:100%; overflow:hidden;">
-		<div style="float:left;"><h1 class="heading-page">{{reportData.reportHeading}}</h1></div>
-		<div style="float:left; margin-left: 10px; margin-right: 10px;">
-			<a style="font-size:180%;" ng-href="report#/report_wizard/{{reportData.reportID}}" class="icon-misc-pen" ng-show="reportData.allowEdit"></a>
+<div id="page-content">
+	<div style="width: 100%; overflow: hidden;">
+		<div style="float: left;">
+			<h1 class="heading-page">{{reportData.reportHeading}}</h1>
+		</div>
+		<div style="float: left; margin-left: 10px; margin-right: 10px;">
+			<a style="font-size: 180%;"
+				ng-href="report#/report_wizard/{{reportData.reportID}}"
+				class="icon-misc-pen" ng-show="reportData.allowEdit"></a>
+		</div>
+		<div style="float: left; margin-left: 5px; margin-right: 10px;">
+			<a style="font-size: 180%;"
+				ng-href="report#/report_chart/{{reportData.reportID}}"
+				class="icon-misc-piechart" ng-show="reportData.allowEdit"></a>
 		</div>
-		<div style="float:left; margin-left: 5px; margin-right: 10px;">
-			<a style="font-size:180%;" ng-href="report#/report_chart/{{reportData.reportID}}" class="icon-misc-piechart" ng-show="reportData.allowEdit"></a>
+
+		<div ng-show="reportData.allowEdit && showFormFields"
+			style="margin-top: 5px;">
+			<label for="checkbox1" class="checkbox"> <input
+				id="checkbox1" type="checkbox" ng-model="showFormFieldId.value" /><i
+				class="skin"></i><span>show IDs</span>
+			</label>
 		</div>
+	</div>
+	<div ng-show="showLoader" class="span loader-container">
+		<i class="icon-primary-spinner" role="img"
+			aria-label="Please wait while we load your content"></i>
+	</div>
+	<h3 class="heading3">{{reportData.reportSubTitle}}</h3>
 
-	    <div ng-show ="reportData.allowEdit && showFormFields" style="margin-top:5px;">
-	        <label for="checkbox1" class="checkbox">
-	            <input id="checkbox1" type="checkbox" ng-model="showFormFieldId.value" /><i class="skin"></i><span>show IDs</span>
-	        </label>
-	    </div>
+	<div ng-show="isInProgress" style="font-size: 50px; color: #2ca02c">Loading...</div>
+
+	<form ng-show="showFormFields" class="row section-row"
+		style="margin: 10px">
+		<form-builder ng-form-fields="reportData.formFieldList"
+			ng-show-field-id="showFormFieldId.value"
+			ng-num-form-cols="reportData.numFormCols"
+			ng-model="formFieldSelectedValues"
+			ng-trigger-method="triggerOtherFormFields"></form-builder>
+		<br>
+		<br>
+		<button type="submit"
+			style="width: 90px; height: 35px; margin-top: 20px; margin-left: 5px;"
+			class="btn btn-alt btn-small" ng-click="runReport()">Run</button>
+	</form>
+	<button type="submit" ng-show="showBackButton"
+		style="width: 90px; height: 35px; margin-top: 20px; margin-left: 5px;"
+		class="btn btn-alt btn-small" ng-click="backToParentReport()">Back</button>
+	<iframe id="chartiframe" ng-show="showChart" width="100%"
+		height="550px" style="border: none" scrolling="no"></iframe>
+	<div id="errorDiv"></div>
+	<div ng-if="showGrid">
+		<div id="grid1" ui-grid="gridOptions" ui-grid-pagination
+			ui-grid-pinning ui-grid-resize-columns class="grid"
+			style="height: {{gridHeight">
+			<div class="no-rows" ng-show="!gridOptions.data.length">
+				<div class="msg">
+					<span>{{reportData.message}}</span>
+				</div>
+			</div>
+		</div>
 	</div>
-	<h3 class="heading3">{{reportData.reportSubTitle}} </h3>
-	  
-	  <div ng-show="isInProgress" style="font-size:50px;color:#2ca02c">Loading...</div>
-	  
-	  <form ng-show="showFormFields" class="row section-row" style="margin: 10px">
-	    <form-builder ng-form-fields="reportData.formFieldList" ng-show-field-id="showFormFieldId.value" ng-num-form-cols="reportData.numFormCols" ng-model="formFieldSelectedValues" ng-trigger-method="triggerOtherFormFields"></form-builder>
-	    <br><br>
-	    <button type="submit" style="width: 90px; height:35px;margin-top:20px; margin-left:5px;" class="btn btn-alt btn-small" ng-click="runReport()">Run</button>
-	  </form>
-	   <button type="submit" ng-show="showBackButton" style="width: 90px; height:35px;margin-top:20px; margin-left:5px;" class="btn btn-alt btn-small" ng-click="backToParentReport()">Back</button>
-	  <iframe id="chartiframe" ng-show="showChart" width="100%" height="550px" style="border: none" scrolling="no"></iframe>
-	  <div id="errorDiv"></div>
- 	  <div  ng-if="showGrid">
-	  	<div id="grid1" ui-grid="gridOptions" ui-grid-pagination ui-grid-pinning ui-grid-resize-columns class="grid" style="height: {{gridHeight}}">
-	  	<div class="no-rows" ng-show="!gridOptions.data.length">
-      		<div class="msg">
-        		<span>{{reportData.message}}</span>
-      		</div>
-	    </div>
-	 </div>  
-	  </div> 
-	  <!-- <a type="submit" ng-show="showBackButton"  style="margin: 10px" ng-href="report.htm#/report_run/{{parentReportUrlParams}}" att-button btn-type="primary" size="small" title='Back'>Back</a> -->
-</div>	
+	<!-- <a type="submit" ng-show="showBackButton"  style="margin: 10px" ng-href="report.htm#/report_run/{{parentReportUrlParams}}" att-button btn-type="primary" size="small" title='Back'>Back</a> -->
+</div>
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/report-search.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/report-search.html
index 7524acca..2fd0e436 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/report-search.html
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/report-search.html
@@ -29,7 +29,7 @@ body {
 </div>
 
 <div class="form-field form-field__glued pull-left size-onefifth" style="float:left; width:160px;margin-right: 40px;">
-     <input ng-model="reportId" type="text" placeholder="Search value?" style="margin-top:5px;width:160px;">
+     <input ng-model="reportId" type="text" placeholder="Search value?" style="margin-top:5px;width:160px; margin-left: 10px;">
 </div>
 
 <label class="pull-left" style="float:left;margin-top: 10px;margin-right: 5px;">Report Name:</label>
@@ -41,12 +41,15 @@ body {
 </div>
 
 <div class="form-field form-field__glued pull-left size-onefifth" style="width:13% !important;">
-    <input ng-model="reportName" type="text" placeholder="Search value?" style="margin-top:5px;width:160px;">                       
+    <input ng-model="reportName" type="text" placeholder="Search value?" style="margin-top:5px;width:160px; margin-left: 10px;">                       
 </div>
 
 <div>
 	 <button style="margin-left:50px;margin-top:4px;" type="submit" class="btn btn-alt btn-small" ng-click="runReport();">Submit</button>
 </div>
+<div ng-show="showLoader" class="span loader-container">
+	<i class="icon-primary-spinner" role="img"
+	aria-label="Please wait while we load your content"></i>
 </div> 
 <br>
 
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/report-step.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/report-step.html
new file mode 100644
index 00000000..9550ac33
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/report-step.html
@@ -0,0 +1,35 @@
+<div id="page-content" >
+	<br>
+	<div> 
+		<b2b-tabset tab-id-selected="activeTabsId">
+	        <b2b-tab ng-repeat="tab in stepTabs" tab-item="tab"  id="{{tab.uniqueId}}" aria-controls="{{tab.tabPanelId}}"   ng-disabled="tab.disabled">
+	            {{tab.title}}
+	        </b2b-tab>
+	    </b2b-tabset>
+	    <div class="tab-content" >
+		    <div id="definitionTab" role="tabpanel" 	 class="tab-pane"		ng-class="{'active': 'definition'===activeTabsId}">
+				 <div ng-include src="'app/fusion/scripts/DS2-view-models/ds2-reports/steps/step1.html'"></div>
+			</div>
+			 <div id="sqlTab" role="tabpanel" 	 class="tab-pane"		ng-class="{'active': 'sql'===activeTabsId}">
+				 <div ng-include src="'app/fusion/scripts/DS2-view-models/ds2-reports/steps/step2.html'"></div>
+			</div>
+			<div id="columnsTab" role="tabpanel" 	 class="tab-pane"		ng-class="{'active': 'columns'===activeTabsId}">
+				 <div ng-include src="'app/fusion/scripts/DS2-view-models/ds2-reports/steps/step3.html'"></div>
+			</div>
+			<div id="columnsTab" role="tabpanel" 	 class="tab-pane"		ng-class="{'active': 'formFields'===activeTabsId}">
+				 <div ng-include src="'app/fusion/scripts/DS2-view-models/ds2-reports/steps/step4.html'"></div>
+			</div>
+			<div id="columnsTab" role="tabpanel" 	 class="tab-pane"		ng-class="{'active': 'security'===activeTabsId}">
+				 <div ng-include src="'app/fusion/scripts/DS2-view-models/ds2-reports/steps/step5.html'"></div>
+			</div>
+			<div id="columnsTab" role="tabpanel" 	 class="tab-pane"		ng-class="{'active': 'log'===activeTabsId}">
+				 <div ng-include src="'app/fusion/scripts/DS2-view-models/ds2-reports/steps/step6.html'"></div>
+			</div>
+			<div id="columnsTab" role="tabpanel" 	 class="tab-pane"		ng-class="{'active': 'run'===activeTabsId}">
+				 <div ng-include src="'app/fusion/scripts/DS2-view-models/ds2-reports/steps/step7.html'"></div>
+			</div>
+		</div>
+	</div>
+</div>
+
+ 
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step1.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step1.html
new file mode 100644
index 00000000..a9baadf8
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step1.html
@@ -0,0 +1,213 @@
+<h1 class="heading-page">Step 1 - Report Definition</h1>
+
+<div ng-show="showLoader" class="span loader-container">
+	<i class="icon-primary-spinner" role="img"
+		aria-label="Please wait while we load your content"></i>
+</div>
+
+<div class="span6" ng-hide="showLoader">
+		
+	<div class="form-row" ng-if="isEdit">
+		<label for="textinputID-2a">Report ID</label>
+		<div class="field-group">
+			<input id="textinputID-2a" ddh-reset="" class="span12" type="text"	data-ng-model="definitionData.reportId"	ng-disabled="true">
+		</div>
+	</div>
+	
+	<div class="form-row" >
+		<label for="textinputID-2a">Report Name</label>
+		<div class="field-group">
+			<input id="reportName" ddh-reset="" class="span12" type="text"	data-ng-model="definitionData.reportName">
+		</div>
+	</div>
+	<br>
+	<div class="form-row" >
+		<label for="textinputID-2a">Report Description</label>
+		<div class="field-group">
+		 	<textarea b2b-reset b2b-reset-textarea ng-model="definitionData.reportDescr" ng-disabled="disabled" ng-trim="false" placeholder="{{placeholderText}}" rows="{{textAreaRows}}" maxlength="{{textAreaMaxlength}}" class="span12" id="textareaID1Tooltip1"  ng-focus='showTooltip1=true' ng-blur='showTooltip1=false' aria-describedby="textareaID1TooltipContent1"></textarea>
+		</div>
+	</div>
+	<div class="form-row" >
+		<label for="textinputID-2a">Report Type</label>
+		<div class="field-group">
+			<input id="reportType" ddh-reset="" class="span12" type="text"	data-ng-model="definitionData.reportType"	ng-disabled="true">
+		</div>
+	</div>
+	<div class="form-row" >
+		<label for="textinputID-2a">Data Source</label>
+		<div class="field-group">
+			<input id="dataSrc" ddh-reset="" class="span12" type="text"	data-ng-model="definitionData.dbInfo"	ng-disabled="true">
+		</div>
+	</div>
+	<div class="form-row" >
+		<label for="textinputID-2a">Form Help Text</label>
+		<div class="field-group">
+		 	<textarea b2b-reset b2b-reset-textarea ng-model="definitionData.formHelpTxt" ng-disabled="disabled" ng-trim="false" placeholder="{{placeholderText}}" rows="{{textAreaRows}}" maxlength="{{textAreaMaxlength}}" class="span12" id="textareaID1Tooltip1"  ng-focus='showTooltip1=true' ng-blur='showTooltip1=false' aria-describedby="textareaID1TooltipContent1"></textarea>
+		</div>
+	</div>
+	<div class="form-row" >
+		<label for="textinputID-2a">Report Definition</label>
+		<div class="field-group">
+			<input id="reportType" ddh-reset="" class="span12" type="text"	data-ng-model="definitionData.repDefType"	ng-disabled="true">
+		</div>
+	</div>
+	<div class="form-row" >
+		<label for="pageSizeDD">Page Size</label>
+        <select id="pageSizeDD" name="pageSizeDD" aria-describedby="pageSizeDropdown" b2b-dropdown placeholder-text="Select Page Size" ng-model="definitionData.pageSize">
+            <option b2b-dropdown-list option-repeat="d in pageSizeOptions" value="{{d.value}}">{{d.text}}</option>
+        </select>
+	</div>
+	<div class="form-row">
+		<div class="listbox-container">
+			<label id="pageSizeDD">Display Area</label>
+			<div class="listbox-list" tabindex="-1">
+				<b2b-list-box current-index="currentIndex1" listbox-data="definitionData.displayArea">
+				<div tabindex="-1" data-index="{{$index}}" b2b-accessibility-click="13,32" ng-repeat="displayArea in definitionData.displayArea" role="option" class="b2b-list-box-item" ng-class="{'b2b-list-box-item--selected' : displayArea.selected}" ng-bind-html="displayArea.name | unsafe"></div>
+			</b2b-list-box>
+			</div>
+		</div>
+	</div>
+	<div class="form-row">
+        <label for="hideFormFieldsRun" class="checkbox">
+            <input id="hideFormFieldsRun" type="checkbox" ng-model="definitionData.hideFormFieldsAfterRun" /><i class="skin"></i><span>Hide Form fields after run?</span>
+        </label>
+    </div>
+	<div class="form-row" >
+		<label for="maxRowDD">Max Rows in Excel/CSV Download</label>
+        <select id="maxRowDD" name="maxRowDD" aria-describedby="maxRowOptions" b2b-dropdown placeholder-text="Select Max Row" ng-model="definitionData.maxRowsInExcelCSVDownload">
+            <option b2b-dropdown-list option-repeat="d in maxRowOptions" value="{{d.value}}">{{d.text}}</option>
+        </select>
+	</div>
+	<div class="form-row" >
+		<label for="frozenColDD">Columns to be Frozen</label>
+        <select id="frozenColDD" name="frozenColDD" aria-describedby="Columns to be Frozen" b2b-dropdown placeholder-text="Select Columns to be Frozen" ng-model="definitionData.frozenColumns">
+            <option b2b-dropdown-list option-repeat="d in frozenColOptions" value="{{d.value}}">{{d.text}}</option>
+        </select>
+	</div>
+	<div class="form-row" >
+		<label for="dataGridAlignDD">Data Grid Align</label>
+        <select id="dataGridAlignDD" name="dataGridAlignDD" aria-describedby="Data Grid Align" b2b-dropdown placeholder-text="Select Data Grid Align" ng-model="definitionData.dataGridAlign">
+            <option b2b-dropdown-list option-repeat="d in dataGridAlignOptions" value="{{d.value}}">{{d.text}}</option>
+        </select>
+	</div>
+	<div class="form-row" >
+		<label for="textinputID-2a">Empty message</label>
+		<div class="field-group">
+			<input id="emptyMessage" ddh-reset="" class="span12" type="text"	data-ng-model="definitionData.emptyMessage">
+		</div>
+	</div>
+	
+	<div class="form-row" >
+		<label for="highDataContainerDD">Height of the Data Container(%)</label>
+        <select id="highDataContainerDD" name="highDataContainerDD" aria-describedby="Height of the Data Container" b2b-dropdown placeholder-text="Select Height of the Data Container" ng-model="definitionData.dataContainerHeight">
+            <option b2b-dropdown-list option-repeat="d in dataContainerOptions" value="{{d.value}}">{{d.text}}</option>
+        </select>
+	</div>
+	<div class="form-row" >
+		<label for="widDataContainerDD">Width of the Data Container(%)</label>
+        <select id="widDataContainerDD" name="widDataContainerDD" aria-describedby="Width of the Data Container" b2b-dropdown placeholder-text="Select Width of the Data Container" ng-model="definitionData.dataContainerWidth">
+            <option b2b-dropdown-list option-repeat="d in dataContainerOptions" value="{{d.value}}">{{d.text}}</option>
+        </select>
+	</div>	
+	<div class="form-row">
+        <label for="aScheduler" class="checkbox">
+            <input id="aScheduler" type="checkbox" ng-model="definitionData.allowScheduler" /><i class="skin"></i><span>Allow Scheduler</span>
+        </label>
+    </div>
+	<div class="form-row">
+        <label for="sizeByContent" class="checkbox">
+            <input id="sizeByContent" type="checkbox" ng-model="definitionData.sizedByContent" /><i class="skin"></i><span>Sized By Content</span>
+        </label>
+    </div>
+    <br>
+	<label id="pageSizeDD">Display Options:</label>
+	<br>
+	<div class="form-row">
+        <label for="hideFormField" class="checkbox">
+            <input id="hideFormField" type="checkbox" ng-model="displayOptions.hideFormFields" /><i class="skin"></i><span>Hide Form Fields</span>
+        </label>
+    </div>
+    <div class="form-row">
+        <label for="hideCart" class="checkbox">
+            <input id="hideCart" type="checkbox" checked ng-model="displayOptions.hideChart" /><i class="skin"></i><span>Hide Chart</span>
+        </label>
+    </div>
+    <div class="form-row">
+        <label for="hideReportData" class="checkbox">
+            <input id="hideReportData" type="checkbox" checked ng-model="displayOptions.hideReportData" /><i class="skin"></i><span>Hide Report Data</span>
+        </label>
+    </div>
+	
+	<div class="form-row">
+        <label for="hideExcel" class="checkbox">
+            <input id="hideExcel" type="checkbox" checked ng-model="displayOptions.hideExcel" /><i class="skin"></i><span>Hide Excel</span>
+        </label>
+    </div>
+	<div class="form-row">
+        <label for="hidePDF" class="checkbox">
+            <input id="hidePDF" type="checkbox" checked ng-model="displayOptions.hidePdf" /><i class="skin"></i><span>Hide PDF</span>
+        </label>
+    </div>
+	
+	<div class="form-row">
+        <label for="sortColRun" class="checkbox">
+            <input id="sortColRun" type="checkbox" checked ng-model="definitionData.runtimeColSortDisabled" /><i class="skin"></i><span>Disable column sort at runtime?</span>
+        </label>
+    </div>
+	<div class="form-row" >
+		<label for="runTimeFormNumDD">Run-time Form Number Columns</label>
+        <select id="runTimeFormNumDD" name="runTimeFormNumDD" aria-describedby="Run-time Form Number Columns" b2b-dropdown placeholder-text="Select Run-time Form Number Columns" ng-model="definitionData.numFormCols">
+            <option b2b-dropdown-list option-repeat="d in runTimeFormNumOptions" value="{{d.value}}">{{d.text}}</option>
+        </select>
+	</div> 
+	<div class="form-row" >
+		<label for="reportTitle">Report Title (if blank, the Report Name will be displayed)</label>
+		<div class="field-group">
+		 	<textarea b2b-reset b2b-reset-textarea ng-model="definitionData.reportTitle" ng-disabled="disabled" ng-trim="false" placeholder="{{placeholderText}}" rows="{{textAreaRows}}" maxlength="{{textAreaMaxlength}}" class="span12" id="reportTitle"  ng-focus='showTooltip1=true' ng-blur='showTooltip1=false' aria-describedby="textareaID1TooltipContent1"></textarea>
+		</div>
+	</div>
+	<div class="form-row" >
+		<label for="reportSubTitle">Report Sub-Title</label>
+		<div class="field-group">
+		 	<textarea b2b-reset b2b-reset-textarea ng-model="definitionData.reportSubTitle" ng-disabled="disabled" ng-trim="false" placeholder="{{placeholderText}}" rows="{{textAreaRows}}" maxlength="{{textAreaMaxlength}}" class="span12" id="reportSubTitle"  ng-focus='showTooltip1=true' ng-blur='showTooltip1=false' aria-describedby="textareaID1TooltipContent1"></textarea>
+		</div>
+	</div>
+	<div class="form-row">
+        <label for="oneTime" class="checkbox">
+            <input id="oneTime" type="checkbox" ng-model="definitionData.oneTimeRec" /><i class="skin"></i><span>One Time</span>
+        </label>
+    </div>
+    <div class="form-row">
+        <label for="hourly" class="checkbox">
+            <input id="hourly" type="checkbox" checked ng-model="definitionData.hourlyRec" /><i class="skin"></i><span>Hourly</span>
+        </label>
+    </div>
+    <div class="form-row">
+        <label for="daily" class="checkbox">
+            <input id="daily" type="checkbox" ng-model="definitionData.dailyRec" /><i class="skin"></i><span>Daily</span>
+        </label>
+    </div>
+    <div class="form-row">
+        <label for="dailyMF" class="checkbox">
+            <input id="dailyMF" type="checkbox" checked ng-model="definitionData.dailyMFRec" /><i class="skin"></i><span>Daily Monday - Friday</span>
+        </label>
+    </div>
+    <div class="form-row">
+        <label for="weekly" class="checkbox">
+            <input id="weekly" type="checkbox" ng-model="definitionData.weeklyRec" /><i class="skin"></i><span>Weekly</span>
+        </label>
+    </div>
+    <div class="form-row">
+        <label for="monthly" class="checkbox">
+            <input id="monthly" type="checkbox" checked ng-model="definitionData.monthlyRec" /><i class="skin"></i><span>Monthly</span>
+        </label>
+    </div>
+    <br>
+    
+   	<div class="form-row">
+<!--    		<button class="btn btn-alt btn-small" type="button" ng-click="createDefinition()" ng-if="!isEdit">Save</button>
+ -->		<button class="btn btn-alt btn-small" type="button" ng-click="updateDef()" >Save</button>
+<!-- 		<button class="btn btn-alt btn-small" type="button" ng-click="next()" ng-show="$scope.isEdit" >Next</button>
+ -->	</div>
+  
+</div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step2.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step2.html
new file mode 100644
index 00000000..e21af0c8
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step2.html
@@ -0,0 +1,26 @@
+<h1 class="heading-page">Step 2 - Report SQL</h1>
+
+<div ng-show="showLoader" class="span loader-container">
+	<i class="icon-primary-spinner" role="img"
+		aria-label="Please wait while we load your content"></i>
+</div>
+<h2 ng-show="pageisCreating">{{pageMsg}}</h2>
+<div class="" ng-hide="showLoader">	
+	<div class="form-row" >
+		<label for="textinputID-2a">Report SQL</label>
+		<div class="field-group" align="center">
+		 	<textarea b2b-reset b2b-reset-textarea ng-model="sqlScript.value"  ng-trim="false" placeholder="{{placeholderText}}" rows="25" class="span12" id="textareaID1Tooltip1"  ng-focus='showTooltip1=true' ng-blur='showTooltip1=false' aria-describedby="textareaID1TooltipContent1"></textarea>
+		</div>
+	</div>
+	<div class="form-row" align="right">
+		<button class="btn btn-alt btn-small" type="button"		ng-click="testRunSql()" >Validate & Test Run SQL</button>
+	</div>
+	<div class="form-row">
+<!-- 		<button class="btn btn-alt btn-small" type="button"		ng-click="previous()" >Previous</button>
+ -->		<button class="btn btn-alt btn-small" type="button"		ng-click="updateDef()" >Save</button>
+<!-- 		<button class="btn btn-alt btn-small" type="button"		ng-click="next()" >Next</button>
+ -->	</div>
+	
+</div>
+
+
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step3.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step3.html
new file mode 100644
index 00000000..e1f02a1c
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step3.html
@@ -0,0 +1,34 @@
+<h1 class="heading-page">Step 3 - Report Columns</h1>
+<div ng-show="showLoader" class="span loader-container">
+	<i class="icon-primary-spinner" role="img"
+		aria-label="Please wait while we load your content"></i>
+</div>
+<div class="" ng-hide="showLoader">
+	<div class="form-row" >
+		<table class="striped">
+	        <thead>
+	            <tr>
+	                <th>No</th>
+	                <th  key="id" sortable="true">ID</th>
+	                <th>Display Name</th>	                
+	                <th>Edit</th>
+	            </tr>
+	        </thead>
+	        <tbody>
+	            <tr ng-repeat = "rowData in colTableRowData">
+	                <td>{{$index+1}}</td>
+	                <td>{{rowData.id}}</td>
+	                <td>{{rowData.name}}</td>               
+	                <td><a ng-click="openColumnPopup(rowData)" class="icon-misc-pen"></a></td>
+	            </tr>
+	        </tbody>
+	    </table>    
+	</div>
+<!-- 	<div class="form-row">
+		<button class="btn btn-alt btn-small" type="button"		ng-click="previous()" >Previous</button>
+		<button class="btn btn-alt btn-small" type="button"		ng-click="next()" >Next</button>
+	</div> -->
+	
+</div>
+
+
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step4.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step4.html
new file mode 100644
index 00000000..dc3be5c8
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step4.html
@@ -0,0 +1,47 @@
+<h1 class="heading-page">Step 4 - Report Form Fields</h1>
+<div ng-show="showLoader" class="span loader-container">
+	<i class="icon-primary-spinner" role="img"
+		aria-label="Please wait while we load your content"></i>
+</div>
+<div ng-hide="showLoader">
+	<div class="form-row" >
+		<h2>Report Form Fields 4</h2>
+		<table class="striped">
+	        <thead>
+	            <tr>
+	                <th default-sort="a" sortable="true" >Order Number</th>
+	                <th>Field Name</th>
+	                <th>Edit</th>
+	                <th>Order</th>
+	                <th>Delete</th>                
+	            </tr>
+	        </thead>
+	        <tbody>
+	            <tr ng-repeat = "rowData in formFieldData">
+	                <td>{{rowData.orderSeq}}</td>
+	                <td>{{rowData.name}}[{{rowData.id}}]</td>
+	               	<td><a ng-click="openFormFieldPopup(rowData,'edit')" class="icon-misc-pen"></a></td>
+					<td>
+						<span ng-if="!$first">
+							<a ng-click="formFieldReOrder(rowData.id, formFieldData[$index-1].id)"	class="icon-controls-upPRIMARY"></a>
+						</span>
+						<span ng-if="!$last">
+							<a ng-click="formFieldReOrder(formFieldData[$index+1].id, rowData.id)"	class="icon-controls-down"></a>
+						</span>
+					</td>
+					<td><a ng-click="deleteFormField(rowData)" class="icon-misc-trash"></a></td>
+	            </tr>
+	        </tbody>
+	    </table>    
+	</div>
+	<div align="right">
+		<button class="btn btn-alt btn-small" type="button" ng-click="addFormField()">Add</button>
+	</div>
+<!-- 	<div class="form-row">
+		<button class="btn btn-alt btn-small" type="button"		ng-click="previous()" >Previous</button>
+		<button class="btn btn-alt btn-small" type="button"		ng-click="next()" >Next</button>
+	</div> -->
+	
+</div>
+
+
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step5.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step5.html
new file mode 100644
index 00000000..13278029
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step5.html
@@ -0,0 +1,172 @@
+<style>
+#stepView table tbody td {
+	border: none;
+}
+
+#stepView table tbody tr {
+	border: none;
+}
+
+.noTableBorder table tbody td {
+	border: none;
+}
+
+.noTableBorder table tbody tr {
+	border: none;
+}
+</style>
+<h1 class="heading-page">Step 5 - Report Security</h1>
+
+<div ng-show="showLoader" class="span loader-container">
+	<i class="icon-primary-spinner" role="img"
+		aria-label="Please wait while we load your content"></i>
+</div>
+<div class="" ng-hide="showLoader">
+	<div class="form-row">
+		<div id="stepViewSecurity">
+			<div class="noTableBorder">
+				<table class="striped">
+					<tbody>
+						<tr>
+							<td>Created By: {{reportSecurityInfo.createdUser}}</td>
+							<td>Created Date: {{reportSecurityInfo.createdDate}}</td>
+						<tr />
+						<tr>
+							<td>Last Updated By: {{reportSecurityInfo.updateUser}}</td>
+							<td>Last Updated: {{reportSecurityInfo.updatedDate}}</td>
+						<tr />
+						<tr>
+							<td>Report Owner: <select name="reportOwner" b2b-dropdown
+								ng-model="reportSecurityInfo.ownerId">
+									<option b2b-dropdown-list option-repeat="d in reportOwnerList"
+										value="{{d.id}}">{{d.name}}</option>
+							</select>
+
+							</td>
+							<td>Public? (All users can run the report): <select
+								name="isPublic" b2b-dropdown
+								ng-model="reportSecurityInfo.isPublic">
+									<option b2b-dropdown-list option-repeat="d in ynOptions"
+										value="{{d.value}}">{{d.text}}</option>
+							</select>
+							</td>
+						<tr />
+					</tbody>
+				</table>
+			</div>
+
+			<div style="margin-top: 20px;">
+				<h1 style="margin-bottom: 5px;">Report Users</h1>
+				<table class="striped">
+					<thead>
+						<tr>
+							<th width="10%">No</th>
+							<th width="45%">User Name</th>
+							<th width="15%">Run Access</th>
+							<th width="15%">Edit Access</th>
+							<th width="15%">Remove</th>
+						<tr />
+					</thead>
+					<tbody>
+						<tr ng-repeat="reportUser in reportSecurityUsers">
+							<td>{{$index+1}}</td>
+							<td>{{reportUser.name}}</td>
+							<td>
+								<label for="switch{{$index+1}}runAccess"
+									class="btn-switch-label"> <input type="checkbox"
+										role="switch" id="switch{{$index+1}}runAccess" b2b-switches
+										ng-model="reportUser.runAccess" ng-disabled=true aria-disabled=true aria-label="">
+								</label>
+							</td>
+							<td><label for="switch{{$index+1}}" class="btn-switch-label">
+									<input type="checkbox" role="switch" id="switch{{$index+1}}"
+									b2b-switches ng-model="reportUser.accessAllowed"
+									ng-click="toggleUserEditAccessActive(reportUser)"
+									ng-disabled=false aria-disabled=false aria-label="">
+							</label></td> 
+							<td><a class="icon-misc-trash" style="font-size: 22px;"
+								ng-click="removeReportSecurityUser(reportUser)"> </a></td>
+						</tr>
+					</tbody>
+				</table>
+			</div>
+			<div>
+				<h2>Grant Access To:</h2>
+				<div>
+					<select id="reportUser" name="reportUser" b2b-dropdown
+						ng-model="addReportUserId.id" placeholder-text="Select a User">
+						<option b2b-dropdown-list option-repeat="d in reportOwnerList"
+							value="{{d.id}}">{{d.name}}</option>
+					</select>
+				</div>
+				<div>
+					<button class="btn btn-alt btn-small" type="button"
+						ng-click="addReportSecurityUser(addReportUserId.id)">Add</button>
+				</div>
+			</div>
+
+			<div style="margin-top: 20px;">
+				<h1>Report Roles</h1>
+				<table class="striped">
+					<thead>
+						<tr>
+							<th width="10%">No</th>
+							<th width="45%">Role Name</th>
+							<th width="15%">Run Access</th>
+							<th width="15%">Edit Access</th>
+							<th width="15%">Remove</th>
+						<tr />
+					</thead>
+					<tbody>
+						<tr ng-repeat="reportRole in reportSecurityRoles">
+							<td>{{$index+1}}</td>
+							<td>{{reportRole.name}}</td>
+							<td>
+								<label for="switch{{$index+1}}RoleRunAccess"
+									class="btn-switch-label"> <input type="checkbox"
+										role="switch" id="switch{{$index+1}}RoleRunAccess" b2b-switches
+										ng-model="reportRole.runAccess" ng-disabled=true aria-disabled=true aria-label="">
+								</label>
+							</td>
+							<td><label for="switch{{$index+1}}RoleEditAccess"
+								class="btn-switch-label"> <input type="checkbox"
+									role="switch" id="switch{{$index+1}}RoleEditAccess"
+									b2b-switches ng-model="reportRole.accessAllowed"
+									ng-click="toggleRoleEditAccessActive(reportRole)"
+									ng-disabled=false aria-disabled=false aria-label="">
+							</label></td>
+							<td><a class="icon-misc-trash"
+								ng-click="removeReportSecurityRole(reportRole)"
+								style="font-size: 22px;"> </a></td> 
+						</tr>
+					</tbody>
+				</table>
+				<div>
+					<h2 colspan="2">Grant Access To:</h2>
+					<div colspan="2">
+						<select name="reportOwner" b2b-dropdown
+							ng-model="addReportRoleId.id" placeholder-text="Select a Role">
+							<option b2b-dropdown-list option-repeat="d in reportRoleList"
+								value="{{d.id}}">{{d.name}}</option>
+						</select>
+					</div>
+					<div>
+						<button class="btn btn-alt btn-small" type="button"
+							ng-click="addReportSecurityRole(addReportRoleId.id)">Add</button>
+					</div>
+				</div>
+			</div>
+
+		</div>
+	</div>
+	<div class="form-row">
+<!-- 		<button class="btn btn-alt btn-small" type="button"
+			ng-click="previous()">Previous</button> -->
+		<button class="btn btn-alt btn-small" type="button"
+			ng-click="saveReportSecurityInfo()">Save</button>
+<!-- 		<button class="btn btn-alt btn-small" type="button" ng-click="next()">Next</button>
+ -->	</div>
+
+</div>
+
+
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step6.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step6.html
new file mode 100644
index 00000000..4849190a
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step6.html
@@ -0,0 +1,34 @@
+<h1 class="heading-page">Step 6 - Report Log</h1>
+
+<div ng-show="showLoader" class="span loader-container">
+	<i class="icon-primary-spinner" role="img"
+		aria-label="Please wait while we load your content"></i>
+</div>
+<div  ng-hide="showLoader">
+	<div class="form-row" >
+		<h2 for="textinputID-2a">Report Logs</h2>
+		<table class="striped" ng-cloak>
+	        <thead>
+	            <tr>
+	                <th>No</th>
+	                <th>User Name</th>
+	                <th>Log Time</th>
+	                <th>Action</th>
+	            </tr>
+	        </thead>
+	        <tbody>
+	            <tr ng-repeat = "rowData in logs">
+	                <td>{{$index+1}}</td>
+	                <td>{{rowData.userName}}</td>
+	                <td>{{rowData.logTime}}</td>
+	                <td>{{rowData.action}}</td>
+	            </tr>
+	        </tbody>
+	    </table>    
+	</div>
+<!-- 	<div class="form-row">
+		<button class="btn btn-alt btn-small" type="button"		ng-click="previous()" >Previous</button>
+		<button class="btn btn-alt btn-small" type="button"		ng-click="next()" >Next</button>
+	</div> -->
+	
+</div>
\ No newline at end of file
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step7.html b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step7.html
new file mode 100644
index 00000000..298cce8f
--- /dev/null
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/steps/step7.html
@@ -0,0 +1,16 @@
+<h1 class="heading-page">Step 7 - Report Run</h1>
+
+<div ng-show="showLoader" class="span loader-container">
+	<i class="icon-primary-spinner" role="img"
+		aria-label="Please wait while we load your content"></i>
+</div>
+<div class="" ng-hide="showLoader">
+	<div class="form-row" >
+		<button class="btn btn-alt btn-small" type="button"	ng-click="runReport()" >Run Report</button>
+	</div>
+<!-- 	<div class="form-row">
+		<button class="btn btn-alt btn-small" type="button"		ng-click="previous()" >Previous</button>
+	</div> -->
+</div>
+
+
diff --git a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/wz_steps/json/step1.json b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/wz_steps/json/step1.json
index 66562d4b..abdbd023 100644
--- a/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/wz_steps/json/step1.json
+++ b/ecomp-sdk/epsdk-app-overlay/src/main/webapp/app/fusion/scripts/DS2-view-models/ds2-reports/wz_steps/json/step1.json
@@ -11,7 +11,13 @@
 						"name": "proj_id",
 						"displayName": "Project Id",
 						"defaultValue": ""
-					},				
+					},	
+					{
+						"input": "text",
+						"name": "reportId",
+						"displayName": "Report ID:",
+						"defaultValue": ""
+					},			
 					{
 						"input": "text",
 						"name": "reportName",
@@ -75,9 +81,17 @@
 						"defaultValue": "no",
 						"action": "",
 						"action_img": "",
-						"checkboxes":[{"value":"homeSelected.value", "text":"HOME"},
-									{"value":"customerSelected.value", "text":"CUSTOMER"},
-									{"value":"reportsSelected.value", "text":"REPORTS"}
+						"checkboxes":[
+									{"value":"homeSelected", "text":"HOME"},
+									{"value":"customerSelected", "text":"CUSTOMER"},
+									{"value":"reportsSelected", "text":"REPORTS"},
+									{"value":"utilSelected", "text":"Utilization"},
+									{"value":"tmSelected", "text":"Tunnel Management"},
+									{"value":"trSelected", "text":"Tunnel Routing"},
+									{"value":"cmSelected", "text":"Capacity Management"},
+									{"value":"tlSelected", "text":"Traffic Loss"},
+									{"value":"smSelected", "text":"System Monitoring"},
+									{"value":"netOperateSelected", "text":"Network Operation Monitoring"}
 								]
 					},					
 									
-- 
cgit 1.2.3-korg