In this blog, I would like to provide a step-by-step procedure to Create a Custom Fiori Library (Reusable Component) using Web IDE and how to link this Reusable Component to an existing project (TheConsumingApp) in your workspace.
Reusable Component (Custom Fiori Library) – is a Reusable Component which performs some specific functionality that can be used in different application either to display data or perform any task related to parent application.
Creating a Custom Fiori Library (Reusable Component)
- Step 1:
- Right click on Workspace in WebIDE.
- Click on New.
- Project from Template.
- Step 2:
- Select the category as “SAP Fiori Library”.
- Select the tile “SAP Fiori Library”.
- Click on “Next” button.
- Step 3: Give a project name and click on “Next”.
- Step 4:
- Enter additional details.
- Check “Add default control” checkbox.
- Click finish.
- Step 5: Your Fiori Library is now created. You should be able to see a project in your workspace as shown,
Linking of Custom Fiori Library (Reusable Component) to an existing project (TheConsumingApp) – “Add Reference to Library”.
In this section, we will add the reference of the reusable component(created above) into an existing application where we can use it.
Note: Steps to consume the reusable component within your application will be explained in next blog.
- An existing application (The Consuming application).
- A Fiori Library(How to create – please follow the above section).
- Step 1: Add Reference to Library in workspace.
- Right click on the Consuming application.
- Add reference to library.
- Step 2: Choose Library
- Select Repository as ‘Workspace’.
- Select Library you want to use.
- Click on ‘OK’ button.
After clicking “OK”, blocks of code are added to following files of your consuming app.
Add the dependency of fiori library in pom.xml
- artifactId – Name of your project.
- version – SAP UI5 version.
<dependencies> <dependency> <groupId>XXX.XXX.XXXXX</groupId> <artifactId>PROJECTNAME</artifactId> <version>X.XX.XX</version> </dependency> </dependencies>
- Step 3: Select the Consuming app.
- Right Click.
- Run Configurations.
- Select existing configuration or create a new one.
- Click Advanced Settings Tab.
- Select checkbox “use my workspace first”.
- Click Save and Run.
Now your Reusable Component is ready and linked with your Consuming Application.