Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
Showing results for 
Search instead for 
Did you mean: 
Product and Topic Expert
Product and Topic Expert
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

The first step is to install the extension: get the 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).

Ok, time to clone the template repo:

git clone

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

"bracketsUi5.apiUrl": "",
"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.

Labels in this area