Configuring JetBrains WebStorm for UI5 development
Why use WebStorm? Some background
Today, Eclipse has grown to quite a robust and widely used Java IDE, however it lacks severely in the Web / Javascript department. For web development — not only SAPUI5 / OpenUI5, but in my opinion any webdevelopment — I strongly feel we should look further than Eclipse.
The same is true for text editors like Sublime Text and Atom, which — although they have plugins that allow for rudimentary syntax highlighting and code checking — don’t have the context knowledge of the Javascript code you are writing, let alone check for syntax errors, unused variables/functions, type checking, and function signature mismatches, to name just a few.
JetBrains WebStorm actually does all that: it is aware of your code, it does a good job at inspecting and analyzing your code, and has terrific support for other HTML5/CSS related stuff (for instance, it does refactoring across multiple file types such as *.js and *.css). And if you add JsDoc comments to your code, you even benefit from proper type checking! You really have to try it to believe it.
And once you complete the steps described in this blog, you will benefit from excellent UI5 coding support as well!
An small example showcasing WebStorms’ awesomeness when developing UI5 code can be seen in the image below (click image to enlarge):
WebStorm isn’t Open Source like Eclipse, but a personal license costs a mere 44 EUR and as such is worth it every penny.
Unfortunately, it currently has no support yet from SAP or the Open Source community for UI5, but according to some of the topics on SCN and Stackoverflow regarding UI5 development with WebStorm, it seems quite in demand. This blog tries to fill the gap and help you set up WebStorm for use with UI5 development.
Prerequisites
In order to use XML validation and code completion when using XML Views, we need the XML definition for the UI5 libraries. For reasons unknown, these definitions aren’t included in the OpenUI5 download, but they are included in the UI5 plugin for Eclipse. So we need to have Eclipse installed with the UI5 plugin.
And of course, you need to have WebStorm installed 😉
Step 1 : Include UI5 libraries
After you have installed WebStorm, we need to make it OpenUI5-aware. First, we include the UI5 libraries. Since I mainly use the sap.ui.core and sap.m libraries, I will use these now as well. If you need other libraries, you can include these in the same way.
- Open WebStorm, and from the ‘Welcome to WebStorm’ screen, select ‘Configure > Preferences’.
- From the ‘Template Project Settings’, select ‘JavaScript > Libraries’ and click the ‘Add…’ button.
- In the dialog, specify a name and version, and set ‘Visibility’ to ‘Global’.
- Click the‘+’ sign, and choose ‘Attach Files…’
- Navigate to the folder you have downloaded and extracted the OpenUI5 SDK, and select the “./resources/sap-ui-core-all-dbg.js” file:
and click ‘OK’ - Repeat steps 4. and 5. for file “./resources/sap/m/library-all-dbg.js”.
- Both files are now listed in the ‘New Library’ list, and you can click ‘OK’ to save our just configured ‘OpenUI5’ library.
Step 2 – Add XML definitions
Now, we need to add the XML definitions for use with XML Views.
- First, we need to copy the XML definitions from our Eclipse UI5 plugin. Navigate to your Eclipse ./plugins folder.
- Locate both ‘com.sap.ui5.core_n.nn.n.jar’ and ‘com.sap.ui5.mobile_n.nn.n.jar’ files, and extract their content.
- From the extracted content, navigate to the ./libraries folder and copy the *.xsd file to a different directory on your computer. Do this for both the core and mobile libraries.
- In WebStorm, from the ‘Template Project Settings’, select ‘Schema’s and DTDs’.
- Under ‘External Schemas and DTDs’ click the ‘+’ button.
- Switch to the ‘Explorer‘ tab, and navigate to the location where you copied the sap.ui.core.xsd file, and provide an URI ‘sap.ui.core’
- Do the same for sap.m.xsd, with URI ‘sap.m’.
- Both XSD’s are now listed under ‘External Schemas and DTDs’.
IMPORTANT: Make sure you deselect both checkboxes next to these files! It’s not clear at first sight, but by deselecting the checkboxes you define the definitions as ‘Globally Available’ for every project. Having them checked makes them available to the current project only, which isn’t what we want:
- Click ‘OK’ to apply the changes to the preferences, and you’re back at the Welcome screen.
Step 3 – Test our new configuration
Now it’s time to see if what we have configured is actually working and useful.
- In the Welcome screen, click the ‘Back’ button next to the ‘Configuration’ header, and select ‘Create New Project’. Choose a project name, a project location, and set ‘Project Type‘ to ‘Empty project‘
- Let’s create a basic UI5 project directory structure: add a WebContent folder with an index.html file, and a subfolder ui5test with a controller file MyView.controller.js and XML view file MyView.view.xml
As you can see in the above screenshot, our globally defined library ‘OpenUI5’ is linked as well. - In the controller, lets write some UI5 specific code and see if code completion works:
- Cool! As you see, all methods and properties come instantly available for code completion:Also, as you can see from the previous image, variable ‘oModel’ is shown strikethrough, indicating the variable is never used and therefor redundant. This is just one of the benefits WebStorm has over Eclipse: identifying unused Javascript variables and functions!
- Now, lets create an XML view and see if code completion / XML validation works too:
- Awesome! And even here, as shown in the image you see the references to the unused namespace declarations ‘mvc’ and ‘html’ shown strikethrough.
Additional step: Create UI5 file templates
Now, if you use the Eclipse with the UI5 plugin, the initial content for the controller and view files are generated, but in WebStorm we have to write it ourselves. Luckily, WebStorm provides a mechanism called ‘File and Code templates‘. In here, I have defined placeholder templates for UI5 index.html file, and controller / view files. Using ‘File Template Variables’ I have used predefined variables ( ‘${NAME}’ for getting the filename without extension) as well as custom defined variables (‘${UI5_Namespace}’ in which I specify the namespace for the current file):
If you have defined such templates yourself, you can now right-click a project web folder and you’ll see the file templates listed in the context menu:
If I now choose my custom ‘UI5 Controller’, after you specify the File name and UI5 Namespace:
…the new file is created using the specified properties:
Summary
This is just the basics of making WebStorm UI5 aware, and I’m all ears for any other methods or additional configuration to make UI5 development as easy and streamlined as possible!
I have the following video "WebStorm 8: Mastering AngularJS, spy-js, Grunt, and Multi-Selection Workflows" on high rotation, to say WebStorm plays nicely with AngularJS is an understatement, cant wait for some UI5 interoperability.
JSP
Great video, thanks for sharing!
Outstanding post Robin - thanks for sharing!
Cheers,
G.
Thanks for a great post Robin. It's great to see examples of different tools used in UI5 development.
Regards,
Kimmo
Excellent. ..
Hi Robin,
thx for this excellent blog.
I've tried it but the ui5 librairies are not in the left panel by opening an new project.
I set exactly the same settings as you...
Any idea? Is the reason maybe the trial version of Webstorm?
Best,
Matt
Hi Matthieu,
Can you check whether your newly added 'OPENUI5' library is checked as 'Enabled' in Preferences > Project Settings > Javascript > Libraries?
Yes, it is.
That is strange... If I toggle the checkbox, I have it available or not, I'm not sure what could possibly be the cause for the behavior you're seeing. (I tried it with both existing and new projects, and it just works as expected)
Which version of WebStorm are you using?
Yes, really strange.
Webstorm 8.0.4
I've tried to disabled now the "Enabled-Button" and re-activate it but it's not possible.
I get a popup window with the message: "Nothing to show"
And than I'm not allowed to enabled the library.
Here a screenshot:
I would almost suspect there is something wrong with your definition of the library... I don't even understand where the popup 'Choose Modules for OPENUI5' comes from, I have never seen this 😐
Can you maybe try removing and adding a new OpenUI5 JS library definition?
Hi Robin,
I've tried to install the library again but I still get the same problem 🙁
- I've reinstall Webstorm (with registration)
- I downloaded the openui5 Library 1.22.9. (UI5 Runtime)
- I extracted the 2 DTD from Eclipse plugin (...1.22.7.jar)
Maybe something else should be setup? Any idea?
I would love to work with the XML views code completion and other features of WS.
Has anybody else tried to install it?
Thanks in advance
Matt
Hi Matt,
I got it working with a trial version of WebStorm and the same versions of UI5 & DTD you highlighted. I didn't do anything different from Robin's steps and was also a fresh install (Mac OSX).
Cheers,
Stephen
Hi Matthieu,
Do you also have IntelliJ IDEA installed? The popup with title "Choose Modules from zzz" seems suspicious...
(In IntelliJ, they have the concept of 'modules', something that is unknown in WebStorm.)
Could it be your IntelliJ and WebStorm installation (or maybe an IntelliJ project opened in WebStorm) is causing the problems you see?
FYI, I'm using the same OpenUI5 / SAPUI5 versions, and a registered (personal license) of WebStorm 8.0.4
Hi Robin,
no I don't have any other JetBrains products installed. Really strange.
I've opened a ticket by JetBrains Support to have more information about it.
Hi Matthieu, I was wondering did you already got some feedback from JetBrains support?
Hi Robin,
I've just re-installed everything and it works!!! Don't ask me why... No idea.
WS is awesome. Thanks for your great blog/help 😉
Matt
Great post Robin. Thanks for detailing that config for getting the xml definitions.
That really helps.
I agree with you that when it comes to web development, developers aren't going to come to the toolset in the way that SAP have been used to dictating (se80, se38, se24 etc) but web developers are going to have their own muscle memory with sublime or atom or webstorm and won't want to be forced to move to eclipse.
Thanks again for a great blog and for introducing the community to Webstorm.
If you can handle a little PHP perspective there is a great series of webcasts at
Be Awesome in PHPStorm
This is behind a paywall but at $9/mo it is worth the look and there is a couple of great series there on OO architecture.
Cheers,
Nigel
Thanks for your comment Nigel! I think outside the SAP realm WebStorm has grown to (one of) the most used IDE for front-end development, but is hardly unknown of in the SAP world.
Especially since WebStorm is a 'coders IDE', it could be attractive to typical SAP ABAP / Java developers, people who generally have a code-heavy focus 😉
And just as JetBrains IntelliJ taught me to write better Java code since 2004, WebStorm is now teaching me to write better JavaScript / UI5 code as well, and I hope the wider UI5 developer community can benefit from my experiences as well.
Thanks for sharing these webcasts! It just taught me about ⇧⌘A, for quickly searching an action, which has instantly become my favorite WebStorm shortcut! Thanks again!
Robin
I was already using WebStorm since version 7 for SAPUI5. It works just fine.
Including the XML definitions is a nice idea, haven't thought about this yet.
An integration to SAP NWDI would be great, but this will only work in Eclipse, I suppose.
Regards
Tobias
Hi Tobias,
NWDI integration would be ideal, just like ABAP Repository integration... Right now, I have both WebStorm and Eclipse open at the same time: do my coding in WebStorm, and switch to Eclipse to checkin... 😐
An integrated approach would be much welcomed, so if anyone has a solution, please let us know! 😀
hi Robin,
great blog!
did you find a better solution to integrate with Abap Repository instead of a manual switch to Eclipse?
it could be useful to have a direct integration between webstorm and abap 🙁
This is really excellent, programming javascript/SAPUI5 inside eclipse is like programming in notepad....we are 20 years back now....
eclipse???
I understand you don't like Eclipse? Me neither, hence this blog 😉
Hi,
is there a way to run the App directly from WebStorm to chrome?
Like we can do it in Eclipse.
Thx,
Matt
Sure! If you have an editor with your index.html open, move your mouse towards the top right corner of the editor, and there you will see a popup with (in my case) the option to open the page in Safari, Chrome, Opera and Firefox.
Or alternatively, from the context menu, choose 'Open in Browser...' and choose your preferred browser from the list
In both occasions, the page will be displayed using WebStorm's built-in web server running at (a configurable) port 63342
Congrats! This post is very useful!
I use PhpStorm instead WebStorm, but it works for both.
Just the menus are a bit different.
It works like a charm 😆
Hello Robin,
Nice info , I was searching for a tool like this which can make the development lot faster and easy.
But there are few points which i have in my mind:
There is a more flexible approach which i have adopted , I am using console to do most of the development and once they are done i put them back to the main code:
Benefits :
Problems:
Let me know if you want to give this way of development in UI5 a try , can explain them in a blog , have come up with own style of writing code in console which makes development for me much more faster .
-Ajay Nayak
Hi Ajay,
Thanks for your insights! To be true, I myself am not very fond of 'development' using the debugger, since it encourages a more or less "trial and error" approach to coding, instead of having a thorough understanding of what you're actually coding.
I'm not saying your approach is bad, I just feel the debugger should be used for what it is: debugging running code and testing for unexpected behavior, and not necessarily for creating new code...
Furthermore, you can't create new files in the debugger, and creating valid XML views is not possible either.
With a proper IDE, you will also know what will work and give a result, and you will know which variables are available in a certain context, and you will have the added benefit of JSLint / JSHint for checking / validating your code for correctness, something the debugger will never tell you.
On a sidenote, WebStorm not being open source isn't necessarily a bad thing, as is paying a license for good software 😉
Having said that, please do write that blog! I'm sure we (I) could learn from your approach as well!
Thanks again,
Robin
Hi Robin,
I'm working at SAP and actually using WebStorm too 🙂 I fully share your thoughts on Eclipse and it was relatively easy to convince my whole team to switch to WebStorm, so there's hope 😉 . We're using it for application development on HANA XS (with regi) and UI5.
The inclusion of the .xsd files is a very neat trick and I'll try to bug the UI5 team a bit to include it into the non-eclipse SDK. Seems there's already a GitHub Issue for that: xsd files for XML validation not found · Issue #7 · SAP/openui5 · GitHub
Best Regards Christian
Hi Christian,
Good to know SAP internally is using WebStorm too! As it's one of the most-used IDE's for web development, the whole purpose of my blog was to attract the JS developers coming from outside the SAP realm, and not have them forced working on Eclipse instead 😉
Hope to see the XSD's make it to the SAPUI5/OpenUI5 SDK anytime soon!
Hi Christian,
have you any ideas how to submit code to SAP for deployment, other than the SAPUI5 ABAP Repository Team Provider? Because you need Windows and Eclipse for that workflow as far as I know.
We still investigate the possibilites to deploy UI5 applications, and I'm not really happy with Eclipse and we use PHPStorm for other web development anyway.
I hope to hear from you soon.
Regards,
Michael
You could use report /UI5/UI5_REPOSITORY_LOAD to do that. It should be self-explanatory.
- Max
Hi,
I'm no ABAP and SAP dev, so I have only basic knowledge of the processes behind report names.
How would you take advantage of this report? Call it from SE37 and link it to my source folder?
Regards,
Michael
Hi Michael,
You could also use an interactive ABAP report to synchronize:
Using an Interactive ABAP Report to Synchronize - User Interface Add-On for SAP NetWeaver - SAP Library
Hi Michael,
the application I work on gets only deployed to the HANA repository and so I probably can't give you too much helpfuls insights into alternatives to the ABAP repo provider.
Nevertheless I found some discussion about this here: Investigate a build step that deploys app to NW ABAP · Issue #40 · saschakiefer/generator-openui5 · GitHub
If the mentioned report is web-based, perhaps you could write a grunt / gulp task which fires an http post request against the endpoint being used by the report and attach the file contents as payload.
Since you explicitly mentioned Windows as a concern, I assume you're developing on mac / linux. In this case I would suggest to run a windows VM in the background with eclipse installed. Using Synced / Shared Folders (VirtualBox / VMware fusion etc.) you could open the same directory in Eclipse on the guest VM and in PHPStorm on your host. For deployment you would then have to switch into the VM and click a few buttons in eclipse. To ease this workflow you can install a plugin (I think it's called AutoSave or AutoReload) in eclipse, so that eclipse refreshes the file system changes automatically when it gets focus - similary to PHPStorm.
I know it's a hack, but let's be pragmatic. There's raised awareness within sap, that tools should rather be IDE / OS independent, so I'm optimistic there will be more command line tools etc. in the future.
I also had a similar problem in the past, since to deploy to the hana repo I have to use regi (command line tool) which only runs on windows and linux, but my machine is a mac. To 'solve' it I'm running a linux vm with regi in the background, which takes care of the deployment. I've automated the setup of the VM using Vagrant, so that other colleagues can benefit from it. I've also written a small shell script for my mac which automatically connects via ssh to the guest VM and virtually let it appear as if regi is installed 'natively' on OS X, even though it isn't. Initially I used the aforementioned Eclipse / Webstorm shared folder setup, which worked well too - only disadvantage was that I had to switch the context for deployment and press a few UI buttons, instead of typing terminal commands.
Hope I could help you a bit.
Best Regards
Christian
Thank you Christian,
very good write up. I'll take everything into consideration.
Just one more bit of info, we are currently in a "learning phase", and for tests we want to use our development SAP to host the applications. Whereas on the customer side it's planned to use the "Front-End Server" approach.
Hana comes into consideration later. Is there much difference between a Hana and SAP repo?
Kind regards,
Michael
Regarding the differences between the HANA and ABAP Repo probably Maximilian Lenkeit can elaborate a bit more in detail. I assume if you're only developing UI code the differences are not that big - it's basically different deployment targets and deployment tools.
For the development phase I would anyway recommend the following things:
* heavily use of the sapui5 MockServer functionality (mocks http requests in your client, so you don't rely on a backend).
* use a local development server which serves the ui artifacts from your local file system and proxies through the requests which have to be sent to backend. Dev servers I know which support this are (there are more...): webpack-dev-server, connect, browsersync and also karma (karma is just for testing, but it's integrated web-server can also proxy stuff during the tests).
Also I would recommend using git or mercurial for version control and using the hana repo / abap repo just as deployment target (at least for the UI code). The app I work on is hosted on our internal GitHub Enterprise for example.
Best Regards Christian
Regarding SAPUI5 deployment, I'm not aware of any significant differences between e.g. deploying to HANA or deploying to NetWeaver. In both cases, you would probably upload your UI5 coding to a dev system (either HANA Studio/Regi for HANA or ABAP Team Provider/Report for NetWeaver) and then transport your coding to subsequent systems.
The only difference when it comes to coding is probably the path to the sap-ui-core.js file that you're usually referencing in your index.html. It's usually /resources/sap-ui-core.js but on HANA, I believe it's /sapui5/resources/sap-ui-core.js.
Also, the remarks from Christian Theilemann are probably a good starting point.
Hope this helps!
- Max
Hello Christian,
Having a powerful IDE act as a catalyst in development but for now I use Sublime to do most of the development and eclipse to just create project and push the changes to SAP 🙂
Will definitely try webStrome ,as promised i have reviewed few of the chrome development tools which , the console can act as a good playground for analyzing and preparing the code but as you said we can not use it for complete development.
-Best Regards
Ajay
Hi Robin,
I am following this guide for the first time but not getting code-completion to work.
I downloaded the openui5 sdk from OpenUI5 - Download and the version is 1.26.7 (2015-02-16).
After updating Eclipse, plugins are still lower release:
com.sap.ide.ui5.common_1.26.5 and com.sap.ui5.mobile_1.26.4.
Could that be the reason or what else to check?
Thanks,
srdjan
Are you talking about code completion in webstorm or Eclipse?
If it's regarding webstorm - the plugin version is not that important. Also the 1.25.5 and 1.26.4 plugin jars contain the .xsd files. If you have problems to configure webstorm accordingly you can simply copy the .xsd files into your project folder (e.g. into lib/ui5xml ). Webstorm will automatically index them without any further configuration. Imho I'm also doing it that way to save my colleagues from manual configuration.
Webstorm of course, 9.0, and it works now. It seems for the first time the IDE needs some time, but now is ok. Is there a repository to fetch the XML definitions, without installing eclipse, finding and unpacking plugin jars ? Thanks for this helpful guide.
Currenty, they are only available in the Eclipse plugins, but thanks to a very persuasive Christian Theilemann we will see the XSD's bundled with the downloadable OpenUI5 SDK in (hopefully) a couple of weeks! Thank you for pushing this Christian, much appreciated! 😀
And hopefully SAPUI5 SDK will follow soon!
See this GitHub issue for more info: xsd files for XML validation not found · Issue #7 · SAP/openui5 · GitHub
with jspm even better: Configure the repository for JSPM · Issue #326 · SAP/openui5 · GitHub 😎
Hi Robin,
Great article! Just to let you know I've actually created a repo on github with the necessary files for this guide. It can be found here - https://github.com/jbmurray/UI5-WebStorm-Files
Should hopefully keep us going until the UI5 team include the files in the non-Eclipse download!
Hi Srdjan,
I have actually just created a github repo with the 4 files that are used in this article. It can be found here - jbmurray/UI5-WebStorm-Files · GitHub
I'll be updating it with each new UI5 release, although if the UI5 team are including them in the next versions I may not have to 🙂
Than you John, that really helps and hope to be bundled with UI5 soon.
Please note the XSDs are starting to be delivered officially:
https://twitter.com/OpenUI5/status/577497973845811200
Awesome!! 😀 Once official, I will update my blog
Finally the bugging paid off 😀
Hi everyone,
When I configured on webstorm 10 eap,the webstorm exception occurs as below
13:17:07 IllegalArgumentException: Error while indexing D:\java\openui5-sdk-1.26.7\resources\sap-ui-core-all-dbg.js
To reindex this file IDEA has to be restarted: Argument for @NotNull parameter 'name' of com/intellij/lang/javascript/psi/stubs/impl/JSImplicitFunctionImpl$JSImplicitParameterImpl. must not be null (show balloon)
The WebStorm 10 EAP was made available first only 2 weeks ago. I have tried it out, but in my opinion it was waaaaay to buggy to even consider it for productive coding...
I would rather wait until the EAP comes a bit more stable, and use WebStorm 9 instead 😉
Awesome. Thanks a lot.
Is there a way to configure the default resources folder so that when I run the project the openui5 directory is loaded into the web server?
Hi Joao,
I'm not entirely sure what you mean - you could have the bootstrap src point to any location on your web server, so when you run your application it will retrieve the libraries from there:
<script id="sap-ui-bootstrap"
src="/myresources/sap-ui-core.js"
I'm lazy 🙂
I'm using the WebStorm test server. The SAP WebIDE is so great it automatically sets the proxy server and all the resources 🙂 .
I'm lazy too 😉
Therefor I haven't looked into it yet, I simply call the absolute path to SAPUI5 or OpenUI5 (https://openui5.hana.ondemand.com/resources/sap-ui-core.js)
Hi Joao. I think what you're referring to is a configurable url / folder remapping of the paths in webstorms integrated webserver. Unfortunately this is not yet supported and it's also somewhere mentioned in the official webstorm docs that the integrated webserver is just very simple and for more complex scenarios you should use an external webserver. I'm personally using gulp-webserver and browser-sync for some stuff where I have to proxy through certain requests to a hana backend. I can also confirm that webpack-dev-server supports this pretty well, even if you're not using webpack for packaging.
But anyway, if you don't have to proxy requests to the backend you can simply change the path in your index.html to point to the ui5 resources.
If you're using generator-sapui5 it also generates an index.html for you that already points to the proper bower dependency.
I have noticing this problem:
var oModel = sap.ui.model.odata.ODataModel(serviceURL, true)
The code completion works until I reach ODataModel, the last method isn't showing up in code completion with the ui, model and odata appear. Anyone know how to solve this?
Using OpenUI5 1.26.10, and WebStorm 10.0.1.
Same here, looks like there is something missing when using WebStorm 10.x.x
The guy from JetBrains says a lot changed in 9 -> 10 in relation to this topic, so it's probably due to that.
Too bad, since now it's really broken for OpenUI5.
Support for @alias implemented in 10.0.3 so we should get much improved support for OpenUI5.
Thanks for this information.
"Check for Updates ..." doesn't show me version 10.0.3, just 10.0.2 only. Is this an upcoming update?
Regards
Tobias
Upcoming. It's in the Issue Tracker, fixed in 10.0.3.
Seems to be a bug with Webstorm. Opened a ticket https://youtrack.jetbrains.com/issue/WEB-16364
Hi Robin,
I have installed WebStorm 10.0.2 30 days trail version. I don't see any Libraries node under Javascript to add OpenUI5 library.
Thanks,
Naga
Hi Naga,
it seems you don't have an open project. Webstorm doesn't display the Libraries entry when entering the settings from the initial Screen. So you have to open/create a project first. Then go to the settings dialog as described above.
thanks
Hi, can you tell me how to deploy a project from webstorm/IDEA to NWAS? I have a project which i cloned from a git repo, i want to do the coding in webstorm and deploy the project to my sap system.
Would be super if it is possible.
Hi German,
Apologies, just now saw your post... I think the only way now is to create the project in an Eclipse workspace, open that project in WebStorm and do the development there, and then use Eclipse to deploy to NW / NWDI
SDM is only way to deploy to SAP Java WAS
Well, not the only way 🙂 -- I never used SDM to deploy my SAPUI5 DC's to NetWeaver (CE, 7.3), but always used the built-in deploy functionality in NWDS
>>but always used the built-in deploy functionality in NWDS
which is what i mean by SDM, not the standalone Java Swing monster 😛
Hi, Robin!
Thank you for a great guide!
I still have 2 questions and in my opinion the answers should be in guide too:
1) How to integrate a project with desktop Apache Tomcat? If I start it in usual way using Eclipce, any code changes are not affected. I'm trying to set it up using existing guides but they are really hard and complicate.
2) Is there any tools in WebStorm to update changes to NetWeaver or for now I still have to use Eclipce / some transaction? GitHub will be set up at a distant date. Also I tried to use the WebStorm UI5 plugin and unfortunately it looks totally useless.
Hi Mikhail,
The current UI5 plugin indeed does not bring anything new, I don't use it at all.
Hi again.
1) The confuse is that Eclipce also runs Tomcat with
a) UI5 resourse folder as it's on NetWeaver. When I try to copy OpenUI5 resources into correct path, there are lots of errors anyway, also i can't use library on external domain because of project requirements
b) working proxy to NetWeaver so i can use my oData services
Accorded to 2), I would be glad to stay at this point, just don't know how to emulate a) and b)
Ah I see... never ever used Eclipse's built-in Apache Tomcat actually; the one time I developed a UI5 application suite on NetWeaver Java, we had dependencies to multiple Development Components (and Software Components) so to avoid trouble we just deployed our DC's to NetWeaver 'the normal way' and didn't bother to setup a XAMP or Eclipse/Apache
My recommendation:
If you use maven as your dependency / built tool: Use the tomcat or jetty maven plugin to run a webserver through maven
If you use npm as your dependency / built tool: use brower-sync as webserver. Integrate it as a devDependency into your package.json and add a "dev" script to your package.json's "script" section. Then run the webserver through `npm run dev`.
If you're working in a team you'll highly appreciate if your project setup is only tied towards a build tool and not additionally towards an IDE. Tying it only to your build tool means usually your team members can use any IDE, be it Eclipse, WebStorm, Atom or whatever the world comes up with tomorrow.
Unfortunately all of it sounds too hard for me. Anyway i found my own solution: now i'm using Apache as a desctop server (not Apache Tomcat) and .htaccess file configs to proxy some of web-queries:
RewriteEngine on
# for ui5 files:
RewriteRule ^/?resources/(.*) http://mywebpath/resources/$1 [L,P]
# for everything else, data services in my case:
RewriteRule ^/?proxy/(.*) http://mywebpath/$1 [L,P]
In order to develop I use node.js webserver with proxy: From ABAP to SAP/OpenUI5 - Setup webserver with proxy
.
Quick and simple. To deploy to SAP, I use report /UI5/UI5_REPOSITORY_LOAD. It's manual, but I only deploy when I want to QA.
Robin, great post!
Especially the code completion will be a huge benefit.
I will certainly try Webstorm. 🙂
I just tried some things with Webstorm.
Unfortunately the completion of xml views does not work:
I've set the XSD files as described in your post:
Do you have any idea why it doesn't work?
I'm using Webstorm 11.0.1
Not sure, as it certainly works for me (Cmd-Space on OS X):
Does the specified path to the XSD's still exist?
Hi Frank, it is not working because you have your "sap.m" uri attached to "sap.ui.core" xsd, and the "sap.ui.core" uri attached to the "sap.m" xsd in your settings, which is visible in your second image. Your "sap.ui.layout" is set up correctly though.
Hope that helps.
John
Well spotted! 😆
Thanks John, that was exactly it!
I guess it had been a long day and it was quite late 😉
Hi Robin,
Very cool!!!
To work with HCP, destination needs to be configured. Is there any way to configure destination in WebStorm?
Ke
Hi Ke Wang,
I think there is no real solution for this problem at the moment. I’ve heard that there is a solution somehow with hosting the project on a local Apache web server which is connected with the SAP CP. But I don’t know who.
In the last days, I’ve also struggled around with the problem. My current solution is a Nginx docker container. I’ve configured the Nginx web server to work as a reverse proxy and defined my API endpoints by hand. Here an example of the important config lines:
Best,
Florian
Thank you very much for this excellent post!
For those of you who do openUI5 there are also direct downloads for the .xsd files available here:
https://openui5beta.hana.ondemand.com/downloads/schemas/sap.ui.core.xsd
https://openui5beta.hana.ondemand.com/downloads/schemas/sap.m.xsd
All schema files are further part of the SDK download by now.
As described in xsd files for XML validation not found · Issue #7 · SAP/openui5 · GitHub
Best,
Michael
Hi Robin,
Thanks for the great article. I implemented this in WebStorm 2017.1.1 and working fine for js libraries but its not working for xml view. Kindly suggest where i could be wrong.
Thanks
Hi Muhammad,
you did only register sap.ui.core but you are using sap.ui.core.mvc. Unfortunately this is one of the limitations of the SAPUI5 schemas: It does not support using sub-packages…
Maybe I’ll be adding this in ui5-schemas one day but this looks like a heavy task…
BR
Chris
Hi Robin and all the other WebStorm users,
I've just released a small npm module that takes care of setting up the SAPUI5 xml schemas in WebStorm. You can use a specific SAPUI5 version and it even enhances the schemas a little bit (adds 'class', 'controllerName' as valid attributes for sap.ui.core.Control resp. sap.ui.core.mvc.View)
More Details:
BR
Chris
Hi Chris,
This is friggin' awesome! I always felt the way I described including the schema's was a bit cumbersome (and incomplete), this improves setting up a project significantly!
Thanks for putting this together!