Adding custom data to sap.viz.ui5.controls.Popover using customDataControl

[former_member592880]

I want to add an additional field to the popover of bar graph. I wish to add a date field in the popover along with the netprice. how do I do that??

I found customDataControl attribute in the SDK, but how do I use that???

I wish to add the date after price.

thank you

Siddharth

[maheshpalavalli · Accepted solution]

Hi Siddharth,

You can check the standard viz frame example below:

https://ui5.sap.com/#/sample/sap.viz.sample.CustomPopover/code

You can see in the "CustomPopover.controller.js", in the onDatasetSelected method, they are instatiating the viz frame popover with some popover props, this is where you need to set you function;

this.oPopOver = new sap.viz.ui5.controls.Popover(bindValue.popoverProps);
                this.oPopOver.connect(this.oVizFrame.getVizUid());

In the standard example they are returning the html control but instead of bindVaue.popoverProps, you can return like below:(i am just sending teh text, you can pass mix of controls.

popoverProps : {
                        'customDataControl' : function(data){
                            if(data.data.val) {
      
                               return new sap.m.Text({text:"Testing"});
                            }
                        }
                    }

[former_member592880 · Accepted solution]

thanks for the help sir,

I applied that code but I seem to get an undefined error..

XML

<viz:Popover id="idPurchaseHistoryPopOver"></viz:Popover>
  <viz:VizFrame id="idPurchaseHistoryGraph" xmlns="sap.viz" uiConfig="{applicationSet:'fiori'}"
   vizProperties="{ title: {text : 'Purchase History'}}" visible="false" vizType="column" height="100%" width="100%">
   <viz:dataset>
    <viz.data:FlattenedDataset data="{PoHis>/PHdata}">
     <viz.data:dimensions>
      <viz.data:DimensionDefinition name="PurchaseOrderNumber" value="{path : 'PoHis>EBELN'}"/>
     </viz.data:dimensions>
     <viz.data:measures>
      <viz.data:MeasureDefinition name="Price" value="{path : 'PoHis>NETPR'}"></viz.data:MeasureDefinition>
     </viz.data:measures>
    </viz.data:FlattenedDataset>
   </viz:dataset>
   <viz:feeds>
    <viz.feeds:FeedItem uid="valueAxis" type="Measure" values="Price"/>
    <viz.feeds:FeedItem uid="categoryAxis" type="Dimension" values="PurchaseOrderNumber"/>
   </viz:feeds>
  </viz:VizFrame>

JS

 var that = this;
var sServiceUrl = "/sap/opu/odata/AAG362/MM_PURCHASE_APPROVAL_SRV";
   var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl, true);
   var poHistory = "/GetLastSixPOSet?$filter=EBELN eq '" + poNum + "' and MATNR eq '" + matId + "'";
   oModel.setUseBatch(false);
   var oPurchaseHistoryGraph = that.getView().byId("idPurchaseHistoryGraph");
   oModel.read(poHistory, {
    success: function (oData, response) {
     if (oData.results !== "undefined" || oData.results !== null) {
      var UsageModel = new sap.ui.model.json.JSONModel({
       "PHdata": oData.results
      });
      oPurchaseHistoryGraph.setModel(UsageModel, "PoHis");
     }
//Popover
     var oPurchaseHistoryPopOver = that.getView().byId("idPurchaseHistoryPopOver");
     var oDataset = new sap.ui.model.json.JSONModel({
      settingsModel: {
       dataset: {
        name: "PoHisCustomData",
        value: null,
        popoverProps: function (data) {
         if (data.data.val) {
          return new sap.m.Text({
           text: "{PoHis>NETPR}",
           text: "{PoHis>AEDAT}"
          });
         }
        }
       }
      }
     });
     oPurchaseHistoryPopOver(bindValue.popoverProps);
     oPurchaseHistoryPopOver.connect(oPurchaseHistoryGraph.getVizUid());
     oPurchaseHistoryPopOver.setFormatString(formatPattern.STANDARDFLOAT);
    },
    error: function (error) {
     var message = "Error";
     sap.m.MessageBox.show(message, sap.m.MessageBox.Icon.ERROR, "Error");
    }
   });

I guess I'm doing this wrong, but I don't know what I'm doing wrong.

