cancel
Showing results for 
Search instead for 
Did you mean: 

How to binding data in object [Table] inside other object [TimePicker]

francisco_barra
Explorer
0 Kudos

I have the problem, need to use one model to two objects. But I do not know how to do it. In synthesis I have a model (modelJSON) in which I link it with my "Table" object, but at the same time I need that as the table is shown (row by row), I also link the data to my Timepicker in the same way and of shape responsive (That's why I'm using the form)...

Currently it does not work since it does not list data for the Timepicker, but if for the table.

This is the result:

---------------
Turno  | Time | 
T1     |      |
T2     |      |
T3     |      |

This is what I need...

------------------------
Turno    |     Time    |
T1       | 01:00 14:00 |
T2       | 01:00 14:00 |
T3       | 07:34 12:00 |

My code:

var modelJSON =
[
{ID_TURNO :"T1",  H1 :'01:00', H2 :'14:00'},
 {ID_TURNO :"T2",  H1 :'05:59', H2 :'08:00'},
 {ID_TURNO :"T3",  H1 :'07:59', H2 :'23:00'}
];

var oSection = new sap.uxap.ObjectPageSection({
    title: "Week " + targetWeek,
    subSections: new sap.uxap.ObjectPageSubSection({
        blocks: new sap.ui.table.Table({
            width: "98%",
            selectionMode: sap.ui.table.SelectionMode.Single,
            visibleRowCountMode: sap.ui.table.VisibleRowCountMode.Fixed,
            visibleRowCount: 2,
            rowSelectionChange: function(oEvent) {
                var path = oEvent.getParameter("rowContext").getPath();
                var oData = this.getModel().getProperty(path);
            },
            columns: [
                new sap.ui.table.Column({
                    label: new sap.ui.commons.Label({ text: "Turno" }),
                    template: new sap.ui.commons.TextView({ 
                       text: "{ID_TURNO}" }),
                    width: '33px'
                }), new sap.ui.table.Column({
                    label: new sap.ui.commons.Label({
                        textAlign: "Center",
                        text: "Time"
                    }),
                    template: new sap.ui.layout.form.Form({
                       layout: new sap.ui.layout.form.ResponsiveGridLayout({
                            breakpointL: 140
                        }),
                     formContainers: [new sap.ui.layout.form.FormContainer({
                         formElements: [new sap.ui.layout.form.FormElement({
                                fields: [new sap.m.TimePicker({
                                    valueFormat: "HH:mm",
                                    displayFormat: "HH:mm",
                                    placeholder: " ",
                                    width: "62px",
                                    value: "{H1}"
                                }).addStyleClass("sapUiSizeCompact")]
                            })]
                        }), new sap.ui.layout.form.FormContainer({
                         formElements: [new sap.ui.layout.form.FormElement({
                                fields: [new sap.m.TimePicker({
                                    valueFormat: "HH:mm",
                                    displayFormat: "HH:mm",
                                    placeholder: " ",
                                    width: "62px",
                                    value: "{H2}"
                                }).addStyleClass("sapUiSizeCompact")]
                            })]
                        })]
                    }),
                    width: '95px',
                    hAlign: "Center"
                })
            ]
        }).setModel(new sap.ui.model.json.JSONModel(modelJSON))
          .bindRows({ path: "/" }).setVisibleRowCount(modelJSON.length)
    })
});

Thanks guys.

Accepted Solutions (0)

Answers (0)