SAPUI5 add element on top of a VBox












0














I am creating ObjectStatus and Text elements in my controller in order to add them into a VBox element in my view. I do this with the addItem method. Every new element is automatically placed on the very bottom of the VBox. How can I achieve that the new element is added on the top of the VBox instead (above the elements I added before)? Thank you for the help!






sapui5







share|improve this question






















  • Can you select an answer or give more information on what you exactly need. Thanks.
    – Matthijs Mennens
    Nov 18 at 18:54
















0














I am creating ObjectStatus and Text elements in my controller in order to add them into a VBox element in my view. I do this with the addItem method. Every new element is automatically placed on the very bottom of the VBox. How can I achieve that the new element is added on the top of the VBox instead (above the elements I added before)? Thank you for the help!






sapui5







share|improve this question






















  • Can you select an answer or give more information on what you exactly need. Thanks.
    – Matthijs Mennens
    Nov 18 at 18:54














0












0








0







I am creating ObjectStatus and Text elements in my controller in order to add them into a VBox element in my view. I do this with the addItem method. Every new element is automatically placed on the very bottom of the VBox. How can I achieve that the new element is added on the top of the VBox instead (above the elements I added before)? Thank you for the help!






sapui5







share|improve this question













I am creating ObjectStatus and Text elements in my controller in order to add them into a VBox element in my view. I do this with the addItem method. Every new element is automatically placed on the very bottom of the VBox. How can I achieve that the new element is added on the top of the VBox instead (above the elements I added before)? Thank you for the help!






sapui5




sapui5






share|improve this question













share|improve this question











share|improve this question




share|improve this question










asked Nov 15 at 22:35







user5601025



















  • Can you select an answer or give more information on what you exactly need. Thanks.
    – Matthijs Mennens
    Nov 18 at 18:54


















  • Can you select an answer or give more information on what you exactly need. Thanks.
    – Matthijs Mennens
    Nov 18 at 18:54
















Can you select an answer or give more information on what you exactly need. Thanks.
– Matthijs Mennens
Nov 18 at 18:54




Can you select an answer or give more information on what you exactly need. Thanks.
– Matthijs Mennens
Nov 18 at 18:54












3 Answers
3






active

oldest

votes


















1














You should use:



this.byId("vbox").insertItem(oControl);


instead of:



this.byId("vbox").addItem(oControl);





share|improve this answer





























    1














    Set direction property (inherited from FlexBox) of your VBox control to ColumnReverse.



    Alternatively, as pointed out by Matthijs, you can use insertItem() instead of addItem(). That would also allow precise placement within the aggregation using the iIndex parameter.






    share|improve this answer































      -1














      Here's is another suggestion:




      1. You can get all the items of the VBox in an array.

      2. Remove items from the VBox

      3. Place your new item at first position in the VBox.

      4. Add stored VBox items with from the array.





      //Add some items initially to the VBox
      
for (i = 0; i < 4; i++) {
      
  this.getView().byId("idVBox").addItem(new sap.m.Text({
      
    text: "SomeText2"
      
  }));
      
}
      

      
//Get the items of the Vbox
      
var array = this.getView().byId("idVBox").getItems();
      

      
//remove all items
      
this.getView().byId("idVBox").removeAllItems();
      

      
//add your new item as the first item to the VBox
      
this.getView().byId("idVBox").addItem(new sap.m.Text({
      
  id: "someOtherid",
      
  text: "SomeText2New"
      
}));
      

      
//add all the others back
      
