Transferring Data from a Line to a Textbox

Asked

Viewed 52 times

1

I’m using Planning Calendar to see the events that each worker has marked.

But what I also need is, for example, to click on the worker Carlos Pinho the information of him (name and role) pass to the Textbox (red arrow) that is in Simpleform.

Controller:

sap.ui.define([
      'jquery.sap.global',
      'sap/m/StandardListItem',
      'sap/m/MessageToast',
      'sap/ui/core/mvc/Controller',
      'sap/m/Label',
      'sap/m/Text',
      'sap/m/TextArea',
      'sap/ui/model/json/JSONModel'
    ], 
    function(jQuery, StandardListItem, MessageToast, Controller, Label, Text, 
      TextArea, JSONModel) {
        "use strict";

      return Controller.extend("zapp_rej_absence.controller.Main", {

        onInit: function() {
          //this.getView().byId() //Para definir o que aparece na combo box
          // create model
          var oModel = new JSONModel();
          oModel.setData({
            startDate: new Date("2017", "4", "26", "8", "0"),
            people: [{
              pic: "sap-icon://employee", //Foto do Funcionario
              name: "Carlos Pinho", //Nome do Funcionario
              role: "Logística", //Area do Funcionario
              appointments: [{
                //[Ano, Meses (cujo a ordem é Janeiro ->0), Dia, Horas, Minutos]
                start: new Date("2017", "4", "29", "12", "0"), 
                end: new Date("2017", "4", "29", "14", "0"),
                title: "Reunião de Equipa",
                info: "Sala A06",
                type: "Type01", //Cor do Evento
                pic: "sap-icon://manager",
                tentative: false
              }, {
                //[Ano, Meses (cujo a ordem é Janeiro ->0), Dia, Horas, Minutos]
                start: new Date("2017", "5", "10", "0", "0"), 
                end: new Date("2017", "5", "16", "23", "59"),
                title: "Férias",
                info: "Maldivas",
                pic: "sap-icon://flight",
                type: "Type04", //Cor do Evento
                tentative: false
              }],
              headers: [{
                //[Ano, Meses (cujo a ordem é Janeiro ->0), Dia, Horas, Minutos]
                start: new Date("2017", "4", "29", "08", "0"), 
                end: new Date("2017", "4", "29", "10", "0"),
                title: "Privado",
                type: "Type05"
              }]
            }, {
              pic: "sap-icon://employee", //Foto do Funcionario
              name: "Joaquim Agostinho", //Nome do Funcionario
              role: "Financeira", //Area do Funcionario
              appointments: [{
                //[Ano, Meses (cujo a ordem é Janeiro ->0), Dia, Horas, Minutos]
                start: new Date("2017", "4", "29", "08", "30"), 
                end: new Date("2017", "4", "29", "09", "30"),
                title: "Reunião",
                pic: "sap-icon://world",
                type: "Type02", //Cor do Evento
                tentative: false
              }, {
                //[Ano, Meses (cujo a ordem é Janeiro ->0), Dia, Horas, Minutos]
                start: new Date("2017", "4", "30", "10", "0"), 
                end: new Date("2017", "4", "30", "12", "0"),
                title: "Reunião de Equipa",
                info: "Sala 1",
                type: "Type01", //Cor do Evento
                pic: "sap-icon://manager",
                tentative: false
              }, {
                //[Ano, Meses (cujo a ordem é Janeiro ->0), Dia, Horas, Minutos]
                start: new Date("2017", "4", "30", "12", "30"), 
                end: new Date("2017", "4", "30", "13", "30"),
                title: "Almoço",
                type: "Type03", //Cor do Evento
                pic: "sap-icon://meal",
                tentative: true
              }],
              headers: [{
                //[Ano, Meses (cujo a ordem é Janeiro ->0), Dia, Horas, Minutos]
                start: new Date("2017", "4", "29", "8", "0"), 
                end: new Date("2017", "4", "29", "10", "0"),
                title: "Lembrete",
                type: "Type06" //Cor do Evento
              }]
            }]
          });
          this.getView().setModel(oModel);
    },
    //Dialog do botão aceitar
    onMessageSuccessDialogPress: function(oEvent) {
      var dialog = new Dialog({
        title: 'Successo',
        type: 'Message',
        state: 'Success',
        content: new Text({
          text: "Foi aprovado com sucesso."
        }),
        beginButton: new Button({
          text: 'OK',
          press: function() {
            MessageToast.show('Pedido Aprovado');
            dialog.close();
          }
        }),
        afterClose: function() {
          dialog.destroy();
        }
      });

      dialog.open();
    },

    onMessageWarningDialogPress: function(oEvent) {
      var dialog = new Dialog({
        title: 'Aviso',
        type: 'Message',
        state: 'Warning',
        content: new Text({
          text: 'Tem a certeza que quer rejeitar este pedido?'
        }),

        beginButton: new Button({
          text: 'Sim',
          press: function() {
            dialog.close();
            var dialog1 = new Dialog({
              title: 'Confirmação',
              type: 'Message',
              content: [
                new Label({
                  text: 'Tem a certeza que pretende rejeitar o pedido?',
                  labelFor: 'submitDialogTextarea'
                }),
                new TextArea('submitDialogTextarea', {
                  liveChange: function(oEvent) {
                    var sText = oEvent.getParameter('value');
                    var parent = oEvent.getSource().getParent();

                    parent.getBeginButton().setEnabled(sText.length > 0);
                  },
                  width: '100%',
                  placeholder: 'Adicionar nota (obrigatória)'
                })
              ],
              beginButton: new Button({
                text: 'Submit',
                enabled: false,
                press: function() {

                  MessageToast.show('Pedido Rejeitado');
                  dialog1.close();
                }
              }),
              endButton: new Button({
                text: 'Cancel',
                press: function() {
                  dialog1.close();
                }
              }),
              afterClose: function() {
                dialog1.destroy();

              }
            });

            dialog1.open();

          }
        }),

        endButton: new Button({
          text: 'Não',
          press: function() {
            dialog.close();
          }
        }),

        afterClose: function() {
          dialog.destroy();
        }
      });

      dialog.open();
    },

    onSubmitDialog: function() {
      var dialog = new Dialog({
        title: 'Confirm',
        type: 'Message',
        content: [
          new Label({
            text: 'Are you sure you want to submit your shopping cart?',
            labelFor: 'submitDialogTextarea'
          }),
          new TextArea('submitDialogTextarea', {
            liveChange: function(oEvent) {
              var sText = oEvent.getParameter('value');
              var parent = oEvent.getSource().getParent();

              parent.getBeginButton().setEnabled(sText.length > 0);
            },
            width: '100%',
            placeholder: 'Add note (required)'
          })
        ],
        beginButton: new Button({
          text: 'Submit',
          enabled: false,
          press: function() {
            var sText = sap.ui.getCore().byId('submitDialogTextarea').getValue();
            MessageToast.show('Note is: ' + sText);
            dialog.close();
          }
        }),
        endButton: new Button({
          text: 'Cancel',
          press: function() {
            dialog.close();
          }
        }),
        afterClose: function() {
          dialog.destroy();
        }
      });

      dialog.open();
    },

    onMessageDialogPress: function(oEvent) {
      var dialog = new Dialog({
        title: 'Meses Aprovados',
        icon: 'sap-icon://calendar',
        type: 'Message',
        content: new Text({
          text: 'A ideia é aparecer os meses todos em RadioButtons'
        }),
        beginButton: new Button({
          text: 'OK',
          press: function() {
            dialog.close();
          }
        }),
        endButton: new Button({
          text: 'Cancelar',

          press: function() {
            dialog.close();
          }
        }),

        afterClose: function() {
          dialog.destroy();
        }
      });

      dialog.open();
    },

    handlePopoverPress: function(oEvent) {

      // create popover
      if (!this._oPopover) {
        this._oPopover = sap.ui.xmlfragment("zapp_rej_absence.view.Popover", this);
        this.getView().addDependent(this._oPopover);
        this._oPopover.bindElement("/ProductCollection/0");
      }
      // delay because addDependent will do a async rerendering and the actionSheet
      // will immediately close without it.
      var oButton = oEvent.getSource();
      jQuery.sap.delayedCall(0, this, function() {
        this._oPopover.openBy(oButton);
      });
    },

    //Eventos ---------------------------------------------------------

    handleAppointmentSelect: function(oEvent) {
      var oAppointment = oEvent.getParameter("appointment"); //Selecçao do Evento
      if (oAppointment) {
        alert("Evento Selecionado: " + oAppointment.getTitle());
      } else {
        var aAppointments = oEvent.getParameter("appointments");
        var sValue = aAppointments.length + " Eventos Selecionados";
        alert(sValue);
      }
    }
  }); 
});

