cancel
Showing results for 
Search instead for 
Did you mean: 

Icon tab bar inside row repeater

mdixit_1401
Explorer
0 Kudos

Hi Experts,

I am trying to include an icon tab bar inside a row repeater and it comes as blank. Not even header text of icon tab bar comes.

Any idea how to fix this.

Thanks,

Mansi

Accepted Solutions (1)

Accepted Solutions (1)

mdixit_1401
Explorer
0 Kudos

Thanks a lot Sai...

My Index.html code is as below:

<!DOCTYPE HTML>

<html>

  <head>

  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>

  <script src="resources/sap-ui-core.js"

  id="sap-ui-bootstrap"

  type="text/javascript"

  data-sap-ui-libs="sap.m"

  data-sap-ui-theme="sap_bluecrystal"

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

  </script>

  <!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->

  <script>

  sap.ui.localResources("demo_1");

  var app = new sap.m.App({initialPage:"idMain1"});

  var page = sap.ui.view({id:"idMain1", viewName:"demo_1.Main", type:sap.ui.core.mvc.ViewType.XML});

  app.addPage(page);

  app.placeAt("content");

  </script>

  </head>

  <body class="sapUiBody" role="application">

  <div id="content"></div>

  </body>

</html>

@Dennis : I have used binding syntax as complex as well.But still its not coming.

One thing which I found out is that if I change me src from "resources/sap-ui-core.js" to what Sai has used "https://sapui5.hana.ondemand.com/resources/sap-ui-core.js", then it works.

Can u please let me know what difference does this make.

I mean i didn't knew that even src could make such a difference.

Also I have always used resources/sap-ui-core.js then why particularly in this case it didn't worked.

Only for row repeater it gave such a weird problem.

Can you please let me know.

Thanks,

Mansi

saivellanki
Active Contributor
0 Kudos

Hi Mansi,

Issue might be with library version. Which UI5 library version are you using?

In the application, open chrome developer tools type - sap.ui.version

Regards,

Sai Vellanki.

mdixit_1401
Explorer
0 Kudos

It says 1.28.10

saivellanki
Active Contributor
0 Kudos

Strange! then it should not be an issue with your src 'resources/sap-ui-core.js'. It should work fine.

Any errors in console, when you use 'resources/sap-ui-core.js'?

Regards,

Sai Vellanki.

former_member182862
Active Contributor
0 Kudos

the version on https://sapui5.hana.ondemand.com/resources/sap-ui-core.js  is

1.30.8 (built at 20150907-1052, last change )

mdixit_1401
Explorer
0 Kudos

Hi Sai,

Ya very strange. No I dont even get any error jst blank lines in place of icon tab bar.

How can I solve this problem?

I dont know why it is only coming in row repeater. If I make a column list and put this icon tab bar inside it then it works fine.

Any solution for this??

Thanks,

Mansi

mdixit_1401
Explorer
0 Kudos

Hi Dennis,

Thanks for the reply.

So do I need to upgrade my eclipse???

Thanks,

Mansi

saivellanki
Active Contributor
0 Kudos

Mansi,

Can you run below code in your eclipse with src 'resources/sap-ui-core.js'

Plunker - IconTab-RowSample

Regards,

Sai Vellanki.

santhu_gowdaz
Active Contributor
0 Kudos

For me every thing looks fine. may be you need to add "sap.ui.commons" lib in your bootstrap.


data-sap-ui-libs="sap.ui.commons,sap.m"

saivellanki
Active Contributor
0 Kudos

Mansi,


Issue is not related to version, because I am able to run your code on 1.28.10 as well -  Plunker

I'm pointing src to 'https://sapui5.hana.ondemand.com/1.28.10/resources/sap-ui-core.js'

Check inspect element and see whether your able to see IconTab elements like this -

Regards,

Sai Vellanki.

mdixit_1401
Explorer
0 Kudos

Hi Sai,

Yes I am able to see this code:

Wat else can be the reason?

Thanks ,

Mansi

mdixit_1401
Explorer
0 Kudos

Hi Santhosh,

Thanks for replying but this also didn't solved my problem.

Even after adding data-sap-ui-libs="sap.ui.commons,sap.m" , its jst showing two blank lines.

Thanks,

Mansi

saivellanki
Active Contributor
0 Kudos

Mansi,

Can you try running below code in your eclipse with src 'resources/sap-ui-core.js'

Plunker - IconTab-RowSample

Regards,

Sai Vellanki.

mdixit_1401
Explorer
0 Kudos

Same Problem Sai,

with "resources/sap-ui-core.js"

Output is:

with        src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"

Output is:

Thanks,

Mansi

saivellanki
Active Contributor
0 Kudos

Hi Manasi,


Hmm, not sure why is this happening. It should work fine with your local src.

