Data binding using python service for vizframe charts

View.xml
<mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m" xmlns:u="sap.ui.unified" xmlns:f="sap.ui.layout.form"
controllerName="PythonToJson.controller.ToolLifeOver" xmlns:viz="sap.viz.ui5.controls"
xmlns:viz.feeds="sap.viz.ui5.controls.common.feeds" xmlns:viz.data="sap.viz.ui5.data"
xmlns:html="http://www.w3.org/1999/xhtml" xmlns:ui="sap.ui.table"
xmlns:l="sap.ui.layout" xmlns:c="sap.suite.ui.commons">

<Page class="sapUiSizeCompact">
<customHeader>
<Bar class="headerBg">
<contentMiddle>
<Title text="Tool Life Over" class="headerText" id="TitGeneration"></Title>
</contentMiddle>
<contentLeft>
<ToggleButton id="hideMastBtn" press="onNavBack"
class="headerText" icon="sap-icon://nav-back" />
</contentLeft>
</Bar>
</customHeader>
<content>
<l:FixFlex id='chartFixFlex' minFlexSize="250">
<!--Below is the setting panel -->
<l:fixContent>
<Panel expandable="true" expanded="true" class="hdr"
headerText="Selection Parameters">
<!--<content> -->
<f:Form id="CalibrationForm" editable="true" class="myCustomButton">
<f:layout>
<f:ResponsiveGridLayout labelSpanXL="4"
labelSpanL="4" labelSpanM="4" labelSpanS="12" adjustLabelSpan="false"
emptySpanXL="0" emptySpanL="0" emptySpanM="0" emptySpanS="0"
columnsXL="3" columnsL="3" columnsM="3"
singleContainerFullSize="false" />
</f:layout>
<f:formContainers>
<f:FormContainer class="fmLayout">
<f:formElements>
<f:FormElement label="{i18n>Vcode}" required="true">
<f:fields>
<Input id="pcode" editable="true" showSuggestion="true"
maxLength="10" placeholder="Enter Party Code ..." value="{FORM>/PartyCode}"
valueState="{vState>/PartyCode}" showValueHelp="true"
valueHelpOnly="true" valueHelpRequest="handleValueHelp"
change="handleClose" suggestionItemSelected="handleClose"
description="" fieldWidth="50%">
<suggestionItems>
<core:ListItem key="{ProductId}" text="{PartNo}"
additionalText="{PartName}" />
</suggestionItems>
</Input>
</f:fields>
</f:FormElement>

<f:FormElement label="{i18n>Financial Year}"
required="true">
<f:fields>
<Select forceSelection="false" id="FinYear"
items="{path: 'Model_fYear>/'}">

<core:Item key="{Model_fYear>FYear}" text="{Model_fYear>FYear}" />
</Select>
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
</f:formElements>
</f:FormContainer>

<f:FormContainer>
<f:formElements>
<f:FormElement label="{i18n>Pno}" required="true">
<f:fields>
<Input id="gstno1" editable="true" showSuggestion="true"
maxLength="10" placeholder="Enter Part No ..." value="{FORM>/PartyCode}"
valueState="{vState>/PartyCode}" showValueHelp="true"
valueHelpOnly="true" valueHelpRequest="handleValueHelp"
change="handleClose" suggestionItemSelected="handleClose"
description="" fieldWidth="50%">
<suggestionItems>
<core:ListItem key="{ProductId}" text="{VendorCode}"
additionalText="{VendorName}" />
</suggestionItems>
</Input>
</f:fields>
</f:FormElement>

<f:FormElement label="{i18n>Month}" required="true">
<f:fields>
<Select forceSelection="false" id="month"
items="{path: 'Model_month>/'}">
<core:Item key="{Model_month>Month}" text="{Model_month>Month}" />
</Select>
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
</f:formElements>
</f:FormContainer>

