cancel
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Showing results for 
Search instead for 
Did you mean: 

Walkthrough Tutorial Questions - please use this thread for Q&A

michael_graf
Advisor
Advisor

on ‎10-22-2015 7:50 PM

Hello learners of SAPUI5,

please use this thread to ask questions on the contents of the SAPUI5/OpenUI5 walkthrough tutorial.

We will gladly follow up with you and explain more details.


PS: There are a lot of discussions in the blog post but it is really hard to track and follow up so please ask questions related to the walkthrough here instead of the blog announcement

Show replies
Show replies
mmonteith
Explorer
‎08-17-2021 9:58 PM
0 Kudos

I'm using IIS on Windows. Trying to run Step 27 - Mock Server. The version 1.92.1. I get an error:

GET http://localhost/webapp/test/test/initMockServer error 404.

Looks like it's picking up the test path twice. But I can't see where.

mockserver.js
init: function () {
       // create
       var oMockServer = new MockServer({
         rootUri: "https://services.odata.org/V2/Northwind/Northwind.svc/"
       });

       var oUriParameters = new UriParameters(window.location.href);

       // configure mock server with a delay
       MockServer.config({
         autoRespond: true,
         autoRespondAfter: oUriParameters.get("serverDelay") || 500
       });

       // simulate
       var sPath = "../localService";
       oMockServer.simulate(sPath + "/metadata.xml", sPath + "/mockdata");

       // start
       oMockServer.start();
     }
mockServer.html
<head>
   <meta charset="utf-8">
   <title>SAPUI5 Walkthrough - Test Page</title>
   <script
     id="sap-ui-bootstrap"
     src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js"
     data-sap-ui-theme="sap_belize"
     data-sap-ui-libs="sap.m"
     data-sap-ui-resourceroots='{
       "sap.ui.demo.walkthrough": "./"
     }'
     data-sap-ui-oninit="module:sap/ui/demo/walkthrough/test/initMockServer"
     data-sap-ui-compatVersion="edge"
     data-sap-ui-async="true">
   </script>
</head>
<body id="content">
   <div data-sap-ui-component data-name="sap.ui.demo.walkthrough" data-id="container" data-settings='{"id" : "walkthrough"}'></div>

</body>
Answer

Accepted Solutions (0)

Answers (14)

Answers (14)

former_member146540
Discoverer
‎11-29-2022 2:25 PM
0 Kudos

Mission: https://developers.sap.com/mission.cp-starter-extensions-abap.html

--------------------------

According to the tutorial, the account I created only has read-only access，I can't do it after eclipse，How can this permission be added？

Show replies
Show replies
mmonteith
Explorer
‎08-23-2021 5:26 PM
0 Kudos

Step 28 unit test with QUNIT. I get an error:

XHRGEThttp://localhost/webapp/test/localService/metadata.xml
[HTTP/1.1 404 Not Found 2ms]

021-08-23 11:26:31.353000 MockServer: The metadata for url "undefined" could not be found!

Does someone verify these walk-through before they're posted? I found several legitimate bugs, and a couple of places information was left out. When someone goes through these they expect that they are tested and working. It's frustrating when you lose a day or so tracking down issues when you're under pressure trying to learn a lot of new stuff.

Show replies
Show replies
former_member646113
Explorer
‎08-24-2021 3:09 AM
0 Kudos

Yes, I met issues too when walking through the tutorial. This one is the biggest. I change the `sPath` a little bit to fix it.

var sPath = "/localService";
mmonteith
Explorer
‎08-20-2021 2:16 PM
0 Kudos

I think I fixed my issue. I ended up restarting from scratch. But when I went through the steps I think I forgot to change

"sap.ui.demo.walkthrough": "./"
to 
 "sap.ui.demo.walkthrough": "../"
Show replies
Show replies
manasi_b
Explorer
‎11-10-2020 7:41 PM
0 Kudos

https://sapui5.hana.ondemand.com/#/entity/sap.m.tutorial.walkthrough/sample/sap.m.tutorial.walkthrou...

Hello,Regarding the Walkthrough. The output was displaying till Step 4. From Step 5, even the above link which has samples is not showing output. TIA.

Update: Solved it by using Firefox...as Chrome had CORS problem as suggested by another thread

Show replies
Show replies
manasi_b
Explorer
‎11-10-2020 7:48 PM
0 Kudos

Uncaught (in promise) TypeError: Cannot read property 'HasPopup' of undefined at ButtonRenderer-dbg.js:32 at ui5loader-dbg.js:1829

