Create an HTML5 Module and Deploy UI to Cloud Foundry

In the HTML5 module open the file xs-app.json.

Find the route to the service Z_I_BOOKING_XXX.

Add the csrfProtection property to the route in order to disable csrf token protection in the UI. Create your run configuration. Therefore replace your coding with following in your xs-app.json file:

    {
      "welcomeFile": "/test/flpSandbox.html",
      "authenticationMethod": "route",
      "logout": {
        "logoutEndpoint": "/do/logout"
      },
      "routes": [
        {
          "source": "^/sap/opu/odata/ Z_I_BOOKING_XXX/(.*)$",
          "target": "/sap/opu/odata/ Z_I_BOOKING_XXX/$1",
          "authenticationType": "xsuaa",
          "service": "com.sap.cloud.abap",
          "endpoint": "abap",
          "csrfProtection": false
       },
        {
          "source": "^/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/(.*)$",
          "target": "/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/$1",
          "authenticationType": "xsuaa",
          "service": "com.sap.cloud.abap",
          "endpoint": "abap",
          "csrfProtection": false
        },
        {
          "source": "^(.*)$",
          "target": "$1",
          "service": "html5-apps-repo-rt",
          "authenticationType": "xsuaa"
        }
      ]
    }

Save your file.

Open your webapp/manifest.json file to add the annotations. Replace your code with following:

  {
	"_version": "1.8.0",
	"sap.app": {
		"id": "MTA_Project_XXX",
		"type": "application",
		"i18n": "i18n/i18n.properties",
		"applicationVersion": {
			"version": "1.0.0"
		},
		"title": "{{appTitle}}",
		"description": "{{appDescription}}",
		"tags": {
			"keywords": []
		},
		"dataSources": {
			"mainService": {
				"uri": "/sap/opu/odata/sap/Z_I_BOOKING_XXX/",
				"type": "OData",
				"settings": {
					"localUri": "localService/metadata.xml",
					   "annotations": ["Z_I_BOOKING_XXX_VAN"]
				}
			},
			    "Z_I_BOOKING_XXX_VAN": {
                 "uri": "/sap/opu/odata/IWFND/CATALOGSERVICE;v=2/Annotations(TechnicalName=' Z_I_BOOKING_XXX_VAN',Version='0001')/$value/",
                 "type": "ODataAnnotation"
                  }
		},
		"offline": false,
		"sourceTemplate": {
			"id": "html5moduletemplates.smartTemplateModule",
			"version": "1.40.12"
		}
	},
	"sap.ui": {
		"technology": "UI5",
		"icons": {
			"icon": "",
			"favIcon": "",
			"phone": "",
			"phone@2": "",
			"tablet": "",
			"tablet@2": ""
		},
		"deviceTypes": {
			"desktop": true,
			"tablet": true,
			"phone": true
		},
		"supportedThemes": [
			"sap_hcb",
			"sap_belize"
		]
	},
	"sap.ui5": {
		"resources": {
			"js": [],
			"css": []
		},
		"dependencies": {
			"minUI5Version": "1.38.34",
			"libs": {},
			"components": {}
		},
		"models": {
			"i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/i18n.properties"
			},
			"@i18n": {
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/i18n.properties"
			},
			"i18n|sap.suite.ui.generic.template.ListReport|Booking": {
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/ListReport/Booking/i18n.properties"
			},
			"i18n|sap.suite.ui.generic.template.ObjectPage|Booking": {
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/ObjectPage/Booking/i18n.properties"
			},
			"": {
				"dataSource": "mainService",
				"preload": true,
				"settings": {
					"metadataUrlParams": {
						"saml2": "disabled"
					},
					"serviceUrlParams": {
						"saml2": "disabled"
					},
					"defaultBindingMode": "TwoWay",
					"defaultCountMode": "Inline",
					"refreshAfterChange": false
				}
			}
		},
		"extends": {
			"extensions": {}
		},
		"contentDensities": {
			"compact": true,
			"cozy": true
		}
	},
	"sap.ui.generic.app": {
		"_version": "1.3.0",
		"settings": {},
		"pages": {
			"ListReport|Booking": {
				"entitySet": "Booking",
				"component": {
					"name": "sap.suite.ui.generic.template.ListReport",
					"list": true,
					"settings": {
						"smartVariantManagement": true
					}
				},
				"pages": {
					"ObjectPage|Booking": {
						"entitySet": "Booking",
						"component": {
							"name": "sap.suite.ui.generic.template.ObjectPage"
						}
					}
				}
			}
		}
	},
	"sap.platform.hcp": {
		"uri": ""
	}
}

Save your file.

Login to your SAP Cloud Platform Cockpit and select your global account.

Select Subaccounts.

Select your subaccount.

Click Spaces.

Select your space.

Select your application MTA_Project_XXX_appRouter.

Copy application routes URL for later use.

Switch to SAP Web IDE, select your MTA_Project_XXX and open the manifest.json file. Copy the ID and application version for later use.

Create your URL by using following:
<application_routes>/<id>-<version>/

          Example: <application_routes>/MTA_Project_XXX-1.0.0/

Copy your URL into a browser of choice and logon to SAP Cloud Platform ABAP environment.

Select your Application MTA_Project_XXX.

Check your result.