Skip to Content
Author's profile photo Robin Van Het Hof

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.


Although SAP provides pretty useful Eclipse plugins for SAPUI5 / OpenUI5 development, it still doesn’t help you write better, efficient, correct code.


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):

Screen Shot 2014-09-21 at 12.41.32.png

Here you see the WebStorm IDE with a MyView.controller.js file in the active editor tab. In the onInit() method, a variable oView is defined, and as you can see, the code completion is fully aware that within the controller ‘this.getView()‘ is 1) a reference to the controller’s view, 2) that it’s of type sap.ui.core.mvc.View, and 3) provides access to the view’s methods and events. In addition, it shows the onInit() function and oView variable as ‘unused’, making it easy to find redundant code. No other IDE I know of does this so perfectly and blazingly fast as WebStorm!


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.


  1. Open WebStorm, and from the ‘Welcome to WebStorm’ screen, select ‘Configure > Preferences’.Screen Shot 2014-09-20 at 15.53.04.png

  2. From the ‘Template Project Settings’, select ‘JavaScript > Libraries’ and click the ‘Add…’ button.
  3. In the dialog, specify a name and version, and set ‘Visibility’ to ‘Global’.
  4. Click the‘+’ sign, and choose ‘Attach Files…
  5. Navigate to the folder you have downloaded and extracted the OpenUI5 SDK, and select the “./resources/sap-ui-core-all-dbg.js” file:
    Screen Shot 2014-09-20 at 15.56.43.png
    and click ‘OK’
  6. Repeat steps 4. and 5. for file “./resources/sap/m/library-all-dbg.js”.
  7. 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.


  1. First, we need to copy the XML definitions from our Eclipse UI5 plugin. Navigate to your Eclipse ./plugins folder.
  2. Locate both ‘com.sap.ui5.core_n.nn.n.jar’ and ‘com.sap.ui5.mobile_n.nn.n.jar’ files, and extract their content.
  3. 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.

    Screen Shot 2014-09-20 at 16.07.45.png
  4. In WebStorm, from the ‘Template Project Settings’, select ‘Schema’s and DTDs’.
  5. Under ‘External Schemas and DTDs’ click the ‘+’ button.
  6. 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
    Screen Shot 2014-09-20 at 16.12.55.png
  7. Do the same for sap.m.xsd, with URI ‘sap.m’.
  8. 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:
    Screen Shot 2014-09-20 at 16.15.01.png
  9. 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.


  1. 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
    Screen Shot 2014-09-20 at 16.19.41.png
  2. 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.xmlScreen Shot 2014-09-20 at 16.23.38.png
    As you can see in the above screenshot, our globally defined library ‘OpenUI5’ is linked as well.

  3. In the controller, lets write some UI5 specific code and see if code completion works:

    Screen Shot 2014-09-20 at 16.28.12.png
  4. Cool! As you see, all methods and properties come instantly available for code completion:
    Screen Shot 2014-09-20 at 16.30.05.png
    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!
  5. Now, lets create an XML view and see if code completion / XML validation works too:

    Screen Shot 2014-09-20 at 16.34.44.png
  6. 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):

Screen Shot 2014-09-20 at 16.39.49.png

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:

Screen Shot 2014-09-20 at 16.42.33.png

If I now choose my custom ‘UI5 Controller’, after you specify the File name and UI5 Namespace:

Screen Shot 2014-09-20 at 16.43.46.png

the new file is created using the specified properties:

Screen Shot 2014-09-20 at 16.44.23.png



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!