getting this message in the console.

mmonteith
Explorer
‎08-19-2021 4:52 PM
0 Kudos

if you right-click and select Inspect and go to console you get better error details.

Also the documentation has a Troubleshooting section which talks about this.

What kind of development environment do you have setup? I'm using Windows IIS server. I didn't have any CORS issue until Step 26.

mmonteith
Explorer
‎08-19-2021 4:54 PM
0 Kudos

There was another mention of this error. This might help.

https://answers.sap.com/questions/13006213/index.html

christophhofmzh
Explorer
‎03-28-2016 11:17 AM
0 Kudos

Hello Michael

I have started the Walkthrough tutorial and managed to pass steps 1 to 3 successfully.

However in Step 4 (using a separate view page) I do not see the "Hello World" message although I used the original coding from the description. The SAPUI5 environment is loaded as I have verified by an alert message.

I am using the SAP Web IDE development environment under https://webide-pxxxxxxxxxxtrial.dispatcher.hanatrial.ondemand.com/

Maybe I still must change something on my Run Configuration?

Can you please assist?

Kind regards

Christoph

Show replies
Show replies
michael_graf
Advisor
Advisor
‎03-29-2016 9:04 AM
0 Kudos

Hello Christoph,

the hello world message is removed in Step 4 and replaced by a view displaying a "hello world" message. See this code here:

SAPUI5 Explored

If that did not help, did you check the console for any file not found messages? The namespace and file name for the view has to match and it has to be in subfolder "view".

Kind Regards,

Michael

christophhofmzh
Explorer
‎03-29-2016 9:35 AM
0 Kudos

Hello Michael

yes, I know. I copied the coding just as proposed in the task.

And indeed, I get a file not found error in the console.

See the screenshots for

  • the file structure of the project
  • the index.html file
  • the error in the console

Can you see why the file is not found? According to the description of Task4, it should work.

What I see in the console is a message

    "No 'Access-Control-Allow-Origin' header is present on the requested resource"

Kind regards

Christoph

christophhofmzh
Explorer
‎03-30-2016 3:15 PM
0 Kudos

Hello Michael

un update from my side:

Meanwhile, the error regarding the 'Access-Control-Allow-Origin' header does not occur any more (do not know why).

I analyzed the problem further and assume the following:


The error now says:

Uncaught Error:

resource sap/ui/demo/wt/view/App.view.xml

could not be loaded from https://sapui5.hana.ondemand.com/resources/sap/ui/demo/wt/view/App.view.xml.

Check for 'file not found' or parse errors. Reason: Not Found

That means he searches the view on the https://sapui5.hana.ondemand.com/resources path, which is wrong.

It should be searched on the local path /webapp/view/App.view.xml.


The corresponding JS commands in index.html are


<script
id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-libs="sap.m"
data-sap-ui-compatVersion="edge"
data-sap-ui-preload="async" >
data-sap-ui-resourceroots='{
"sap.ui.demo.wt": "./"
}'

</script>

Thus, I assume the the data-sap-ui-resourceroots command does not work as this should bind the sap.ui.demo.wt local path /webapp in the Web IDE webserver.

Or do I miss something?

Kind regards

Christoph

michael_graf
Advisor
Advisor
‎03-30-2016 3:39 PM
0 Kudos

Hello Christoph,

sorry for the delay, i uploaded a zip file with the same project and folder structure as you did. It works perfectly fine for me so i do not understand why you get these issues.

https://mdocs.sap.com/mcm/public/v1/open?shr=2EXrtB1vYyecJmcKNy-mwMeone25NqjLKU6FMNJlVuQ

(Available 90 days)

It has to do something with the app namespace however. If the view is loaded from the /resources path then the app namespace is not working properly. Can you delete the lines again and replace them with the following block? we had issues with copy and paste from the documentation before:

<script

         id="sap-ui-bootstrap"

         src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"

         data-sap-ui-theme="sap_bluecrystal"

         data-sap-ui-libs="sap.m"

         data-sap-ui-compatVersion="edge"

         data-sap-ui-preload="async"

         data-sap-ui-resourceroots='{

            "sap.ui.demo.wt": "./"

         }' >

      </script>

Good luck,

Michael

christophhofmzh
Explorer
‎03-30-2016 4:01 PM
0 Kudos

Hello Michael

I just tested it again by copying your block and now it works!!!

Thank you very much.

But it really took me a lot of time to do all these tests and analyzing!

I hope not to incur such effects again!

Kind regards