<f:FormContainer>
<f:formElements>
<f:FormElement label="{i18n>Tno}" required="true">
<f:fields>
<Input id="state1" editable="true" showSuggestion="true"
maxLength="10" placeholder="Enter Tool No ..." value="{FORM>/PartyCode}"
valueState="{vState>/PartyCode}" showValueHelp="true"
valueHelpOnly="true" valueHelpRequest="handleValueHelp"
change="handleClose" description="" fieldWidth="50%"
suggestionItemSelected="handleClose">
<suggestionItems>
<core:ListItem key="{ProductId}" text="{ToolNo}"
additionalText="{ToolName}" />
</suggestionItems>
</Input>
</f:fields>
</f:FormElement>
<f:FormElement label="" required="true">
<f:fields>
<Button type="Accept" icon="sap-icon://search" text="{i18n>Search}"
press="onFilter" id="addvalue" width="6rem"></Button>
<Button type="Reject" icon="sap-icon://reset" text="{i18n>Clear}"
press="onClearFields" id="clear" width="6rem"></Button>
</f:fields>
</f:FormElement>
</f:formElements>
<f:formElements>
</f:formElements>
</f:FormContainer>
</f:formContainers>
</f:Form>
<!-- <Toolbar> <ToolbarSpacer /> <Button type="Emphasized" icon="sap-icon://search"
text="{i18n>Search}" press="onFilter" id="addvalue" width="6rem"></Button>
<Button type="Emphasized" icon="sap-icon://sys-cancel" text="{i18n>Clear}"
press="onClearFields" id="clear" width="6rem"></Button> </Toolbar> -->
<!-- </content> -->
</Panel>
</l:fixContent>

<l:fixContent>

<c:ChartContainer id="chartContainer"
showFullScreen="true" autoAdjustHeight="true" showPersonalization="false"
showLegend="true" personalizationPress="attachPersonalizationPress"
contentChange="attachContentChange" class="sapUiSizeCompact"
title="Tool Life Over">
<c:content>
<c:ChartContainerContent>
<c:content>
<viz:VizFrame id="idVizFramedas6" deselectData="fnSelect"
selectData="fnSelect" vizType='column' visible="true"
uiConfig="{applicationSet:'fiori'}" width="100%">
<viz:dataset>
<viz.data:FlattenedDataset data="{G>/data}">
<viz.data:dimensions>
<viz.data:DimensionDefinition
width="1rem" name="Financial Year" value="{G>date>0}" />
</viz.data:dimensions>

<viz.data:measures>
<viz.data:MeasureDefinition
width="1rem" name="Tools planned for replacement" value="{G>amount>0}" />
</viz.data:measures>
<viz.data:measures>
<viz.data:MeasureDefinition
width="1rem" name="Tool Replaced" value="{G>city>0}" />
</viz.data:measures>

</viz.data:FlattenedDataset>
</viz:dataset>
<viz:feeds>
<viz.feeds:FeedItem id="valueAxisFeed"
uid="valueAxis" type="Measure"
values="Tools planned for replacement,Tool Replaced" />
<viz.feeds:FeedItem uid="categoryAxis"
type="Dimension" values="Financial Year" />
</viz:feeds>
</viz:VizFrame>
</c:content>
</c:ChartContainerContent>
</c:content>
</c:ChartContainer>
</l:fixContent>
</l:FixFlex>
</content>
</Page>
</mvc:View>

--------------------------------------------------------------------------------------------------------------------------
CONTROLLER

