Hi,

I am trying to use setinterval in my index.html, and inside is a function in my controller. But I keep getting function is not defined.

index.html

         sap.ui.getCore().attachInit(function () {

            sap.ui.xmlview({

               viewName : "sap.ui.demo.wt.view.MonitoringView"

            }).placeAt("content");

         });

How do I call the function? I tried this.callfunctionhere(), sap.ui.getCore().getController().callfunctionhere() and they are not working.

Please help, thanks.

Hello

I have read a lot of blog without finding a solution, so I post.

First my landscape :

1- SAP CRM 7 EHP3 (Gateway embedded)

SAP_BASIS    740    0012    SAPKB74012    SAP Basis Component

SAP_UI    740    0014    SAPK-74014INSAPUI    User Interface Technology 7.40

UICRM001    100    0008    SAPK-10008INUICRM001    UI for CRM

BBPCRM    713    0010    SAPKU71310    BBPCRM

2- SAP Cloud Connector 2.6.1.1

3- SAP Web IDE 1.19

4- Chrome 47.0.2526.106

I have uploaded the CRM My Contacts app in the workspace from the backend SAPUI5 repo.

I obtain the following folders tree

I select the Component.js file and run it.

I run it

I obtain the flower (I am running a japanese system)

In the Chrome dev tools, i have the following message

And the appli does not start.

And of course, when i try to extend, I obtain the same.

I have tried with the My Opportunities app too and obtain the same.

When I try with the My_contacts app from SAP CRM 7 EHP2, the app started

Could anyone help me ? any hints ?

PS : I  have tried to extend some CRM apps in the fiori cloud demo and everything was perfectly done.

Best regards

Emmanuel

Hi,

I am trying to set color to bars in a chart based on condiations. Currently it works for some condition but not for all..

I have different set of data in oModel. Currently it works for both Case : 1. and Case : 3  and its not woking in the case of Case : 2.

I am setting color  green to OnTime Bar and red to Delayed Bar.

Currently in case of Case : 2. it seeting green to Delayed Status.

var oTextView = new sap.ui.commons.TextView();

oTextView.setText("Please wait, loading data");

case : 1

var oModel = new sap.ui.model.json.JSONModel({

     businessData: [

     {

         COUNTRY: "IND India",

          STATUS_DESC: "On Time",

          CNT: 215

     },{

          COUNTRY: "GSS Singapore",

          STATUS_DESC: "Delayed",

          CNT: 115

     }]

});

case : 2

var oModel = new sap.ui.model.json.JSONModel({

     businessData: [

     {

          COUNTRY: null,

          STATUS_DESC: "On Time",

          CNT:  0

     },{

          COUNTRY: "GSS Singapore",

          STATUS_DESC: "Delayed",

          CNT: 115

     }]

});

case : 3

var oModel = new sap.ui.model.json.JSONModel({

     businessData: [

     {

          COUNTRY: "IND India",

          STATUS_DESC: "On Time",

          CNT: 215

     },{

          COUNTRY: null,

          STATUS_DESC: "Delayed",

          CNT: 0

     }]

});

var filter = new sap.ui.model.Filter("COUNTRY", function(oValue) {

     return oValue !== null;

});

var column1;

var oDataset = new sap.viz.ui5.data.FlattenedDataset({

     dimensions: [{

          axis: 1,

               name: 'COUNTRY', // 'name' is used as label in the Legend

               value: '{COUNTRY}' // 'value' defines the binding for the displayed value  

          }, {

          axis: 2,

               name: 'STATUS_DESC', // 'name' is used as label in the Legend

               value: '{STATUS_DESC}'

          }],

          measures: [{

               name: 'CNT', // 'name' is used as label in the Legend

               value: {

                    path: "CNT",

                    formatter: function(oVal) {

                         if (oVal < 0) {

                              column1.getAggregation('plotArea').setColorPalette(['#f17979','#1bb7a0']); //red,green

                         } else {

                              column1.getAggregation('plotArea').setColorPalette(['#1bb7a0','#f17979']); //green,red

                         }

                         return oVal;

                    }

               }

          }]

     }).bindData("/businessData", null, null, [filter]);

column1 = new sap.viz.ui5.StackedColumn({

     width: "100%",

     height: "700px",

     plotArea: {

     },

     title: {},

     legendGroup: {

          layout: {

          position: "bottom"

          }

     },

     dataLabel: {

          visible: true,

          positionPreference: true,

          position: sap.viz.ui5.types.

          Datalabel_position.inside

     },

     dataset: oDataset,

     noData: oTextView

});

