cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Repeating DIVs

RiabovAleksandr
Product and Topic Expert
Product and Topic Expert

on ‎2015 Mar 24 8:06 PM

0 Kudos
151

Hello colleagues,

could you please advise?

The problem:

I'm developing with MVC concept (as best practice).

My Html is like this:



<html>


<head>...scripts..</head>


<Body>


<div id="header"></div>


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


</body>


</html>


I have implemented this( SAPUI5 Explored)  controller as switcher between tabs (IconTabBar with 4 switching contents by click).



<mvc:View


  xmlns:l="sap.ui.layout"


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


  controller="nalog-ui5.tabs"


  xmlns="sap.m">


  <IconTabBar


    class="iconTabBarPaddingTop"


    id="idIconTabBarMulti"


    expanded="{device>/isNoPhone}">


    <items>


      <IconTabFilter


        icon="sap-icon://hint"


        text= "Обзор">


        <mvc:JSView id="content" viewName="nalog-ui5.Overview"></mvc:JSView>


      </IconTabFilter>


      <IconTabFilter


        icon="sap-icon://upload"


        text="Загрузить документ">


        <mvc:JSView viewName="nalog-ui5.Upload"></mvc:JSView>


      </IconTabFilter>


      <IconTabFilter


        icon="sap-icon://group"


        text="Контрагенты">


        <mvc:JSView viewName="nalog-ui5.Contragents"></mvc:JSView>


      </IconTabFilter>


      <IconTabFilter


        icon="sap-icon://expense-report"


        text="Счета-фактуры" >


        <mvc:JSView viewName="nalog-ui5.Facturi"></mvc:JSView>


      </IconTabFilter>


    </items>


  </IconTabBar>


</mvc:View>


My switching tabs are in the "header" div.

So, all content goes to "header" as well.

Each tab calls the separate view.

Meanwhile, I want to ".placeAt" Tables into "content". It returns successfuly, but when I switch to another view, I obviously get the content of my "content" on another view.

How can I kill content from that div when I click on another tab?

I found the onExit: event, but it is called only on Controller destroy. but I don't destroy it.

I also found onBeforeRendering method and put 



onBeforeRendering: function() {


  //$('#Fdet').empty();


  $('#content').empty();


  $('#Table2').remove();


  },

But it is bad way and my DIV is back in double after it is created again (on table row click).

So, my question is:

how is it better to embed DIVs into the view, so it is not created on other screens?

Thank you

Know the answer?

Help others by sharing your knowledge.

Answer

Need more details?

Request clarification before answering.

Show replies
Show replies
View Entire Topic
former_member182372
Active Contributor
‎2015 Mar 25 7:36 AM
0 Kudos

Alex, that description is confusing, i'm having hard time understanding:

>>Meanwhile, I want to ".placeAt" Tables into "content". It returns successfuly, but when I switch to another view, I obviously get the content of my "content" on another view.

Generally you don't use placeAt inside a view, you use hierarchy of aggregation/associations. And which "content" aggregation do you mean in that case?

Show replies
Show replies
RiabovAleksandr
Product and Topic Expert
Product and Topic Expert
‎2015 Mar 25 7:48 AM
0 Kudos

Hello Maksim,

thank you for your reply.

Sorry for confusion.

I indeed use 



return oTable;

sometimes I use 



oTable.placeAt('content');

where "content" is a DIV:



<body>


<div id="header"></div>


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


</body>

And that is my problem, as tabs control are in "header" and  "content" is cross for all views.

Maybe my problem is that I use views as entire pages with all content inside.

former_member182372
Active Contributor
‎2015 Mar 25 8:01 AM
0 Kudos

Alex, as I said, try to avoid using placeAt. What's the look and feel you are  trying to implement?

On IconTabFilter  click display some content under that IconTab? I would add Page to the view (add IconTabBar   to content) and use removeContent/addContent for that dynamic table

SAPUI5 SDK - Demo Kit

