How to create a Custom Template in SAP Web IDE with OData Integration – Part 1

Every time we create our projects, they contain the same UI controls.
That became a repetitive work for us.
So, putting all this work into a template, makes it useful, because this basic structure will be created automatically by our own template!
And from there we can start our work, based on the project requirement.

In this series of 5 blogs, I explain in step by step how to create a feature and add OData integration (using the Northwind service) to the newly created template and add routing between two views. Also add category wise segmentation of products with tab feature with each product in a tile. And also embedded ListBase’s growing feature with our template.

The objectives of this series of blogs are:

• Show how to create your own feature for your own purpose, with the help of SAP Web IDE.
• Get familiar with the procedure (step by step) of how to extend an existing template of SAP Web IDE.
• Get familiar with the procedure to integrate OData calls in this newly created template.
• Get familiar with the specific configuration for a wizard selection.

Let’s start!

Create an SAP Web IDE Feature Project

In Web IDE, go to: File -> New -> Project from Template. And then select the template “SAP Web IDE Feature“.

Provide the required information (it might be different in your case, you can provide any name as you wish):

Provide a name to the feature & plugin:

• Feature Name : templateui5cartfeature
• Feature Description : Template UI5 CART Feature
• Plugin Name : templateui5cartplugin
• Plugin Description : Template UI5 CART Plugin

Note: Every feature should have a plugin, and a feature can contain multiple plugins.

Adding a Template to the Plugin:

Right click on the plugin -> New ->  Template from Existing Template.

And fill the required details:

We can use an existing Category, but here we should create a new Category:

After pressing the Next button, we have to select an existing SAP template, here we select “SAP UI5 Application” template.

Now press Next and Finish. After that we will get our project structure as below:

Now our template project structure is ready. As we can see, a few essential files are missing.

In the next part of my blog we will implement these files and continue with the feature creation.