Assigned Tags

      97 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo John Patterson
      John Patterson

      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

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      Great video, thanks for sharing!

      Author's profile photo Former Member
      Former Member

      Outstanding post Robin - thanks for sharing!

      Cheers,

      G.

      Author's profile photo Kimmo Jokinen
      Kimmo Jokinen

      Thanks for a great post Robin. It's great to see examples of different tools used in UI5 development.

      Regards,

      Kimmo

      Author's profile photo Former Member
      Former Member

      Excellent. ..

      Author's profile photo Former Member
      Former Member

      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

      Screen Shot 2014-09-22 at 12.42.27.png

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      Hi Matthieu,

      Can you check whether your newly added 'OPENUI5' library is checked as 'Enabled' in Preferences > Project Settings > Javascript > Libraries?

      Screen Shot 2014-09-22 at 12.57.42.png

      Author's profile photo Former Member
      Former Member

      Yes, it is.

      Screen Shot 2014-09-22 at 13.01.43.png

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      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?

      Author's profile photo Former Member
      Former Member

      Yes, really strange.

      Webstorm 8.0.4

      Author's profile photo Former Member
      Former Member

      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:

      Screen Shot 2014-09-22 at 13.47.22.png

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      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?

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Stephen Kringas
      Stephen Kringas

      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

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      Hi Matthieu, I was wondering did you already got some feedback from JetBrains support?

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Nigel James
      Nigel James

      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

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      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! 😀

      Author's profile photo Alessandro Spadoni
      Alessandro Spadoni

      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 🙁

      Author's profile photo Former Member
      Former Member

      This is really excellent, programming javascript/SAPUI5 inside eclipse is like programming in notepad....we are 20 years back now....

      Author's profile photo Jose Adonai Rondon
      Jose Adonai Rondon

      eclipse???

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      I understand you don't like Eclipse? Me neither, hence this blog 😉

      Author's profile photo Former Member
      Former Member

      Hi,

      is there a way to run the App directly from WebStorm to chrome?

      Like we can do it in Eclipse.

      Screen Shot 2014-10-10 at 11.01.49.png

      Thx,

      Matt

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      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.

      Screen Shot 2014-10-10 at 11.18.12.png

      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

      Author's profile photo Mauricio Lauffer
      Mauricio Lauffer

      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  😆

      Author's profile photo Former Member
      Former Member

      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:

      • It is not opensource and requires a licence .
      • You need to go through some initial configuration to set it up.

      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:

      consoleDev.jpg

      Benefits :

      • You can see the changes simultaneously and can know what you are working will give result.
      • You are exposed to run time variables so if your code works here then it will work in the main program
      • You can find better ways of development as you can see all the exposed variables and available contents.

      Problems:

      • It's console !!! So you can not test every operations.
      • it takes more time in coding .

      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

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      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!

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Maximilian Lenkeit
      Maximilian Lenkeit

      You could use report /UI5/UI5_REPOSITORY_LOAD to do that. It should be self-explanatory.

      - Max

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Maximilian Lenkeit
      Maximilian Lenkeit

      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

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Srdjan Boskovic
      Srdjan Boskovic

      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

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Srdjan Boskovic
      Srdjan Boskovic

      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.

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      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

      Author's profile photo Srdjan Boskovic
      Srdjan Boskovic
      Author's profile photo Former Member
      Former Member

      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!

      Author's profile photo Former Member
      Former Member

      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 🙂

      Author's profile photo Srdjan Boskovic
      Srdjan Boskovic

      Than you John, that really helps and hope to be bundled with UI5 soon.

      Author's profile photo Andreas Kunz
      Andreas Kunz

      Please note the XSDs are starting to be delivered officially:

      https://twitter.com/OpenUI5/status/577497973845811200

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      Awesome!! 😀 Once official, I will update my blog

      Author's profile photo Former Member
      Former Member

      Finally the bugging paid off 😀

      Author's profile photo Wenjie He
      Wenjie He

      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)

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      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 😉

      Author's profile photo Joao Sousa
      Joao Sousa

      Awesome. Thanks a lot.

      Author's profile photo Joao Sousa
      Joao Sousa

      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?

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      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"

      Author's profile photo Joao Sousa
      Joao Sousa

      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 🙂 .

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      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)

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Joao Sousa
      Joao Sousa

      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?

      webstorm.PNG

      Author's profile photo Joao Sousa
      Joao Sousa

      Using OpenUI5 1.26.10, and WebStorm 10.0.1.

      Author's profile photo Former Member
      Former Member

      Same here, looks like there is something missing when using WebStorm 10.x.x

      Author's profile photo Joao Sousa
      Joao Sousa

      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.

      Author's profile photo Joao Sousa
      Joao Sousa

      Support for @alias implemented in 10.0.3 so we should get much improved support for OpenUI5.

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Joao Sousa
      Joao Sousa

      Upcoming. It's in the Issue Tracker, fixed in 10.0.3.

      Author's profile photo Joao Sousa
      Joao Sousa

      Seems to be a bug with Webstorm. Opened a ticket https://youtrack.jetbrains.com/issue/WEB-16364

      Author's profile photo Naga Prakash
      Naga Prakash

      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.

      /wp-content/uploads/2015/05/2015_05_12_15_45_57_702940.png

      Thanks,

      Naga

      Author's profile photo Graff Christian
      Graff Christian

      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.

      Author's profile photo Jose Adonai Rondon
      Jose Adonai Rondon

      thanks

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      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

      Author's profile photo Maksim Rashchynski
      Maksim Rashchynski

      SDM is only way to deploy to SAP Java WAS

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      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

      Author's profile photo Maksim Rashchynski
      Maksim Rashchynski

      >>but always used the built-in deploy functionality in NWDS

      which is what i mean by SDM, not the standalone Java Swing monster 😛

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      Hi Mikhail,

      1. Not entirely sure if I understood you correctly... You can start Apache just like normal (either run as a daemon or via startup.sh), and then move your project to your Apache Tomcat webapps folder (right-click your WebStorm project, click Refactor > Move and point to your 'webapps' folder)
      2. Currently there is no plugin to deploy to NetWeaver, HCP, GateWay or BSP repository. Depending on the project I'm working on, I either share my WebStorm project in an Eclipse workspace (and use the ABAP Team Repository plugin / HCP SDK for deployment to Gateway / HCP respectively), or use the UI5 report to upload to the BSP repository.
        The current UI5 plugin indeed does not bring anything new, I don't use it at all.
      Author's profile photo Former Member
      Former Member

      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)

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      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

      Author's profile photo Former Member
      Former Member

      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.

      Author's profile photo Former Member
      Former Member

      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]

      Author's profile photo Joao Sousa
      Joao Sousa

      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.

      Author's profile photo Frank Luzat
      Frank Luzat

      Robin, great post!

      Especially the code completion will be a huge benefit.

      I will certainly try Webstorm. 🙂

      Author's profile photo Frank Luzat
      Frank Luzat

      I just tried some things with Webstorm.

      Unfortunately the completion of xml views does not work:

      No Suggestions.png

      I've set the XSD files as described in your post:

      2015-11-28 01_45_00-Settings.png

      Do you have any idea why it doesn't work?

      I'm using Webstorm 11.0.1

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      Not sure, as it certainly works for me (Cmd-Space on OS X):

      Screen Shot 2015-11-30 at 09.36.23.png

      Does the specified path to the XSD's still exist?

      Author's profile photo Former Member
      Former Member

      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

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      Well spotted! 😆

      Author's profile photo Frank Luzat
      Frank Luzat

      Thanks John, that was exactly it!

      I guess it had been a long day and it was quite late 😉

      Author's profile photo Ke Wang
      Ke Wang

      Hi Robin,

      Very cool!!!

      To work with HCP, destination needs to be configured. Is there any way to configure destination in WebStorm?

      Ke

      Author's profile photo Former Member
      Former Member

      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:

      location /api/ {
          proxy_pass https://someaccountP00000.hanatrial.ondemand.com/api/;
      }
      
      location /resources/ {
          proxy_pass https://openui5.hana.ondemand.com/resources/;
      }

       

      Best,

      Florian

      Author's profile photo Michael Dell
      Michael Dell

      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

      Author's profile photo Muhammad Raheel
      Muhammad Raheel

      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

      Author's profile photo Christian Schuff
      Christian Schuff

      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

      Author's profile photo Christian Schuff
      Christian Schuff

      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

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof
      Blog Post Author

      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!