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
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
Thanks Wouter!! 🙂