SAP UI5 Code Problem for reading XML View input field in View Controller (Error "Can not call method 'GetValue' of Undefined" coming)

[Former Member]

As I am in the learning process, I am stuck at one point for which I need your help. I am mentioning that in details below.

I have developed the following application in which one master page comes which shows the list of PRs to be approved by a user.

When clicking a particular PR, it shows the detail page.

In the detail page, several fields are displayed like general details, approval status list, comments (if any) and the list of attachments (attachments not yet integrated).

The line-item list is also displayed as follows –

Now, if I click on a particular line item, it opens a line item view as follows –

It is showing the selected line-item details. It will show the service sub-line item list also which is within that particular line-item as follows –

`

Line Number 00080 has sub-line item which is shown below.

Now, I have kept provision of modifying quantity, rate, cost center and G/L account (the value you are seeing above is placeholder value. I have created the gateway channels (along with RFC) for updating the same.

The process for updating the same through gateway also is known to me as I have seen some test applications (using X-CSRF-Token etc.). I have tested my gateway configuration and RFC also through test data in Postman Rest Client.

The problem I am facing is for reading the value of entered quantity, rate, G/L account, cost center in the line item controller once I presses the ‘Save Data’ button (details will be available in the lineitem view and lineitem controller in the WebContent folder). Along with that I need to read 2 fields – Banfn (PR number) and Bnfpo (PR Lineitem number) (these are needed for sending the data to gateway and updating R3 system) – these are already available in the line-item view model as data is displaying in the lineitem view.

I have to take those 6 values in 6 variables for passing to gateway service.

Can you please tell me how can I do that? It will be of great help to me if you please help me to read those 6 values in line item view controller once 'Save Data' button is pressed. I tried to attach the webcontent folder but could not attach. I am attaching the same document with screen-shots here separately.

It will be of great help if anybody can suggest what can be done to read those in controller. After reading code for sending to Gateway is known to me. I could not attach the webcontent folder as I can not upload .rar file, however I am giving the code for lineitem.view.xml and lineitem.controller.xml below -

Code of Lineitem.View.XML -

<core:View

   controllerName="sap.ui.demo.myFiori.view.LineItem"

   xmlns="sap.m"

   xmlns:core="sap.ui.core" >

   <Page

     id="page"

     title=" {i18n>LineItemTitle}"

     showNavButton="true"

     navButtonPress="handleNavBack" >

     <content>

     <ObjectHeader

         title="{Txz01}"

         number="{Tpreis1}"

         numberUnit="INR" >

      <attributes>

        <ObjectAttribute text="{Bnfpo}" />

        <ObjectAttribute text="{Menge}" />

        <ObjectAttribute text="{Preis1}" />

        <ObjectAttribute text="{Kostl}" />

        <ObjectAttribute text="{Sakto}" />

      </attributes>

     </ObjectHeader>

     <List

      headerText="Modify Quantity, Rate, Cost Center and G/L Account if needed">

     <InputListItem label="Quantity">

     <Input

     id="Vmenge"

     placeholder="Enter Value"

     value="{Menge}"/>

     </InputListItem>

     <InputListItem label="Rate">

     <Input

     id="Vpreis"

     placeholder="Enter Value"

     value="{Preis1}"/>

     </InputListItem>

     <InputListItem label="G/L Account">

     <Input

     placeholder="Enter Value"

     value="{Sakto}"/>

     </InputListItem>

     <InputListItem label="Cost Center">

     <Input

     placeholder="Enter Value"

     value="{Kostl}"/>

     </InputListItem>

     </List>

      <Table id="Table10"

       headerText="{i18n>SubLineItemTableHeader}"

       items="{LINETOSUBLINES}">

       <columns>

         <Column>

           <header><Label text="Service" /></header>

         </Column>

         <Column>

           <header><Label text="Quantity" /></header>

         </Column>

         <Column>

           <header><Label text="Rate" /></header>

         </Column>

         <Column>

           <header><Label text="Price" /></header>

         </Column>

        </columns>

       <ColumnListItem>

          <ObjectIdentifier

           title="{ShortText}"

           text="{Service}"

           class="sapTableContentMargin" />

          <ObjectNumber

            number="{Quantity}"/>

          <ObjectNumber

            number="{GrPrice}"

            unit="INR"/>

          <ObjectNumber

            number="{NetValue}"

            unit="INR"/>

        </ColumnListItem>

      </Table>

     </content>

     <footer>

       <Bar>

         <contentRight>

            <Button

             text="{i18n>dataSave}"

             type="Transparent"

             icon="sap-icon://save"

             press="handleUpdate" />

          </contentRight>

       </Bar>

     </footer>

   </Page>

</core:View>

Code of LineItem.Controller.JS

ap.ui.controller("sap.ui.demo.myFiori.view.LineItem", {

// onAfterRendering: function() {

  //       var var_menge = sap.ui.getCore().byId("Vmenge").getValue();

  //       var var_preis = sap.ui.getCore().byId("Vpreis").getValue();

  // },

  handleUpdate : function (evt) {

     // show confirmation dialog

     var bundle = this.getView().getModel("i18n").getResourceBundle();

     sap.m.MessageBox.confirm(

       bundle.getText("UpdateDialogMsg"),

       function (oAction) {

         if (sap.m.MessageBox.Action.OK === oAction) {

           var var_menge = sap.ui.getCore().byId("Vmenge").getValue();

           var var_preis = sap.ui.getCore().byId("Vpreis").getValue()

?? Was trying to read those variables but those were giving errors as below. Rest code for sending value to Gateway will be written once the above code is corrected -

I am getting the error while reading the input values from the XML view. (Error "Can not call method 'GetValue' of Undefined" coming)

_______________________________________________________________________________________________________

//LineItem.Controller.JS code is continuing below.         

// notify user

           var successMsg = bundle.getText("UpdateDialogSuccessMsg");

           sap.m.MessageToast.show(successMsg);

           // TODO call proper service method and update model (not part of this session)

         }

       },

       bundle.getText("UpdateDialogTitle")

     );

   },

   handleNavBack : function (evt) {&nbsp;

     this.nav.back("Detail");

   }

});

It will be of great help if anybody can suggest what can be done to read the input values in the controller.

Regards ....

[former_member189945 · Accepted solution]

Hi DrSubhabaha,

So you try to get user input from a controller in view? You can do that in controller with:

this.getView.byId(controlId).getValue();

Could you try to write a shorter error description next time with more focused explanation of your error. Most forum users don't have the interest or time to read really long posts just to understand a problem description.

Regards,

Kimmo

[Former Member · Accepted solution]

Thanks Kimmo for your reply.

I am developing an Fiori-type application through which pending PRs can be approved. I have given detailed description of the application in the above blog.

There is a lineitem view to which I can go from the detail view (lineitem table).

Now I am getting the lineitem view clicking on a lineitem.

In the lineitem view, I have kept the provision of changing Quantity (Menge), Rate (Preis), GL Account (Sakto) and Cost Centre (Kostl) of the line item. Those are input fields as can be visible from the above screen.

Now these values along with Banfn (PR number) and Bnfpo (lineitem number) need to be sent to gateway for updating. The RFCs have been made for that and gateway also configured and tested through Postman Rest client.

Now those values mentioned above need to be read in the controller after 'Save Data' button. I want to know how to read those values as the following statements in the update function (When 'Save Data' button pressed) giving error.

var var_menge = sap.ui.getCore().byId("Vmenge").getValue();

var var_preis = sap.ui.getCore().byId("Vpreis").getValue()

(VMenge is id of quantity input field)

It is giving the error "Cannot call methof 'GetValue' of undefined".

I need to read those values in variable so that I can move those to gateway. I need the code to read. I hope I am able to describe what is my prioblem. If you share your e-mail id I can send you the webcontent folder.

Regards.....

[Former Member · Accepted solution]

Hello DrSubhabaha,

The Problem here is that you are trying to access the Value of the Control with its id, but you are using the wrong ID here.

The ID of sapui5 controls is constructed with the id of the view + the id of the control.

So if you want to access the control with the sap.ui.getCore().byId("id") method you have to use the full id of the control (which you can see in the DOM) which consists of viewId + controlId.

The correct way to access Controls inside a particular view is to first get a reference to the view

var oView = this.getView();

And then use the reference of the view to access your control.

oView.byId("id");

This way you can specify the control by the id you just set in your View Definition.

So in your case it would look like this:

handleUpdate : function (evt) {
     //assuming you bind the eventHandler with the context of the controller
      var oView = this.getView();
     // show confirmation dialog
     var bundle = this.getView().getModel("i18n").getResourceBundle();
     sap.m.MessageBox.confirm(
       bundle.getText("UpdateDialogMsg"),
       function (oAction) {
         if (sap.m.MessageBox.Action.OK === oAction) {

           var var_menge = oView.byId("Vmenge").getValue();
           var var_preis = oView.byId("Vpreis").getValue();    
           var successMsg = bundle.getText("UpdateDialogSuccessMsg");
           sap.m.MessageToast.show(successMsg);
           // TODO call proper service method and update model (not part of this session)
         }
       },
       bundle.getText("UpdateDialogTitle")
     );
   },

with best regards

Florian

[Former Member · Accepted solution]

Thanks a lot Florian. It is working now. It is taking the data. Please see the below screen-shot.

Can you please tell me how I shall take the values of the fields Banfn and Bnfpo in 2 variables for passing to gateway which are not input fields but available in the model?

[Former Member · Accepted solution]

First let me thank you Florian for your great help. It solved my problem where I was stuck so long.

There is one more minor problem which I think you would be able to help me. In the gateway, I need to pass 6 fields - PR Number (Banfn), Lineitem number (Bnfpo), Quantity (Menge - VMege - already described by you - working), Price (VPreis), Kostl (cost centre number) and Sakto (G/L account Number). Quantity, Price, Kostl and Sakto are input fields and it is to be updated in the view whereas Banfn and Bnfpo are displayed in the view. I got from your kind reply that how to pass the values of the input fields and these are working fine now. I want to know how I can take the values of Banfn and Bnfpo in 2 variables like I did for input fields.

Awaiting your kind reply .... thanks again for your kind help . ....

[Former Member · Accepted solution]

It is difficult to give an advice here as i don´t now how your model is structured. Can you pls give an overview of your Model Datastructure and how you use the two required Fields? Is the corresponding Entry in the Model bound to a Control?

Basically you need the specific BindingContext of the Entry which you want to use.

The simplest approach to read the required Fields would be to get the Control which the corresponding Entry is bound to and use:

var property = oControl.getBindingContext().getProperty("yourProperty");

with best regards

Florian

[Former Member · Accepted solution]

Hi Florian,

Thanks a lot for your great help through directing me how to read the input variables in the view controller. I am really thankful for that. I was stuck there for long and only for your precious help I was able to proceed further.

I am giving model details of the application I am developing so that you can help me reading the other 2 variables Banfn and Bnfpo in the lineitem view controller.

I am creating the approval application for purchase requisition.

For bringing the basic data from the R3 system I have created the EBANMAINSet entity set in the Gateway service. The field details of the entity set is as follows –

Banfn    1 – Key field

Bsart      0

Bstyp     0

Ernam   0

Erdat     0

Afnam  0

Menge 0

Preis      0

Peinh    0

Ekgrp     0

BstypTxt              0

EkgrpTxt              0

Username           0

Werks   0

WerksTxt             0

In the component.JS, I have described the oData service as follows –

var oModel = new sap.ui.model.odata.ODataModel( "http://blr-mt-erpdq.mul.manipal.net:8000/sap/opu/odata/sap/ZEBAN_FINAL1_SRV",false);&nbsp;
oView.setModel(oModel);

where ZEBAN_FINAL1_SRV is the service name.

EBANMAINSet is the set of PRs which are to be approved by a particular individual.

In the Master view list (Master.view.xml), I have used the following code in order to display the list –

<List
id="list"
mode="{device>/listMode}"
select="handleListSelect"
items="{/EBANMAINSet}" >
<ObjectListItem
type="{device>/listItemType}"
press="handleListItemPress"
title="{Banfn}"
number="{Preis}"
numberUnit="INR" >
<attributes>
<ObjectAttribute text="{Afnam}"/>
<ObjectAttribute text="{WerksTxt}"/>
</attributes>


</ObjectListItem>
</List>

It is giving the following display –

Now, if I click on any of the PR, it will move to the detail page with the corresponding details.

The code used in the Master.controller.js for that is as follows –

  handleListItemPress : function (evt) {
var context = evt.getSource().getBindingContext();
this.nav.to("Detail", context);
},

handleListSelect : function (evt) {
var context = evt.getParameter("listItem").getBindingContext();
this.nav.to("Detail", context);
},

Hence, the details view is displayed –

Now, in the detail view, I am displaying the list item details as follows –

The code used for displaying the line-item in the detail.view.xml is as follows –

<Table id="Table1"
headerText="{i18n>LineItemTableHeader}"
items="{PRTOLINEITEMS}">
<columns>
<Column>
<header><Label text="Material" /></header>
</Column>
<Column>
<header><Label text="Quantity" /></header>
</Column>
<Column>
<header><Label text="Rate" /></header>
</Column>
<Column>
<header><Label text="Price" /></header>
</Column>
<Column>
<header><Label text="Cost Centre" /></header>
</Column>
<Column>
<header><Label text="GL Account" /></header>
</Column>
</columns>
<ColumnListItem
type="Navigation"
press="handleLineItemPress">
<ObjectIdentifier
title="{Txz01}"
text="{Bnfpo}"
class="sapTableContentMargin" />
<ObjectNumber
number="{Menge}"/>
<ObjectNumber
number="{Preis1}"
unit="INR"/>
<ObjectNumber
number="{Tpreis1}"
unit="INR"/>
<ObjectIdentifier
title="{Kostl}"
class="sapTableContentMargin" />
<ObjectIdentifier
title="{Sakto}"
class="sapTableContentMargin" />
</ColumnListItem>
</Table>

Now PRTOLINEITEMS is an association and created as follows –

EBANLINEITEMSSet is the entity set of line-items with the following fields –

Banfn – Key field (PR Number)

Bnfpo – Key field (Line Item Number)

Matnr

Txz01

Preis1

Frgdt

Menge

Lfdat

Tpreis1

Sakto

Kostl

This is connected to EBANMAINSet as follows through association PRTOLINEITEMS–

Now, there is provision of seeing each line-item in the detail page and once any line-item is clicked, it opens up a page where the line-item view is shown in the below 2 screen-shots –

The code I have written in the Detail.Controller.JS for going to the line-item view from detail view is as follows –

  handleLineItemPress : function (evt) {
var context = evt.getSource().getBindingContext();
this.nav.to("LineItem", context);
},

When going to the Line-item view, the following is displayed in the context variable of the detail.controller.JS.

The sPath value of context variable in oModel is as follows –

"/EBANLINEITEMSSet(Banfn='10002715',Bnfpo='00010')"

Now it is giving the lineitem.view.xml shown earlier and below also –

Here the provision of modifying Quantity, Rate, G/L Account and Cost Centre has been kept which are the following fields - Menge, Preis1, Sakto and Kostl respectively.

The following fields are to be sent to Gateway for saving the modified line-item details and for that I have already created an RFC and EntitySet named EBANLINEUPDATESet and details of that are shown below –

Banfn and Banfpo are the key fields.

I have implemented the CREATE service also for EBANLINEUPDATESet as follows –

And tested the same in the Postman Rest Client and found that it is working perfectly.

Hence, I need to send the following fields to the Gateway from the lineitem view –

Banfn (Need to know how to read in a variable in Lineitem.controller.js)

Bnfpo (Need to know how to read in a variable in Lineitem.controller.js)

Menge (Already done as per your instruction – it is working – the variable I am now able to read in lineitem.controller.js)

Preis1 (Already done as per your instruction – it is working – the variable I am now able to read in lineitem.controller.js)

Kostl (Already done as per your instruction – it is working – the variable I am now able to read in lineitem.controller.js)

Sakto (Already done as per your instruction – it is working – the variable I am now able to read in lineitem.controller.js)

I want to know how to read the fields Banfn and Bnfpo in the lineitem.controller.js so that I am able to pass those to the gateway.

Your answer will be solving my requirement completely.

Thanks a lot Florian in advance for your great help.

Regards .....

[Former Member]

Hello DrSubhabaha Pal,

Thanks for your extensive Description this helped a lot for understanding your application structure.

I am not really sure about this as i´m not that familiar with how associations work in sapui5 but i think you could just try the following inside your handleUpdate method:

//give your object header in the xmlview an id first to make accessing it easier
var bnfpo = oView.byId("objectHeader").getBindingContext().getProperty("Bnfpo");
var banfn = oView.byId("objectHeader").getBindingContext().getProperty("Banfn");

As far as i understand the association Properties are injected into the entry so you should be able to read them through the getProperty() method.

with best regards

Florian

[Former Member]

Thanks a lot Florian. I tried the same just now. but an error is coming. Can you please help?

The error text says -

Uncaught TypeError: Can not call method 'getBindingContext' of underfined

Giving sceen-shot below -

I think some minor code I need to read. Please help.

Awaiting .....

[Former Member]

Hi Florian,

Thanks a lot. I forgot to give an ID to the Object Header in the Lineitem view. I have given that. Now it is working fine.

Florian you have helped me a lot. I was stuck in some points in the development of the application as I am new to SAPUI5. This is my first UI5 application development as I am basically SAP ABAP consultant. Only for your kind support, I am now able to complete it successfully.

I am very much thankful and oblized for your kind direction taking out time from your busy schedule. I do not think any further technical challenge I shall face in the current application development. But anything occurs in future for other application, I shall earnestly wait for your kind help and direction after posting it in this forum. Florian, I am really grateful for your kind direction for which I am now able to finish the application successfully.

Regards ....

[masa_139]

There are 4 cross posts.

http://scn.sap.com/thread/3639585

http://scn.sap.com/thread/3639489

http://scn.sap.com/thread/3639584

http://scn.sap.com/thread/3639487

[Former Member]

Hi Masayuki,

Actually as a first time member of SAP SCN Community, I was not aware where to post this query. Hence I posted at few places where it seemed relevant. I was not aware of this place at that time and afterwards one member told me about this place.

I got my answer from Florian Hafner who helped me a lot.

Thanks......