Showing results for 
Search instead for 
Did you mean: 

SAP UI 5 - Updating UI From Controller

Former Member
0 Kudos

Hi Everyone,

I am extremely new to Sap UI 5 and JavaScript. In the interest of full disclosure web development in general and are grateful for any assistance you may provide. I am looking for a solution to update the UI from my controller. I am able to create the Bar Chart(with no data) and gather the data from my XSJS service without issue but as my Bar Chart gets rendered before my data is obtained I am unsure how to display the received data on the Bar Chart from my controller.

I know this is probably a very basic question but I have tried solutions provided in both tutorials and previously answered discussion questions to no avail.

I have included the what I believe to be the necessities of my code below.

I have a Shell as follows

createContent : function(oController) {  
sap.ui.jsview("views.bonusPlanIndex", {

     getControllerName : function() {
          //return "bonusPlanIndex";
          return null;
     createContent : function(oController) {
          var oBonusPlans = sap.ui.view({id:"viewbonusplans", viewName:"views.bonusPlans", type:sap.ui.core.mvc.ViewType.JS});
          var oShell = new sap.ui.ux3.Shell("myShell", {
               appTitle: "Bonus Plan Management",
               appIcon: "",
               appIconTooltip: "",
               showLogoutButton: false,
               showSearchTool: false,
               showInspectorTool: false,
               showFeederTool: false,
               worksetItems: [new sap.ui.ux3.NavigationItem("NB_bonusplans",{key:"nb_bonusplans",text:"Bonus Plans", subItems:[
                                   new sap.ui.ux3.NavigationItem("NB_1_1",{key:"nb_1_1",text:"View Bonus Plans"}),
                                 new sap.ui.ux3.NavigationItem("NB_1_2",{key:"nb_1_2",text:"Add Bonus Plan"})]})
               worksetItemSelected: function(oEvent){
                    var sId = oEvent.getParameter("id");
                    var oShell = oEvent.oSource;
                    switch (sId) {
                    case "NB_bonusplans":
                    case "NB_1_1":
                    case "NB_1_2":
          return oShell;          


I have a view which creates a bar chart similar to the Bar Chart created in

createContent : function(oController) {  
                    var bonusPlanBarChart = new sap.viz.ui5.Bar("bonusPlanBarChart", {  
                              width : "50%",  
                              height : "50%",  
                              xAxis: {  
                                        title: { visible: true, text : "EUR" }  
                              title : {  
                                        visible : true,  
                                        text : 'Bonus Plans'  
                              interaction: new sap.viz.ui5.types.controller.Interaction(  
                                                                                selectability: new sap.viz.ui5.types.controller.Interaction_selectability(  
                                                                       mode: sap.viz.ui5.types.controller.Interaction_selectability_mode.single  
                              dataset : bonusPlanDataset= new{  
                                        // a Bar Chart requires exactly one dimension (x-axis)  
                                        dimensions : [ {  
                                                  axis : 1, // must be one for the x-axis, 2 for y-axis  
                                                  name : 'Names',  
                                                  value : "{bonusPlans>/empName}"  
                                        // it can show multiple measures, each results in a new set of bars  
                                        // in a new color  
                                        measures : [  
                                                  name : 'Income', // 'name' is used as label in the Legend  
                                                  value : '{bonusPlans>/bonusAmount}' // 'value' defines the binding for the  
                                                  name : 'Bonus Amount', // 'name' is used as label in the Legend  
                                                  value : '{bonusPlans>/totalAmount}' // 'value' defines the binding for the  
                                        // 'data' is used to bind the whole data collection that is to be  
                                        // displayed in the chart  
                                        data : {  
                                                  path : "/"  
                    return bonusPlanBarChart;  

I also have a corresponding controller that uses Ajax to call an XSJS service.

getBonusPlanWAjax: function(){          
               url : "services/calculatedBonusPlanService.xsjs",
               type : 'GET',
               success : function(data) {
                    //var mResult = sap.ui.getCore().byId("bonusPlanBarChart");  
                    var oModel = new sap.ui.model.json.JSONModel();
                    sap.ui.getCore().setModel(oModel, "bonusPlans");
               error : function(jqXHR, textStatus, errorThrown) {
                    // TODO improve error handling
                    sap.ui.commons.MessageBox.alert("Failed to retrieve data: " + textStatus+ "\n" + errorThrown);

If you require anything else, please don't hesitate to ask.

Thank you for your time,


Accepted Solutions (1)

Accepted Solutions (1)

Former Member
0 Kudos

I resolved this using a Model that was declared globally. I set this model to my bar chart and then any updates I made to said Model in my controller (Or anywhere else) would be reflected in my View's Bar-chart.

This same approach is used in the SHINE application. You can find examples in the Details View/Controller. In the global.js file you will find the global model. Also check the poWorkList.html (Or other html files) to see how this global.js file is made available.

Answers (0)