Custom UI5 Control Generator – SAP Web IDE Plugin

Inspiration

Recently I had a discussion with my colleague Fouad about SAPUI5 versus other HTML5/JS Frameworks. It was about building an external web portal that should not have the look and feel of SAP Fiori. Fouad would use some other HTML5/JS Framework because the web portal should have a custom look and feel instead of Fiori. Making the same in SAPUI5 and creating a custom control for every UI element would just take too much time.

I argued that you can make everything with SAPUI5 but he was right. Creating a custom control for each UI element would take too much time. It would be faster in another HTML5/JS framework. Nevertheless, I still want to prove him wrong! J This was my inspiration to make it easier to create custom UI5 controls!

Background about Custom UI5 Controls

For this blog you need to know the basics of custom UI5 controls.Here you’ll find examples of extending and creating UI5 controls: https://help.sap.com/saphelp_uiaddon10/helpdata/en/91/f184586f4d1014b6dd926db0e91070/content.htm

At UI5con 2016 in Frankfurt Andreas Kunz gave a great presentation about UI5 Controls: http://de.slideshare.net/andreaskunz/ui5-controls-ui5con-2016

The Idea

This discussion made me think to find a way to make this process faster. Most UI5 Controls have the same basic properties and functions. Every control has some metadata, a render function, an afterRendering function, set functions for properties…. What if we could generate all the fundamentals of a custom UI5 control based on a HTML example? What if there was a Fiori app where you can paste some html code and generates a SAPUI5 custom control out of it? That would be great and save a lot of time. But then again, another app? Really? What if we could integrate this into the SAP Web IDE!? That would be AWESOME!

This gave me the idea to create a pane in the right area of the SAP Web IDE were the developer can put his HTML code and a button. When the developer presses on the button it would generate the custom UI5 control and it would write the code to the editor in the center of the SAP Web IDE.

The Solution

Demo of the solution

Technical details of the solution

I started with generating a SAP Web IDE feature and plugin from a project template:

In this feature project I’ve added the following files:

• View/View
  • Contains the text area to paste or write my HTML code and a button to start the conversion
• View/Controller
  • This will call the util classes to convert the HTML to a SAPUI5 custom control
• Utils/JSONGenerator
  • This object will convert the HTML to JSON. It will make it easier to use for generating the UI5 custom control
• Utils/ControlGenerator
  • It will generate all the fundamental components for a UI5 control based on the JSON from the JSONGenerator
  • For the properties it will create objects of the PropertyGenerator for generating the setter and the metadata for each property.
• Utils/PropertyGenerator
  • The PropertyGenerator generates some specific parts of a property and is part of the Control. Like every Control can have multiple properties, the ControlGenerator has multiple objects of the PropertyGenerator.
• Service/RightPanePart
  • This is actually my custom service in the Web IDE that enables me to add my own view in the right pane area.

I’ll only explain the coding important for creating your own plugin but will not go into detail of the conversion logic. This will be shared on github if you want investigate this in detail.

For adding my own view to the right pane area of the SAP Web IDE I’ve created my own. This service extends the “AbstractPart” and I could use the “getContent” function to call my custom view in the right pane area:

define(
   ["sap/watt/platform/plugin/platform/service/ui/AbstractPart"],
   function(AbstractPart) {
      "use strict";
      var oRightPanePart = AbstractPart.extend("htmltocontrolconverterplugin.service.RightPanePart.", {
         _oView: null,
         getContent: function() {
            var that = this;
            return AbstractPart.prototype.getContent.apply(this, arguments).then(function() {
               if (!that._oView) {
                  that._oView = sap.ui.view({
                     viewName: "htmltocontrolconverterplugin.view.view.RightPaneView",
                     type: sap.ui.core.mvc.ViewType.XML,
                     viewData: {
                        context: that.context
                     }
                  });
               }
               return that._oView;
            });
         }
      });
      return oRightPanePart;
   });

In the controller of the view I call the conversion logic and put the generated UI5 control in the content of the current document.

		onConvert: function() {
			var c = v.getViewData().context;
			var data = this.getView().getModel().getData();
			var me = this;

			var JSONG = new JSONGenerator();
			var cg = new ControlGenerator();
			c.service.content.getCurrentDocument().then(function(document) {
				var jsonhtml = JSONG.generateJSON(data.html);
				 document.setContent( cg.generateControl(JSON.parse(jsonhtml)));
			});
		}

The most important part of the plugin is the configuration in the “plugin.json”.

I wanted to write code from my plugin to the content area of the SAP Web IDE. Therefore I had to add the service “content” in the “plugin.json”:

  "requires": {
    "services": [
      "perspective",
      "content", // required for editing the content
      "command",
      "commandGroup"
    ]
  },

Add my service to the “plugin.json”:

  "provides": {
    "services": {
      "serviceforrightpane" : {
        "implements": "sap.watt.common.service.ui.Part",
        "module" : "htmltocontrolconverterplugin/service/RightPanePart" // reference to my custom plugin service
      }
    }
  },

I configured were I wanted to place my view, on the right or the bottom pane. I’ve chosen for the right pane.

  "configures": {
    "services": {
      "perspective:views": [
        { "id": "serviceforrightpane", "service": "@serviceforrightpane"}
      ],
      "perspective:viewToAreaMapping": [
        { "view": "serviceforrightpane", "perspective": "development", "area": "right"}
      ],

Then I’ve configured the command to open my view like the label, icon and key binding. It also contains the connection with the service:

      "command:commands" : [
        {
          "id" : "rightpanetogglestatecommand",
          "label" : "{i18n>command_label}.",
          "icon" : "sap-icon://tag-cloud-chart",
          "service": {
            "implements" : "sap.watt.common.service.ide.AbstractUIPartToggler",
            "module" : "sap.watt.common.perspective/command/AbstractUIPartToggler",
            "configuration" : { "id" : "rightpanetogglestatecommand", "service" : "@serviceforrightpane", "perspective" : "development"}
          },
          "keyBinding": "mod+shift+8"
        }
      ],

Next I’ve configured were the command can be triggered from. From the menu at the top or from the right pane button bar.

Github

You can find the plugin on Github:
https://github.com/lemaiwo/CustomControlGenerator

Resources

You can find all information about the WebIDE SDK at:
https://sdk-sapwebide.dispatcher.hana.ondemand.com/index.html#

HTML Snippets:
http://littlesnippets.net/category/categories/

Conclusion

The SAP Web IDE SDK opens a lot of possibilities to improve the Web IDE to your own needs! SAP is very open and willing to help. Just a small tweet about my idea has led to a conf call with Raz Korn and Ohad Navon. Big thanks again for your time guys! This was my first plugin was finished in a few hours! Don’t be afraid, it’s not that difficult 🙂
You can use the plugin by importing the project from github to your webide.

Next steps

• Create file from generator
• Generate the correct namespace and name
• Generate a XML example for how you can use the control in your view
• Beautify the generated code from the plugin

If you have good idea’s you can help me improving the plugin. It’s on a public github so I can make everyone contributor! 🙂

Enjoy my plugin!

Kind regards,
Wouter