Skip to Content
Author's profile photo Wouter Lemaire

Create your own SAP Web IDE template – Configure the wizard

This blog is the last part of the following blog series

Configure the wizard

In the previous blog, we didn’t use the template step for configuring the names of the views. Now, I’m going to extend this step in the wizard to configure the name of the two views. I’m going to remove the view type and add a second field for the second view.

This is step that I want to extend


For adding a new field, I go to the “Model.json” and add the following changes:

  • Change the property “name” to “name1”
  • Add a new field “name2” which is a copy of “name1”

Then, I’m going to edit the forms configuration.

This is the original code:

And I change it like this:

  • Remove the “ViewTypeCollection”
  • Change “name” to “name1”
  • Add a second group that references to “name2”

Full code of “Model.json”:


We have to change the controller to generate it with the right name. Therefor, we change the static name to the reference in the wizard step. The reference is the same name as configured in the model.json: {{basicSAPUI5ApplicationProject.parameters.name1.value}}

Complete code of “Page1.controller.js.tmpl”:

Same for “Page2” but with: {{basicSAPUI5ApplicationProject.parameters.name2.value}}

Complete code of “Page2.controller.js.tmpl”:


Same for the controllerName reference in the views. In view “Page1” you use the reference “name1” and “name2” for “Page2.

Reference to name1: {{basicSAPUI5ApplicationProject.parameters.name1.value}}

Code of Pag1.view.xml.tmpl:

Same for page2: {{basicSAPUI5ApplicationProject.parameters.name2.value}}

Code of Page2.view.xml.tmpl:



Then, I need to update the routing configuration so it will use the values of the wizard for the configuration of the targets. I’ll change this:

To the following:

Full code of manifest.json.tmpl:

Dynamic filenames

To make the filenames dynamic, I have to add the following lines in the “Sapui5withrouting.js” file. This will replace the names that we’ve used in our template with the values from the wizard.

templateZip.files["webapp/controller/pages/Page1.controller.js.tmpl"].name = "webapp/controller/pages/"+model.basicSAPUI5ApplicationProject.parameters.name1.value+".controller.js.tmpl";
templateZip.files["webapp/controller/pages/Page2.controller.js.tmpl"].name = "webapp/controller/pages/"+model.basicSAPUI5ApplicationProject.parameters.name2.value+".controller.js.tmpl";
templateZip.files["webapp/view/pages/Page1.view.xml.tmpl"].name = "webapp/view/pages/"+model.basicSAPUI5ApplicationProject.parameters.name1.value+".view.xml.tmpl";
templateZip.files["webapp/view/pages/Page2.view.xml.tmpl"].name = "webapp/view/pages/"+model.basicSAPUI5ApplicationProject.parameters.name2.value+".view.xml.tmpl";

Full code of “sapui5withrouting.js”:


Run it as a feature and create a new project with your own template. Now, you’ll have two fields to configure the views. Let’s call them “First” and “Second”

This will generate a project and you’ll see that the controller/view names are the same as in the wizard.

It also used these names for the name of the controller

The routing in the manifest:

And it will still work ?


You can find the full project on github: 


Start creating templates! 🙂


Greetings, Wouter

Assigned Tags

      1 Comment
      You must be Logged on to comment or reply to a post.
      Author's profile photo Thomas Nelissen
      Thomas Nelissen

      Thanks Wouter!! 🙂