XML:

<mvc:View controllerName="zapp_rej_absence.controller.Main" 
    xmlns:html="http://www.w3.org/1999/xhtml" displayBlock="true" xmlns="sap.m"
    xmlns:mvc="sap.ui.core.mvc" xmlns:unified="sap.ui.unified" 
    xmlns:f="sap.ui.layout.form">

  <Page title="Aprovação de Férias/Ausências" enableScrolling="true">
    <Panel class="sapUiSmallMargin" width="auto">
      <PlanningCalendar id="PC1" startDate="{path: '/startDate'}" 
        rows="{path: '/people'}" appointmentsVisualization="Filled"
        appointmentSelect="handleAppointmentSelect" 
        showEmptyIntervalHeaders="false" viewKey="One Month">
        <toolbarContent>
          <Title text="Calendário" titleStyle="H4"/>
          <ToolbarSpacer/>
          <SearchField width="300px" placeholder="Procurar..."/>
          <Button icon="sap-icon://legend" press="handlePopoverPress"/>
        </toolbarContent>
        <rows>
          <PlanningCalendarRow icon="{pic}" title="{name}" text="{role}" 
            appointments="{appointments}" intervalHeaders="{headers}">
            <appointments>
              <unified:CalendarAppointment startDate="{start}" endDate="{end}" 
                icon="{pic}" title="{title}" text="{info}" type="{type}"
                tentative="{tentative}"></unified:CalendarAppointment>
            </appointments>
            <intervalHeaders>
              <unified:CalendarAppointment startDate="{start}" endDate="{end}" 
                icon="{pic}" title="{title}" type="{type}">

              </unified:CalendarAppointment>
            </intervalHeaders>
          </PlanningCalendarRow>
        </rows>
      </PlanningCalendar>
      <f:SimpleForm id="SimpleFormDisplay354" class="sapUiLargeMarginTop" 
          width="auto" editable="false" layout="ResponsiveGridLayout"
          title="Informações do Colaborador" labelSpanXL="3" labelSpanL="3" 
          labelSpanM="3" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="4"
          emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" 
          columnsM="1" singleContainerFullSize="false">
        <f:content>
          <Label text="Nome" width="100%" design="Bold"/>
          <Text text="{Name}" width="100%"/>
          <!--Depois ir buscar estes dados à BD-->
          <Label text="Equipa" width="100%" design="Bold"/>
          <Text text="{Street} {HouseNumber}" width="100%"/>
          <!--Depois ir buscar estes dados à BD-->
          <Label text="Total de Férias" width="100%" design="Bold"/>
          <Text text="{ZIPCode} {City}" width="100%"/>
          <!--Depois ir buscar estes dados à BD-->
          <Label text="Country" width="100%" design="Bold"/>
          <Text text="{Country}" width="100%"/>
            <!--Depois ir buscar estes dados à BD-->
          </f:content>
      </f:SimpleForm>
  </Panel>
  <footer>
    <Toolbar>
      <Button icon="sap-icon://past" text="Meses Aprovados" 
        type="Emphasized" press="onMessageDialogPress"/>
      <ToolbarSpacer/>
      <Button icon="sap-icon://accept" text="Aprovar" type="Accept" 
        press="onMessageSuccessDialogPress"/>
      <Button icon="sap-icon://sys-cancel-2" text="Rejeitar" type="Reject" 
        press="onMessageWarningDialogPress" />
    </Toolbar>
  </footer>
