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

Wizard

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”: https://github.com/lemaiwo/UI5TemplateWithRouting/blob/master/client/src/templatesapui5withroutingplugin/sapui5withrouting/model.json

Controllers

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”: https://github.com/lemaiwo/UI5TemplateWithRouting/blob/master/client/src/templatesapui5withroutingplugin/sapui5withrouting/resources/webapp/controller/pages/Page1.controller.js.tmpl

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

Complete code of “Page2.controller.js.tmpl”: https://github.com/lemaiwo/UI5TemplateWithRouting/blob/master/client/src/templatesapui5withroutingplugin/sapui5withrouting/resources/webapp/controller/pages/Page2.controller.js.tmpl

Views

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: https://github.com/lemaiwo/UI5TemplateWithRouting/blob/master/client/src/templatesapui5withroutingplugin/sapui5withrouting/resources/webapp/view/pages/Page1.view.xml.tmpl

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

Code of Page2.view.xml.tmpl: https://github.com/lemaiwo/UI5TemplateWithRouting/blob/master/client/src/templatesapui5withroutingplugin/sapui5withrouting/resources/webapp/view/pages/Page2.view.xml.tmpl

Manifest

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: https://github.com/lemaiwo/UI5TemplateWithRouting/blob/master/client/src/templatesapui5withroutingplugin/sapui5withrouting/resources/webapp/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”: https://github.com/lemaiwo/UI5TemplateWithRouting/blob/master/client/src/templatesapui5withroutingplugin/sapui5withrouting/sapui5withrouting.js

Test

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: https://github.com/lemaiwo/UI5TemplateWithRouting 

Start creating templates! 🙂

Greetings, Wouter