Skip to Content
0

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

Aug 31, 2017 at 02:36 PM

20

avatar image
Former Member

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.

10 |10000 characters needed characters left characters exceeded
* Please Login or Register to Answer, Follow or Comment.

0 Answers