Wouter Lemaire

July 17, 2017 6 minute read

Use existing services in your SAP Web IDE Feature

Use existing SAP Web IDE SDK Services

The SAP Web IDE SDK already contains a lot of services that you can use in your Feature/plugin. At the moment not al services are documented yet. I’ll show you how to find existing services and use them. Be aware that, as long as they are not documented, they can change.

This blog is the last part that belongs to the following blog series:

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/

SAP Web IDE Feature Service: https://blogs.sap.com/2017/07/17/create-a-service-in-you-sap-web-ide-feature/

Examples

Plunker plugin

In the plunker plugin I used following services which I could not found in the documentation at that time:

progress
- Shows the progress bar during the generation
selection
- Used to get all the folders and the files of the selected project
usernotification
- To show a notification if the plunk has been created

In this example I use the “selection” service to get the selected document. Then I use the document to get the current project. With the project I get all the folders and files. This is example comes from a function in my “Project.js” service.

You can find the full project on https://github.com/lemaiwo/SAPWebIDE-ExportToPlunker

UI5 Control generator

The UI5 Control generator is using the following services from in the view controller:

ui5projecthandler
- Gives me the namespace of the app
beautifierProcessor
- Used to beautify the generated UI5 control
content
- This will allow me to write to the open document

Example of beautify, write and save content to a document. (A document is the file that is currently open in the main editor)

You can find the full project on https://github.com/lemaiwo/CustomControlGenerator

How to use existing services

You can use all existing services that are available in the SAP Web IDE SDK in your own plugin. I’ll show this by replacing UI5 notification with a SAP Web IDE Usernotification. You have to follow the previous blogs to complete this steps.

We have to start with including the “usernotification” service in the plugin.json:

Now we can use it in the controller of our UI5 view.

Instead of the messagebox, we can call the liteNotificationSucces:

This will be the result after you filled in a name and clicked on the button:

We can also use the service in our HelloWorld command:

When we now click on our HelloWorld command:

Then we get the following message:

The usernotification service is documented on the SAP Web IDE SDK: https://sdk-sapwebide.dispatcher.hana.ondemand.com/index.html#/api/Services.usernotification

How to find undocumented services

Open the Google Chrome Developer Tools with the F12 button or Ctrl + Shift + I or right click and Inspect:

Be aware that only service that you already have used are loaded. For more services, you’ll have open a few menu items or execute some actions.

If you go to the “Sources” in the Developer tools, you’ll see already loaded plugins and features:

When you open on of the plugins and look into the JS files, you’ll be able to find existing services:

In the “Hybrid.js” file, you’ll find “this.context.service.selection.getSelection()”

How to know the name of the service? I can’t find the plugin.json in the sources. That’s normal, json files are not visible in the Developer Tools. You can determine the name of the service from how it’s being used. If we zoom in on how it’s called, we can see “selection” just after “service”. The part just after “service” is the part that we have to use to define the service in the plugin.json

Overview of services I found

Content

getCurrentDocument

Gives you the file that’s open in the editor

this.context.service.content.getCurrentDocument().then(function(document) {
	console.log(document);
});

In the document object, you can also get the name and path of the file.

this.context.service.content.getCurrentDocument().then(function(document) {
		var entity = document.getEntity();
		console.log(entity.getFullPath());
});

ui5projecthandler
- getAppNamespace
  - This functions gives you the namespace of a document. You’ll need to use the “selection” or “content” service to get a document first.

this.context.service.ui5projecthandler.getAppNamespace(document).then(function(namespace) {
	console.log(namespace);
});

beautifierProcessor
- beautify
  - This will beautify the content you pass through the function. The content can come from a document or can be generated (like in the UI5 Control generator)

this.context.service.beautifierProcessor.beautify("JS content", "js").then(function(sFormattedChange) {
	console.log(sFormattedChange);
});

selection
- getSelection
  - Gets the selected documents in the project explorer
  - Can be one or more

this.context.service.selection.getSelection().then(function(aSelection) { 
	if (aSelection && aSelection.length !== 0) {
		console.log(aSelection);
	}
});

document

Document is not a real service. It can be the result of another service and also contains functions
You can get a document from the service “content” with the function “getCurrentDocument” or from the service “selection”

getContent

Gets the content of the open document in the editor

this.context.service.content.getCurrentDocument().then(function(document) {
	return document.getContent().then(function(content){
		console.log(content);
	});
});

setContent

Enables you to set the content in the open editor
You first need to get the document with previous function

this.context.service.content.getCurrentDocument().then(function(document) {
	return document.setContent("js or xml content as a string");
});

save
- Let’s you save the document in the open editor
- Again, you need to get the document first with the previous function
- ```
this.context.service.content.getCurrentDocument().then(function(document) {
	return document.save();
});
```
Combine getCurrentDocument, setContent and save

this.context.service.content.getCurrentDocument().then(function(document) {
	return document.setContent("js or xml content as a string").then(function(document){
		return document.save();
	});
});

getProject

Will give you all the details of the project for a document
Document can come from “getCurrentDocument” or “selection”

this.context.service.content.getCurrentDocument().then(function(document) {
	return document.getProject().then(function(project) {
		console.log(project);
	});
});

this.context.service.selection.getSelection().then(function(aSelection) { 
	if (aSelection && aSelection.length !== 0 && aSelection[0]) {
		return aSelection[0].document.getProject().then(function(project) {
			console.log(project);
		});
	}
});

Folder
- Folder is, again, not a separate service but can be the result of a service.
- Example, it can be the result of the “getProject” function a document.
- getFolderContent
  - This function will return all the files and folders in a specific folder.
  - This example will get the selected file –> gets the project for that file –> finally it will get all the files and folders of that project
  - Be aware that this will only reutn the files and folders from the root level of the project. For getting all the files and folders, you should go into each folder and call the “getFolderContent” again. (You can find an example on how to do this in the export to plunker feature on git: https://github.com/lemaiwo/SAPWebIDE-ExportToPlunker/blob/master/client/plunker/service/Project.js function “getProjectFiles” )

this.context.service.selection.getSelection().then(function(aSelection) { 
	if (aSelection && aSelection.length !== 0 && aSelection[0]) {
		return aSelection[0].document.getProject().then(function(project) {
			return project.getFolderContent().then(function(foldercontent) {
				console.log(foldercontent);
			});
		});
	}
});

You can find the full code of the demo feature on github: https://github.com/lemaiwo/SAPWebIDEFeatureTutorial

Now you need everything you need to know to start creating SAP Web IDE Features. Start making Features 🙂

Best regards,

Wouter

Be the first to leave a comment

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