Skip to Content

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:
    1. Right click on Workspace in WebIDE.
    2. Click on New.
    3. Project from Template.



  • Step 2:
    1. Select the category as “SAP Fiori Library”.
    2. Select the tile “SAP Fiori Library”.
    3. Click on “Next” button.



  • Step 3: Give a project name and click on “Next”.



  • Step 4:
    1. Enter additional details.
    2. Check “Add default control” checkbox.
    3. 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.
    1. Right click on the Consuming application.
    2. Add reference to library.




  • Step 2: Choose Library
    1. Select Repository as ‘Workspace’.
    2. Select Library you want to use.
    3. Click on ‘OK’ button.



After clicking “OK”, blocks of code are added to following files of your consuming app.

  • neo-app.json
  • .project.json
  • manifest.json

Add the dependency of fiori library in pom.xml

  • artifactId – Name of your project.
  • version – SAP UI5 version.


  • Step 3: Select the Consuming app.
    1. Right Click.
    2. Run.
    3. Run Configurations.
    4. Select existing configuration or create a new one.
    5. Click Advanced Settings Tab.
    6. Select checkbox “use my workspace first”.
    7. Click Save and Run.







Now your Reusable Component is ready and linked with your Consuming Application.






To report this post you need to login first.


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

  1. Seungchul Yang

    Thank you for your sharing.

    But I can’t find a ‘SAP Fiori Library’ template on my SAP Web IDE(trial account)

    Is it available only for paid account?

    1. Shubham Bathla Post author



      I could also see that its not available for trial account.


      As an alternate, you can create a normal project and modify the files and structure of project as shown in the blog.




  2. Vijay Vegesana

    Hi Shubham,

    SAP Fiori Library template is not available and we could not see both in trial and licensed version as well.

    how you enabled this ?




    1. Shubham Bathla Post author

      Hi Vijay,


      We have not explicitly enabled anything for this.

      Please check with the support team.


      Meanwhile as an alternate, you can create a normal project and modify the files and structure of project as shown in the blog.




  3. Parichay Patra

    Hello Shubham,

    How did you get “SAP Fiori Library” in templates? Did you install any additional plugin or any specific config in HCP? I do not find it in my trial and licensed WebIde..




Leave a Reply