Skip to Content

Create your own SAP Web IDE template – Getting started

With the SAP Web IDE SDK you can create your own feature in the SAP Web IDE. One of the most common and useful scenario for this are custom templates. Possible scenarios for creating your own template:

  • Multiple apps with the same logo and/or background (Harmonized UI). Do this once in a template and benefit from it in each project that starts from that template
  • Specific configuration that you need in each app. For example, configuration of a UI5 library.

A template can boost your project start!

I often start with UI5 without an OData service. Then I create multiple views/controllers and configure the routing in my app. I’m tired of doing this over and over again so I decided to put this in a template. In my template, I’ll have the same as in the UI5 application template but already two views and controllers with the routing configuration.

In this blog, I’ll show this step by step.

(I did this in the full-stack version of the SAP Web IDE)

This blog is part of the following blog series:

Create a WebIDE Feature

Create a new project starting from a template, “SAP Web IDE Feature (MTA Project)”:

Fill in a project name

Give a name to your feature and plugin. (Every feature has plugins and a plugin belongs to a feature, a feature can have multiple plugins)

Add template to your plugin

Right click on the plugin -> New -> Template from Existing Template

Fill in a name, description and choose “project” as type. For the category, I take an existing one, but your free 🙂

Select the template “SAPUI5 Application”

This will generate the following

As you can see, some files are missing. A bug? Maybe, but don’t worry. Just create the files manually 🙂 This will be done in the next blog: https://blogs.sap.com/2017/12/07/create-your-own-sap-web-ide-template-extending-the-template 

 

3 Comments
You must be Logged on to comment or reply to a post.
  • Hello Wouter Lemaire !

    Thanks for this great Blog. My question now is, if you know a more “up 2 date” Tutorial in this way.

    Which focus on the SAP WebIDE of 2020. And the changes there.

     

    Are you able to support me here? I’d like to develop my own templates, but I saw that this tutorial is unfortunately outdated.

    Thanks!

    Regards.

    • The blog should still work. In case you want to create a template for the new version of the web ide you could create a yeoman template. The new web ide comes with a command line interface that allows you to use yeoman. If that is not enough for you, it should support vs code plugins. Which means you can create an extension for vs code and use it web ide.

       

      kr, Wouter

  • Hello Wouter.

    Thanks for your reply. I’m afraid some things have still changed.

    Therefore I’d like to ask you following questions:

    • In the tutorial at hand I’d like to know what I’ve to change in order to remove all generated useless temp* files as you can see in the screenshot.
    • Is it correct to run it as “Run as plugin” -> since “Run as Feature” isn’t available anymore?
    • I followed exactely your described instructions. I managed to generated my app with the wizard where I found my template in debug mode. But at runtime he doesn’t recognize my
      new “App.view” file although it’s physically there.

      Log-dbg.js:456 2020-03-20 08:27:27.698064 Failed to load component for container container. Reason: Error: resource test2/view/App.view.xml could not be loaded from resources/test2/view/App.view.xml. Check for ‘file not found’ or parse errors. Reason: –

      I also added it as root view in the manifest.file:

    • 	"sap.ui5": {
      		"rootView": {
      			"viewName":"{{basicSAPUI5ApplicationProject.parameters.namespace.value}}.view.App",
      			"type":"XML"
      		},​

      and in the model.json of the build project:

      {
      	"neoapp": {
      		"welcomeFile": "/webapp/index.html",
      		"sendWelcomeFileRedirect": true
      	},
      	"basicSAPUI5ApplicationProject": {
      		"parameters": {
      			"ViewTypesCollection": {
      				"type": "String",
      				"binding": [{
      					"name": "None",
      					"value": "None"
      				}, {
      					"name": "XML",
      					"value": "XML"
      				}, {
      					"name": "JSON",
      					"value": "JSON"
      				}, {
      					"name": "JavaScript",
      					"value": "JS"
      				}, {
      					"name": "HTML",
      					"value": "HTML"
      				}],
      				"value": "@basicSAPUI5ApplicationProject.parameters.ViewTypesCollection.binding.1",
      				"wizard": {
      					"control": "ComboBox",
      					"required": true,
      					"title": "basicSAPUI5ApplicationProject_view_type_title",
      					"tooltip": "basicSAPUI5ApplicationProject_view_type_tooltip",
      					"sort": "false"
      				}
      			},
      			"namespace": {
      				"type": "string",
      				"value": "",
      				"appDescriptor": {
      					"id": "Namespace"
      				},
      				"wizard": {
      					"control": "TextField",
      					"required": true,
      					"title": "basicSAPUI5ApplicationProject_namespace_title",
      					"regExp": "(?!(sap|new(\\..*)*)$)^[a-zA-Z_][\\w-]*(\\.[a-zA-Z_][\\w-]*)*$",
      					"regExpErrMsg": "nameSpace_model_parameters_name_validationError"
      				}
      			},
      			"name": {
      				"type": "string",
      				"value": "App",
      				"wizard": {
      					"control": "TextField",
      					"required": false,
      					"title": "basicSAPUI5ApplicationProject_view_name_title",
      					"regExp": "^[a-zA-Z_]+[a-zA-Z0-9\\-_]*$",
      					"regExpErrMsg": "viewXML_model_parameters_name_validationError"
      				}
      			}
      		},
      		"forms": [{
      			"title": "",
      			"type": "templateCustomizationStep",
      			"groups": [{
      				"title": "emptyMobileProject_model_form_group_title",
      				"parameters": ["@basicSAPUI5ApplicationProject.parameters.ViewTypesCollection", "@basicSAPUI5ApplicationProject.parameters.name"]
      			}]
      		}, {
      			"type": "appDescriptorGenericStep",
      			"groups": [{
      				"parameters": ["@basicSAPUI5ApplicationProject.parameters.namespace"]
      			}]
      		}]
      	}
      }​

      If you want – I can send you the build project.

      My aim is to get it running once without the overhead of the unnecessary files and recognizing the new view.

    Thank you.

    Regards

    /