While self-studying UI5 development I tried both Eclipse and SAP Web IDE and I must admit neither worked for me as I expected. Not that I would list exact points of each I was completely dissatisfied with; just an overall – probably subconscious – perception. So from time to time I read a review or two of one or another Web development tool. After reading a great post Configuring JetBrains WebStorm for UI5 development of Robin van het Hof I decided to give it a try. And so far I must say it hit the spot.

Robin states in his blog that you have to retrieve two XSD files (sap.m.xsd and sap.ui.core.xsd) from Eclipse UI5 tools installation as they are not present in OpenUI5 SDK. And I did as he told. And then I discovered that actually both files are provided in OpenUI5 SDK archive. They are located in downloads\schemas folder (at least I see them in 1.34.8 version of the SDK). So, if you decided to start with WebStorm from the beginning you don’t need to install Eclipse and its tools for SAPUI5.

It turns out however that not everything is flawless. When implementing some tutorials from OpenUI5 guide in WebStorm you can notice that XML view files sometimes show red marks or report errors which should not be present especially when you copy and paste file contents from the tutorial.

For example, WebStorm reports an error when you mention namespace sap.ui.core.mvc in XML view file. Then you can see red marks under class attribute when implementing exercise Margins and Paddings. The same thing occurs with FragmentDefinition tag when doing tutorial step Dialogs and Fragments. Yes, the code works, but these flaws deprive you of a convenient and helpful code completion feature when designing XML views. Not to tell that superfluous error marks look annoying.

Google only helped to locate the problem and it turned out that WebStorm just cannot find sufficient validation rules in those two XSD files. Actually XSD file contains an XML schema; that is a formal description of a particular XML file format: a set of allowed tags, its attributes, attribute values, etc. Apparently each XSD file is a kind of XML. More details on XSD you can find here.

In our case two XSD files provided with OpenUI5 SDK just tell the WebStorm how to validate XML view files. Unfortunately Google did not helped much in the problem solution and so I decided to dive into XSD and fix it myself.

How to fix the sap.ui.core.mvc namespace

After configuring WebStorm as described in Robin’s post I started implementing tutorials; and when entering XML view I noticed that namespace sap.ui.core.mvc is marked with red. No auto-completion available for View attributes (I wanted to enter controllerName value).

According to API reference a number of View types are present in the name space sap.ui.core.mvc:

• HTMLView – A view defined/constructed by declarative HTML.
• JSONView – A View defined using JSON.
• JSView – A View defined/constructed by JavaScript code.
• TemplateView – A view defined in a template.
• View – A base class for Views.
• XMLView – A View defined using (P)XML and HTML markup.

However there is no specific XSD file and all the views are present in sap.ui.core.xsd file. As we can see in sap.ui.core.xsd each of elements corresponding to views reference other Complex types in sap.ui.core.xsd. As in the example below the element JSView references the complex type n0:_JSViewType. And also we can see that the whole element description is quite short: just a reference to the complex type and annotation.

So the plan would be as follows:

1. Create a separate file for sap.ui.core.mvc
2. Make a reference to the sap.ui.core XSD file
3. Copy the necessary views declaration

The resulting file looks as below (the full file is attached):

Note that we have a namespace declaration in the header: xmlns:n0=”sap.ui.core”. And then we have an import statement to make the parser aware where to find declarations from sap.ui.core name space.

Missing attributes

It appears that original XSD file for sap.ui.core name space does not contain some view attributes, hence WebStorm can not provide a correct auto-completion options when editing XML views. I noticed at least two attributes: controllerName and class.

The controllerName attribute belongs to View and its descendants and all original attributes of base element for views are linked to the _ViewType complex type in  sap.ui.core.xsd file. I added controllerName to the _ViewType complex type:

The class attribute (which represents a combination of CSS classes – margin, colors, etc) is a part ofControl and its descendants. So the right place for it is the complex type _ControlType:

To make things more comfortable I also made a specific type for the class attribute. Now WebStorm suggest a list of all margin classes referenced in SAP documentation. However there is a drawback: The type allows only a single value while in reality the attribute accepts a sequence of class names separated by space. And currently WebStorm marks such values with red. Probably some XSD experts could come up with an alternative solution.

FragmentDefinition

WebStorm also marks tag FragmentDefinition with red and apparently there is no such element in any of the original XSD files provided. This tag represents a generic place holder for any type of a Fragment. And the particular type of fragment you select in the code of the corresponding controller (at least so I understand 🙂 ). So it appears that we should add an element FragmentDefinition to the XML schema (our XSD file) which should not extend any other type; and at the same time it should allow the same set of sub-tags as a View. The following definition does the trick:

Bottom line

Tweaking of XSD files is not so scary as it looked at the start. WebStorm now provides the correct auto-completion list. It reports errors with a multi value class attribute but for now I can live with it. I attached both tweaked files to the post. Just note that you should better change their extension to .xsd as SCN does not allow attaching of XSD files.