SAPUI5 Table: How to create different control templates in one column

[saivellanki]

Hello All,

Now a days, customer requirements are being so 'Custom'. One of the scenarios that one of my former colleague had was 'In sap.ui.table.Table (Grid Table), how can we create different control templates based on a model property?'

First I had thought, that it is going to be easy, if we use 'Factory function' on bindAggregation method. Since I had used the same earlier to make it work on sap.m.Table (Responsive Table).

If I go through the code, that was implemented for Responsive table:

Model data that I had:

[{

            "ProductId": "1239102",

            "Name": "Power Projector 4713",

            "Weight": 34,

            "Control": "C",

            "Availability": "Available"

          }, {

            "ProductId": "2212-121-828",

            "Name": "Gladiator MX",

            "Weight": 324,

            "Control": "M",

            "Availability": ""

          }, {

            "ProductId": "K47322.1",

            "Name": "Hurricane GX",

            "Weight": 54,

            "Control": "C",

            "Availability": "Out of Stock"

          }, {

            "ProductId": "22134T",

            "Name": "Webcam",

            "Weight": 198,

            "Control": "P",

            "Availability": ""

          }....

........]

And my XML View would be:

     <Table id="idProductsTable"

              mode="SingleSelectMaster"

              growing="true"

              growingThreshold="5"

              selectionChange="onSelectionChange"

              updateFinished="onUpdateFinished"

              items="{

                           path: '/',

                           factory: 'demo.FactoryDefinition.factory'

                      }">

                <columns>

                  <Column>

                    <Label text="ID" />

                  </Column>

                  <Column>

                    <Label text="Product" />

                  </Column>

                  <Column>

                    <Label text="Weight" />

                  </Column>

                  <Column>

                    <Label text="Availability" />

                  </Column>

                </columns>

       </Table>

In the XML view code, you can see the 'items' has a binding path and also a factory function defined with namespace where the file is present.

Factory Function --> demo.FactoryDefinition.factory

    //Factory Definition

    sap.ui.define([

      'sap/m/ColumnListItem',

      'sap/ui/core/Item',

      'sap/m/Text',

      'sap/m/Input',

      'sap/m/ComboBox',

      'sap/m/MultiComboBox'

    ], function(ColumnListItem, Item, Text, Input, ComboBox, MultiComboBox) {

      "use strict";

      var FactoryDefinition = {

        factory: function(id, context) {

          var oTemplate = new Item({

            text: "{Text}"

          });

         var oContext = context.getProperty("Control");

          if (oContext == "C") {

            return new ColumnListItem({

              cells: [new Text({

                  text: "{ProductId}"

                }),

                new Text({

                  text: "{Name}"

                }),

                new Text({

                  text: "{Weight}"

                }),

                new Input({

                  value: "{Availability}"

                })

              ]

            })

          } else if (oContext == "P") {

            return new ColumnListItem({

              cells: [new Text({

                  text: "{ProductId}"

                }),

                new Text({

                  text: "{Name}"

                }),

                new Text({

                  text: "{Weight}"

                }),

                new ComboBox({

                  width: "100%",

                  selectedKey: "{Availability}"

                }).bindAggregation("items", "/oValues", oTemplate)

              ]

            })

          } else if (oContext == "M") {

            return new ColumnListItem({

              cells: [new sap.m.Text({

                  text: "{ProductId}"

                }),

                new Text({

                  text: "{Name}"

                }),

                new Text({

                  text: "{Weight}"

                }),

                new MultiComboBox({

                  selectedKeys: ["{Availability}"]

                }).bindAggregation("items", "/oValues", oTemplate)

              ]

            })

          }

        }

      };

      return FactoryDefinition;

    }, /* bExport= */ true);

'context' argument inside the factory function holds the data context where you can read the property values. For our requirement, we need to read through the 'Control' property, check what value is present and depending on that we need to create the column list item template with required cells.

If 'Control' property value is 'C' --> Input

If 'Control' property value is 'P' --> ComboBox

If 'Control' property value is 'M' --> MultiComboBox

Factory function is a pretty good concept that one can follow not only for table but for list, IconTabBar etc.

Full working demo of Responsive Table having different control templates: Plunker - ResponsiveTable

Now the interesting thing is that this piece of code, I thought it would work for Grid table i.e., sap.ui.table.Table as well, but it didn't (Strange though!). I am not sure where I had gone wrong.

This is what I tried using 'rows' aggregation: Plunker - Grid Table (Not Working) though I am able to see a scrollbar is loaded with paginator (that means the rows binding works) but no values, I tried to check the binding for control templates, they are fine but no values loaded.

It doesn't seem to work, then I have tried to check an alternative and I found one. I used a flag to toggle the visibility of different controls placed in horizontal layout.

So in one column, I created a Horizontal Layout as template where I placed three controls, which are Input / ComboBox / MultiComboBox. Now I used a formatter on 'visible' property to toggle the visibility and fetch the output as expected.

Full working demo of Grid Table having different control templates: Plunker - Grid Table (Working)

But, if anyone has a solution using factory function for Grid Table (sap.ui.table.Table). Please share / respond to this thread: Factory function problem: sap.ui.table.Table

So, this is it! I hope this would be helpful who might have similar requirement in future.

Thank you and have a great day ahead!.

Regards,

Sai Vellanki.

[former_member201854]

Hi Sai,

Thank you for explaining the concepts in detail.Wonderful Blog!!

Looking forward for more such blogs.

Regards,

Namita

[former_member201852]

Hi Sai.

Really nice blog... 🙂 🙂

Regards,
Mallesh

[Former Member]

Hello Sai,

 

I encountered one scenario similar to one referred in your article for showing multiple controls in one column. I am stuck at one point and need your help. From index.html page when we directly call view like you did things works normal, but when i am using component.js and from component file i am calling view, factory function doesn't worked for me. I even tried registering it as a third party library in component file still no use. can you please check in your system once what i am missing



Thanks in advance for your help.

 

Regards,

Ishant

[hagen_hennum]

 

Exactly what I was looking for! Thank you!