Create a service in the SAP Web IDE
In the previous blogs I’ve explained how to create commands and views in the SAP Web IDE:
SAP Web IDE Feature Overview: https://blogs.sap.com/2017/07/17/create-your-own-sap-web-ide-feature/
SAP Web IDE Feature Command:https://blogs.sap.com/2017/07/17/create-a-command-in-your-sap-web-ide-feature/
SAP Web IDE Feature View: https://blogs.sap.com/2017/07/17/create-a-view-in-your-sap-web-ide-feature/
If your feature contains any logic, then it should not be placed in your command or view directly but in a more reusable place. In a plugin we can create services, this is the place where we have to add our reusable logic. These service can be consumed from view and commands. You could see it as the core (or brain) of the feature.
Example
As an example, in my feature “Export to Plunker” I created three services:
- Message.js
- This service is used to show a notification that the plunk is generated and will open a new window
- PLunker.js
- This service will handle all the communication with Plunker
- Project.js
- In this service I collect all the files of the selected plugin
You can find the full code of this project on github:
https://github.com/lemaiwo/SAPWebIDE-ExportToPlunker
Create a service
This is tutorial is based on the previous two:
- Create command:https://blogs.sap.com/2017/07/17/create-a-command-in-your-sap-web-ide-feature/
- Create View: https://blogs.sap.com/2017/07/17/create-a-view-in-your-sap-web-ide-feature/
There is already a service generated by the wizard. To understand all the steps, we’re going to create a new service. We’ll consume this service from the controller of our UI5 view. It’s important that you’ve already followed the blog https://blogs.sap.com/2017/07/17/create-a-view-in-your-sap-web-ide-feature/
Start creating two files, a js file and json file:
In the “js” file, we can add our own logic. For example, just create a function that concatenates a value to a string and returns a simple string:
In the “json” file we have to define the functions that we want to expose, they won’t be accessible if they are not defined. We can also create functions in the service for internal use only, then you don’t have to define these functions in the “json” file.
The name of the service exists out of the name of the project + folder name, in this case “service” + the name of the JS file “MyFirstService” = “myfirstplugin.service.MyFirstService”. Configure all the functions with their incoming params and the return values.
Configure the service in the plugin.json
In the plugin.json we have to define our created service. This is required to access the service from the context object. We provide a name for the service, implementation and module:
- Implements: contains the namespace to the service
- Module: this is the path to the service
We also need to define an interface. This will map the namespace with the path.
Use the service
I extended the view from my previous blog with a title and an input field:
The value of the input field is connected to a property of a JSON Model which I’ve created in the controller.
In the eventhandler of the button I added the following:
- Get the context which gives me access to my service
- Get the value from the input field using the model
- Call my service passing the value from the input field. To fetch the result of the function you’ll have to use the “then” function. This is because the SAP Web IDE SDK is using promises. In the “then” function I call the messagebox to show the result.
Result
Fill in a name in the input field and click on the button
The button will call our service and show the following text in a popup.
You can find the full code of the demo feature on github: https://github.com/lemaiwo/SAPWebIDEFeatureTutorial
You now have used the three key components of a plugin, command, view and service.
Best regards,
Wouter
- SAP Managed Tags:
