title: SAPUI5 Reusable Table Fragment Data Binding
body: <p>I am starting to develop SAPUI5, trying to apply concepts and best practices from other web dev toolkits I know so far, please be kind as my knowledge is still fairly limited.</p>
  <p>I want to re-structure a project and replace copy-paste code with reusable parts. Custom controls are not the right way as far as I checked, basically it is purely standard functionality of a SAPUI5 control with different data binding.
  The data binding and propagation should be done via XML as it fits the project architecture best, my initial idea was to use fragments.</p>
  <p>Sample:
  An identical table should be used multiple times in the same view and in different views, single model with different object arrays.</p>
  <p>Fragment:</p>
  <pre><code>    &lt;Table items=&quot;{???}&quot;&gt;
          &lt;columns&gt;
              &lt;Column &gt;
                  &lt;Text text=&quot;Name&quot;/&gt;
              &lt;/Column&gt;
              &lt;Column&gt;
                  &lt;Text text=&quot;Amount&quot;/&gt;
              &lt;/Column&gt;
          &lt;/columns&gt;
          &lt;items&gt;
              &lt;ColumnListItem&gt;
                  &lt;cells&gt;
                      &lt;ObjectIdentifier title=&quot;{dataModel&gt;name}&quot;/&gt;
                      &lt;Text text=&quot;{dataModel&gt;amount}&quot;/&gt;
                  &lt;/cells&gt;
              &lt;/ColumnListItem&gt;
          &lt;/items&gt;
      &lt;/Table&gt;
  &lt;/core:FragmentDefinition&gt;
  </code></pre>
  <p>Model:</p>
  <pre><code>let oTemp = new JSONModel({
      data: {
          a: [{
              name: &quot;Product 1 Entry 1&quot;,
              amount: &quot;Product 1 Amount 1&quot;
          }, {
              name: &quot;Product 1 Entry 2&quot;,
              amount: &quot;Product 1 Amount 2&quot;
          }],
          b: [{
              name: &quot;Product 2 Entry 1&quot;,
              amount: &quot;Product 2 Amount 1&quot;
          }, {
              name: &quot;Product 2 Entry 2&quot;,
              amount: &quot;Product 2 Amount 2&quot;
          }]
      }
  });
  this.getView().setModel(oTemp, &quot;dataModel&quot;);
  </code></pre>
  <p>XML View Usage:</p>
  <pre><code>&lt;core:Fragment objectBindings=&quot;dataModel&gt;/data/a&quot; type=&quot;XML&quot; fragmentName=&quot;...view.ReusableTable&quot;&gt;&lt;/core:Fragment&gt;
  &lt;core:Fragment objectBindings=&quot;dataModel&gt;/data/b&quot; type=&quot;XML&quot; fragmentName=&quot;...view.ReusableTable&quot;&gt;&lt;/core:Fragment&gt;
  </code></pre>
  <p>I tried various ways to bind the item aggregation in the table or the fragment itself, without success.
  As hopefully shown in this sample, I want to pass a specific model property to the fragment and its table to display a different set of items (a or b) without the use of javascript in the view controller.</p>
  <p>Desired Output:</p>
  <p>2 Tables, identical header (Name, Amount column) with 2 rows each using data from datamodel, property a [] and b []</p>
  <p>From what I saw in the SAPUI5 library offering regarding code reuse, fragments should be the best way to achieve this result as no additional controller logic is required to display | interact. I would appreciate any suggestions how to approach this, or maybe change the approach in general if necessary? Thank you lots!</p>