Fiori Standard App 'My Benefits' Extensions Not Working After GW Upgrade [SAP Fiori, SAPUI5, SAP NW Gateway] - sapui5

We upgraded our GW system to 7.52 SP 7 and also migrated the systems from on-prem to Azure. ECC 7 system is on-prem. After the upgrade and migration was done, the Standard Fiori app 'My Benefits' tile is opening but only the standard portion is working and the extended parts are throwing errors.
Here are the errors:
Errors in Console (Browser debugger)
XMLTemplateProcessor-dbg.js:98 Uncaught Error: found in negative cache: 'sap/m/columns.js' from ./resources/sap/m/columns.js: failed to load 'sap/m/columns.js' from ./resources/sap/m/columns.js: 404 - at makeNestedError (https://host:port/sap/bc/ui5_ui5/sap/zmybenefitsext/resources/sap-ui-core.js:92:37)
XHRInterceptor-dbg.js:58 GET https://host:port/sap/bc/ui5_ui5/sap/zmybenefitsext/resources/sap/m/columns.js 404
XMLTemplateProcessor-dbg.js:98 Uncaught Error: failed to load 'sap/m/columns.js' from ./resources/sap/m/columns.js: 404 - Not Found
Error in the Network tab (Browser debugger)
404(Not Found) for https://host:port/sap/bc/ui5_ui5/sap/zmybenefitsext/resources/sap/m/columns.js
I couldn't find any errors in the front-end or the back-end, I cleaned up the caches on both front-end and back-end and also re-indexed the app on the gateway. I also reactivated the ICF nodes.
Here's the index.html
<!DOCTYPE HTML>
<html>
<!-- IMPORTANT
This HTML file is meant for testing the application/component standalone, outside the Unified Shell.
Some integration functionality, personalization etc. will not be available when running standalone.
-->
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="UTF-8">
<title>zMyBenefitsExtension</title>
<script id="sap-ui-bootstrap"
src="./resources/sap-ui-core.js"
data-sap-ui-libs="sap.m, sap.me"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-compatVersion="1.16"
data-sap-ui-resourceroots='{"hcm.mybenefits.zMyBenefitsExtension": "./"}'>
</script>
<!-- Application launch configuration -->
<script>
sap.ui.getCore().attachInitEvent(function () {
var oComponentContainer = new sap.ui.core.ComponentContainer({
height : "100%",
name:"hcm.mybenefits.zMyBenefitsExtension"
});
oComponentContainer.placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body>
</html>
Here's the source code for Component.js
jQuery.sap.declare("hcm.mybenefits.zMyBenefitsExtension.Component");
// use the load function for getting the optimized preload file if present
sap.ui.component.load({
name: "hcm.mybenefits",
url: jQuery.sap.getModulePath("hcm.mybenefits.zMyBenefitsExtension") + "/../HCM_BENF_MON" // provide parent project url
// we use a URL relative to our own component; might be different if
// extension app is deployed with customer namespace
});
hcm.mybenefits.Component.extend("hcm.mybenefits.zMyBenefitsExtension.Component", {
metadata: {
version : "1.0",
config : {
"sap.ca.i18Nconfigs": {
"bundleName":"hcm.mybenefits.zMyBenefitsExtension.i18n.i18n"
},
},
customizing: {
"sap.ui.controllerExtensions": {
"hcm.mybenefits.view.S7": {
controllerName: "hcm.mybenefits.zMyBenefitsExtension.view.S7Custom",
},
"hcm.mybenefits.view.S6": {
controllerName: "hcm.mybenefits.zMyBenefitsExtension.view.S6Custom",
},
"hcm.mybenefits.view.S5": {
controllerName: "hcm.mybenefits.zMyBenefitsExtension.view.S5Custom",
},
"hcm.mybenefits.view.S3": {
controllerName: "hcm.mybenefits.zMyBenefitsExtension.view.S3Custom",
},
"hcm.mybenefits.view.S4": {
controllerName: "hcm.mybenefits.zMyBenefitsExtension.view.S4Custom",
},
},
"sap.ui.viewExtensions": {
"hcm.mybenefits.view.S7": {
"extS7Header": {
className: "sap.ui.core.Fragment",
fragmentName: "hcm.mybenefits.zMyBenefitsExtension.view.extS7HeaderCustom",
type: "XML",
},
},
"hcm.mybenefits.view.S6": {
"extS6Header": {
className: "sap.ui.core.Fragment",
fragmentName: "hcm.mybenefits.zMyBenefitsExtension.view.extS6HeaderCustom",
type: "XML",
},
},
"hcm.mybenefits.view.S5": {
"extS5Header": {
className: "sap.ui.core.Fragment",
fragmentName: "hcm.mybenefits.zMyBenefitsExtension.view.extS5HeaderCustom",
type: "XML",
},
},
"hcm.mybenefits.view.S3": {
"extS3Header": {
className: "sap.ui.core.Fragment",
fragmentName: "hcm.mybenefits.zMyBenefitsExtension.view.extS3HeaderCustom",
type: "XML",
},
},
"hcm.mybenefits.view.S4": {
"extS4Header": {
className: "sap.ui.core.Fragment",
fragmentName: "hcm.mybenefits.zMyBenefitsExtension.view.extS4HeaderCustom",
type: "XML",
},
},
},
"sap.ui.viewModifications": {
"hcm.mybenefits.view.S7": {
"MB_PLAN_PERIOD": {
"visible": false
},
},
"hcm.mybenefits.view.S6": {
"MB_PLAN_PERIOD": {
"visible": false
},
},
"hcm.mybenefits.view.S5": {
"MB_PLAN_PERIOD": {
"visible": false
},
},
"hcm.mybenefits.view.S4": {
"MB_PLAN_PERIOD": {
"visible": false
},
},
"hcm.mybenefits.view.S3": {
"MB_PLAN_PERIOD": {
"visible": false
},
},
},
}
}
});
Here's the link to the same question in the official SAP forum with embedded screenshots for SICF node for the Standard Fiori app and the LPD_CUST config for the extension app.
https://answers.sap.com/questions/13230788/fiori-standard-app-my-benefits-extensions-not-work.html

I found the issue. The version of the standard Fiori app is using SAPUI5 1.28.5 where columns aggregation is still part of sap.m.List but deprecated. Also, the GW before the upgrade had the SAPUI5 version of 1.52 which still had columns listed as aggregation of List. That's why the app was working before but the upgraded GW SAPUI5 version is 1.71.24 where columns aggregation doesn't exist, hence the NOT FOUND error.
Because the XML is part of the standard code, I won't be able to modify the XML to replace columns with Table.
We had created a ticket with SAP and they said they will have to fix it for us.

Related

SAP ui 5 router error when initiating the sap.f.router

I got an error when initiating sap ui program, please help
manifest.json
"sap.ui5": {
"rootView": {
"viewName": "latihan1.view.App",
"type": "XML"
},
"dependencies": {
"minUI5Version": "1.30.0",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.f": {},
"sap.ui.layout": {}
}
},
"config": {
"fullWidth": true
},
"contentDensities": {
"compact": true,
"cozy": true
},
and index.html
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>latihan1</title>
<script id="sap-ui-bootstrap"
src="../../resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core, sap.m, sap.f, sap.ui.layout"
data-sap-ui-theme="sap_belize"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"latihan1": ""}'>
</script>
and component.js
sap.ui.define([
"sap/ui/core/UIComponent",
"sap/ui/Device",
"latihan1/model/models",
"sap/f/library"
], function(UIComponent, Device, models, library) {
"use strict";
return UIComponent.extend("latihan1.Component", {
metadata: {
manifest: "json"
},
/**
* The component is initialized by UI5 automatically during the startup of the app and calls the init method once.
* #public
* #override
*/
init: function() {
// call the base component's init function
UIComponent.prototype.init.apply(this, arguments);
// enable routing
this.getRouter().initialize();
// set the device model
this.setModel(models.createDeviceModel(), "device");
}
});
The library already loaded
You can remove the sap/f/library inside the dependencies of your Component. Can you try that? Having them in the manifest inside the libs is enough. You don't even need those inside the index file as well.
However what seems be missing in your manifest.json file is the router class under sap.ui5 section.
"routing": {
"config": {
"routerClass": "sap.f.routing.Router"
}

Creating a Azure Devops web extension from a React application

I am looking to create a web extension in Azure Devops from a React application.
As in seen in this tutorial, there is a file called my-hub.html, which is the start page of the extension.
By following the steps in the above link, I was able to create a web extension that prints the logged in user, as per my-hub.html, which does document.getElementById("name").innerText = VSS.getWebContext().user.name;.
However, I have written my application in React using Typescript and the start file is App.tsx. Could someone advise how I can instruct the vss-extension.json file to load the extension from App.tsx file?
{
"manifestVersion": 1,
"id": "my-first-extension",
"publisher": "",
"version": "1.0.0",
"name": "My First Extension",
"description": "A sample Visual Studio Services extension",
"public": false,
"categories": ["Azure Repos"],
"targets": [
{
"id": "Microsoft.VisualStudio.Services"
}
],
"contributions": [
{
"id": "my-hub",
"type": "ms.vss-web.hub",
"targets": [
"ms.vss-code-web.code-hub-group"
],
"properties": {
"name": "My Hub",
"uri": "my-hub.html"
}
}
],
"files": [
{
"path": "my-hub.html",
"addressable": true
},
{
"path": "node_modules/vss-web-extension-sdk/lib",
"addressable": true,
"packagePath": "lib"
}
]
}
Would I need to convert the React application to an html page?
you can deploy the React App first, then add the app/website link in html file. Something like this :
<!DOCTYPE html>
<html xmlns="https://www.w3.org/1999/xhtml">;
<head>
<script src="lib/VSS.SDK.min.js"></script>
<style>
body {
background-color: rgb(100, 100, 100);
color: white;
margin: 10px;
font-family: "Segoe UI VSS (Regular)","-apple-system",BlinkMacSystemFont,"Segoe UI",sans-serif;
}
</style>
<script type="text/javascript">
VSS.init();
VSS.ready(function() {
document.getElementById("name").innerText = VSS.getWebContext().user.name;
});
</script>
</head>
<body>
<h1>Hello, <span id="name"></span></h1>
<p>Hello. This is a link to React App?<br />
Just click to navigate to it</p>
</body>
</html>
Please reference this example if you want to integrate the React app directly with the extension.

SAPUI5 - 'getService' of undefined

I am working on variant management using shell. I got 'getService' of undefined error in FLP. After adding below libraries, It worked.
Index.html
<script>
window["sap-ushell-config"] = {
defaultRenderer : "fiori2",
renderers: {
fiori2: {
componentData: {
config: {
search: "hidden"
}
}
}
},
applications: {
"OrderTracking-display": {
additionalInformation: "SAPUI5.Component=orders",
applicationType: "URL",
url: ".",
title: "Order Tracking"
}
}
};
</script>
<script src="/sap/public/bc/ui5_ui5/resources/sap/ushell_abap/bootstrap/abap.js" id="sap-ushell-bootstrap"></script>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ushell, sap.collaboration, sap.m, sap.ui.commons,
sap.ui.layout, sap.ui.ux3"
data-sap-ui-theme="sap_belize"
data-sap-ui-bindingSyntax="complex"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"orders": "."}'
data-sap-ui-frameOptions="trusted">
manifest.json
"sap.ui5": {
"rootView": {
"viewName": "orders.view.App",
"type": "XML",
"async": true,
"id": "app"
},
"dependencies": {
"minUI5Version": "1.42.0",
"libs": {
"sap.ui.core": {},
"sap.m": {},
"sap.f": {},
"sap.ushell": {},
"sap.collaboration": {
"lazy": true
}
}
},
"contentDensities": {
"compact": true,
"cozy": true
},
"models": {
"i18n": {
"type": "sap.ui.model.resource.ResourceModel",
"settings": {
"bundleName": "orders.i18n.i18n"
}
},
"": {
"dataSource": "mainService",
"preload": true
}
},
"services": {
"ShellUIService": {
"factoryName": "sap.ushell.ui5service.ShellUIService",
"lazy": false,
"settings": {
"setHierarchy": "auto",
"setTitle": "auto"
}
}
},
But I couldn't find ui5service.ShellUIService under sap.ushell. Also popups & date pickers is not working. How to make both sap.ushell.ui5service &
sap.ushell.services libraries work.
Below are the errors I get
Error -1
Error -2
There is no 'ui5service' under 'ushell'
sap.ushell
The index.html file is used to run an app from the WebIDE in test mode during development. A local launchpad called a Sandbox is created to run the app but not all services from launchpad (cloud or abap) are available.
The libraries that the app needs must be defined in the javascript files where they are needed.

Ionic 1 push notifications with phonegap-push-plugin and ionic cloud

I'm trying to make a notification in my iOS app using ionic, ionic.io and phonegap-push-plugin, and I'm really stuck here.
I followed all the steps in the documentation, I generated an apn_dev certification, I created a Security Profile and I enabled notification in the xcode project, here is my libraries :
<script src="lib/bluebird.min.js"></script>
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="lib/ionic.cloud.min.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
here is my app.js :
.config(function($ionicCloudProvider) {
$ionicCloudProvider.init({
"core": {
"app_id": "xxxx"
},
"push": {
"sender_id": "12345",
"pluginConfig": {
"ios": {
"badge": true,
"sound": true
},
"android": {
"iconColor": "#343434"
}
}
}
});
})
.controller('MyCtrl', function($scope, $ionicPush) {
$ionicPush.register().then(function(t) {
return $ionicPush.saveToken(t);
}).then(function(t) {
console.log('Token saved:', t.token);
});
$scope.$on('cloud:push:notification', function(event, data) {
console.log(data);
});
The subscription works fine, I get the log saying :
Token saved: XXXXXXX
I even checked the cloud server : The device token exists in the result of a GET from : https://api.ionic.io/push/tokens
BUT when I try to send a notification to the device, I get nothing.. What am I missing?

jsTree nodes don't expand/collapse

Can't get jsTree nodes to expand collapse. I must be missing something very simple.
This is the script
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery.jstree.js") %>"></script>
<script type="text/javascript">
$(document).ready(function () {
Refresh();
});
function Refresh() {
$('#technologyTree').jstree({
"json_data": {
"ajax": {
"url": "/TechnologyVersions/TechnologiesTreeAjax",
"type": "GET",
"dataType": "json"
}
},
"plugins": ["themes", "json_data", "ui"],
"themes": {
"theme": "default",
"dots": true,
"icons": true,
"url": " <%= Url.Content("~/Content/jsTree/themes/default/style.css") %> "
}
});
}
</script>
I can see the tree populated correctly and the json result from the controller seems correct. However when I click on those expand/collapse arrows nothing happens.
The problem was that conflict with jQuery validation plugin. Upgrading to latest version of jQuery validation plugin solves the problem.
JsTree conflicts with jquery.validate