Qualiture
Active Contributor
‎2015 Mar 25 9:27 AM
0 Kudos

Indeed, as Maksim correctly pointed out, do not use placeAt more than once.

Your HTML <body> should contain just one single <div>:



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


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


</body>

The handling of all the content should then be done using the SAPUI5 API

RiabovAleksandr
Product and Topic Expert
Product and Topic Expert
‎2015 Mar 26 4:50 AM
0 Kudos

Maksim,

does it mean that I have to use following approach?

HTML:



<script>


var View_tabs = sap.ui.view({id:"idtabs1", viewName:"nalog-ui5.tabs", type:sap.ui.core.mvc.ViewType.XML});


View_tabs.placeAt("content");


</script>


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


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


</body>

Tabs view:



var IconTabBar = new sap.m.IconTabBar({ 


            expandable: false, 


            items: [ 


                new sap.m.IconTabFilter({ 


                  icon : "sap-icon://hint", 


                  text: "Overview page"


                  content : [  new sap.ui.view({id:"Overview", viewName:"nalog-ui5.Overview", type:sap.ui.core.mvc.ViewType.JS}) ]  


                    }), 


                new sap.m.IconTabFilter({ 


                  icon : "sap-icon://upload", 


                  text: "Upload page"


                  content : [  new sap.ui.view({id:"Upload", viewName:"nalog-ui5.Upload", type:sap.ui.core.mvc.ViewType.JS}) ]  


                    }),


                new sap.m.IconTabFilter({ 


                  icon : "sap-icon://expense-report", 


                  text: "Details page"


                  content : [  new sap.ui.view({id:"Details", viewName:"nalog-ui5.Details", type:sap.ui.core.mvc.ViewType.JS}) ]  


                    }),


               ]  


        });

Overview screen page:



var sServiceUrl = "/sap/opu/odata/sap/Z_TEST_SRV/"; 


  var oModel = new sap.ui.model.odata.ODataModel(sServiceUrl,true,"user","pass");  


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


....


createContent : function(oController) {


var oTable.....


.....


oTable.bindRows(/EntitySetOverview);


return oTable;


}

Details page:



....


createContent : function(oController) {


  return new sap.m.Page({


  title: "DetailsPage",


  content: [sap.ui.view({ id:"Table1", viewName:"nalog-ui5.Table1",type:sap.ui.core.mvc.ViewType.XML}), // link to table1 view


                sap.ui.view({ id:"Table2", viewName:"nalog-ui5.Table2",type:sap.ui.core.mvc.ViewType.XML})]  // link to table2 view


  });


...


  }

Table1 and Table2 pages are similar to Overview screen page.

So I return Table1 and Table2 respectively in each View.

Do I understand correctly your recommended approach?

I'm already wondering of how to pass values between the Views...

thank you.

P.S. by the way, by this approach I can't see table displayed, as it has height = 0.

Have to force height to some value in px. Strange behavior.

RiabovAleksandr
Product and Topic Expert
Product and Topic Expert
‎2015 Mar 26 4:54 AM
0 Kudos

Hi Robin,

thank you for reply.

I just posted a reply-question a step above.

Thank you.

former_member182372
Active Contributor
‎2015 Mar 26 7:15 AM
0 Kudos

For detail page try

return new sap.ui.layout.VerticalLayout("Layout1", {

  content:[

  sap.ui.view({ id:"Table1", viewName:"nalog-ui5.Table1",type:sap.ui.core.mvc.ViewType.XML}), // link to table1 view 

        sap.ui.view({ id:"Table2", viewName:"nalog-ui5.Table2",type:sap.ui.core.mvc.ViewType.XML})]  // link to table2 view 

  ]});

sap.m.Page needs to be embeded into NavContainer (sap.m.App or sap.m.SplitApp) that's probably why tables are not visible

to pass values between view you should use eventing

sap.ui.getCore().getEventBus().subscribe()

sap.ui.getCore().getEventBus().publish

Ask a Question