Setting odata to Generic Tile

[Former Member]

Hi Experts,

I am Developing a foiri application using Generic tIle(SAPUI5 Explored)

Please help me to connect data to Generic Tile from database.

Thanks,

Sandeep

[gill367]

Hi Sandeep,

You need to fetch the data using model. Odata model is preferred and then map the model to xml view fields in tile configurations.

A simple guide on how to get data from sap into UI5 application using odata is here .

Regards,

Sarbjeet Singh

[Former Member]

Thanks for your reply.

I have already code for this Generic Tile which was developed for UI5 application, written in javascript . I need to convert javascript view to XML View .

My code is :

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

       title: "{ComparisonModel1>STATUS}",

       value: {

            path: "ComparisonModel1>CNT",

            formatter: function(val) {

                 return Number(val);

            }

       }

  });

  var oChart = new sap.suite.ui.commons.ComparisonChart({

       colorPalette: ["#1bb7a0", "#ffdc7a", "#f17979"],

       view: "Wide",

       width: "22rem"

  });

  oChart.bindAggregation("data", {

       path: "ComparisonModel1>/d/results",

       template: oTemplate

  });

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

       tiles: [

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

                 header: 'Close Status',

                 subheader: "TOTAL : " + "{ComparisonModel1>/d/results/0/TOT_COUNT}",

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

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

                 tileContent: [

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

                           content: [oChart]

                      })

                 ]

            })

       ]

  });

  return (oBulletChart);

I want XML version of this.

Thanks,

Sandeep

[gill367]

something like below will do. Try it

<core:View
  controllerName="sap.suite.ui.commons.sample.GenericTile2x1TwoCont.GenericTile2x1TwoCont"
  xmlns="sap.suite.ui.commons"
  xmlns:core="sap.ui.core">
  <GenericTile 
  header="Close Status"
  subheader="TOTAL : {ComparisonModel1>/d/results/0/TOT_COUNT}"
  size="L" 
  frameType="TwoByOne">

  <tileContent>


  <TileContent >
  <content>
  <ComparisonChart view="Wide" width="22rem" colorPalette="['#1bb7a0', '#ffdc7a', '#f17979']" data="{ComparisonModel1>/d/results}">
         <data>
          <ComparisonData title="{ComparisonModel1>STATUS}" value="{ComparisonModel1>CNT}" />

         </data>
         </ComparisonChart>
  </content>
  </TileContent>
  </tileContent>
  </GenericTile>


</core:View>

Regards,

Sarbjeet Singh

[Former Member]

Hi Sarbjeet ,

I have tried this code , But data is not setting up in the tile.

Can you please help me on this.

Thanks,

Sandeep

[gill367]

HI Sandeep,

Please check what is the error coming in browser console.

Also, was it working fine with js view?

Please check whether model is properly filled.

Regards,

Sarbjeet Singh

[Former Member]

HI Sarbjeet,

It was working fine in JS view and Model is properly filled.

I am Setting Model in controller by using below code :

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

model.loadData(url);

model.attachRequestFailed(function() {

  alert("OData Request Failed!"); }

);

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

My OData Request gets success.

Error i am getting in browser console is,

Failed to load resource: the server responded with a status of 404 (Not Found)

Thanks,

Sandeep

[gill367]

Could you please share the browser console error screenshot. We need to know the more details about the error.

Regards,

Sarbjeet Singh

[Former Member]

Hi Sarbjeet,

Screen Shot of Error in

Thanks,

Sandeep

[Former Member]

Hi Sarbjeet,

My view Code is :

<core:View controllerName="sap.ui.demo.wt.controller.CloseStatusController"

       xmlns:core="sap.ui.core"

       xmlns="sap.suite.ui.commons">

       <GenericTile

            frameType="TwoByOne"

            header="Close Status"

            size="L"

            subheader="TOTAL : {ComparisonModel1>/d/results/0/TOT_CNT}">

            <tileContent>

                 <TileContent >

                      <content>

                           <ComparisonChart

                                colorPalette="#1bb7a0,#ffdc7a,#f17979"

                                data="{ComparisonModel1>/d/results}"

                                view="Wide"

                                width="22rem">

                                <data>

                                     <ComparisonData

                                          title="{ComparisonModel1>STATUS_DESC}"

                                          value="{ComparisonModel1>CNT}"/>

                                </data>

                           </ComparisonChart>

                      </content>

                 </TileContent>

            </tileContent>

       </GenericTile>

</core:View>

Is setting up data to the view/binding data is correct ?.

Thanks,

Sandeep

[gill367]

Hi

one difference  is colorPalette="['#1bb7a0', '#ffdc7a', '#f17979']" 

Second is the controller address "sap.ui.demo.wt.controller.CloseStatusController" is it correct as per your project.

and provide more details about the error in console. still i can see only one line.

Regards,

Sarbjeet Singh

[Former Member]

Hi Sarbjeet,

The controller address is correct as per my project.

