Question Re: to set json data on Comparison Micro in Technology Q&A

to set json data on Comparison Micro

former_member187272 — Mon, 14 Dec 2015 05:51:02 GMT

hi experts

How we can set data on micro chart with json data,i would like change 56 on image with data from json data

Thanks

Re: to set json data on Comparison Micro

Former Member — Mon, 14 Dec 2015 06:31:46 GMT

Hi Shahid,

Have you used a comparison chart?

If so you could bind the value

Regards,

Naren L Naik

Re: to set json data on Comparison Micro

saivellanki — Mon, 14 Dec 2015 06:44:40 GMT

Hi Shahid,

Will this help? Plunker

Regards,

Sai Vellanki.

Re: to set json data on Comparison Micro

vijay_kumar49 — Mon, 14 Dec 2015 06:47:35 GMT

Please check this example code. It may be useful : JS Bin - Collaborative JavaScript Debugging

Kindly let me know if you need any more information

Re: to set json data on Comparison Micro

former_member187272 — Mon, 14 Dec 2015 07:03:07 GMT

sap.ui.jsview("view.controllersTile", {

/** Specifies the Controller belonging to this View.

* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

* @memberOf cddemoapp.launchpage

getControllerName : function() {

return"";

/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

* Since the Controller is given to this method, its event handlers can be attached right away.

* @memberOf cddemoapp.launchpage

createContent : function(oController) {

var oBulletChart = new sap.suite.ui.commons.DynamicContainer({

tiles : [

new sap.suite.ui.commons.GenericTile({

header : 'Manual Override ',

// subheader : 'Close Status',

size : sap.suite.ui.commons.InfoTileSize.L ,

frameType : sap.suite.ui.commons.FrameType.TwoByOne,

// backgroundImage : 'https://36.media.tumblr.com/4c1c24d32d29fe4d2667102a67b07d05/tumblr_nfeoirox8O1qi1d8wo3_500.png',

headerImage : '',

press : function(){alert();},

tileContent : [

new sap.suite.ui.commons.TileContent({

footer : 'AUTOMATED:2069',

content : [

new sap.suite.ui.commons.ComparisonChart({

data : [

new sap.suite.ui.commons.ComparisonData({

title : 'Override',

value : 56,

color : 'Critical'

})

]

})

]

})

]

})

]

});

return(oBulletChart);

}

});

sai it is the code i am using

Re: to set json data on Comparison Micro

saivellanki — Mon, 14 Dec 2015 07:18:26 GMT

Hi Shahid,

Changed to JS view. I used your code, check this sample: Plunker

Regards,

Sai Vellanki.

Re: to set json data on Comparison Micro

former_member187272 — Mon, 14 Dec 2015 10:55:14 GMT

when i create new project and paste the code its works.But my existing project not working..

Thanks Sai..

Re: to set json data on Comparison Micro

saivellanki — Mon, 14 Dec 2015 12:06:47 GMT

Shahid,

What was the issue, any errors on console?

Regards,

Sai Vellanki.

Re: to set json data on Comparison Micro

former_member187272 — Mon, 14 Dec 2015 12:11:34 GMT

can we move coding at firstPage.controller.js to view.js?

Re: to set json data on Comparison Micro

saivellanki — Mon, 14 Dec 2015 12:15:10 GMT

Any specific reason to do that? Usually model initialization will be done in controller only.

Regards,

Sai Vellanki.

Re: to set json data on Comparison Micro

former_member187272 — Mon, 14 Dec 2015 12:22:48 GMT

Same variable(model) i have used at different part of project,i have changed the variable name and checked but no effect..

Re: to set json data on Comparison Micro

saivellanki — Mon, 14 Dec 2015 12:36:28 GMT

Shahid,

Give a name to your model. I changed the code using named model, check the sample: Plunker

Regards,

Sai Vellanki.

Re: to set json data on Comparison Micro

former_member187272 — Mon, 14 Dec 2015 12:46:14 GMT

var model = new sap.ui.model.json.JSONModel();

model.setData(aData);

sap.ui.getCore().setModel(model, "ComparisonModel");

I think u have change this portion in code ,i tried this but no result

Re: to set json data on Comparison Micro

former_member187272 — Mon, 14 Dec 2015 12:54:52 GMT

Sai it started working but not showing Numbers on chart

Re: to set json data on Comparison Micro

saivellanki — Mon, 14 Dec 2015 13:00:13 GMT

Did you give the model name while binding to properties in view? Check the view code once in the sample that I provided. Also make sure you have this in your HTML.


data-sap-ui-xx-bindingSyntax="complex"

Regards,

Sai Vellanki.

Re: to set json data on Comparison Micro

former_member187272 — Mon, 14 Dec 2015 13:11:15 GMT

i have

data-sap-ui-xx-bindingSyntax="complex"

it in HTML

Thanks

Re: to set json data on Comparison Micro

former_member187272 — Mon, 14 Dec 2015 13:14:55 GMT

it is my view.js

sap.ui.jsview("view.controllersTile1", {

/** Specifies the Controller belonging to this View.

* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.

* @memberOf routingdemo.App

getControllerName: function() {

return "view.controllersTile1";

/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.

* Since the Controller is given to this method, its event handlers can be attached right away.

* @memberOf routingdemo.App

createContent: function(oController) {

this.setHeight("100%");

var oTemplate = new sap.suite.ui.commons.ComparisonData({

title: "{AmountType}",

value: "{AmountSum}",

color: {

path: 'AmountSum',

formatter: function(v) {

if (v > 2000) {

return "Critical";

} else{

return "Good";

}

return parseInt(v);

}

});

var oChart = new sap.suite.ui.commons.ComparisonChart();

oChart.bindAggregation("data", {

path: "ComparisonModel>/",

template: oTemplate

});

var oBulletChart = new sap.suite.ui.commons.DynamicContainer({

tiles: [

new sap.suite.ui.commons.GenericTile({

header: 'Manual Override ',

// subheader : 'Close Status',

size: sap.suite.ui.commons.InfoTileSize.L,

frameType: sap.suite.ui.commons.FrameType.TwoByOne,

// backgroundImage : 'https://36.media.tumblr.com/4c1c24d32d29fe4d2667102a67b07d05/tumblr_nfeoirox8O1qi1d8wo3_500.png',

headerImage: '',

press: function() {

alert();

tileContent: [

new sap.suite.ui.commons.TileContent({

//footer: 'AUTOMATED:2069',

content: [oChart]

})

]

}).addStyleClass("myCustomTile")

]

});

return (oBulletChart);

}

});

My controller.js

sap.ui.controller("view.controllersTile1", {

/**

* Called when a controller is instantiated and its View controls (if available) are already created.

* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.

* @memberOf table_v01.Main

onInit: function() {

var aData = [{

"ContractNumber": "0000010000850",

"AmountType": "REP",

"AmountSum": 3460

}, {

"ContractNumber": "0000010000850",

"AmountType": "INT",

"AmountSum": 341

}, {

"ContractNumber": "0000010000850",

"AmountType": "FEE",

"AmountSum": 1560

}];

var model = new sap.ui.model.json.JSONModel();

model.setData(aData);

sap.ui.getCore().setModel(model,"ComparisonModel");

}

});

Re: to set json data on Comparison Micro

saivellanki — Mon, 14 Dec 2015 13:37:26 GMT

Shahid,

There you go, you have to bind the model name to your property values as well.


sap.suite.ui.commons.ComparisonData({
      title: "{ComparisonModel>AmountType}",
      value: "{ComparisonModel>AmountSum}",
      color: {
        path: 'ComparisonModel>AmountSum',
        formatter: function(v) {
          if (v > 2000) {
            return "Critical";
          } else{
            return "Good";
          }
          return parseInt(v);
        }
      }
    })

Regards,

Sai Vellanki.

Re: to set json data on Comparison Micro

former_member187272 — Mon, 14 Dec 2015 13:43:28 GMT

Hi Sai

Now I like to set data from json model for footer of tile also

new sap.suite.ui.commons.TileContent({

footer: 'AUTOMATED:2069',

content: [oChart]

})

How can we do?

Thanks &Regards

Re: to set json data on Comparison Micro

saivellanki — Tue, 15 Dec 2015 00:40:28 GMT

Hi Shahid,

What should be the value and does it come from same model?

Regards,

Sai Vellanki.