Help with Dynamic Buttons based on binding inside a ColumnListItem

[davidsigleinit]

Hello all,

I'm looking for a way to have dynamic buttons in a sap.m.Table element. Or to describe it more precisely: I have a sap.m.Table, in the last Column I currently have 3 Buttons that navigate to different pages when clicked. Now I want to replace these with a dynamic solution. E.g. I have a list for the buttons from the OData that should be in the last column for a Table item that include icon, where it navs and the horizontal orderof the buttons with position index.

Currently I have a List in the last column now where I have the binding for the corresponding items. This however is not in the correct horizontal layout for the buttons and doesn't seem like the most efficient way of doing this.

So I want to ask, if there is a better way to have this horizontal layout in a column of a table to which I can bind the buttons. A HBox doesn't seem to have the items property where I can bind the path and adding the buttons in the controller dynamically is less maintainable I believe.

[leonikussmaul · Accepted solution]

Hi David,

What exactly do you mean by horizontal order, could you share a screenshot of the desired outcome?

From my understanding, you could have the 3 last columns of the Table defined as sap.m.button. For each, you can define properties like visibility or icon using a custom formatter and return the required value based on the formatter logic. For the horizontal order, I would try setting the horizontal layout using a custom CSS style class. You might need to play around with it a bit, but it should work..

[davidsigleinit · Accepted solution]

Having a Table inside my table was a working solution, thanks!

But the layout was not very good when many buttons were present in this sub-table in a table item. My current/better solution for having dynamic buttons from data in the model is with an overflow toolbar like this as the last table column:

<!--Sub-Toolbar for the Dynamic Buttons--> 

<OverflowToolbar class="ButtonToolbar" content="{path: 'myModel>ButtonSet', sorter: {path: 'Position'}}"> 

<Button visible="{myModel>Visible}" icon="{myModel>Icon}" tooltip="{myModel>Text}" press=".onAnyButtonPress(${myModel>buttonid}, ${myModel>buttontype}, ${myModel>objecttype})"/> 

</OverflowToolbar>