This blog is the second part of the following blog series:

Extend the template

The wizard in the previous step only generated a starting point. Now, we must add additional files that we would like to have in our template. The “Component.js” file was missing in the generated template, so let’s start with that.

Create “Component.js.tmpl” in the folder “webapp”

Before “.Component”, add the following:

“{{basicSAPUI5ApplicationProject.parameters.namespace.value}}”

This will be replaced with the namespace during the generation of the template, it’s a reference to the namespace field in the template wizard.

Complete file for “Component.js.tmpl”: https://github.com/lemaiwo/UI5TemplateWithRouting/blob/master/client/src/templatesapui5withroutingplugin/sapui5withrouting/resources/webapp/Component.js.tmpl

Create a folder for the controllers

Create a folder for the views

Folder structure of your plugin should look like this

Create a template for the base controller in the folder controller

Use again the reference to the namespace before “.controller.BaseController” to generate the correct name of the controller

“{{basicSAPUI5ApplicationProject.parameters.namespace.value}}”

Complete file of “BasicController.js.tmpl”: https://github.com/lemaiwo/UI5TemplateWithRouting/blob/master/client/src/templatesapui5withroutingplugin/sapui5withrouting/resources/webapp/controller/BaseController.js.tmpl

Create a template for the App.controller.js in the folder controller

Also, here we’ll use the refence to the namespace. But the first time we add “formatNamespace”. The “formatNamespace” will execute a handlebar function which we’ll define later. The function will replace the “.” in the namespace to “/”

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

Create a template for the App.view.xml in the folder view

Again, add a reference to the namespace in the controller name. Give the App control an ID:

Cod for “App.view.xml.tmpl”: https://github.com/lemaiwo/UI5TemplateWithRouting/blob/master/client/src/templatesapui5withroutingplugin/sapui5withrouting/resources/webapp/view/App.view.xml.tmpl

Add a folder “pages” in the view folder and add two template views:

Use the namespace reference to connect the views with the right controller:

“{{basicSAPUI5ApplicationProject.parameters.namespace.value}}”

Full code of “Page1.view.xml.tmpl”: https://github.com/lemaiwo/UI5TemplateWithRouting/blob/master/client/src/templatesapui5withroutingplugin/sapui5withrouting/resources/webapp/view/pages/Page1.view.xml.tmpl

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

Create a folder “pages” in the folder “controller” and create two template controllers

Use the namespace reference for creating the name of the controllers. At the top of the controller, add a reference to the basecontroller. We’ll use the formatter “formatNamespace” to replace all the “.” with “/”.

Code for “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 the second controller

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

Now we’re going to update the template of the “Manifest.json” file. We’ll change the rootview and configure the routing between the two views.

Look for the following lines:

Change them to the following:

• Remove the if
• Change the viewName to “App”

Scroll down to the bottom of the manifest file and do the following changes:

• Change the viewpath
• Set “mainApp” as control id
• Change the first target to “Page1”
• Create a second target to “Page2”
• Create a second route
• Connect each route with a target

Complete file for “Manifest.json.tmpl”: https://github.com/lemaiwo/UI5TemplateWithRouting/blob/master/client/src/templatesapui5withroutingplugin/sapui5withrouting/resources/webapp/manifest.json.tmpl

Additional, you can create a template for I18n and add css file

Add the translations for titles in the i18n file

When you followed all the steps, your full project in the webapp folder will look like this:

Include handlebar functions

One last step, we need to define the handlebar functions. Therefore, we create a file “shared.js in the “sapui5withrouting” (can be different, depending on the name of your template) folder.

I took the “shared.js” file from another template when debugging the SAP Web IDE. You can find the content of the file here: https://github.com/lemaiwo/UI5TemplateWithRouting/blob/master/client/src/templatesapui5withroutingplugin/sapui5withrouting/shared.js

Include this “shared.js” file in the “sapui5withrouting.js” file. (This can be different, depending on the name you have chosen for the template).

In the “onBeforeTemplateGenerate” function, you call “shared.registerHandlebarHelpers()” . This will register the handlebar functions.

Complete file of “sapui5withrouting.js”: https://github.com/lemaiwo/UI5TemplateWithRouting/blob/master/client/src/templatesapui5withroutingplugin/sapui5withrouting/sapui5withrouting.js

We need this step for the “formatNamspace” function:

After all these steps, it will look like this:

Test your template

Test your template by right click on the “package.json” -> Run -> Run As Feature

This will open a new window with the SAP Web IDE in development modus

(You always have to test your changes this way because it will regenerate the resources.zip file which is used for generating your project. Only refreshing the SAP Web IDE in development modus will not do this.)

Go to File -> New -> Project from Template

Select the Category that you’ve chosen for your template and select your template

Fill a project name and namepsace

This step is currently not used, so you can ignore this. (This will be added in the next blog)

When the wizard is finished, you’ll have a new project that looks like this. Select the project and click on Run

First screen will show you a title with “Page1” and button:

When you click on the button, you go to the second screen with title “Page2”

Find the full project on github: https://github.com/lemaiwo/UI5TemplateWithRouting . Be aware that this project already includes the next part: https://blogs.sap.com/2017/12/07/create-your-own-sap-web-ide-template-configure-the-wizard