Skip to Content

This blog post is part 3 of a series of blogs on how to create a Custom Template in SAP Web IDE with OData integration.

Prerequisites

Before reading this blog please make sure that you have read, understood and implemented part 2 of this series where I have shown how to create a feature project and add plugin template to the application.

Wizard Customization

Now we have to modify the model.json file for template attributes. And plugin.json for the wizard steps for our project.

In plugin.json, we have to provide “requires”: “services” as below:

Wizard Steps

Still in the plugin.json file, configure the “wizardSteps” as below:

Add our own customized Field in Wizard

To Add our own customized fields in wizard, we have to modify the model.json file.

In model.json we have a json structure called : basicSAPUI5ApplicationProject. Within this json structure we have another json structure named : parameters.

In parameters json structure , we can add or delete our customized json structures. Each json structure of parameter json , represent as a field in the wizard.

Let say, to represent namespace as a field in the wizard. We have to do the below code.

After completing the above code, now we have to go to the “forms” section of the model.json file and add the below code for namespace:

And when we try to execute the whole project, we will get wizard as below for name space:

Similarly , we have to add following json property in parameters json structure:

Json Property Name Wizard Field Name
name1 First View Name
name2 Second View Name
ModelName Data Source Name
AppTitle Application Title
AppDescription Application Description
Growing Threshold Growing Threshold
Growing Trigger Text Growing Trigger Text
OdataCollection Entities
Object_Indentifier Object Title
ObjectCollection_Key Object Collection ID
Object_Number Object Numeric Attribute
OdataCollectionCategory Category
Object_IdentifierCategory Category Title

We could get all the required json data structure in the mode.json , which in enclosed below section of the blog.

Template Image

Now we will add our own customized image for our template:

  • Right-click the image folder under sapui5cart.
  • Choose Import-> From File System.
  • And import desired .png file.

  • Open the plugin.json file and set the property of previewImage to the imported file name as below:

Below is the full code of model.json

