This blog post is part 4 of a series of blogs on how to create a Custom Template in SAP Web IDE with OData integration.
Before reading this blog please make sure that you have read, understood and implemented part 3 of this series where I have shown how to create a feature project and add plugin template to the application.
Now we have to modify the manifest.json.tmpl file for routing & dynamic project id set up, oData Connection and root view.
To set the App view as the root view, we should follow the below settings:
As we have already given a attribute in wizard configuration of our application as Data Source Name, it would retrieve data from user and set as a model name for oData communication with oData service. Now we have to be sure we should get the data from the wizard and set the model name as below in the manifest file under model section as below:
Now we will set up routing configuration between two views of our template application.
To do the same , we should go to the routing section of the manifest.json.tmpl file.
First we have to set up the configuration for our view path.
Now we will do the set up for our two views as they would retrieves data from the wizard.
To do the same we should follow the below step.
Full code of manifest.json.tmpl as below:
Now our manifest.json.tmpl file is ready, in the next blog we will deploy our template into SAP Cloud Platform, create a destination to it, and use it!
Prerequisites
Before reading this blog please make sure that you have read, understood and implemented part 3 of this series where I have shown how to create a feature project and add plugin template to the application.
Manifest
Now we have to modify the manifest.json.tmpl file for routing & dynamic project id set up, oData Connection and root view.
To set the App view as the root view, we should follow the below settings:
As we have already given a attribute in wizard configuration of our application as Data Source Name, it would retrieve data from user and set as a model name for oData communication with oData service. Now we have to be sure we should get the data from the wizard and set the model name as below in the manifest file under model section as below:
Now we will set up routing configuration between two views of our template application.
To do the same , we should go to the routing section of the manifest.json.tmpl file.
First we have to set up the configuration for our view path.
Now we will do the set up for our two views as they would retrieves data from the wizard.
To do the same we should follow the below step.
Full code of manifest.json.tmpl as below:
{
"_version": "1.7.0",
"sap.app": {
{{~#if mode.internal}}
"_version": "${project.version}",
{{~else~}}
"_version": "1.5.0",
{{~/if}}
{{~#if mode.internal}}
"id": "${project.artifactId}",
{{~else}}
"id": "{{basicSAPUI5ApplicationProject.parameters.namespace.value}}",
{{~/if}}
"type": "application",
"i18n": "i18n/i18n.properties",
"applicationVersion": {
{{~#if mode.internal}}
"version": "${project.version}"
{{~else~}}
"version": "1.0.0"
{{~/if}}
},
"title": "\{{appTitle}}",
"description": "\{{appDescription}}",
{{~#if mode.internal}}
"resources": "resources.json",
"ach": "ach",
{{/if}}
"sourceTemplate": {
"id": "{{selectedTemplateId}}",
"version": "{{selectedTemplateVersion}}"
},
"dataSources": {
"mainService": {
{{~#if connectionData.runtimeUrl}}
"uri": "{{connectionData.runtimeUrl}}",
{{~else}}
"uri": "/",
{{~/if}}
"type": "OData",
"settings": {
{{~#if annotations}}
"annotations": [
{{~#each annotations}}"
{{~this.name}}"{{#unless @last}},{{/unless}}
{{~/each}}
{{~#if generate}},"localAnnotations"{{/if}}],
{{~/if}}
"odataVersion": "2.0",
"localUri": "localService/metadata.xml"
}
}
{{~#if annotations}},
{{~#each annotations}}
"{{this.name}}": {
{{~#if this.runtimeUrl}}
"uri": "{{{this.runtimeUrl}}}",
"type": "ODataAnnotation",
"settings": {
{{~#if this.generateInModelFolder}}
"localUri": "localService/{{this.filename}}"
{{~else}}
"localUri": "/{{this.filename}}"
{{~/if}}
}
{{~else}}
{{~#if this.generateInModelFolder}}
"uri": "annotations/{{this.filename}}",
"type": "ODataAnnotation",
"settings": {
"localUri": "annotations/{{this.filename}}"
}
{{~else}}
"uri": "/{{this.filename}}",
"type": "ODataAnnotation",
"settings": {
"localUri": "/{{this.filename}}"
}
{{~/if}}
{{~/if}}
}{{#unless @last}},{{/unless}}
{{~/each}}
{{~/if}}
{{~#if generate}},
"localAnnotations": {
"uri": "annotations/annotations.xml",
"type": "ODataAnnotation",
"settings": {
"localUri": "annotations/annotations.xml"
}
}
{{~/if}}
},
"offline": false
},
"sap.ui": {
{{~#if mode.internal}}
"_version": "${project.version}",
{{~else~}}
"_version": "1.4.0",
{{~/if}}
"technology": "UI5",
"icons": {
"icon": "",
"favIcon": "",
"phone": "",
"phone@2": "",
"tablet": "",
"tablet@2": ""
},
"deviceTypes": {
"desktop": true,
"tablet": true,
"phone": true
},
"supportedThemes": [
{{#if ui5Config.AvailableThemes}}
{{#each ui5Config.AvailableThemes}}
"{{this}}"
{{#unless @last}},{{/unless}}
{{/each}}
{{else}}
"sap_hcb",
"sap_bluecrystal"
{{/if}}
]
},
"sap.ui5": {
{{~#if mode.internal}}
"_version": "${project.version}",
{{~else~}}
"_version": "1.3.0",
{{~/if}}
"rootView": {
"viewName":"{{basicSAPUI5ApplicationProject.parameters.namespace.value}}.view.App",
"type":"{{basicSAPUI5ApplicationProject.parameters.ViewTypesCollection.value.value}}"
},
"dependencies": {
{{~#if mode.internal}}
"minUI5Version": "${sap.ui5.dist.version}",
{{~else}}
"minUI5Version": "1.32.1",
{{~/if}}
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.ui.comp": {},
"sap.uxap": {},
"sap.suite.ui.generic.template": {},
"sap.ui.layout": {},
{{~#if ui5IsBiggerThen142}}
"sap.f": {},
{{~/if}}
"sap.ushell": {},
"sap.collaboration": {}
},
"components": {}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "{{basicSAPUI5ApplicationProject.parameters.namespace.value}}.i18n.i18n"
}
},
"@i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "{{basicSAPUI5ApplicationProject.parameters.namespace.value}}.i18n.i18n"
}
},
"{{basicSAPUI5ApplicationProject.parameters.ModelName.value}}": {
"dataSource": "mainService",
"settings": {
"defaultBindingMode": "TwoWay",
"defaultCountMode": "Inline",
"refreshAfterChange": false,
"metadataUrlParams": {
"sap-documentation": "heading"
}
}
}
},
"resources": {
"css": [{
"uri": "css/style.css"
}]
},
"routing":{
"config": {
"routerClass": "sap.m.routing.Router",
"viewType": "XML",
"async": true,
"viewPath": "{{basicSAPUI5ApplicationProject.parameters.namespace.value}}.view.businessviews",
"controlAggregation": "pages",
"controlId": "mainApp"
},
"routes": [{
"name": "RouteView1",
"pattern": "",
"target": ["TargetView1"]
},{
"name": "RouteView2",
"pattern": "SecondView",
"target": ["TargetView2"]
}],
"targets": {
"TargetView1": {
"viewType": "XML",
"transition": "slide",
"clearAggregation": true,
"viewName": "{{basicSAPUI5ApplicationProject.parameters.name1.value}}"
},
"TargetView2": {
"viewType": "XML",
"transition": "slide",
"clearAggregation": true,
"viewName": "{{basicSAPUI5ApplicationProject.parameters.name2.value}}"
}
}
}
}
}Now our manifest.json.tmpl file is ready, in the next blog we will deploy our template into SAP Cloud Platform, create a destination to it, and use it!
- SAP Managed Tags:
