Create your own SAP Web IDE template – Extending the template
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:
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
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:
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
Thank you sooo much for the detailed range of blogs regarding templates, it's such a cool feature with very little documentation, so thanks a lot 🙂
Can you please elaborate on where the prefix "basicSAPUI5ApplicationProject" comes from? Do we use this prefix for templates based on any app type i.e. "CRUD Master Detail" app? Can this prefix be anything we choose or does it have to be exactly that?
Good question, here in this blog series it is generated by extending an existing template. But you can change this. It's a reference to the root model which you can change in the plugin.json.
Hello, world (and author). Can I add footer to application in SAP IDE based on one of default tmp? How?
Not sure what you want to do, but I think yes.
Very nice feature Wouter. Thank you for your effort and explanation.