{
	"neoapp": {
		"welcomeFile": "/webapp/index.html",
		"sendWelcomeFileRedirect": true
	},
	"entityTypes": [],
	"datasource": {
		"type": "odata",
		"url": "",
		"alias": ""
	},
	"basicSAPUI5ApplicationProject": {
		"parameters": {
			"ViewTypesCollection": {
				"type": "String",
				"binding": [{
					"name": "None",
					"value": "None"
				}, {
					"name": "XML",
					"value": "XML"
				}, {
					"name": "JSON",
					"value": "JSON"
				}, {
					"name": "JavaScript",
					"value": "JS"
				}, {
					"name": "HTML",
					"value": "HTML"
				}],
				"value": "@basicSAPUI5ApplicationProject.parameters.ViewTypesCollection.binding.1",
				"wizard": {
					"control": "ComboBox",
					"required": true,
					"title": "basicSAPUI5ApplicationProject_view_type_title",
					"tooltip": "basicSAPUI5ApplicationProject_view_type_tooltip",
					"sort": "false"
				}
			},
			"namespace": {
				"type": "string",
				"value": "",
				"appDescriptor": {
					"id": "Namespace"
				},
				"wizard": {
					"control": "TextField",
					"required": true,
					"title": "basicSAPUI5ApplicationProject_namespace_title",
					"regExp": "(?!(sap|new(\\..*)*)$)^[a-zA-Z_][\\w-]*(\\.[a-zA-Z_][\\w-]*)*$",
					"regExpErrMsg": "nameSpace_model_parameters_name_validationError"
				}
			},
			"name1": {
				"type": "string",
				"value": "View1",
				"wizard": {
					"control": "TextField",
					"required": true,
					"title": "First View Name",
					"regExp": "^[a-zA-Z_]+[a-zA-Z0-9\\-_]*$",
					"regExpErrMsg": "viewXML_model_parameters_name_validationError"
				}
			},
			"name2": {
				"type": "string",
				"value": "View2",
				"wizard": {
					"control": "TextField",
					"required": true,
					"title": "Second View Name",
					"regExp": "^[a-zA-Z_]+[a-zA-Z0-9\\-_]*$",
					"regExpErrMsg": "viewXML_model_parameters_name_validationError"
				}
			},
			"ModelName": {
				"type": "string",
				"value": "dataModel",
				"wizard": {
					"control": "TextField",
					"required": true,
					"title": "Data Source Name",
					"regExp": "^[a-zA-Z]*$",
					"regExpErrMsg": "datasourcename_validationError"
				}
			},
			"AppTitle": {
				"type": "string",
				"value": "",
				"appDescriptor": {
					"id": "sap.app.title"
				},
				"wizard": {
					"control": "TextField",
					"required": true,
					"internalOnly": "false",
					"title": "App Title",
					"regExp": "^[a-zA-Z]+[a-zA-Z0-9_ ]*$",
					"regExpErrMsg": "apptitle_validationError"
				}
			},
			"AppDescription": {
				"type": "string",
				"value": "",
				"appDescriptor": {
					"id": "sap.app.description"
				},
				"wizard": {
					"control": "TextField",
					"required": false,
					"internalOnly": "false",
					"title": "App Description",
					"regExp": "^[a-zA-Z]+[a-zA-Z0-9_ ]*$",
					"regExpErrMsg": "apptitle_validationError"
				}
			},
			"ODataCollection": {
				"type": "Entity",
				"multiplicity": "many",
				"isRoot": "true",
				"binding": "@datasource.entities",
				"value": "",
				"wizard": {
					"control": "ComboBox",
					"required": "true",
					"title": "Entities",
					"tooltip": "Entities"
				}
			},
			"ODataCollectionCategory": {
				"type": "Entity",
				"multiplicity": "one",
				"isRoot": "true",
				"binding": "@datasource.entities",
				"value": "",
				"wizard": {
					"control": "ComboBox",
					"required": "true",
					"title": "Category",
					"tooltip": "Category"
				}
			},
			"Object_IdentifierCategory": {
				"type": "string",
				"multiplicity": "one",
				"binding": "@basicSAPUI5ApplicationProject.parameters.ODataCollectionCategory.value.elements",
				"value": "",
				"wizard": {
					"control": "ComboBox",
					"required": "true",
					"title": "Category Title",
					"tooltip": ""
				}
			},
			"Object_Identifier": {
				"type": "string",
				"multiplicity": "one",
				"binding": "@basicSAPUI5ApplicationProject.parameters.ODataCollection.value.elements",
				"value": "",
				"wizard": {
					"control": "ComboBox",
					"required": "true",
					"title": "Object Title",
					"tooltip": ""
				}
			},
			"ObjectCollection_Key": {
				"type": "Property.Key",
				"multiplicity": "one",
				"binding": "@basicSAPUI5ApplicationProject.parameters.ODataCollection.value.elements",
				"value": "",
				"wizard": {
					"control": "ComboBox",
					"required": "true",
					"title": "Object Collection ID",
					"tooltip": ""
				}
			},
			"Object_Number": {
				"type": "Property.Number",
				"multiplicity": "one",
				"binding": "@basicSAPUI5ApplicationProject.parameters.ODataCollection.value.elements",
				"value": "",
				"wizard": {
					"control": "ComboBox",
					"required": "false",
					"title": "Object Numeric Attribute",
					"tooltip": ""
				}
			},
			"GrowingThreshold": {
				"type": "int",
				"value": 3,
				"wizard": {
					"control": "TextField",
					"required": true,
					"internalOnly": "false",
					"title": "Growing Threshold",
					"regExp": "^[0-9]*$",
					"regExpErrMsg": "growingthresold_validationError"
				}
			},
			"GrowingTriggerText": {
				"type": "string",
				"value": "More",
				"wizard": {
					"control": "TextField",
					"required": true,
					"internalOnly": "false",
					"title": "Growing Trigger Text",
					"regExp": "^[a-zA-Z]*$",
					"regExpErrMsg": "growingtriggertext_validationError"
				}
			}
		},
		"forms": [{
			"title": "",
			"type": "templateCustomizationStep",
			"groups": [
				{
				"title": "emptyMobileProject_model_form_group_title",
				"parameters": ["@basicSAPUI5ApplicationProject.parameters.name1",
					"@basicSAPUI5ApplicationProject.parameters.name2"
				]
			}, 
			{
				"title": "Category Selection",
				"parameters": [
					"@basicSAPUI5ApplicationProject.parameters.ODataCollectionCategory",
					"@basicSAPUI5ApplicationProject.parameters.Object_IdentifierCategory"
				]},
			{
				"title": "Technical",
				"parameters": [
					"@basicSAPUI5ApplicationProject.parameters.ODataCollection",
					"@basicSAPUI5ApplicationProject.parameters.Object_Identifier",
					"@basicSAPUI5ApplicationProject.parameters.Object_Number",
					"@basicSAPUI5ApplicationProject.parameters.ObjectCollection_Key"
					
				]},
			{
				"title": "General",
				"parameters": ["@basicSAPUI5ApplicationProject.parameters.AppTitle",
					"@basicSAPUI5ApplicationProject.parameters.AppDescription",
					"@basicSAPUI5ApplicationProject.parameters.ModelName",
					"@basicSAPUI5ApplicationProject.parameters.GrowingThreshold",
					"@basicSAPUI5ApplicationProject.parameters.GrowingTriggerText"
				]
			}]
		}, 
		{
			"type": "appDescriptorGenericStep",
			"groups": [{
				"parameters": ["@basicSAPUI5ApplicationProject.parameters.namespace"]
			}]
		}
		]
	}
}

Now our customised wizard is ready!

In the next part of the blog we will discuss about manifest.json configuration for our customised template application.

 

To report this post you need to login first.

2 Comments

You must be Logged on to comment or reply to a post.

Leave a Reply