var user,ToolV;
sap.ui.define([
  "sap/ui/core/mvc/Controller",
  "sap/ui/model/json/JSONModel",
  "sap/m/MessageBox",
  "sap/ui/model/Filter",
  "sap/ui/model/FilterOperator",
  "sap/m/BusyDialog",
  "sap/m/MessageToast",
  "PythonToJson/format/CustomFormat",


  ], function (Controller, JSONModel, MessageBox, Filter, FilterOperatorm, BusyDialog, MessageToast,CustomFormat) {
  "use strict";
  var oView, oCont,oRow
  return Controller.extend("PythonToJson.controller.ToolLifeOver", {
    onInit: function () {
      debugger
      ToolV = this;
      this.mark = "";
      oView = this.getView();
      this.initCustomFormat();
      var data = {};
      //////////////////////////////Get Id for Vendor //////////////////////////////////////

      var oDataModel = new sap.ui.model.json.JSONModel();
    //    oDataModel.loadData("http://localhost:8080/ZDet_Analysis/proxy/sap/bc/ui2/start_up",null,false);
    oDataModel.loadData("/sap/bc/ui2/start_up", null, false);
      data.user = oDataModel.getData().id;
      user = data.user;
      var paramters =
      {
          "$expand":"NAV_VENDOR3,NAV_MATNR3,NAV_TOOL_NO3,NAV_MONTH,NAV_FYEAR"
      }
      ToolV.getOwnerComponent().getModel("Tool_SRM_RPT").read("/ET_CHARTS_HSet(UserId='"+user+"')",{
        urlParameters:paramters,
        success: ToolV.mySuccessHandler, error: ToolV.myErrorHandler});
    },
    mySuccessHandler:function(data,response){
      debugger;

      /********************** getting model for part No*************************/
      this.oJSON_PartNO = new JSONModel;
      this.oJSON_PartNO.setData(data.NAV_MATNR3.results);
      sap.ui.getCore().setModel(this.oJSON_PartNO,"Model_PartNo");
      /********************** getting model for Tool *************************/
      this.oJSON_toolNo = new JSONModel;
      this.oJSON_toolNo.setData(data.NAV_TOOL_NO3.results);
      sap.ui.getCore().setModel(this.oJSON_toolNo,"Model_toolNo");
      /********************** getting model for Vendor No*************************/
      this.oJSON_VendorNo = new JSONModel;
      this.oJSON_VendorNo.setData(data.NAV_VENDOR3.results);
      sap.ui.getCore().setModel(this.oJSON_VendorNo,"Model_VendorNo");

      this.fYear =new JSONModel;
      this.fYear.setData(data.NAV_FYEAR.results);
      ToolV.getView().byId('FinYear').setModel(this.fYear,"Model_fYear");

      this.month = new JSONModel();
        this.month.setData(data.NAV_MONTH.results);
        ToolV.getView().byId('month').setModel(this.month,"Model_month");

      /*var comboData = {
          results: []
      };
      for (var i = 0; i <=data.NAV_MONTH.results.length; i++) {
        var month;
        month= data.NAV_MONTH.results[i].Month.split('-')[1];
        //ToolV.getView().byId('month').setModel(month,"Model_month");
        comboData.results.push(month);

      }
      this.month.setData(comboData.results);
      ToolV.getView().byId('month').setModel(comboData,"Model_month");*/

    },
    myErrorHandler:function(data,response){
      debugger
    },
     onNavBack : function(){
          //  history.go(-1);
          var abc = "X";
          var loRouter = sap.ui.core.UIComponent.getRouterFor(this);
          loRouter.navTo("Tile",{value:abc});
  ToolV.onClearFields();
        },
    onAfterRendering :function(){
      debugger;

  $.ajax({
url: 'http://142.93.216.68:5000/get_data',
method: 'GET',
success: function(data,response){


          //oView.setBusy(false);
          //  that.getOwnerComponent().getModel("Explode").setData(oData);
          debugger
          var that = this;

          this.oModel= new sap.ui.model.json.JSONModel(data);
          oView.byId("idVizFramedas6").setModel(this.oModel,"G");
          //CHart1
          var oVizFrame= oView.byId("idVizFramedas6");
          oView.byId("idVizFramedas6").setHeight('0%');
          oVizFrame.setVizProperties({
            title:{
              text : "Tool Life Over"
            },
            legendGroup : {
              layout : {
                position : "bottom"
              }
            },
            plotArea: {
              colorPalette : d3.scale.category20().range(),
              drawingEffect: "glossy",
              dataLabel:{
                visible : true,
                formatString:CustomFormat.FIORI_LABEL_SHORTFORMAT_2,
                unitFormatType : "FinancialUnits"
              },
              gridline:{
                size: 2,
                type:""
              },
              valueAxis: {
                label: {
                  formatString: CustomFormat.FIORI_LABEL_SHORTFORMAT_10
                },
                title: {
                  visible: false
                }
              },
            },
          });
          var scales = [
            {
              'feed': 'color',
              'palette': ['#3e85f2','#179b36','#ed9f31']
            }
            ];
          oVizFrame.setVizScales(scales);

          //oCont.BusyDialog.close();
          //that.Cabreportbase64 = data.results[0].CalibrReport;

       
},
error:function(error){

}
});
  this.getView().byId("idVizFramedas6").setModel(this.oModel,"G");
     

    },
    initCustomFormat : function(){
      debugger;
      CustomFormat.registerCustomFormat();
    },

    handleValueHelp :function(evt){
      if(evt.mParameters.id.split("--")[2] == "pcode"){
        this.VenFrag = sap.ui.xmlfragment("ZDet_Analysis.dialog.vendor",this);
        var oModel = sap.ui.getCore().getModel("Model_VendorNo");
        var VendorModel = new JSONModel();
        var VenData = {
            "results" : oModel.oData
        };
        VendorModel.setData(VenData);
        this.VenFrag.setModel(VendorModel);
        this.getView().addDependent(this.VenFrag);
        this.VenFrag.open();
        this.mark = "V";
      }
      else if(evt.mParameters.id.split("--")[2] == "gstno1"){
        this.PartFrag = sap.ui.xmlfragment("ZDet_Analysis.dialog.Part",this);
        var oModel = sap.ui.getCore().getModel("Model_PartNo");
        var PartModel = new JSONModel();
        var PartData = {
            "results" : oModel.oData
        };
        PartModel.setData(PartData);
        //changed byu singvi-cont
        this.PartFrag.setModel(PartModel);
        this.getView().addDependent(this.PartFrag);
        this.PartFrag.open();
        this.mark = "P";
//        *********************************
        this.getView().getModel("oJSON_PartNO");
//        *********************************
      }
      else{
        this.ToolFrag = sap.ui.xmlfragment("ZDet_Analysis.dialog.tool",this);
        var oModel = sap.ui.getCore().getModel("Model_toolNo");
        var toolfragModel = new JSONModel();
        var toolfragData = {
            "results" : oModel.oData
        };
        toolfragModel.setData(toolfragData);
        this.ToolFrag.setModel(toolfragModel);
        this.getView().addDependent(this.ToolFrag);
        this.ToolFrag.open();
        this.mark = "T";
      }
    },
    _handleValueHelpSearch : function (evt) {
      debugger;
      if(evt.getSource().mProperties.title == "Part Number"){
        var value = "PartNo"
      }else if (evt.getSource().mProperties.title == "Vendor Code"){
        value = "VendorCode"
      }else{
        value = "ToolName"
      }
      var sValue = evt.getParameter("value");
      var oFilter = new Filter(
          value,
          sap.ui.model.FilterOperator.Contains, sValue
      );
      evt.getSource().getBinding("items").filter([oFilter]);
    },
    _VendorValueHelpClose:function(evt){
      if(this.mark == "V"){
        var title = evt.mParameters.selectedItem.mProperties.title;
        var input = this.getView().byId('pcode');
        input.setValue(title);
        //  this.getView().byId("pcode").setDescription(evt.getParameter("selectedItem").mProperties.description);
        /*this.VenFrag.destroy();
            this.VenFrag=undefined;*/
      }
      else if(this.mark == "P"){
        var title = evt.mParameters.selectedItem.mProperties.title;
        var input = this.getView().byId('gstno1');
        input.setValue(title);
        // this.getView().byId("gstno1").setDescription(evt.getParameter("selectedItem").mProperties.description);
        /*this.PartFrag.destroy();
            this.PartFrag=undefined;*/
      }else{
        var title = evt.mParameters.selectedItem.mProperties.title;
        var input = this.getView().byId('state1');
        input.setValue(title);
        this.getView().byId("state1").setDescription(evt.getParameter("selectedItem").mProperties.description);

        /*  this.ToolFrag.destroy();
            this.ToolFrag=undefined;*/
      }
    },
    onFilter:function(evt){
      debugger;

      //var that = this;
      var oView = this.getView();
      this.alias = "Tool Life Over"
        var oModel = new JSONModel;
      var vVendor = oView.byId("pcode").getValue();
      var vPart = oView.byId("gstno1").getValue();
      var vTool = oView.byId("state1").getValue();
      var year = this.getView().byId('FinYear').getSelectedKey()
      var mnth=this.getView().byId('month').getSelectedKey().split('-')[0]
      //  var DateTo = oView.byId("DP1").getValue().slice(0, 10).replace(/-/g, "")
      //  var DateFrom = oView.byId("DP2").getValue().slice(0, 10).replace(/-/g, "")

      if(vVendor == ""){
        MessageBox.error("Please Enter Vendor Code");
        /*if(vVendor === ""){
              oView.byId("pcode").setValueState("Error");
            }
            if(vPart === ""){
              oView.byId("gstno1").setValueState("Error");
            }
            if(vTool === ""){
              oView.byId("state1").setValueState("Error");
            }
            if(DateTo === ""){
              oView.byId("DP1").setValueState("Error");
            }
            if(DateFrom === ""){
              oView.byId("DP2").setValueState("Error");
            }*/
      }
      else{
        if(vVendor != "" ){
          //var mnth ="02"
            var URL = "(VendorCode eq '" + vVendor + "' and PartNo eq '" + vPart + "'  and ToolNo eq '" + vTool + "'  and FY eq '"+year+"' and Month eq '" + mnth + "' and Flag eq '"+this.alias+"')"; 
          var readUrl = "/ET_CHARTSSet";
          this.getView().setBusy(true);
          this.getOwnerComponent().getModel("Tool_SRM_RPT").read(readUrl, {
            urlParameters: {
              "$filter": URL
            },
            success: function(data, response) {
              oView.setBusy(false);
              //  that.getOwnerComponent().getModel("Explode").setData(oData);
              debugger
              var that = this;
              if(data.length == 0){
                MessageBox.warning('No Data Available')
              }else{

                var oJsonList = new sap.ui.model.json.JSONModel();
                oJsonList.setData(data)  // added
                // oCont.getView().setModel(oJsonList, "filteredData");
                oView.byId('idVizFramedas6').setModel(oJsonList,
                "G");
                oView.byId('idVizFramedas6')
                .getModel("G").refresh(true);
              }
              //oCont.BusyDialog.close();
              //that.Cabreportbase64 = data.results[0].CalibrReport;

            },
            error : function(response){
              debugger
              //that.BusyDialog.close();
            },

          });
        }
      }
    },
onClearFields:function(evt){
          debugger;
          this.getView().byId('pcode').setValue('');
          this.getView().byId('gstno1').setValue('');
          this.getView().byId('state1').setValue('');
          this.getView().byId('FinYear').setSelectedKey('')
          this.getView().byId('month').setSelectedKey('')
        },
  })

})


