Skip to Content
Technical Articles

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

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.

15 Comments
You must be Logged on to comment or reply to a post.
  • Great work. The quick edits are an excellent feature of Brackets.

    Do you think this could work with sapui5 as in your title? I can see in the details that this extension requires the ui5-tooling to be installed and this only works with openui5!

    • Hi, thanks for your comment!

      ui5-tooling is not required! I’m using it just for convenience.

      To work with SAPUI5 just use the path .brackets.json file:

      ​"bracketsUi5.apiUrl": "https://sapui5.hana.ondemand.com/1.60.15

       

       

  • Hi,

    using Ubuntu 19.04., I get odd errors while trying to start the extension in Brackets 1.4.4 (installed using zip URL). It complains about missing files, all of which are there and not empty.

    Tried reloading (F5)/rebooting/re-installing without other extensions/Brackets 1.1.3/.. didn't help.

    I'd appreciate any help on the issue!

    Kind regards,

    Florian

    /
  • /
    • Hi,

      this errors on the left comes from built-in ESLint checks - you have to add "sap" globally in the ESLint configuration for the project.

      1. Install ESLint locally (npm install eslint)

      2. Create ESLint config (for example .eslintrc file, add "sap" as global). More - https://eslint.org/docs/user-guide/configuring

       

      Best Regards,

      Jacek

    • Andre Julius also one more thing: you set version 1.75. Supported versions are here:

      https://github.com/wozjac/brackets-ui5/wiki/OpenUI5-SAPUI5-library-versions

      For others the extension will not work - newer versions don't have schemas for XML views published and I did not test them.

      Best Regards,

      Jacek

      • Hi Jacek Wozniczak ,

        Thanks for taking the time to reply a noob like myself. I've followed your direction with the help of a friend, since I'm not familiar with ESLint. Now I am stucked with the error as below. I've installed ESLint in the project folder though. Not sure what else went wrong. Can you kindly advise?

         

        Best Regards

         

        Andre Julius

        /
        • Hi Andre Julius

          I forgot about version - please remove ESLint and install this one:

          npm install eslint@^5.16.0

          Brackets has built in Node, older than the current, which in turn is required for the latest ESLint.

           

          Best Regards,

          Jacek

          • Hi Jacek Wozniczak

             

            Thanks for the hints...it's working fine now....fabulous.

            As said I am actually very new to brackets and also to UI5, as previously I was doing plain ABAP. I wonder if there is a feature to immediately link SAP web ide (cloud version) and brackets. Would you happen to know?

             

            Best Regards

             

            Andre Julius