column1.setModel(oModel);

return (column1);

Im stuck, Please send a solution for this.

Thanks,

Sandeep

Hi All,

Am trying to build the sap ui5 application with table, in that

is it possible to create a table with check box as a one column and based on the quantity (n)  and material serialized flag it should navigate to another view with input option (list) to enter the n-number of serial numbers otherwise it shouldn't navigate?

I tried with the table with check box, but the event is not getting triggered for check box.

thanks much for any help on this..

thanks

I've installed the Tools for developing SAPUI5 applications in my eclipse and I've created the SAPUI5 Mobile Project. However, I can't use the autocomplete yet.

In the SAPUI5 Core Libriries I can see the com.sap.ui5.mobile_1.26.3.jar but in the JS file, the autocomplete doesn't work.

How can I use de sap.m in the autocomplete?

Thanks.

Hi,

I'm developing a platform in SAPUI5 and I'm trying to adjust the layout for iOS. A couple weeks ago, sap-ui-xx-fakeOS=ios added to the link was working perfectly, and now it doesn´t. On the console I'm getting this:

1. Uncaught Error: Cyclic __proto__ value sap-ui-core.js:117
2. Uncaught TypeError: undefined is not a function ixxxxxxxxxxxxxxx&sap-ui-language=PT&sap-ui-appcache=false?sap-ui-xx-fakeOS=ios:15
3. Uncaught TypeError: Cannot read property 'Dialog' of undefined ixxxxxxxxxxxxxxx&sap-ui-language=PT&sap-ui-appcache=false?sap-ui-xx-fakeOS=ios:34

Strangely, the plain link works on the actual iPhone, and sap-ui-xx-fakeOS=ie is working too

Hello Experts,

I have develop the offline application using Kapsel plugin.

I have use Cordova for building the .Apk for android device.

How can i find out which version of android is compatible for my app?

I have the device that  version is Android 4.0 Ice Cream Sandwich.

On this device my app is not working.

How can i compatible my app with this 4.0 version ?

Hi Experts,

https://sapui5.netweaver.ondemand.com/sdk/#test-resources/sap/m/ResponsiveLayout.html

  I am following the above link for designing a responsive layout, it is working fine but  I have a label(Street) at the top of the input field I need to have     the label (Street) at middle of the input with out using CSS. I am pasting my code below.

var oForm1 = new sap.ui.commons.form.Form("F1",{

                    layout: oLayout1,

                    formContainers: [

                    new sap.ui.commons.form.FormContainer("F1C1",{

                                                  formElements: [

new sap.ui.commons.form.FormElement({

          label: new sap.m.Label({text:"Organization:",design:"Bold",textAlign : "Begin"}),

          fields: [new sap.m.Input({value: "{beneficdetails>NameOrg}"})],

}),

new sap.ui.commons.form.FormElement({

          fields: [icon2b,new sap.m.Label({text: "{beneficdetails>Communication/Telnr}"}) ],

          layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: false})

}),

new sap.ui.commons.form.FormElement({

          fields: [icon3b,new sap.m.Label({text: "{beneficdetails>Communication/Email}"}) ],

          layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: false})

})

                                                            ],

                                                            layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: false})

                                        }),

                                        new sap.ui.commons.form.FormContainer("F1C2",{

                                                  formElements: [

                                                            new sap.ui.commons.form.FormElement({

                                                                      label: new sap.m.Label({text:"Street:",design:"Bold", layoutData: new sap.m.FlexItemData({alignSelf: sap.m.FlexAlignSelf.Center})}),

                                                                      fields: [

                                                                               new sap.m.Input({value: "{beneficdetails>Address/Street}"})],

                                                                      layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: false})

                                                            }),

                                                            new sap.ui.commons.form.FormElement({

                                                                      label: new sap.m.Label({text:"House No:",editable:false,design:"Bold", layoutData: new sap.m.FlexItemData({alignSelf: sap.m.FlexAlignSelf.Center})}),

                                                                      fields: [

                                                                              new sap.m.Input({value: "{beneficdetails>Address/HouseNum}"})],

                                                                      layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: false})

                                                            }),

                                                            new sap.ui.commons.form.FormElement({

                                                                      label: new sap.m.Label({text:"Postal Code:",editable:false,design:"Bold", layoutData: new sap.m.FlexItemData({alignSelf: sap.m.FlexAlignSelf.Center})}),

                                                                      fields: [ new sap.m.Input({value: "{beneficdetails>Address/PostalCode}"})],

                                                                                                    layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: false})

                                                            }),

                                                            new sap.ui.commons.form.FormElement({

                                                                      label: new sap.m.Label({text:"City:",editable:false,design:"Bold", layoutData: new sap.m.FlexItemData({alignSelf: sap.m.FlexAlignSelf.Center})}),

                                                                      fields: [  new sap.m.Input({value: "{beneficdetails>Address/City}"})],

                                                            layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: false})

                                                            }),

                                                            new sap.ui.commons.form.FormElement({

                                                                      label: new sap.m.Label({text:"Country:",editable:false,design:"Bold", layoutData: new sap.m.FlexItemData({alignSelf: sap.m.FlexAlignSelf.Center})}),

                                                                      fields: [  new sap.m.Input({value: "{beneficdetails>Address/Country}"})],

                                                                      layoutData: new sap.ui.commons.layout.ResponsiveFlowLayoutData({linebreak: true, margin: false})

                                                            }),

                                                  ]

                                        }),

                              ]

                    });