for (i = 0; i < array.length; i++)
      
  this.getView().byId("idVBox").addItem(array[i]);








      share|improve this answer























      • Considering the other options already proposed, this requires a lot of unnecessary code.
        – rikusv
        Nov 17 at 22:18











      Your Answer






      StackExchange.ifUsing("editor", function () {
      StackExchange.using("externalEditor", function () {
      StackExchange.using("snippets", function () {
      StackExchange.snippets.init();
      });
      });
      }, "code-snippets");

      StackExchange.ready(function() {
      var channelOptions = {
      tags: "".split(" "),
      id: "1"
      };
      initTagRenderer("".split(" "), "".split(" "), channelOptions);

      StackExchange.using("externalEditor", function() {
      // Have to fire editor after snippets, if snippets enabled
      if (StackExchange.settings.snippets.snippetsEnabled) {
      StackExchange.using("snippets", function() {
      createEditor();
      });
      }
      else {
      createEditor();
      }
      });

      function createEditor() {
      StackExchange.prepareEditor({
      heartbeatType: 'answer',
      autoActivateHeartbeat: false,
      convertImagesToLinks: true,
      noModals: true,
      showLowRepImageUploadWarning: true,
      reputationToPostImages: 10,
      bindNavPrevention: true,
      postfix: "",
      imageUploader: {
      brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
      contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
      allowUrls: true
      },
      onDemand: true,
      discardSelector: ".discard-answer"
      ,immediatelyShowMarkdownHelp:true
      });


      }
      });














      draft saved

      draft discarded


















      StackExchange.ready(
      function () {
      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53328832%2fsapui5-add-element-on-top-of-a-vbox%23new-answer', 'question_page');
      }
      );

      Post as a guest















      Required, but never shown
























      3 Answers
      3






      active

      oldest

      votes








      3 Answers
      3






      active

      oldest

      votes









      active

      oldest

      votes






      active

      oldest

      votes









      1














      You should use:



      this.byId("vbox").insertItem(oControl);


      instead of:



      this.byId("vbox").addItem(oControl);





      share|improve this answer


























        1














        You should use:



        this.byId("vbox").insertItem(oControl);


        instead of:



        this.byId("vbox").addItem(oControl);





        share|improve this answer
























          1












          1








          1






          You should use:



          this.byId("vbox").insertItem(oControl);


          instead of:



          this.byId("vbox").addItem(oControl);





          share|improve this answer












          You should use:



          this.byId("vbox").insertItem(oControl);


          instead of:



          this.byId("vbox").addItem(oControl);






          share|improve this answer












          share|improve this answer



          share|improve this answer










          answered Nov 16 at 7:15









          Matthijs Mennens

          1,039216




          1,039216

























              1














              Set direction property (inherited from FlexBox) of your VBox control to ColumnReverse.



              Alternatively, as pointed out by Matthijs, you can use insertItem() instead of addItem(). That would also allow precise placement within the aggregation using the iIndex parameter.






              share|improve this answer




























                1














                Set direction property (inherited from FlexBox) of your VBox control to ColumnReverse.



                Alternatively, as pointed out by Matthijs, you can use insertItem() instead of addItem(). That would also allow precise placement within the aggregation using the iIndex parameter.






                share|improve this answer


























                  1












                  1








                  1






                  Set direction property (inherited from FlexBox) of your VBox control to ColumnReverse.



                  Alternatively, as pointed out by Matthijs, you can use insertItem() instead of addItem(). That would also allow precise placement within the aggregation using the iIndex parameter.






                  share|improve this answer














                  Set direction property (inherited from FlexBox) of your VBox control to ColumnReverse.



                  Alternatively, as pointed out by Matthijs, you can use insertItem() instead of addItem(). That would also allow precise placement within the aggregation using the iIndex parameter.







                  share|improve this answer














                  share|improve this answer



                  share|improve this answer








                  edited Nov 16 at 8:29

























                  answered Nov 16 at 6:40









                  rikusv

                  30015




                  30015























                      -1














                      Here's is another suggestion:




                      1. You can get all the items of the VBox in an array.

                      2. Remove items from the VBox

                      3. Place your new item at first position in the VBox.

                      4. Add stored VBox items with from the array.





                      //Add some items initially to the VBox
                      
for (i = 0; i < 4; i++) {
                      
  this.getView().byId("idVBox").addItem(new sap.m.Text({
                      
    text: "SomeText2"
                      
  }));
                      
}
                      

                      
//Get the items of the Vbox
                      
var array = this.getView().byId("idVBox").getItems();
                      

                      
//remove all items
                      
this.getView().byId("idVBox").removeAllItems();
                      

                      
//add your new item as the first item to the VBox
                      
this.getView().byId("idVBox").addItem(new sap.m.Text({
                      
  id: "someOtherid",
                      
  text: "SomeText2New"
                      
}));
                      

                      
//add all the others back
                      
for (i = 0; i < array.length; i++)
                      
  this.getView().byId("idVBox").addItem(array[i]);








                      share|improve this answer























                      • Considering the other options already proposed, this requires a lot of unnecessary code.
                        – rikusv
                        Nov 17 at 22:18
















                      -1














                      Here's is another suggestion:




                      1. You can get all the items of the VBox in an array.

                      2. Remove items from the VBox

                      3. Place your new item at first position in the VBox.

                      4. Add stored VBox items with from the array.





                      //Add some items initially to the VBox
                      
