Skip to Content
Author's profile photo Christian Schuff

UI5ers Buzz #18: Useful Little Helpers — Faster SAPUI5 Development in WebStorm

Fortunately the dark days of SAPUI5 Development lie way behind us and we have reasonable tool support today. Everybody can get going quickly using SAP Web IDE.

However many choose alternative Editors or IDEs. Today we will be looking into the ‘why’ and ‘how’ to do that. We will concentrate on WebStorm and introduce some useful helpers to improve your SAPUI5 development experience in this great IDE.

SAP Web IDE – To Use Or Not To Use

SAP Web IDE is certainly a huge step forward coming from SAPUI5 Tools for Eclipse. It let’s you start SAPUI5 Development in no time with zero setup or configuration effort. You can even write plugins for it, run it locally and what not.

But most importantly it comes with a whole lot of cool features. Think of app templates, WYSIWYG editing of views, bindings and extensions, mock data generation, test frames, eslint, grunt, deployment and last not least code completion.

And therefore I do use SAP Web IDE for certain tasks. But – just like many fellow devs – for the real development work I very prefer a different solution. Because here are some problems I discovered with SAP Web IDE:

  • limited editor features
  • limited code completion
  • no code navigation
  • limited freedom to use the tools I want
  • limited control of the environment
  • performance – well, the lack of it…
  • session timeouts

Why I Prefer WebStorm

A popular – though not free – alternative and also my IDE of choice is WebStorm. It is an awesome editor, has great JavaScript editing features and – probably the biggest advantage compared to editors like VSCode or Sublime – comes with a ton of integrated languages, frameworks and tools: git, ESLint, TypeScript, LESS, Node.js, Karma, mocha you name it – it is all there and ready to use.

Downside: It takes about half a day to manually configure it for SAPUI5 development!

Just kidding. The great and active SAPUI5 community has you covered with some nice little helpers that make SAPUI5 development in WebStorm quite convenient. And they are all free and open-source (contributions welcome)!

 DANGER: Node.js needed from here on

WebStorm on SAPUI5 Community Steroids

Probably the most essential thing to have is code completion. So let’s get that configured quickly.

JavaScript Code Completion

Here is how to get JS Code Completion with UI5 codecompletion (thanks to Volker Buzek).

$ npm install -g ui5-codecompletion
$ ui5-codecompletion install

Unfortunately WebStorm is not supporting SAPUI5 AMD and particularly not sap.ui.define (it does support require.js and define though…). Therefore code completion and navigation is inaccurate. You can improve that behavior by using JSDoc @type which admittedly is awkward and only works for vars not for function parameters D:

XMLView and XMLFragment Code Completion

Configuring XML Code Completion with UI5 Schemas (that’s the little
thingy I wrote) is just as easy.

$ npm install -g ui5-schemas
$ ui5-schemas

File Templates

Another nice feature of WebStorm is custom File TemplatesHans-Peter Seitz has written a good one on that topic. There are also Live Templates which are definitely worth looking at.

For more OpenUI5 related community projects visit

Previous Post: UI5ers Buzz #17



Christian is a SAPUI5 early-adopter and SAP Fiori Wave1 developer. As a freelancer, technology consultant and trainer he supports various customers and projects. His special focus is development infrastructure, frontend architecture, continuous integration and full-stack JavaScript. Topics he constantly tries to apply to the SAPUI5 world.
Christian is neither associated nor paid by JetBrains 😉

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Javier Andrés Cáceres Moreno
      Javier Andrés Cáceres Moreno

      Good tip

      Author's profile photo Volker Buzek
      Volker Buzek

      you can work around the missing sap.ui.define support by adding @lends at the relevant parts, e.g.

      return Control.extend("your.control", /** @lends your.control.prototype */ { ... }

      Then at least navigation between custom controllers/controls is possible.


      Author's profile photo Christian Schuff
      Christian Schuff
      Blog Post Author

      Thanks for the tip. Will try!

      Author's profile photo Pascal Wasem
      Pascal Wasem

      Nice post, thanks! I will definitely try this out!

      Is there any module or configuration that lets me beautify the code exact the same way as in SAP Web IDE?

      Author's profile photo Christian Schuff
      Christian Schuff
      Blog Post Author

      Code > Reformat Code (ALT+CMD+L on OS X)

      Code Style Settings are here: Settings > Editor > Code Style > JavaScript

      Author's profile photo Pascal Wasem
      Pascal Wasem

      Yes, but WebIDE has its own "beautifier".

      I was wondering if it is possible to have the EXACT SAME formatting in WebStorm as in WebIDE?


      Author's profile photo Christian Schuff
      Christian Schuff
      Blog Post Author

      Would be easy to configure or export/import if SAP would provide an open ecosystem...

      Author's profile photo Christian Schuff
      Christian Schuff
      Blog Post Author

      Finally found the Beautifier Settings… It is 8 (in words: eight) settings ? Shouldn’t be that hard to transfer.