I am getting  only one line error in browser(Google Chrome)console - Failed to load resource: the server responded with a status of 404 (Not Found)

model.attachRequestCompleted(function() {

  alert(model.getJSON());

});

The Structure of data I am getting using above code is :

Thanks,

Sandeep

[gill367]

Hi

Please share your component.js file

Also error's location is not visible in the error screenshot.

Regards,

Sarbjeet Singh

[Former Member]

Hi Sarbjeet ,

Please find Component.js code below .

sap.ui.define([

   "sap/ui/core/UIComponent",

   "sap/ui/model/json/JSONModel"

], function (UIComponent, JSONModel) {

   "use strict";

   return UIComponent.extend("sap.ui.demo.wt.Component", {

      metadata : {

            manifest: "json"

      },

      init : function () {

         // call the init function of the parent

         UIComponent.prototype.init.apply(this, arguments);

         // set data model

         var oData = {

            recipient : {

               name : "World"

            }

         };

         var oModel = new JSONModel(oData);

         this.setModel(oModel);

      }

   });

});

Thanks,

Sandeep

[Former Member]

Hi Sandeep,

try below JS code.

        var oModel = new sap.ui.model.json.JSONModel({

              Dashboard:[{

                module : "Test 1",

                countx : "Customize and Extend",

                subdata:"SAP News Center",

                genhed:" genhed Test 1",

                bdimg: "http://www.oorsprong.org/WebSamples.CountryInfo/Images/India.jpg",

                tgurl:"https://www.sapeducationsolutions.com/assets/article_support/sap-fiori-training-1405017224.pdf"

              },{

                    module : "Test 2",

                    countx : "The Download : Stefan Ries",

                    subdata:"SAP Data center",

                    genhed:"genhed Test 2",

                    bdimg: "http://www.oorsprong.org/WebSamples.CountryInfo/Images/Germany.jpg",

                    tgurl:"https://www.google.co.in"

                  },

                  {

                        module : "Test 3",

                        countx : "The Test Header 3",

                        subdata:"SAP Quality Center",

                        genhed:"genhed Test 2",

                        bdimg: "http://www.oorsprong.org/WebSamples.CountryInfo/Images/USA.jpg",

                        tgurl:"https://www.yahoo.com"

                      },          

                  {

                module : "Test 4",

                countx : "SAP Dev Center",

                subdata:"SAP Dev Center",

                genhed:"genhed Test 3",

                bdimg: "http://www.oorsprong.org/WebSamples.CountryInfo/Images/United_Kingdom.jpg",

                tgurl:"https://www.facebook.com"

              },{

                    module : "Test 5",

                    countx : "SAP Test Center",

                    subdata:"SAP Test Center",

                    genhed:"genhed Test 5",

                    bdimg: "http://www.oorsprong.org/WebSamples.CountryInfo/Images/Australia.jpg",

                    tgurl:"https://www.sap.scn.com"

                  },

                  {

                        module : "Test 6",

                        countx : "SAP Prod Center",

                        subdata:"SAP Prod Center",

                        genhed:"genhed Prod 5",

                        bdimg: "http://www.oorsprong.org/WebSamples.CountryInfo/Images/New_Zealand.jpg",

                        tgurl:"https://www.gmail.com"

                      }]

            });

    sap.ui.getCore().setModel(oModel);

    console.log(oModel);

    //var dyncnt = this.getView().byId("sapUiDyncnt");

    var Dyncntlyt = this.getView().byId("sapUiDyncnt");

    Dyncntlyt.setModel(oModel);

    var GenericTilelyt =   new sap.suite.ui.commons.GenericTile({

       id:"sapUiGenericTileid",

           busyIndicatorDelay : 1000,

           backgroundImage : "{bdimg}",

           header : "{countx}",

       //    subheader :"{DomValue}",

       //    imageDescription : "{DomText}",

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

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

           customData : [ new sap.ui.core.CustomData({

        id : "sapUiCustomDataid", // sap.ui.core.ID

        key : "tgurl", // string

          value : "{tgurl}" }) ],

          press :[ function(oEvent) {

            var control=oEvent.getSource().getCustomData();

            var navTargetUrl = control[0].getValue("tgurl");

           if (navTargetUrl) {

               if (navTargetUrl[0] === '#'){

                    hasher.setHash(navTargetUrl);

                }

                else{

                    window.open(navTargetUrl, '_blank');

                }

               }

           }, this ]});

      var Tilecnt = new sap.suite.ui.commons.TileContent("tilecntid",{footer : "{countx}",

        size : sap.suite.ui.commons.InfoTileSize.L});

      var Newscnt = new sap.suite.ui.commons.NewsContent("newscntid",{contentText :"{countx}",

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

        subheader:"{countx}"});

      Tilecnt.setContent(Newscnt);

      GenericTilelyt.addTileContent(Tilecnt);

      Dyncntlyt.addTile(GenericTilelyt);

      Dyncntlyt.bindAggregation("tiles", "/Dashboard", GenericTilelyt);