Skip to Content
Author's profile photo Wouter Lemaire

Custom UI5 Control Generator – SAP Web IDE Plugin


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:

At UI5con 2016 in Frankfurt Andreas Kunz gave a great presentation about UI5 Controls:

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:

   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": [
      "content", // required for editing the content

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.


You can find the plugin on Github:


You can find all information about the WebIDE SDK at:

HTML Snippets:


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,

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Vladimirs Semikins
      Vladimirs Semikins

      Thanks for sharing!  Looks awesome.

      Author's profile photo Robin Van Het Hof
      Robin Van Het Hof

      Awesome idea indeed, and an ultimate example of what Web IDE plugins can be capable of. Great work Wouter!

      Author's profile photo Former Member
      Former Member

      Wouter Lemaire ,

      cool stuff .. liked it very much , now its very easy ti create custom controls ... thanks for sharing 🙂

      Author's profile photo Aloysius Magtibay
      Aloysius Magtibay

      Great stuff, thanks Wouter.  Well done!

      Author's profile photo Jan Penninkhof
      Jan Penninkhof

      Instead of having to change the namespace in the code manually, maybe it would be nice to be able to enter that in the "convert" dialog?

      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Good idea! I’ll put that on my todo list ?

      Ideal I would like to get the namespace and the name out of the current file that is open. But the API didn't covered that yet...


      Author's profile photo Murali Kothapalli
      Murali Kothapalli

      Wouter, Thanks for sharing your awesome idea and explaining it so well in the video as well.

      Author's profile photo Nick Yang
      Nick Yang

      Hi Wouter,


      Thanks for building such awesome WebIDE plugin for the community. It indeed saves us lots of time. In your blog, you made the plugin available in cloud WebIDE. Here I want to share how to make it also available in local WebIDE (aka WebIDE personal edition).

      Step 1. download whole source code from your github.


      Step 2. extract folder htmltocontrolconverterplugin from the zip file and place it under pluginrepository folder under your local WebIDE folder.


      Step 3. modify config.json and add one extra entry like below

      Step 4. restart WebIDE, then you should be able to see custom icon in local WebIDE

      It works perfectly!! Thanks.


      Kind regards,


      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Thanks Nick! I was wondering how to do that 🙂  It was still on my todo list, thanks for helping with that!


      Author's profile photo Diptarup Majumdar
      Diptarup Majumdar

      Hi Genius,

      Thanks for the wonderful blog.

      Is it possible to develop a plugin/template which would be able to provide the user a palette of custom controls which the user would drag and drop to modify the standard ui5 screen. I am thinking about it such that the functional guys does not have to worry about any coding related to UI5. They would drag and drop from the panel their custom controls and the screen is modified upon save. I am just mentioning about the UI part , let the OData/model binding automation be out of equation as of now.  I know SAP provides a standard layout editor for the same but I need to have it developed with my custom controls. Any reference to git would be appreciated.


      Author's profile photo Wouter Lemaire
      Wouter Lemaire
      Blog Post Author

      Hi Diptarup,


      A lot is possible with the Web IDE SDK. Not completely sure how to create such a plugin. It will be a challenge to create a plugin that works together with the layout editor. Maybe someone of the Web IDE team can give you more information on what you're trying to do. I'll forward your comment.


      Kind regards,


      Author's profile photo Raz Korn
      Raz Korn


      Hi Diptarup,


      Following up on what Wouter wrote - I'm from the SAP Web IDE team.

      If you would like to continue the discussion on creating an SAP Web IDE feature (plugin) and need guidance, please contact me using the SAP Web IDE email:




      Author's profile photo Diptarup Majumdar
      Diptarup Majumdar

      Thanks. I have sent one mail.

      Author's profile photo Pavel Mazharov
      Pavel Mazharov

      Hello Wouter!

      Tell me please, it is possible to use this plugin in SAP Web IDE Full-Stack? I have installed plugin, but nothing happens when I`m press to "Convert" button.

      Error in console:

      Uncaught TypeError: Cannot read property 'getEntity' of null Core-preload.js:41

      Tell me please, how to fix this problem?

      Best regards,

      Pavel Mazharov.

      Author's profile photo Pavel Mazharov
      Pavel Mazharov

      Now it works. I don`t know what was a problem but now it works. Magic.

      Maybe, before I have not opened some of js files, but now, when I`m open any js file and click “Convert” in Custom UI5 Control Generator, generated control`s code puts in opened file.

      Best regards,

      Pavel Mazharov.