[maheshpalavalli · Accepted solution]

Hi Sid, where you are getting the undefined error? and see in the console from where the error is originating and if possible put the console screenshot error.

BR,Mahesh

[former_member592880 · Accepted solution]

I reckon the entire approach to that was wrong (correct me if otherwise) but this is new code that I was trying
xml

<viz:Popover id="idPurchaseHistoryPopOver" customDataControl="poHisTouch"></viz:Popover>

JS

 poHisTouch: function (oEvent) {
 
  var oPurchaseHistoryPopOver = that.getView().byId("idPurchaseHistoryPopOver") = new sap.viz.ui5.controls.Popover({
   customDataControl: function () {
    return new sap.m.Text({
     text: "{PoHis>AEDAT}}"
    });
   }
  });
  var oPurchaseHistoryGraph = that.getView().byId("idPurchaseHistoryGraph");
  oPurchaseHistoryPopOver.connect(oPurchaseHistoryGraph.getVizUid());
 },

And I no only have

var oPurchaseHistoryPopOver = that.getView().byId("idPurchaseHistoryPopOver")
oPurchaseHistoryPopOver.connect(oPurchaseHistoryGraph.getVizUid());
oPurchaseHistoryPopOver.setFormatString(formatPattern.STANDARDFLOAT);

these 3 lines in the graph function (code which I have put in the above comment) and now I get no popover and an error saying "Function expected"

regards and thanking you

Siddharth

[maheshpalavalli · Accepted solution]

Hi Sid,

Not able to understand your comment 😞

directly do in the init method of the view

 
  var oPurchaseHistoryGraph = that.getView().byId("idPurchaseHistoryGraph");// Viz frame
var mData = {
             'customDataControl' : function(data){

} };
 this.oPopOver = new sap.viz.ui5.controls.Popover(mData); // New popover
   this.oPopOver.connect(oPurchaseHistoryGraph.getVizUid());

put a breakpoint in the function and check

BR,

Mahesh

[former_member592880 · Accepted solution]

it worked sir, thank you very much for you help.. not just for this but all the other answers that you've answered too...

regards

Siddharth

[maheshpalavalli · Accepted solution]

You are welcome Sid, you can call me by mahesh 🙂 and feel free to ask anytime.

And to be frank, it's a learning for me as well!!

BR,Mahesh

[ori-broda]

For anyone that might be still interested in this, after some research this is what I found out:

The function 'customDataControl' defines the content of the Popover.

It gets an object 'data' which holds the details of the current selection, and returns an HTMLControl object to write the content of the Popover as pure html.

The problem is that the function 'customDataControl' is not aware of the graph (the view) or the model the graph is based on. So you will need to store the graph data as an object in JS in some global scope such as window.localStorage.

Now let's say you want to add the date after the price like in the question.

This could be the function 'customDataControl':

  // This is how the data is stored in the model using FlattenedDataset.       
  // It will vary per implementation.
  var chartData = oVizFrame.getAggregation("dataset").getBinding("data").oList;

  // This is needed in order to access the chart data from inside the customDataControl function. 
  window.localStorage.setItem("chartData", JSON.stringify(chartData));


  var popoverProps = {

      'customDataControl': function(data) {

          var chartData = JSON.parse(window.localStorage.getItem("chartData"));

          var values = data.data.val,
              // The content of the Popover 

              divStr = "",

              // The index of the selected point. 

              idx = values[2].value;

          // Line that shows the price

          divStr = divStr + "<div style = 'margin: 5px 30px 0 30px'><span style = 'float: right'>" + chartData[idx]['Price']
          "</span></div><br>";

          // Line that shows the date

          divStr = divStr + "<div style = 'margin: 5px 30px 15px 30px'><span style = 'float: right'>" + chartData[idx]['Date'] + "</span></div>";

          return new HTMLControl({
              content: divStr
          });

      }

  };

  // Connect the Popover to the chart. 

  var oPopover = new Popover(popoverProps);
  oPopover.connect(chart.getVizUid());

The documentation here is lacking a lot, and I hope that SAP will improve it in the future.

[former_member603701]

Hello Sid,

Could you please elaborate how you did it. ? I have same kind of requirement.

Thanks

Amruta