This blog post is part 5 of a series of blogs on how to create a Custom Template in SAP Web IDE with OData integration.
Before reading this blog please make sure that you have read, understood and implemented part 4 of this series where I have shown how to create a feature project and add plugin template to the application.
This step is mandatory for using the new feature, consisting of the new plugin, included in SAP Web IDE. We need to deploy our feature to SAP Cloud Platform.
This operation will also take care of automatically activating the new plugin.
Right-click the plugin repository folder and select Deploy –> Deploy to SAP Cloud Platform
Select Deploy as a new application and click Deploy.
Our plugin repository has been successfully deployed to SAP Cloud Platform.
Click on Open the application’s page in the SAP Cloud Platform cockpit.
If you check the status of your application it should be started.
Look at the Application URL on the same page and write down or copy it to the clipboard. It will be used in the next steps.
In order for the system to recognize the new feature, we need to create a new destination in the SAP Cloud Platform cockpit. This is a special destination that points to the application URL of our feature application on SAP Cloud Platform.
In the cockpit, go to Destinations and click on New Destination.
Enter the following values to create the new destination:
Also add the following properties:
Save the destination.
In a similar manner, we need to add a destination for the Northwind OData service, which we will consume later.
See below:
Let’s activate the new feature. This is made directly from SAP Web IDE.
Refresh SAP Web IDE.
We have successfully activated our first SAP Web IDE feature!
Now we are ready to create a new project using our custom template:
After template selection, we will get our new template as below:
Now provide project name & namespace and press Next.
In the Data Connection step, select Service URL on the left, and select the Northwind destination you have created (see below):
In the Template Customization step, we have to provide below information.
Press Next and Finish.
Open the generated project, select the Component.js and run the project.
You should get the below output, which retrieves data from the Northwind OData service with our custom Cart template.
Now if we press Next button, it would fetch next 6 data from the OData service.
If we change the tab then category wise product tile gets loaded.
You can press any CART, it would navigate to the second page as below.
If you wish to go back to the first view, press the navigation back button.
Prerequisites
Before reading this blog please make sure that you have read, understood and implemented part 4 of this series where I have shown how to create a feature project and add plugin template to the application.
Deploy the project to SAP Cloud Platform
This step is mandatory for using the new feature, consisting of the new plugin, included in SAP Web IDE. We need to deploy our feature to SAP Cloud Platform.
This operation will also take care of automatically activating the new plugin.
Right-click the plugin repository folder and select Deploy –> Deploy to SAP Cloud Platform
Select Deploy as a new application and click Deploy.
Our plugin repository has been successfully deployed to SAP Cloud Platform.
Click on Open the application’s page in the SAP Cloud Platform cockpit.
If you check the status of your application it should be started.
Look at the Application URL on the same page and write down or copy it to the clipboard. It will be used in the next steps.
Create a destination in the SAP Cloud Platform cockpit for the new feature
In order for the system to recognize the new feature, we need to create a new destination in the SAP Cloud Platform cockpit. This is a special destination that points to the application URL of our feature application on SAP Cloud Platform.
In the cockpit, go to Destinations and click on New Destination.
Enter the following values to create the new destination:
| Parameter | Value |
|---|---|
| Name | sapui5cartdestination |
| Type | HTTP |
| Description | SAP UI5 CART Destination |
| URL | <the application URL copied in the clipboard in the previous step> |
| Proxy Type | Internet |
| Authentication | AppToAppSSO |
Also add the following properties:
| Property | Value |
|---|---|
| WebIDEEnabled | true |
| WebIDEUsage | feature |
Save the destination.
In a similar manner, we need to add a destination for the Northwind OData service, which we will consume later.
See below:
Activate the new feature in SAP Web IDE
Let’s activate the new feature. This is made directly from SAP Web IDE.
- Open SAP Web IDE or refresh it if you have it already open.
- Click on the Settings button on the left side toolbar.
- Select Plugins.
- Choose the Features repository and enable the feature we have created
- Click Save.
Refresh SAP Web IDE.
We have successfully activated our first SAP Web IDE feature!
Execute the new template
Now we are ready to create a new project using our custom template:
- In SAP Web IDE, select File -> New – > Project From Template
- Select the newly created template from the drop down.
After template selection, we will get our new template as below:
Now provide project name & namespace and press Next.
In the Data Connection step, select Service URL on the left, and select the Northwind destination you have created (see below):
In the Template Customization step, we have to provide below information.
- First View Name : First (you can provide any name)
- Second View Name : Second (you can provide any name)
- Category : Select Category from Dropdown
- Category Title : Select Category Name from Dropdown
- Entities : Product (you can choose any other as well)
- Object Title : ProductName (you can choose any unique name from the list as well)
- Object Numeric Attribute : Any Numeric Field that you wish to provide.
- Object collection ID : ProductID
- App Title : SAP UI5 CART APP
- App Description : SAP UI5 CART
- Data Source Name : dataModel
- Growing Threshold : 6
- Growing Trigger Text : Next
Press Next and Finish.
Open the generated project, select the Component.js and run the project.
You should get the below output, which retrieves data from the Northwind OData service with our custom Cart template.
Now if we press Next button, it would fetch next 6 data from the OData service.
If we change the tab then category wise product tile gets loaded.
You can press any CART, it would navigate to the second page as below.
If you wish to go back to the first view, press the navigation back button.
- SAP Managed Tags:
