How SAP Web IDE Supports Development of SAP Fiori Reusable Libraries

A key element in application development is creating and sharing reusable components, to ensure consistency and quality, and to make the development easier and faster.

SAPUI5 provides the option to build your own control and other reusable components but SAP Web IDE was lacking the support in this important capability.

Not anymore!

With our latest release, you can create, build, deploy and reuse SAP Fiori/UI5 libraries/controls.

Here’s how:

Create a new SAP Fiori Library

The best way to create something new in SAP Web IDE is using our rich collection of templates.

We now added a template for creating an SAP Fiori Library.

Click on File > New > Project from Template.

In the Category dropdown select SAP Fiori Library.

Select the SAP Fiori Library template and click Next.

Provide a Title and make sure the Add default control checkbox remains checked. This will create a sample control in your new library.

Click Finish.

Review the generated content in your workspace. You can see the library was created with an src folder that contains the sample control and future code, and a test folder that contains an existing QUnit test and future automated tests.

Add an SAPUI5 Control

You can easily add a new SAPUI5 control to your library, or add one from an existing library.

Right-click the library and choose New > Control or New > Control from Existing Library.

The wizard will guide you through the needed steps and a new control will be added to your controls folder.

Add Reference to Library

You can easily add a reference to a library in your SAPUI5 app. The library can reside in your workspace, in your SAP Cloud Platform (Neo) account, or in your SAPUI5 ABAP repository.

Right-click your existing SAPUI5 app and choose Project > Add Reference to Library.

Select the repository containing the desired library, select the checkbox of the library and click Add.

Then your app is updated with a dependency to the library (in its manifest.json file), and this allows you to use any control included in it.

Use a Control from the Library

For the sake of the example, I have created a new Library from a template and it contains the sample control.

Then in my SAPUI5 app, in my XML view, I have added the control from the library:

Run the App

If you are referring to already deployed libraries there are no further steps.

However if you want to run the libraries that are located in your workspace, do the following:

Enter the Run Configurations of your app and create a new one.

In the URL Components tab, add the sap-ui-xx-lesssupport parameter and set its value to true.

In the Advanced Settings tab, under the Application Resources section, select the Use my workspace first checkbox.

Save and run your app.

This is how my app with the sample control looks like:

Pretty cool right?

We still have a way to go, but hopefully these capabilities will be beneficial for you 🙂

For more information, see the documentation.