OK, last option I would suggest you is to re-install SAPUI5 tools on your eclipse and run. Hope this will work.

Regards,

Sai Vellanki.

mdixit_1401
Explorer
0 Kudos

Hi Sai,

This option worked.

I upgraded my eclipse to 1.28.13.

And now its working with resources/sap-ui-core.js.

Just wanted to ask that whether it will create any problem after deploying on ABAP Server??

Thanks everyone for your time and help.

Thanks,

Mansi

saivellanki
Active Contributor
0 Kudos

Manasi,

I don't think any more problems will be there.


Regards,

Sai Vellanki.

former_member182862
Active Contributor
0 Kudos

Sai, you are outstanding. Great determination to pin down the problem. Applaud!

-D

saivellanki
Active Contributor
0 Kudos

Thank you Dennis!

Answers (1)

Answers (1)

saivellanki
Active Contributor
0 Kudos

Hi Mansi,

I'm able to insert IconTabBar inside Row Repeater.

Check this working sample - Plunker - IconTabBar-RowRepeater

Is this you want or something else? Also, please share your code whatever you tried.

Regards,

Sai Vellanki.

mdixit_1401
Explorer
0 Kudos

Hi Sai,

Thanks for the reply.

Yes, this is the thing I want.Just that this icontab bar will be below Platte.

But the problem is for me I am not able to get the icontab bar itself, for me only two lines come.

Below is the code of my view and controller:

Main.view:

<mvc:View

  xmlns:l="sap.ui.layout"

  xmlns:core="sap.ui.core"

  xmlns:mvc="sap.ui.core.mvc"

  xmlns:commons="sap.ui.commons"

  xmlns="sap.m"

  controllerName="demo_1.Main" >

  <commons:RowRepeater id="rowrepeater"

  >

  <Input value="{lastName}" ></Input>

  <IconTabBar

  id="idIconTabBarNoIcons"

  expanded="{device>/isNoPhone}"

  class="sapUiResponsiveContentPadding">

  <items>

  <IconTabFilter

  text="Info">

  <Text text="Info content goes here ..." />

  </IconTabFilter>

  <IconTabFilter

  text="Attachments">

  <Text text="Attachments go here ..." />

  </IconTabFilter>

  <IconTabFilter

  text="Notes">

  <Text text="Notes go here ..." />

  </IconTabFilter>

  <IconTabFilter

  text="People">

  <Text text="People content goes here ..." />

  </IconTabFilter>

  </items>

  </IconTabBar>

</commons:RowRepeater>

</mvc:View>

Main.controller

sap.ui.controller("demo_1.Main", {

onInit: function() {

  var dataObject = { data : [

            {lastName: "Platte", name: "Rudolf",  href: "http://www.sap.com", src: "images/persons/male_PlatteR.jpg", gender: "male" , country: "US"},

            {lastName: "Dwyer", name: "Nora",  href: "http://www.sap.com", src: "images/persons/female_DwyerN.jpg", gender: "female" , country: "US"},

            {lastName: "Wallace", name: "Alex",  href: "http://www.sap.com", src: "images/persons/male_WallaceA.jpg", gender: "male", country:  "DE"},

            {lastName: "Wang", name: "Megan",  href: "http://www.sap.com", src: "images/persons/female_WangM.jpg", gender: "female", country: "US"},

            {lastName: "Ingalls", name: "Barbara",  href: "http://www.sap.com", src: "images/persons/female_IngallsB.jpg", gender: "female" , country: "US"},

            {lastName: "Wallace", name: "Bruno",  href: "http://www.sap.com", src: "images/persons/male_WallaceA.jpg", gender: "male", country: "US"},],

            empty:[]

  };

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

  oModel.setData(dataObject);

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

  var oRowRepeater = this.getView().byId("rowrepeater");

  var oRowTemplate = oRowRepeater.clone();

  oRowRepeater.bindRows("/data", oRowTemplate);

  },

});

So my output is

I guess my xml view has some problem.

Can u please help with it??

Thanks,

Mansi

saivellanki
Active Contributor
0 Kudos

Hi Mansi,

Apologies, I missed your response. Just now, I saw it.

Your code looks fine, no problem with it. I copied your code and created a plunk it works fine for me.

Please check the plunk here - Plunker - IconTab-RowRepeater-XML

I have run it on Chrome, Mozilla and IE10 and it works fine. Please check bootstrap, libraries etc in your code.

Regards,

Sai Vellanki.

former_member182862
Active Contributor
0 Kudos

I think data-sap-ui-xx-bindingSyntax="complex" is missing

        <script id="sap-ui-bootstrap" 
                type="text/javascript"
                ...
                data-sap-ui-xx-bindingSyntax="complex"
        >

Thanks