Christoph

michael_graf
Advisor
Advisor
‎03-30-2016 4:10 PM
0 Kudos

Alright, if you can reproduce the issue let us know, then we will make a fix in the documentation.

Former Member
‎04-05-2016 4:43 PM
0 Kudos

In my case it worked on Firefox, to work on Chrome/Chromium you should run it with

chrome.exe --allow-file-access-from-files --disable-web-security

This is a Cross Origin Resource (CORS) problem.

michael_graf
Advisor
Advisor
‎04-06-2016 8:43 AM
0 Kudos

Thanks Pablo for pointing that out, step 26 also contains detailed information about CORS:

https://sapui5.hana.ondemand.com/#docs/guide/44062441f3bd4c67a4f665ae362d1109.html

Kind Regards,

Michael

Former Member
‎03-17-2016 5:55 AM
0 Kudos

Hello Michael,

I have just completed step 34- custom controls. Here, the rating for the first time works fine but as soon as we hit the "Rate" button it gets disabled for the rest of the list also. For example, Let's say we hit the first item from the list below.

We are then directed to detail page and then we rate the product:

Now, when we have rated the product, if we go back and click some other product the rating indicator remains in the same state.

As per my understanding, in this example we cannot save the state of this indicator for a particular product to be retrieved later(since there is no backend system available to save) but can we reset it each time we navigate to detail page after clicking the product?

I tried a couple of things but that didn't work. And in explored it says no data ( I am trying to comprehend with your above post regarding this ), so couldn't check there also.
Please guide me through this.

Thank You,
Ashutosh Hans

Show replies
Show replies
Former Member
‎03-31-2016 4:24 AM
0 Kudos

Hello Michael,

I would love to hear on this from you. Please guide me on how to re-initialize the custom control each time we click an item on the list. Let me know if I need to further elaborate my question.

Thank you ,

Ashutosh

michael_graf
Advisor
Advisor
‎04-01-2016 3:34 PM
0 Kudos

Hello Ashutosh,

in our simple example, we did not bind the rating value to the model:


<wt:ProductRating class="sapUiSmallMarginBeginEnd" change="onRatingChange"/>


If we would have done so (which we intentionally did not because the northwind service does not have a rating property) the rating would be reset automatically when you switch the page.

If 2-way binding is enabled and the service is writable then the rating would even be persisted on the backend. Otherwise a custom change handler could call a service in the backend.

Hope that answers your question!

Michael

former_member194737
Explorer
‎03-15-2016 11:55 AM
0 Kudos

Hi Michael,

You have any Video tutorial for UI5 walkthrough - where it is explained better / and in detail.

If not consider to create Video based walkthrough - in which you can try to explain each steps in detail.

Thanks for the UI5 walkthrough document.

Show replies
Show replies
michael_graf
Advisor
Advisor
‎03-15-2016 11:58 AM
0 Kudos

Hello Selvakumar,

we have a bunch of videos in our OpenUI5 YouTube channel, it is not exactly the Walkthrough but good content anyway. Check it out here:

OpenUI5 - YouTube

And we are working on a new video course that will be announced in a few weeks. That will most likely what you are looking for. Watch out for an SCN announcement.

Kind Regards,

Michael

former_member222635
Explorer
‎12-30-2015 10:05 AM
0 Kudos

Hi Michael

For all the steps,  I am using JS instead of XML. For step 21, I am stuck at a point where I cannot find how to write the code to pass different property values under the "number tag" using JS. Could you please guide ?

Also, is there a possibility to enhance the documentation with JS sample coding for these examples, going further ?

Thanks & Regards

Srinivas Rao

Show replies
Show replies
michael_graf
Advisor
Advisor
‎01-07-2016 10:26 AM
0 Kudos

Hi Srinivas,

all steps should also work with JS views but we do not recomment them as they do not clearly separate view and controller logic and they are hard to parse/read for tools and/or humans 🙂 In all recent documentation, we mostly show XML views and we won't show additional JS examples but you can easily translate them if you like.

For step 21 you just have to remove the "" quotes as you can see here in this JSbin example:

http://jsbin.com/somokilofe/edit?html,output

Kind Regards,

Michael

Former Member
‎12-30-2015 12:42 AM
0 Kudos

Dear Michael Graf,

I am unable to pass through Step20

I am struggling for Hours on it.

Followed the correct steps of adding Invoices.json

Set the JSON model in Component.js

Add new view for InvoiceList

But Still I get "No Data"

Tried to Debug in Ctrl_alt-Shift-S