for (i = 0; i < 4; i++) {
                      
  this.getView().byId("idVBox").addItem(new sap.m.Text({
                      
    text: "SomeText2"
                      
  }));
                      
}
                      

                      
//Get the items of the Vbox
                      
var array = this.getView().byId("idVBox").getItems();
                      

                      
//remove all items
                      
this.getView().byId("idVBox").removeAllItems();
                      

                      
//add your new item as the first item to the VBox
                      
this.getView().byId("idVBox").addItem(new sap.m.Text({
                      
  id: "someOtherid",
                      
  text: "SomeText2New"
                      
}));
                      

                      
//add all the others back
                      
for (i = 0; i < array.length; i++)
                      
  this.getView().byId("idVBox").addItem(array[i]);








                      share|improve this answer























                      • Considering the other options already proposed, this requires a lot of unnecessary code.
                        – rikusv
                        Nov 17 at 22:18














                      -1












                      -1








                      -1






                      Here's is another suggestion:




                      1. You can get all the items of the VBox in an array.

                      2. Remove items from the VBox

                      3. Place your new item at first position in the VBox.

                      4. Add stored VBox items with from the array.





                      //Add some items initially to the VBox
                      
for (i = 0; i < 4; i++) {
                      
  this.getView().byId("idVBox").addItem(new sap.m.Text({
                      
    text: "SomeText2"
                      
  }));
                      
}
                      

                      
//Get the items of the Vbox
                      
var array = this.getView().byId("idVBox").getItems();
                      

                      
//remove all items
                      
this.getView().byId("idVBox").removeAllItems();
                      

                      
//add your new item as the first item to the VBox
                      
this.getView().byId("idVBox").addItem(new sap.m.Text({
                      
  id: "someOtherid",
                      
  text: "SomeText2New"
                      
}));
                      

                      
//add all the others back
                      
for (i = 0; i < array.length; i++)
                      
  this.getView().byId("idVBox").addItem(array[i]);








                      share|improve this answer














                      Here's is another suggestion:




                      1. You can get all the items of the VBox in an array.

                      2. Remove items from the VBox

                      3. Place your new item at first position in the VBox.

                      4. Add stored VBox items with from the array.





                      //Add some items initially to the VBox
                      
for (i = 0; i < 4; i++) {
                      
  this.getView().byId("idVBox").addItem(new sap.m.Text({
                      
    text: "SomeText2"
                      
  }));
                      
}
                      

                      
//Get the items of the Vbox
                      
var array = this.getView().byId("idVBox").getItems();
                      

                      
//remove all items
                      
this.getView().byId("idVBox").removeAllItems();
                      

                      
//add your new item as the first item to the VBox
                      
this.getView().byId("idVBox").addItem(new sap.m.Text({
                      
  id: "someOtherid",
                      
  text: "SomeText2New"
                      
}));
                      

                      
//add all the others back
                      
for (i = 0; i < array.length; i++)
                      
  this.getView().byId("idVBox").addItem(array[i]);








                      //Add some items initially to the VBox
                      
for (i = 0; i < 4; i++) {
                      
  this.getView().byId("idVBox").addItem(new sap.m.Text({
                      
    text: "SomeText2"
                      
  }));
                      
}
                      

                      
//Get the items of the Vbox
                      
var array = this.getView().byId("idVBox").getItems();
                      

                      
//remove all items
                      
this.getView().byId("idVBox").removeAllItems();
                      

                      
//add your new item as the first item to the VBox
                      
this.getView().byId("idVBox").addItem(new sap.m.Text({
                      
  id: "someOtherid",
                      
  text: "SomeText2New"
                      
}));
                      

                      
//add all the others back
                      
for (i = 0; i < array.length; i++)
                      
  this.getView().byId("idVBox").addItem(array[i]);





                      //Add some items initially to the VBox
                      
for (i = 0; i < 4; i++) {
                      
  this.getView().byId("idVBox").addItem(new sap.m.Text({
                      
    text: "SomeText2"
                      
  }));
                      
}
                      

                      
//Get the items of the Vbox
                      
var array = this.getView().byId("idVBox").getItems();
                      

                      
//remove all items
                      