Thanks in Advance

Ravi Varma

I want to extend label class and add following evnts

1. click event

2. onchange event

how can i achieve it ?

Regards

Hi colleagues,

I’m hoping someone will be able to help or at least point me into the right direction.

I’m facing some problems with my project being developed using Fiori/ SAP UI5 (using Web IDE for UI development, Fiori template) and HANA database (HANA features installed on Eclipse Luna). I use xsodata service to expose my tables to the UI. At the moment my main concern are intersection tables that are used to resolve the many to many relationships in the database.

To illustrate the problem I’ll use a simplified ERD just with 3 tables:

I already posted a question in the HANA dev centre about database problem, but I also have a problem with the navigation and association between the ‘main’ and intersection tables in Fiori.

The navigation in Fiori works OK for 2 tables/views using navigation property.

If however I need to display e.g. PRODUCT_NAME from PRODUCT table and the context path/ binding available in Fiori is PRODUCT INFO ID from PRODUCT INFORMATION table I have a problem to retrieve the product name using the Intersection table, which I believe should be possible through the Foreign Keys. The reason behind is that I already have other table/attribute view bound to 1 part of the UI, hence the context path is different to what I need for a 2nd part within the same UI.

I’ve tried to hardcode the path, used $expand operator, none of them seem to work, the $expand works fine when parsing the oData link, when used in Fiori it throws an error

"Query parameter '$expand' is specified, but it should be specified exactly once."

Please note that I’m quite new to the UI5, Fiori and Hana.        

Thanks a lot in advance for any support!

Hi All,

Is there any way to add a horizontal separator in between the combo box items to divide them into groups.

I add i ListItem as follows but i doesn't seems good as it allows to be selected which is not expected behaviour

new sap.ui.core.ListItem({key:"-",text:"-----------------"});

Regards

:S

Hi all,

I recently installed the SAP Web IDE On-Premise to evaluate it and managed to quickly develop one demo Fiori App with the available OData services and deploy them to our backend. That was supposed to be a test if we have set all the required software in order to be able to dive in Fiori a bit more.

Then after a week or two all of a sudden it stopped working.

I now can't access the Service Catalogue and I can't deploy to the backend any more since I am getting the following error:

"Unable to access the selected system. Check your credentials and try again. If the problem persists, check if the OData service is available and contact your backend system administrator" (printscreens uploaded).

I spoke with our basis and he hasn't done any changes and I have checked my user/pass and can access the services in the browser.

Any advice is welcome!

Thanks in advance,

Ilina

Hi,

I crated a new OData service in my HCP account using the Web Development Workbench.  I added this service as a new destination (named service) and the connection test was OK as shown in the screenshot below.  I tried to use it to create a new UI5 app but when I get to the add data connection step, only Northwind is available.  I can't see the new destination at all. Any help is appreciated!

Mark

Introduction

This blog post describes how to call multiple OData requests in parallel and wait all them to finish so that when we have all the responses and after that do something else.

Use case

Imagine that you have two services, first for data and second for authorizations, and you have to activate a button only if first service gives you certain data and second service gives you correct auths. You have to do following two steps:

1. Request data to a OData service 1
2. Request data to OData service 2 to check authorizations

But only If 1 and 2 are done and data is retrieved then you have to activate a button.

For that you can use jQuery deferred objects and Promises.

