Create your own SAP Web IDE template – Configure the wizard

[WouterLemaire]

This blog is the last part of the following blog series

Getting started	https://blogs.sap.com/2017/12/07/create-your-own-sap-web-ide-template-getting-started/
Extending the template	https://blogs.sap.com/2017/12/07/create-your-own-sap-web-ide-template-extending-the-template
Configure the wizard	https://blogs.sap.com/2017/12/07/create-your-own-sap-web-ide-template-configure-the-wizard
Share your template	https://blogs.sap.com/2017/12/18/create-your-own-sap-web-ide-template-share-your-template/

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/templatesapui5withroutingpl...

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/templatesapui5withroutingpl...

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/templatesapui5withroutingpl...

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/templatesapui5withroutingpl...

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

Code of Page2.view.xml.tmpl: https://github.com/lemaiwo/UI5TemplateWithRouting/blob/master/client/src/templatesapui5withroutingpl...

 

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/templatesapui5withroutingpl...

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/templatesapui5withroutingpl...

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