Add Property “additionalText” to TabContainerItem of TabContainer

Tagged:
  • Patrick
        Has successfully completed the online course Introduction
      1 year ago #37020

      Hi,

      is it possible to add the property “additionalText” to the TabContainerItem? I tried editing the widget but it didn’t work. The sample is at:

      https://sapui5.hana.ondemand.com/#/entity/sap.m.TabContainer/sample/sap.m.sample.TabContainerIcons

      Attachments:
      You must be logged in to view attached files.
      Patrick
          Has successfully completed the online course Introduction
        1 year ago #37062
        Up
        1
        Down
        ::

        Hi Armin,

        the file is uploaded. Thank you for checking!

        Armin Winkler
            Has successfully completed the online course Introduction
            Has successfully completed the online course Intermediate (200)
            Has successfully completed the online course Advanced (300)
            Has successfully completed the online course Basics (100)
          1 year ago #37436
          Up
          1
          Down
          ::

          Hi Patrick,

           

          would you be able to share your example application once again so we can make some adjustments in there and provide it back to you? I am afraid I have already permanently removed it from our Simplifier instance since I was of the opinion that your problem had been solved. Here’s an upload folder once again, so I can access the transport file and import it to our system. I will immediately remove the folder after you’ve uploaded the file to it:

           

          https://files.simplifier.io/u/d/60f1bb8b3e994153a1f2/ password: uyGLxaZBH33HS497

           

          In general, this is how a data binding should behave when you are templating an aggregation: You add your template item (i.e. a single TabContainerItem widget) to a given aggregation in the UI Designer and then configure your data source on the item’s properties in the panel on the right side of the screen. This data source may e.g. be a variable of a collection type. In a Javascript context a collection type transfers to an array which holds up to an infinite number of objects which again correspond to struct types in Simplifier. Each object may contain several properties / fields that can be used for property bindings inside the data source, i.e. you can then proceed and link a field from the inner struct of the collection to a property of your item or even a widget that is still nested inside your template item.

           

          Now, during runtime of your application, your collection variable that is used as data source for the binding of your template item place within the TabContainer widget, may be manipulated anf for example receive another entry. Via the binding, this should immediately reflect on the UI, i.e. another instance of your template item should automatically created and therefore you’d see a new tab in the UI. Whenever you remove an entry again, the UI should again update and no longer show the respective tab. Such bindings are always two-way, meaning that you could either manipulate the UI part to synchronize changes with your data source (the collection variable) or alternatively, you are also able to manipulate the data source itself and then the UI should update accordingly. For a more detailed description on aggregation bindings, please find the OpenUI5’s reference on it here: https://openui5.hana.ondemand.com/topic/91f057786f4d1014b6dd926db0e91070 (also mind the related articles of the documentation). And this video, which is taken from our Simplifier Intermediate course, shows you how to configure a data source in the UI Designer and also explains the whole process in more detail: https://community.simplifier.io/202-2/

           

          Hope this makes data sources and binding clearer for you. Kind regards,

          Armin

          Armin Winkler
              Has successfully completed the online course Introduction
              Has successfully completed the online course Intermediate (200)
              Has successfully completed the online course Advanced (300)
              Has successfully completed the online course Basics (100)
            1 year ago #37522
            Up
            1
            Down
            ::

            Hi Patrick,

             

            I was able to make the tab container work without creating any duplicate id errors when adding new items after one or multiple items had been removed beforehand. Please change the following line of the tab container widget script as shown in the screenshot (you only need the line that is commented in):

             

            Please also make sure not to invoke the removeItem method of the tab container in your script that is attached to itemClose event in the process designer or else duplicate id errors will arise again. As I have explained earlier, the population of the tab container’s items will be handled via the data source binding of your variable, i.e. removing the related entry from your collection variable is sufficient.

             

            Please let me know if this works for you as well. We will also internally investigate further why the line that can be seen commented out in the above screenshot was needed in the first place and whether it’s safe to remove it permanently from our standard widget.

             

            Kind regards,

            Armin

            Patrick
                Has successfully completed the online course Introduction
              1 year ago #37977
              Up
              1
              Down
              ::

              Hi Armin, I was on holiday for a few days…

              After changing the line of tab container widget script everything worked now. I add new elements to the collection with the push method and remove elements with the splice method after an itemClose event.

              Many thanks for your support!

              Armin Winkler
                  Has successfully completed the online course Introduction
                  Has successfully completed the online course Intermediate (200)
                  Has successfully completed the online course Advanced (300)
                  Has successfully completed the online course Basics (100)
                1 year ago #37024
                Up
                0
                Down
                ::

                Hi Patrick,

                 

                which version of OpenUI5 are you using to deploy your application? The property “additionalText” would only be available to use from version 1.63 upwards according to the documentation of SAP and is regarded as experimental: https://sapui5.hana.ondemand.com/#/api/sap.m.TabContainerItem

                 

                Kind regards,

                Armin

                Patrick
                    Has successfully completed the online course Introduction
                  1 year ago #37027
                  Up
                  0
                  Down
                  ::

                  Hi Armin,

                  in this case we use version 1.71.

                  Armin Winkler
                      Has successfully completed the online course Introduction
                      Has successfully completed the online course Intermediate (200)
                      Has successfully completed the online course Advanced (300)
                      Has successfully completed the online course Basics (100)
                    1 year ago #37028
                    Up
                    0
                    Down
                    ::

                    Hi Patrick,

                     

                    Ok in that case the property should be supported by the OpenUI5 library. The way you edited your widget looks correct to me. Can you please share the configuration of the widget properties in the UI Designer? Do you see the new property there at all? Please also remember to deploy your application again after adding a value or binding to the “additionalText” property.

                     

                    Kind regards,

                    Armin

                    Patrick
                        Has successfully completed the online course Introduction
                      1 year ago #37032
                      Up
                      0
                      Down
                      ::

                      Hi Armin,

                      the new property is available in the configuration of the widget properties! We implemented adding and deleting objects and everything works. Only the new property “additionalText” is not rendered in the TabItem. To demonstrate that a value exists, I set both bindings to the same target.

                      Attachments:
                      You must be logged in to view attached files.
                      Armin Winkler
                          Has successfully completed the online course Introduction
                          Has successfully completed the online course Intermediate (200)
                          Has successfully completed the online course Advanced (300)
                          Has successfully completed the online course Basics (100)
                        1 year ago #37035
                        Up
                        0
                        Down
                        ::

                        Hi Patrick,

                         

                        would you be able to provide us with a transport of your application so we can check on your configuration ourselves and do some testing based on it? You may replace the contents of your variable with some mock data if you need to.

                         

                        Kind regards,

                        Armin

                        Patrick
                            Has successfully completed the online course Introduction
                          1 year ago #37057
                          Up
                          0
                          Down
                          ::

                          Hi Armin,

                          I created a minimized version with some mock data. Attached is the transport for you.

                           

                          The file size is 45.062 kB… unfortunately I can’t upload it!

                          Armin Winkler
                              Has successfully completed the online course Introduction
                              Has successfully completed the online course Intermediate (200)
                              Has successfully completed the online course Advanced (300)
                              Has successfully completed the online course Basics (100)
                            1 year ago #37059
                            Up
                            0
                            Down
                            ::

                            Hi Patrick,

                             

                            you can upload the transport file to this folder: https://files.simplifier.io/u/d/5e5f6978cf7043ee8c55/ password: uiGPK84o4HVt7yPn I’m going to remove the folder again as soon as I’ve retrieved the file.

                             

                            Thank you,

                            Armin

                            Patrick
                                Has successfully completed the online course Introduction
                              1 year ago #37156
                              Up
                              0
                              Down
                              ::

                              Hi Armin,

                              are there any updates yet?

                              Armin Winkler
                                  Has successfully completed the online course Introduction
                                  Has successfully completed the online course Intermediate (200)
                                  Has successfully completed the online course Advanced (300)
                                  Has successfully completed the online course Basics (100)
                                1 year ago #37162
                                Up
                                0
                                Down
                                ::

                                Hi Patrick,

                                 

                                I’ve started analyzing this matter but due to a lot of meetings this week I haven’t had the time to come to a conclusion yet. I’ll try to get back to you as soon as possible. Sorry about the delay!

                                 

                                Kind regards,

                                Armin

                                Armin Winkler
                                    Has successfully completed the online course Introduction
                                    Has successfully completed the online course Intermediate (200)
                                    Has successfully completed the online course Advanced (300)
                                    Has successfully completed the online course Basics (100)
                                  1 year ago #37163
                                  Up
                                  0
                                  Down
                                  ::

                                  Hi Patrick,

                                   

                                  I have good news for you: I was able to track down the missing link for the additionalText to show up properly. Please add the following line of code to the widget TabContainer’s custom script as well because only then will the bound value for the property be actually transferred to the internal TabStripItem that is being created by the TabContainer when you populate it with TabContainerItems:

                                  Please let me know if this helps you.

                                   

                                  Kind regards,

                                  Armin

                                Viewing 15 posts - 1 through 15 (of 20 total)
                                1 2

                                You must be logged in to reply to this topic.