this.getView().byId("idVBox").removeAllItems();
                      

                      
//add your new item as the first item to the VBox
                      
this.getView().byId("idVBox").addItem(new sap.m.Text({
                      
  id: "someOtherid",
                      
  text: "SomeText2New"
                      
}));
                      

                      
//add all the others back
                      
for (i = 0; i < array.length; i++)
                      
  this.getView().byId("idVBox").addItem(array[i]);






                      share|improve this answer














                      share|improve this answer



                      share|improve this answer








                      edited Nov 16 at 12:33

























                      answered Nov 16 at 9:07









                      Nandan Chaturvedi

                      597622




                      597622












                      • Considering the other options already proposed, this requires a lot of unnecessary code.
                        – rikusv
                        Nov 17 at 22:18


















                      • Considering the other options already proposed, this requires a lot of unnecessary code.
                        – rikusv
                        Nov 17 at 22:18
















                      Considering the other options already proposed, this requires a lot of unnecessary code.
                      – rikusv
                      Nov 17 at 22:18




                      Considering the other options already proposed, this requires a lot of unnecessary code.
                      – rikusv
                      Nov 17 at 22:18


















                      draft saved

                      draft discarded




















































                      Thanks for contributing an answer to Stack Overflow!


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid …



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.





                      Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                      Please pay close attention to the following guidance:


                      • Please be sure to answer the question. Provide details and share your research!

                      But avoid …



                      • Asking for help, clarification, or responding to other answers.

                      • Making statements based on opinion; back them up with references or personal experience.


                      To learn more, see our tips on writing great answers.




                      draft saved


                      draft discarded














                      StackExchange.ready(
                      function () {
                      StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53328832%2fsapui5-add-element-on-top-of-a-vbox%23new-answer', 'question_page');
                      }
                      );

                      Post as a guest















                      Required, but never shown





















































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown

































                      Required, but never shown














                      Required, but never shown












                      Required, but never shown







                      Required, but never shown







                      -

                      Popular posts from this blog

                      How to change which sound is reproduced for terminal bell?

                      Image
                      3 Recently upgrade to 18.10 from 18.04, and using the terminal is becoming annoying: the new alert sound is a drip ( /usr/share/sounds/gnome/default/alerts/drip.ogg ), and the previous one is still located at ( /usr/share/sounds/ubuntu/stereo/bell.ogg ). My issue is that at the gnome-terminal, when autocompleting or pressing left BOTH sounds are reproduced, at the same time. I want to just have ubuntu/stereo/bell.ogg active, not both . At the moment I have been only able to reduce the volume of the alerts (but still both are played), or turn the alerts down (but I dislike both "solutions"). gnome-terminal 18.10 teminal-bell share | improve this question
                      Read more

                      Title Spacing in Bjornstrup Chapter, Removing Chapter Number From Contents

                      Image
                      up vote 5 down vote favorite 2 I would like to make it so that the vertical space below the title of each chapter is the same when using the Bjornstrup package (i.e. so that the descenders do not affect the spacing - as shown by the red arrow in the picture below). I think I'm fairly happy with the spacing around "A chapter", so I'd really like titles without descenders (e.g. "Contents") to have the same vertical spacing as "A chapter" below the title. I would also like to remove the large "0" in the contents title. Any help appreciated, as always. documentclass[11pt,a4paper]{book} % Packages[![enter image description here][1]][1] usepackage[left=3.5cm, right=3.5cm, top=4.3cm, bottom=4.25cm]{geometry} usepackage[utf8]{inputenc} usepackage{libertine} usepackage[libertine]{newtx
                      Read more

                      Can I use Tabulator js library in my java Spring + Thymeleaf project?

                      Image
                      0 I want to add Tabulator js to my java project. I added tabulator.min.js, tabulator.min.css to resources folder. After that added to my html page these dependencies as recommending in readme.md. <link rel="stylesheet" th:href="@{/css/tabulator.min.css}"> <script type="text/javascript" th:src="@{/js/tabulator.min.js}"></script> Now my tables view all elements, that I have in the html page, but not correct. In the documentation of Tabulator is example how to create header and table, var table = new Tabulator("#example-table", { columns:[ {title:"Name", field:"name", sorter:"string", width:200, editor:true}, {title:"Age", field:"age", sorter:"
                      Read more