How to handle CRUD operation in Fiori Elements CAP project

[I533303]

Hello,

I’m creating a Fiori Elements Application with SAP Cloud application Programming model .

I have already create My Odata backend service with CAPM on SAP Business Application studio and I deployed it to SCP CF environment with the model and service definition below :

model.cds

namespace sap.capire.parkingapp;
using { managed ,cuid} from '@sap/cds/common';

entity Offers: managed {
  key   ID: Integer;
  owner   : String;
  place   : String;
  dateStart: Date 
  dateEnd  : Date;
  description : String 
  status      : String default 'available';

}
entity Orders : managed {
  key   ID: Integer;  
  OrderNo  : String @title:'Order Number'; //> readable key
  offer    :  Association to Offers 
  beneficiary : String 

}

service.cds

using { sap.capire.parkingapp as my } from '../db/schema';
service CatalogService @(path:'/browse') {

    @odata.draft.enabled
    entity Offers as SELECT from my.Offers excluding { createdBy, modifiedBy } 

    entity Orders as projection on my.Orders;
    
    
}

create the FE List report/Object page project on SAP WebIDE and I added the Local UI annotations to the project using annotation modeler extension , I get the result below :

When I want to create a new entity (offer) I get this issue like is shown in the developer tools below :

I tried to test the post request to my Odata service on Postman and it is working , I could get my new inserted entity in the Fiori list report page when I load it but they are inserted on draft like is shown in the first picture (list report ) .But when I go to the details(object page ) of that new entity it is a draft when I try to save it I get the error below :

Please how can I handle this issue to perform CRUD operation on my entity . Any pointers, suggestions, links would be helpful .

Thank you,

Mariam

[gregorw · Accepted solution]

Please check if your manifest.json contains something regarding the saml2 parameter.

[I533303 · Accepted solution]

Hi gregorw,

yeah, "serviceUrlParams": { "saml2": "disabled" }

manifest.json

{
	"_version": "1.8.0",
	"sap.app": {
		"id": "ns.parkingfioriapp",
		"type": "application",
		"i18n": "i18n/i18n.properties",
		"applicationVersion": {
			"version": "1.0.0"
		},
		"title": "{{appTitle}}",
		"description": "{{appDescription}}",
		"tags": {
			"keywords": []
		},
		"dataSources": {
			"mainService": {
				"uri": "/ParkingOdataV2-vf/v2/browse/",
				"type": "OData",
				"settings": {
					"localUri": "localService/metadata.xml",
					"annotations": [
						"annotation0"
					]
				}
			},
			"annotation0": {
				"type": "ODataAnnotation",
				"uri": "annotation/annotation0.xml",
				"settings": {
					"localUri": "annotation/annotation0.xml"
				}
			}
		},
		"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
		}
	},
	"sap.ui5": {
		"resources": {
			"js": [],
			"css": []
		},
		"dependencies": {
			"minUI5Version": "1.65.6",
			"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|Offers": {
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/ListReport/Offers/i18n.properties"
			},
			"i18n|sap.suite.ui.generic.template.ObjectPage|Offers": {
				"type": "sap.ui.model.resource.ResourceModel",
				"uri": "i18n/ObjectPage/Offers/i18n.properties"
			},
			"": {
				"dataSource": "mainService",
				"preload": true,
				"settings": {
					"metadataUrlParams": {
						"sap-value-list": "none"
					},
					"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": {
			"forceGlobalRefresh": false,
			"objectPageHeaderType": "Dynamic",
			"showDraftToggle": false
		},
		"pages": {
			"ListReport|Offers": {
				"entitySet": "Offers",
				"component": {
					"name": "sap.suite.ui.generic.template.ListReport",
					"list": true,
					"settings": {
						"condensedTableLayout": true,
						"smartVariantManagement": true
					}
				},
				"pages": {
					"ObjectPage|Offers": {
						"entitySet": "Offers",
						"component": {
							"name": "sap.suite.ui.generic.template.ObjectPage"
						}
					}
				}
			}
		}
	},
	"sap.platform.hcp": {
		"uri": ""
	}
}

[gregorw · Accepted solution]

Please remove that parameter and try again.

[I533303 · Accepted solution]

Hi Gregor Wolf ,

The issue is solved after removing that parameter .

Thank you

Mariam

[Ivan-Mirisola]

Hi idman,

From the looks of it, your App Router isn't configured to forward the JWT to the OData service.

Either your Fiori Front End is calling the service directly (without going through the app router) or there isn't any anuthentication going on. Probably the OData service is being called and instead of getting a json response you are getting an authentication screen (hence the bad gateway error with saml2 deserialization error).

Please share the xs-app.json of your app router application as well as the mta.yaml and xs-security.json.

Best regards,
Ivan

[I533303]

Hi ivan.mirisola ,

Thank you for your answer .

xs-app.json :

{ "welcomeFile": "/test/flpSandbox.html",
  "authenticationMethod": "route",
  "logout": {
    "logoutEndpoint": "/do/logout"
  },
  "routes": [
    {
      "source": "^/ParkingOdataV2-vf/(.*)$",
      "target": "$1",
      "authenticationType": "none",
      "destination": "ParkingOdataV2-vf",
      "csrfProtection": false
    },
    {
      "source": "^(.*)$",
      "target": "$1",
      "service": "html5-apps-repo-rt",
      "authenticationType": "xsuaa"
    }
  ]
}

xs-security.json :

{
  "xsappname": "mta_ParkingFioriApp",
  "tenant-mode": "dedicated",
  "description": "Security profile of called application",
  "role-templates": [
    {
      "name": "Token_Exchange",
      "description": "UAA",
      "scope-references": [
        "uaa.user"
      ]
    }
  ]
}

mta.yaml :

ID: mta_ParkingFioriApp
_schema-version: '2.1'
parameters:
  deploy_mode: html5-repo
version: 0.0.1
modules:
  - name: mta-parkingfioriapp-approuter
    type: approuter.nodejs
    path: mta-parkingfioriapp-approuter
    parameters:
      disk-quota: 256M
      memory: 256M
    requires:
      - name: mta_ParkingFioriApp_html5_repo_runtime
      - name: dest_mta_ParkingFioriApp
      - name: uaa_mta_ParkingFioriApp
  - name: mta_ParkingFioriApp_ui_deployer
    type: com.sap.html5.application-content
    path: mta_ParkingFioriApp_ui_deployer
    requires:
      - name: mta_ParkingFioriApp_html5_repo_host
    build-parameters:
      requires:
        - name: ParkingFioriApp
          artifacts:
            - './*'
          target-path: resources/ParkingFioriApp
  - name: ParkingFioriApp
    type: html5
    path: ParkingFioriApp
    build-parameters:
      builder: custom
      commands:
        - npm install
        - npm run build
      supported-platforms: []
      build-result: dist
resources:
  - name: mta_ParkingFioriApp_html5_repo_runtime
    parameters:
      service-plan: app-runtime
      service: html5-apps-repo
    type: org.cloudfoundry.managed-service
  - name: mta_ParkingFioriApp_html5_repo_host
    parameters:
      service-plan: app-host
      service: html5-apps-repo
    type: org.cloudfoundry.managed-service
  - name: uaa_mta_ParkingFioriApp
    parameters:
      path: ./xs-security.json
      service-plan: application
      service: xsuaa
    type: org.cloudfoundry.managed-service
  - name: dest_mta_ParkingFioriApp
    parameters:
      service-plan: lite
      service: destination
    type: org.cloudfoundry.managed-service