--------------------------------------------------------------------------------------------------------------------------
customFormat.js
sap.ui.define([
       'sap/viz/ui5/format/ChartFormatter',
       'sap/viz/ui5/api/env/Format'
   ], function(ChartFormatter,Format) {
    return {
        FIORI_LABEL_SHORTFORMAT_10 : "__UI5__ShortIntegerMaxFraction10",
        FIORI_LABEL_FORMAT_2 : "__UI5__FloatMaxFraction2",
        FIORI_LABEL_SHORTFORMAT_2 : "__UI5__ShortIntegerMaxFraction2",
        FIORI_PERCENTAGE_FORMAT_2 : "__UI5__PercentageMaxFraction2",
        MFS1 : "month_s1",
        MFS2 : "month_s2",
        MFS3 : "month_s3",
        MFS4 : "month_s4",
        MDFS1 : "month_day_s1",
        MDFS2 : "month_day_s5",
        MDFS3 : "month_day_s6",
        YFS0 : "year_s0",
        YFS1 : "year_s1",
        YFS2 : "year_s2",
        chartFormatter : null,
        registerCustomFormat: function() {
        debugger;
            var chartFormatter = this.chartFormatter = ChartFormatter.getInstance();
            chartFormatter.registerCustomFormatter(this.FIORI_LABEL_SHORTFORMAT_10,
                function(value) {
            debugger;
                    var fixedInteger = sap.ui.core.format.NumberFormat.getIntegerInstance({
                        style: "short",
                        maxFractionDigits: 10
                    });
                    return fixedInteger.format(value);
            });
            chartFormatter.registerCustomFormatter(this.FIORI_LABEL_FORMAT_2,
                function(value) {
                    var fixedFloat = sap.ui.core.format.NumberFormat.getFloatInstance({
                        style: 'Standard',
                        maxFractionDigits: 2
                    });
                    return fixedFloat.format(value);
            });
            chartFormatter.registerCustomFormatter(this.FIORI_LABEL_SHORTFORMAT_2,
                function(value) {
                    var fixedInteger = sap.ui.core.format.NumberFormat.getIntegerInstance({
                        style: "short",
                        maxFractionDigits: 2
                    });
                    return fixedInteger.format(value);
            });
            chartFormatter.registerCustomFormatter(this.FIORI_PERCENTAGE_FORMAT_2,
                function(value) {
            var val = value/100;
                var percentage = sap.ui.core.format.NumberFormat.getPercentInstance({
                    style: 'standard',
                    maxFractionDigits: 2
                });
                return percentage.format(val);
            });
            function registerTime(key, formatString){
                chartFormatter.registerCustomFormatter(key, function(value) {
                    var dateFormatter = sap.ui.core.format.DateFormat.getDateTimeInstance({
                                    pattern: formatString});
                    return dateFormatter.format(value);
                });
            };
            var patterns = {"month_s1" : "M", "month_s2" : "MM", "month_s3" : "MMM", "month_s4" : "MMMM",
                    "month_day_s1" : 'MM/dd', "month_day_s5" : 'MMM d', "month_day_s6" : 'MMMM d',
                    "year_s0" : 'yy', "year_s1" : 'yyy', "year_s2" : 'yyyy', "YearMonthDay" : "MM/dd/yy"};
            for ( var key in patterns) {
                if (patterns.hasOwnProperty(key)) {
                    registerTime(key,patterns[key]);
                }
            };
            Format.numericFormatter(chartFormatter);
        }
    }
});
-------------------------------------------------------------------------------------------------------------------------



FOLDER STRUCTURE

Post a Comment

Previous Post Next Post