SAPUI5 in Brackets editor

Last update: 20/06/2020

This post shows how to work easier with UI5 in Brackets editor using my extension “Brackets UI5”.

I like Brackets and whenever I don’t need SAP Web IDE integration features, I use it for my UI5 development. I won’t be writing here what are pros and cons – IDE you’re using is often like a good old tool. There are others, maybe newer, but the one you’ve chosen suits you best and your daily work with it is smooth. So, since I was using Brackets a lot, I decided to tweak it a little to make my work even smoother.

Below three videos presents some of the extension’s features:

In the rest of the article I show some Brackets features and what my extension provides for UI5-specific development. I’ll be creating Another Useless Example App, called AUEA, connected to the Northwind service https://services.odata.org/V2/Northwind/Northwind.svc

The first step is to install the extension: get the wozjac.ui5.zip file from “Releases” and drag it in Extension Manager. It will show information, that it failed to start – just hit F5 to reload [Brackets extensions installation how-to].

As an example I will be using master-detail template SAP UI5 folks has prepared, so firstly ui5-tooling has to be installed (but it’s not required for the extension to work if you work with own code).

• Advertisement – I’m using my other extension which provides tabbed command line inside Brackets – https://github.com/wozjac/brackets-commander).

Ok, time to clone the template repo:

git clone https://github.com/SAP/openui5-masterdetail-app

Rename the folder to my lovely acronym auea, then npm install. Now I want to set up UI5 extension – I want to use OpenUI library version with online API reference published, so I’m creating project specific preferences in the root folder and putting options there [preferences explained]:

.brackets.json

{
  "bracketsUi5.apiUrl": "https://openui5.hana.ondemand.com/1.60.15",
  "bracketsUi5.metadataPath": "webapp/localService/metadata.xml",
  "bracketsUi5.mockDataDir": "webapp/localService/mockData"
}

Apart setting the library version, I set the paths for the local service xml file and mock data destination folder (more about this later).

Next, to avoid Brackets built-in ESLint errors like “sap is not defined”, install ESLint first (npm install eslint@^5.16.0), then add ESLint configuration in the project with your desired settings and sap in the *globals* section (and other used globally UI5 like QUnit, assert etc.

PLEASE NOTE: ESLint 5.16.0 version is required – a newer version will not work, as Brackets uses own Node in an older version than the current, which – in turn – is required for the latest ESLint.

Now some files need to be edited. For finding & opening files Brackets Quick Open is quite convenient – ctrl + shift + o and start typing, then enter.

Starting with manifest.json – set OData service URL, set the library version in index.html to match with the one I configured for the extension.

Time to first check: ui5 serve –o /index.html and see it’s running – with errors, of course, as OData entities are not matching with those configured in the master-detail template (remember to disable CORS check).

Moving on, I want adjust some files. Here’s an overview how to get things easier:

Adjusting Master.view.xml. I want to display OrderID on the list. Elements and attributes hints are very helpful here:

I need a reminder on aggregations available in ObjectListItem. I can open API reference panel (ctrl + 2 or using the icon):

then type objectli – which gives me the whole documentation:

Typing objectli ?a will show me aggregations. Similar with methods, properties, events [search documentation]

I see that ObjectListItem has press action method associated. Hitting ctrl + e on “.onSelectionChange “ (Quick Edit) will open the associated controller directly in the xml view, so no need to bring the whole controller file…:

…but if I want to go to the source, then ctrl + j (Quick Jump) will do the work and open the file.

On the SearchField I see a tooltip with a text from the i18n bundle – again I can use ctrl + e to bring it on directly in the current editor:

If I want a new entry, then providing a new key followed with ctrl + e will do the work:

Jumping to whole i18n file (ctrl + j) also works:

Hints from the bundle file works too:

Going to Master.controller.js, let’s say I want to add dynamically Text control. First I search for the control in API panel, then I can use “Insert (define)” to insert it into define statement.

BTW, when using the API panel:

• Left click on the object name or one if its member – inserts the name into current cursor position
• Right click – will open its online documentation in your default browser

Alternatively, adding to the define statement can be done using hints:

After creating my control with “new” I have access to code hints:

Hitting ctrl + 3 on addedText variable will open sap.m.Text in API reference panel:

Alternatively Quick Docs can be used – this time ctrl + k on the addedText variable:

In XML views Quick Docs are also available:

If I want to insert a fragment of code I use frequently, I can use configurable snippets.

And last but not least – if I want to use some custom mock data and prepare them as I want, I can first generate some. I saved metadata.xml from the service I use into localService folder, so now:

And in mockData folder I get files with random data.

There is more stuff packed into the extension – please check the README file to get the full manual.

PS. And I really finished AUEA app.