Skip to Content
Technical Articles

SAPUI5 in Brackets editor

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

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

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

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

One useful feature is when I get the control using byId method – the extension will try to find it and propose hints too. So getting the search field from Master view and searching for the needed attach… method:

Instead of using API reference panel I can also bring Quick Docs in the current editor – ctrl + k on the searchField variable:

If the variable type is not recognized – it’s for example initialized by a method call, then if I want to have hints, I can put a special comment in the line with the type: ui5: sap.m.Text:

var control = getTextContrlol() //ui5: sap.m.Text

And the hints for control will be available.

[yes, recognizing the type in Javascript is not an easy task….altough working on this feature and learning about AST etc. was quite educational]

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.

And that’s all. The extension is “beta” as creating such extension alone is quite complicated.

If it’s not working as sweet as for me when I used it for making these examples, I can always say “it’s beta”.

Or

OR EVEN

 

PS. And I really finished AUEA app.

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