</Page>
</mvc:View>

Where the data should go after pressing the row

1 answer

0


I went to ask stackoverflow (international let’s say) and I’ve already had a response:

I used the Binding context of Selected Row and bound it to the form Below and it worked. Below is the Working code and Steps:

  1. Add "Row Selection Event" to Planning calender.

    <PlanningCalendar id="PC1" startDate="{path: '/startDate'}" 
      rows="{path: '/people'}" 
      appointmentsVisualization="Filled"
      appointmentSelect="handleAppointmentSelect" showEmptyIntervalHeaders="false" 
      viewKey="One Month"
      rowSelectionChange="onRowSelection">
    
  2. Find the Binding Context of Selected Row and bind it to the form:

    onRowSelection: function(oEvent) {
        var oForm = this.byId('SimpleFormDisplay354');
        var oBindingContext = oEvent.getSource().getSelectedRows()[0]
                                .getBindingContext();
        oForm.setBindingContext(oBindingContext);
    }
    
  3. Bind correct Properties in the form:

    <f:SimpleForm id="SimpleFormDisplay354" 
        class="sapUiLargeMarginTop" width="auto" editable="false" 
        layout="ResponsiveGridLayout"
        title="Informações do Colaborador" labelSpanXL="3" labelSpanL="3" 
        labelSpanM="3" labelSpanS="12" adjustLabelSpan="false" emptySpanXL="4"
        emptySpanL="4" emptySpanM="4" emptySpanS="0" columnsXL="1" columnsL="1" 
        columnsM="1" singleContainerFullSize="false">
        <f:content>
            <Label text="Nome" width="100%" design="Bold"/>
            <Text text="{name}" width="100%"/>
            <!--Depois ir buscar estes dados à BD-->
            <Label text="Role" width="100%" design="Bold"/>
            <Text text="{role}" width="100%"/>
        </f:content>
    </f:SimpleForm>
    

It was a very simple answer, very clear and very explicit. All thanks to the user @Rahul Bhardwaj.

Browser other questions tagged

You are not signed in. Login or sign up in order to post.