Check following liks for help if you are not familiar with that concepts.

https://api.jquery.com/jquery.deferred/

https://api.jquery.com/jquery.when/

Some examples

https://learn.jquery.com/code-organization/deferreds/examples/

Let's start with SAPUI5

So we will create one Deferred object for each condition we want to wait and resolve the object when required.

In following example with jQuery.Deferred() we create the object. After that we can create an ODataModel and attach to the metadataLoaded event. Finally when metadata is loaded the Deferred object will be resolved.

            this.oModel2DataDeferred = jQuery.Deferred();                    var sURI2 = "https://cors-anywhere.herokuapp.com/services.odata.org/V3/OData/OData.svc/";            var oModel2 = new sap.ui.model.odata.v2.ODataModel(sURI2,oConfig);                    oModel2.attachEventOnce("metadataLoaded", function() {                console.log("oModel2: Metadata loaded OK");                this.oModel2DataDeferred.resolve();            }, this);                    var finishWait = function(){                console.log("this is the end");            }

We can increase the complexity. We will call another service and another Deferred object but now Deferred object will be resolved when we have a response for a requested data. So if we read the Employees and request was ok, success function will be read and Deferred object is resolved.

            this.oModelDataDeferred = jQuery.Deferred();                                      var sURI = "https://cors-anywhere.herokuapp.com/services.odata.org/Northwind/Northwind.svc/";            var oModel = new sap.ui.model.odata.v2.ODataModel(sURI,oConfig);              oModel.attachEventOnce("metadataLoaded", function() {                console.log("oModel: Metadata loaded OK");                      }, this);                              oModel.read("/Employees", {  success: jQuery.proxy(fSuccess, this),                error: jQuery.proxy(fError, this)  });            function fSuccess(oEvent){             console.log("oModel: Employees read successfully!");             this.oModelDataDeferred.resolve();            };            function fError(oEvent){             console.log("oModel: An error occured while reading Employees!");            };

How do we wait both Deferred objects to be resolved? Using jQuery.when that returns a Promise that will be resolved as soon as all Deferred objects passed as parameters are resolved.

In our example function finishWait will only be called if both Deferred ( oModelDataDeferred & oModel2DataDeferred ) are resolved, that also means that finishWait is called if:

1. Employees for service ( http://services.odata.org/V4/Northwind/Northwind.svc/ ) are read
2. Metadata for service ( http://services.odata.org/V3/OData/OData.svc/ ) is ready

              var finishWait = function(){                   console.log("this is the end");             }            jQuery.when(this.oModelDataDeferred,                        this.oModel2DataDeferred )            .done( jQuery.proxy(finishWait,this) );

jsbin example

If you check the example you will see the following messages in the console but the order of appearence of messages 1 2 & 3 is never known. Message 4 will be always the last message for sure.

1. "oModel2: Metadata loaded OK"
2. "oModel: Metadata loaded OK"
3. "oModel: Employees read successfully!"
4. "this is the end"

Conclusion

With that we have parallel batch requests with SAPUI5 and we have a way to wait all requests using jQuery.

I hope this blog helps someone with same requirements and if you have any doubts or recomendations do not hesitate to contact me

Thanks a lot!

Hos is it possible to sum total the values of the cell and assign the total to a new cell in ui5?

I am using a responsive table control as in SAPUI5 Explored and looking to achieve the total of 'price' cells and bind it to a new cell 'pricetotal'

Hi,

I want to add a footer to the shell similar to the screen shot. Actually there are two footer in the screen shot, one footer is of the page, and the other one is shell's footer I suppose.

Please help me out!!

thanks,

Sanjo Thomas

Dear Experts,

I have developed an SAPUI5 app and I am trying to fetch data from SAP using the SICF service which returns JSON format. I am not using and OData services.

When I am trying to authenticate this service using JSONModel I am getting unauthorized error. I am passing the right credentials but still facing the same issue.

Sample Code....

var userName = "USERNAME";

  var password = "PASSWORD";

  var credentials = userName + ':' + password;

  var hash = btoa(credentials);

  var auth = 'Basic '+hash;

var header = {

         'Authorization':auth,

         'Access-Control-Allow-Origin':'*',

         'Content-Type':'application/json'

     }

  var customerModel = new sap.ui.model.json.JSONModel();

  customerModel.loadData("http://hostname:port/ui5?&mobile=123456789",null,true,'GET',false,false,header);

I am getting below error....

Response for preflight has invalid HTTP status code 401

Kindly help...!

Thanks

Ravi

Hello

I have read a lot of blog without finding a solution, so I post.

First my landscape :

1- SAP CRM 7 EHP3 (Gateway embedded)

SAP_BASIS    740    0012    SAPKB74012    SAP Basis Component

SAP_UI    740    0014    SAPK-74014INSAPUI    User Interface Technology 7.40

UICRM001    100    0008    SAPK-10008INUICRM001    UI for CRM

BBPCRM    713    0010    SAPKU71310    BBPCRM

2- SAP Cloud Connector 2.6.1.1

3- SAP Web IDE 1.19

4- Chrome 47.0.2526.106

I have uploaded the CRM My Contacts app in the workspace from the backend SAPUI5 repo.

I obtain the following folders tree

I select the Component.js file and run it.

I run it

I obtain the flower (I am running a japanese system)

In the Chrome dev tools, i have the following message

And the appli does not start.

And of course, when i try to extend, I obtain the same.

I have tried with the My Opportunities app too and obtain the same.

When I try with the My_contacts app from SAP CRM 7 EHP2, the app started

Could anyone help me ? any hints ?

PS : I  have tried to extend some CRM apps in the fiori cloud demo and everything was perfectly done.

Best regards

Emmanuel

Hi...

I am beginner to SAP Fiori. I am trying to develop a custom apps, where I face the below issues. If possible resolve it.

1. I have downloaded the HCM_LR_APV source code, which doesnt contain the HTML file. What is the procedure to run the standard apps.

2. Using SAP UI5 application, while I try to fetch data using OData Service, it displays an error: Uncaught ReferenceError: sapui is not defined.

Eventually my first custom-developed Fiori UI5 APP went live before Christmas Holiday last year. I used to attend some UI5 and WEB UI projects but this was the first time that I designed UI screens, developed OData services and UI5 application.  Basically this APP is to provide search function for field technicians and supervisors to view historical orders and navigate to the order APP to check the detail.

Although it was not easy to deploy the first one, I really enjoyed the development journey. The more UI5 Development was done, the more I learnt from it and felt happy. Now it is time for me to summarize lesson and learn for future UI5 development.

Project Approach: Agile rather than ASAP

As SAP developers, we all are familiar with ASAP project methodology. But in UI5 and UX development we tend to apply Agile approach to deliver the project. It means that we will have more user requirement and experience discussion sessions during the project. Every discussion session we demo the function and collect user feedback and requirement. Then modify the APP and function and prepare for the next demo session. Eventually the developers and business user reach common agreement with the APP.

Development tool: Eclipse or WEB IDE

UI5 development beginners always ask which UI5 development tool is better, Eclipse or WEB IDE. In my opinion, WEB IDE is much better than eclipse. WEB IDE provides SAP UI5 development templates which allow you to quickly build an application project with basic function.  You do not need to spend a lot time to consider syntax and project structure. As WEB IDE set up testing connection with Backend gateway system, you are able to test your UI5 development function directly with WEB IDE .But with Eclipse you need to deploy the development to the gateway system first then conduct testing, which waste some times.

More ABAP Less UI5

As SAP UI5 solution is a combination of UI5 and ABAP OData, you can achieve part of certain function in UI5 and part of it in ABAP backend. I would like to suggest to try to move more function to be achieved in ABAP rather than in UI5. For example, you can control the display of certain field through UI5 directly or through an indicator from ABAP OData. I would prefer to choose control through ABAP OData because it reduce the logic in WEB UI side which improve performance in UI.

Clean Cache

Cleaning cache to show the updated development is a continuous work which I need to do in the development phase. Otherwise when you fail to achieve certain function, you will always doubt if you clean cache already or not. Below 3 transaction codes I think are the most important to clean cache. If you could  not clean cache with below TCodes, I believe  it is not cache issue. You should consider other ways to solve the problem.

/iwfnd/cache_cleanup

/iwbep/cache_cleanup

SMICM invalidate cache globally

Debugging

In case of issues, I used Google Chrome Developer Tools to debug and set break point. Console can show you all the errors inside the WEB APP. You also can disable cache and check the OData request and response through Network tab of developer tool.

So far, I think compared with Native IOS or Andriod APP, UI5 APP are not as good as them. The major drawback is not support offline mode and some APP control still need to be improved. But I believe Fiori UI5 is the future of SAP. We do need to skill up to obtain the mobility development skill as a SAP Developer.

Happy Coding.