Skip to Content

How to bind a viz frame (bar chart) to xml output?

Hello Experts,

I am trying to create a simple bar chart using viz frames in SAPUI5 where I am binding the XML Output of a service to the chart. I am referring the example given in the UI5 Explored link. But the output shows 'No Data'.

Does any body have a sample app regarding this?

Add comment
10|10000 characters needed characters exceeded

  • Get RSS Feed

1 Answer

  • avatar image
    Former Member
    Mar 31, 2017 at 02:17 AM

    Please share your code

    Add comment
    10|10000 characters needed characters exceeded

    • Code for Controller

      sap.ui.define([
      	"myapp/controller/BaseController",
      	"sap/ui/model/json/JSONModel",
      	"myapp/model/formatter",
      	"sap/ui/model/Filter",
      	"sap/ui/model/FilterOperator"
      ], function(BaseController, JSONModel, formatter, Filter, FilterOperator) {
      	"use strict";
      
      
      	return BaseController.extend("myapp.controller.Worklist", {
      
      
      		formatter: formatter,
      
      
      		/* =========================================================== */
      		/* lifecycle methods                                           */
      		/* =========================================================== */
      
      
      		/**
      		 * Called when the worklist controller is instantiated.
      		 * @public
      		 */
      		onInit: function() {
      			
      			var oViewModel,
      				iOriginalBusyDelay,
      				oTable = this.byId("table");
      
      
      			// Put down worklist table's original value for busy indicator delay,
      			// so it can be restored later on. Busy handling on the table is
      			// taken care of by the table itself.
      			iOriginalBusyDelay = oTable.getBusyIndicatorDelay();
      			this._oTable = oTable;
      			// keeps the search state
      			this._oTableSearchState = [];
      
      
      			// Model used to manipulate control states
      			oViewModel = new JSONModel({
      				worklistTableTitle: this.getResourceBundle().getText("worklistTableTitle"),
      				saveAsTileTitle: this.getResourceBundle().getText("saveAsTileTitle", this.getResourceBundle().getText("worklistViewTitle")),
      				shareOnJamTitle: this.getResourceBundle().getText("worklistTitle"),
      				shareSendEmailSubject: this.getResourceBundle().getText("shareSendEmailWorklistSubject"),
      				shareSendEmailMessage: this.getResourceBundle().getText("shareSendEmailWorklistMessage", [location.href]),
      				tableNoDataText: this.getResourceBundle().getText("tableNoDataText"),
      				tableBusyDelay: 0
      			});
      			this.setModel(oViewModel, "worklistView");
      			// Make sure, busy indication is showing immediately so there is no
      			// break after the busy indication for loading the view's meta data is
      			// ended (see promise 'oWhenMetadataIsLoaded' in AppController)
      			oTable.attachEventOnce("updateFinished", function() {
      				// Restore original busy indicator delay for worklist's table
      			oViewModel.setProperty("/tableBusyDelay", iOriginalBusyDelay);
      			});
      
      
      		},
      
      
      		/* =========================================================== */
      		/* event handlers                                              */
      		/* =========================================================== */
      
      
      		/**
      		 * Triggered by the table's 'updateFinished' event: after new table
      		 * data is available, this handler method updates the table counter.
      		 * This should only happen if the update was successful, which is
      		 * why this handler is attached to 'updateFinished' and not to the
      		 * table's list binding's 'dataReceived' method.
      		 * @param {sap.ui.base.Event} oEvent the update finished event
      		 * @public
      		 */
      
      
      		/* onGraph: function() {
      			this.getRouter().navTo("graph");
      		},*/
      
      
      		onUpdateFinished: function(oEvent) {
      			// update the worklist's object counter after the table update
      			var sTitle,
      				oTable = oEvent.getSource(),
      				iTotalItems = oEvent.getParameter("total");
      			// only update the counter if the length is final and
      			// the table is not empty
      			if (iTotalItems && oTable.getBinding("items").isLengthFinal()) {
      				sTitle = this.getResourceBundle().getText("worklistTableTitleCount", [iTotalItems]);
      			} else {
      				sTitle = this.getResourceBundle().getText("worklistTableTitle");
      			}
      			this.getModel("worklistView").setProperty("/worklistTableTitle", sTitle);
      		},
      
      
      		/**
      		 * Event handler when a table item gets pressed
      		 * @param {sap.ui.base.Event} oEvent the table selectionChange event
      		 * @public
      		 */
      		onPress: function(oEvent) {
      			// The source is the list item that got pressed
      			this._showObject(oEvent.getSource());
      		},
      
      
      		/**
      		 * Event handler for navigating back.
      		 * We navigate back in the browser historz
      		 * @public
      		 */
      		onNavBack: function() {
      			history.go(-1);
      		},
      
      
      		onSearch: function(oEvent) {
      			if (oEvent.getParameters().refreshButtonPressed) {
      				// Search field's 'refresh' button has been pressed.
      				// This is visible if you select any master list item.
      				// In this case no new search is triggered, we only
      				// refresh the list binding.
      				this.onRefresh();
      			} else {
      				var oTableSearchState = [];
      				var sQuery = oEvent.getParameter("query");
      
      
      				if (sQuery && sQuery.length > 0) {
      					oTableSearchState = [new Filter("CompanyName", FilterOperator.Contains, sQuery)];
      				}
      				this._applySearch(oTableSearchState);
      			}
      
      
      		},
      
      
      		/**
      		 * Event handler for refresh event. Keeps filter, sort
      		 * and group settings and refreshes the list binding.
      		 * @public
      		 */
      		onRefresh: function() {
      			this._oTable.getBinding("items").refresh();
      		},
      
      
      		/* =========================================================== */
      		/* internal methods                                            */
      		/* =========================================================== */
      
      
      		/**
      		 * Shows the selected item on the object page
      		 * On phones a additional history entry is created
      		 * @param {sap.m.ObjectListItem} oItem selected Item
      		 * @private
      		 */
      		_showObject: function(oItem) {
      			this.getRouter().navTo("object", {
      				objectId: oItem.getBindingContext().getProperty("BusinessPartnerID")
      			});
      		},
      
      
      		/**
      		 * Internal helper method to apply both filter and search state together on the list binding
      		 * @param {object} oTableSearchState an array of filters for the search
      		 * @private
      		 */
      		_applySearch: function(oTableSearchState) {
      			var oViewModel = this.getModel("worklistView");
      			this._oTable.getBinding("items").filter(oTableSearchState, "Application");
      			// changes the noDataText of the list in case there are no filter results
      			if (oTableSearchState.length !== 0) {
      				oViewModel.setProperty("/tableNoDataText", this.getResourceBundle().getText("worklistNoDataWithSearchText"));
      			}
      		}
      
      
      	});
      });