Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
WouterLemaire
Active Contributor
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/templatesapui5withroutingpl...

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

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

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

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



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

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

Same for the second controller



Code for "Page2.controller.js.tmpl": https://github.com/lemaiwo/UI5TemplateWithRouting/blob/master/client/src/templatesapui5withroutingpl...

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

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

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

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
5 Comments
Labels in this area