I get invalid Path..

Can some one please help on this

Show replies
Show replies
yoppie_ariesthio
Participant
‎12-30-2015 8:53 AM
0 Kudos

Hai kumar,

Have you loaded JSON file properly?

Try to console.log() your model to make sure it's loaded

Thank you..

Former Member
‎01-04-2016 7:08 PM
0 Kudos

Hi Yoppie Ariesthio

Can you please guide me as to how to console.log my model.

Regards,

amolgupta
Active Contributor
‎01-04-2016 9:53 PM
0 Kudos

console.log(oModel);

michael_graf
Advisor
Advisor
‎01-07-2016 9:58 AM
0 Kudos

Hello Kumar,

please compare your code to the solution in the explored app which works perfectly fine: http://veui5infra:8080/demokit/explored.html#/sample/sap.m.tutorial.walkthrough.20/preview

Most often it is related to the JSON structure or due to wrongly assigned models. Turn on debug sources and have a look at the console messsages, is there any error shown?

Instead of logging the model to the console (not helpful, it consists of many properties and methods) try debugging the data binding stuff instead, for example with the SAPUI5 diagnostics tool (CTRL+ALT+SHIFT+S and Control Tree).

If you still struggle, please upload your project somewhere (preferably on plunker: http://plnkr.co/) and send us a link so that we can have a look.

Kind Regards,

Michael

Former Member
‎06-30-2016 10:19 AM
0 Kudos

Hello Michael,

I am encountering the same issue and checking with the chrome tools i guess that browser is not even going to invoices file. I tried the SAP UI5 Diagnostic tool but being new to UI5 i am not able to get anything from that.

Need help on this.

EkanshCapgemini
Active Contributor
‎12-27-2015 5:32 PM
0 Kudos

Hi Michael,

I am not sure if this is the right place for this or not but i faced one issue which is stated in this thread .

Can you guys please help?

Regards,

Ekansh

Show replies
Show replies
michael_graf
Advisor
Advisor
‎01-07-2016 9:54 AM
0 Kudos

Hello Ekansh,

can you try to set the parameter selectOnFocus="false". It helped in resolving similar issues. If not please open a ticket at SAP Service Marketplace or an issue on github for OpenUI5.


Kind Regards,

Michael

EkanshCapgemini
Active Contributor
‎01-07-2016 10:22 AM
0 Kudos

Hi Michael,

Thanks for your reply.

I got this working with selectOnFocus=false . I wanted to know the reason behind re-rendering of my searchField. I got the correct answer on my thread that it is because my searchField is inside list so everytime i try something, it searches the items and thus list gets re-rendered. So my serachfield was also getting re-rendered. While in the SAPUI5 explored example, it is outside list so there was no issues as such.

Anyways many thanks for your reply.

Regards,

Ekansh

yoppie_ariesthio
Participant
‎10-29-2015 3:50 AM
0 Kudos

Hello Michael,

Want to report

walk through Navigation and Routing demo is not found

SAPUI5 Explored

Thank you

Show replies
Show replies
michael_graf
Advisor
Advisor
‎11-03-2015 11:47 AM
0 Kudos

Hello Yoppie,

thanks for letting us know.

The links have already been corrected and will be updated in the cloud version soon. For the moment you can use this link:

SAPUI5 Explored - Testing Tutorial Samples

The openui5 demokit has the same tutorial content and here it is already corrected: OpenUI5 Demo Kit

Kind Regards,

Michael

michael_graf
Advisor
Advisor
‎10-28-2015 1:41 PM
0 Kudos

Q: Why does step 26 show no data in the cloud versions of openui5/sapui5.hana.ondemand.com?


The example is not working on OpenUI5 and SAPUI5 as there is no proxy configured on these cloud-hosted installations for security reasons. Otherwise any website could proxy web pages through our cloud installation.

The proxy concept is only used for local testing and if you download the SDK for local development (which uses the same code base, for example from openui5.org) then a proxy script is included in your local environment and the service call works.

In a real environment you would add server-side configuration to be able to connect to specific backend system (google CORS for more details).

Anyway, this step is a bit complicated to set up for certain environments, thats why you can just skip it and call the app with mock data instead. We just wanted to outline that for the application coding there is no difference between mock data and a real service call.


Kind Regards,


Michael

Show replies
Show replies
amolgupta
Active Contributor
‎10-28-2015 1:47 PM
0 Kudos

Hi Michael,

I am using Eclipse but still could not run this example.

Regards,

AG.

michael_graf
Advisor
Advisor
‎10-28-2015 2:07 PM
0 Kudos

Hello Amol,

this is because there is no proxy configured in your local (Tomcat-based?) environment. As outlined above, in the SDK we have the proxy included but if you set up your local development enviroment by yourself you will also have to setup the proxy manually to make the example work.

You would have to deploy a simpley proxy servlet to the server to be able to connect to a remote server. If you put in the URL directly you will get a CORS error in the browser. See this discussion thread how to setup a simply proxy servlet for local developments:

http - Code to get a Java servlet to act as a proxy? - Stack Overflow

You can also disable the CORS security settings in your browser and enter the URL directly in the manifest file as an alternative. Or you can access the URL using a helper tool like cors anywhere, see this example on jsbin to make it work:

http://jsbin.com/afif/417/edit?html,css,output

But honestly, just ignore the walkthrough step and move on with the mock data from step 27 an. When you develop a productive app usually either the backend is on the same server or is configured in a way that it can be accessed from the place where the app is deployed.

Just to be on the safe side again: Don't use proxy scripts or cors anywhere for productive apps, they should handle CORS issues by configuration.

Kind Regards,

Michael

Former Member
‎03-17-2016 5:22 AM
0 Kudos

Hi Amol,

I used eclipse and for me it worked in the following way. This might help.

  • Define odata Model in component.js

  • Set model in the following way inside the init function of component.js :

     Best Regards,
     Ashutosh

draschke
Active Contributor
‎10-23-2015 8:19 AM
0 Kudos

Hi Michael,

thanks for open up a thread.

If I want to create this project on our Local WebIDE (Standalone HanaBox - not the cloud WEB IDE), there isn't a possibility to create a neo-app.json file.

1. I would like to use the configuration for the destination inside of the manifest, but don't get it ready.

     Is this not possible?

     If it should work, could someone bring up a sample (also for loading local mock data). Would very helpful.

     Okay, could help myself. Found a very helpful sample for a local file inside of walkthrough 20!

2. "Automatic instantiation":

     If we use the CDN path src="https://openui5.hana.ondemand.com/resources/sap-ui-core.js" should we on the last stable version. This version should automatically support the new automatic instantiation, shouldn't it?


Thanks for your help!

Dirk

(Sorry, if this questions sound stupid, but I'm new in this area)




Message was edited by: Dirk Raschke

Show replies
Show replies
michael_graf
Advisor
Advisor
‎10-28-2015 1:31 PM
0 Kudos

Yes, all UI5 versions >= 1.30 support the automatic model instantiation

michael_graf
Advisor
Advisor
‎10-22-2015 7:57 PM
0 Kudos

A lot of questions were raised around step 26+27 in SAP Web IDE.

We tried to keep the tutorial independent from the development environment so Web IDE specific configuration is not fully described yet but we will change this soon to describe more details.

What do i have to do to get Step 26+27 working in Web IDE?

SAPUI5 SDK - Walkthrough Tutorial

1) You will have to add a neo-app.json file by selecting the root folder > right click > new > Cloud Connectivity Configuration

2) You will have to add a destination to your SAP Hana Cloud Cockpit. Please find the instructions here. Name the destination "northwind":

3) You will have to change the URL in the manifest.json file and in the localService/mockserver.js file to:

"/destinations/northwind/V2/Northwind/Northwind.svc/"

4) You will have to add the configuration for the destination to the neo-app.json file:

{

      "path": "/destinations/northwind",

      "target": {

        "type": "destination",

        "name": "northwind"

      },

      "description": "Northwind OData Service"

    },

Thats it, you should be ready to receive data from the real service now!

Hope it works,

Michael

Show replies
Show replies
yoppie_ariesthio
Participant
‎10-23-2015 3:32 AM
0 Kudos

Is this also working for locally SAP Web IDE ? (localhost:8080/webide/index.html)

GabrielGomezPad
Participant
‎10-24-2015 9:59 PM
0 Kudos

Hello Yoppie,

it does work. just:

1. Create a new Folder

2. Right-click with the mouse and import the zip file that you can download from the Walkthrough

3. Run in Mockup mode

Best Regards,

Gabriel

michael_graf
Advisor
Advisor
‎10-28-2015 1:31 PM
0 Kudos

Referring to the original question. You will probably have to setup a proxy or use a web page like corsanywhere to make the real service work as there is probably no destination concept for the local web ide installation. As outlined by Gabriel, with mockdata the app runs fine.

Ask a Question