Skip to Content


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!

To report this post you need to login first.

94 Comments

You must be Logged on to comment or reply to a post.

  1. Matthieu Pelatan

    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

    (0) 
        1. Robin van het Hof 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?

          (0) 
          1. Matthieu Pelatan

            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

            (0) 
            1. Robin van het Hof 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?

              (0) 
              1. Matthieu Pelatan

                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

                (0) 
                1. 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

                  (0) 
                2. Robin van het Hof 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

                  (0) 
                      1. Matthieu Pelatan

                        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

                        (0) 
  2. 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

    (0) 
    1. Robin van het Hof 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

      (0) 
  3. Tobias Leißner

    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

    (0) 
    1. Robin van het Hof 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! πŸ˜€

      (0) 
      1. 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 πŸ™

        (0) 
    1. Robin van het Hof 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

      (0) 
  4. Ajay Nayak

    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

    (0) 
    1. Robin van het Hof 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

      (0) 
  5. Christian Theilemann

    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

    (0) 
    1. Robin van het Hof 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!

      (0) 
    2. Michael Klopf

      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

      (0) 
        1. Michael Klopf

          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

          (0) 
      1. Christian Theilemann

        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

        (0) 
        1. Michael Klopf

          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

          (0) 
          1. Christian Theilemann

            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

            (0) 
          2. 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

            (0) 
  6. Ajay Nayak

    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

    (0) 
  7. 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

    (0) 
    1. Christian Theilemann

      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.

      (0) 
      1. 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.

        (0) 
        1. Robin van het Hof 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

          (0) 
  8. 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)

    (0) 
    1. Robin van het Hof 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 πŸ˜‰

      (0) 
    1. 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?

      (0) 
      1. Robin van het Hof 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”

        (0) 
        1. 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 πŸ™‚ .

          (0) 
      2. Christian Theilemann

        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.

        (0) 
  9. 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

    (0) 
      1. 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.

        (0) 
          1. Tobias Leißner

            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

            (0) 
  10. 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

    (0) 
    1. Christian Graff

      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.

      (0) 
  11. guest 201232

    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.

    (0) 
    1. Robin van het Hof 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

      (0) 
        1. Robin van het Hof 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

          (0) 
  12. Mikhail Ponomarev

    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.

    (0) 
    1. Robin van het Hof 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.
      (0) 
      1. Mikhail Ponomarev

        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)

        (0) 
        1. Robin van het Hof 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

          (0) 
        2. Christian Theilemann

          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.

          (0) 
          1. Mikhail Ponomarev

            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]

            (1) 
  13. 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

    (0) 
    1. John Murray

      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

      (0) 
  14. 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

    (1) 
    1. Florian Rusch

      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

      (0) 
  15. 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

    (0) 
  16. 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

    (0) 

Leave a Reply