Skip to Content

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:

  1. Get the context which gives me access to my service
  2. Get the value from the input field using the model
  3. 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

To report this post you need to login first.

Be the first to leave a comment

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

Leave a Reply