SAPUI5 Embeddable WorkZone Knowledge Base Widget Errors

[kishore_ms12]

Hello Team,

We have a requirement to build a knowledge base widget and use it on an SAP UI5 Application. Made the required changes as per the documentation link.

However, we encountered a couple of issues that are hindering the completion of the integration process. Here are the details of the issues:

1. CORS Issue: 

The application is deployed on the SAP BTP HTML Repository. while generating a single-use token, we encountered a CORS issue despite configuring the deployed HTML application in SAP BTP trusted domains. The error message indicates that it is a CORS error. Please suggest where changes are needed to resolve the CORS issue.

Access to XMLHttpRequest at 'https://XXXXXXX.eu10-1.dws.workzone.ondemand.com/v1/single_use_tokens' from origin 'https://xxx-build.launchpad.cfapps.eu10.hana.ondemand.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Below are the code changes regarding single-use token generation.

Component.js
jQuery.ajax({
	url: " https://XXXX.xxx-1.dws.workzone.ondemand.com/v1/single_use_tokens",
	type: "POST",
	beforeSend: function(xhr) {
		xhr.setRequestHeader("Authorization", "Bearer XXXXXXXXXXXXXXXXXX");
	},
	success: function(data) {
		// Parse the XML response
		var parser = new DOMParser();
		var xmlDoc = parser.parseFromString(data, "text/xml");
		// Get the single_use_token element
		var singleUseTokenElement = xmlDoc.getElementsByTagName("single_use_token")[0];
		// Get the value of the id attribute
		var tokenId = singleUseTokenElement.getAttribute("id");
		console.log("Token ID  0" + tokenId);
		// Set the token ID value to the data object
	},
	error: function(xhr, status, error) {
		// Handle error
		console.error("Error occurred while fetching single use token:", error);
	},
});<ol><li><strong><u>Failed to Load the Widget: When attempting to load the widget, the error message suggests that there was a script load error while trying to load 'jam/widget/wzKBWidget.js' from the specified URL. Here's the detailed error message:<li-code lang="bash">Failed to load component for container container - ModuleError: failed to load 'jam/widget/wzKBWidget.js' from https://XXXXXXX.X1.dws.workzone.ondemand.com/widget/jamWidget/wzKBWidget.js: script load error ModuleError: failed to load 'jam/widget/wzKBWidget.js' from https://XXXXXX.xxx-1.dws.workzone.ondemand.com/widget/jamWidget/wzKBWidget.js: script load error<p>Below are the code changes regarding DWS Knowledge Base Widget as per the documentatio</p><p>a. <strong><u>Component.js<strong> (As per the Properties DWSInstance Option): Single use token is hard coded which is generated through rest postman.<li-code lang="javascript">// Set up the data model
var oData = {
DWSInstance: {
uri: " https://XXXXXXXXX.xxx-1.dws.workzone.ondemand.com/",
singleUseToken: "Xxxxxxxxxxxxxx",
},
};
var oModel = new sap.ui.model.json.JSONModel(oData);
this.setModel(oModel);

2. Failed to Load the Widget:

When attempting to load the widget, the error message suggests that there was a script load error while trying to load 'jam/widget/wzKBWidget.js' from the specified URL. Here's the detailed error message:

Failed to load component for container container - ModuleError: failed to load 'jam/widget/wzKBWidget.js' from https://XXXX.eu10-1.dws.workzone.ondemand.com/widget/jamWidget/wzKBWidget.js: script load error
ModuleError: failed to load 'jam/widget/wzKBWidget.js' from https://XXXXX.eu10-1.dws.workzone.ondemand.com/widget/jamWidget/wzKBWidget.js: script load error

Below are the code changes regarding DWS Knowledge Base Widget as per the documentation. 

       a. Component.js (As per the Properties DWSInstance Option): Single use token is hard coded which is generated through rest postman.

// Set up the data model
var oData = {
DWSInstance: {
uri: " https://XXXXXXX.eu10-1.dws.workzone.ondemand.com/",
singleUseToken: "Xxxxxxxxxxxxxx",
},
};
var oModel = new sap.ui.model.json.JSONModel(oData);
this.setModel(oModel);

       b. index.html (As per the STEP 2 Documentation):

<script id="sap-ui-bootstrap" src="https://sapui5.hana.ondemand.com/1.115.1/resources/sap-ui-core.js"
data-sap-ui-theme="sap_horizon"
data-sap-ui-resourceroots='{
"sap.m.sample.OverflowToolbarFooter": "./",
"app": "./",
"jam.widget": " https://XXXXXXX.xxxx-1.dws.workzone.ondemand.com/widget/jamWidget"
}'
data-sap-ui-compatVersion="edge"
data-sap-ui-async="true"
data-sap-ui-frameOptions="trusted"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport">
</script>

     c.  WzKBWidget.view.xml (As per the STEP 3 Documentation):

<!-- Add the library to project resource roots -->
<jamWidget:wzKBWidget id="wzKBWidget"
DWSInstance="{/DWSInstance}"
widgetWidth="auto"
widgetHeight="600px"
pageSize="10"
defaultColumns="title,group">
<Button id="_IDGenButton1" text="Attach" press="handleAttach" />
</jamWidget:wzKBWidget>

Although we made the changes as per the documentation, we still face the errors above, please suggest what we should do further to overcome this.

Thanks

Kishore

[andrei_matys]

Hello!

We faced on the same issue, as you mentioned in step 2 in our project.
Root case is that path in the documentation is not valid. Full path to the widget is: 

https://XXXXXXX.xxxx-1.dws.workzone.ondemand.com/widget/jamWidget/JamKBWidget.js

Correct widget code is the following (not wzKBWidget, but JamKBWidget)

 <jamWidget:JamKBWidget 
     id="JamKBWidget" 
     jamInstance="{jamModel>/jamInstance}" 
     contentTypes="article" 
     defaultColumns="title"
     widgetWidth="auto" 
     widgetHeight="600px" 
     pageSize="10">
 </jamWidget:JamKBWidget>      

 Also DWSInstance is not correct name. Correct one is jamInstance.

{
    jamInstance: {
        uri: "https://XXXXXXX.xxxx-1.dws.workzone.ondemand.com",
        singleUseToken: "{generated_token}"
    }
}

JAM documentation is better than Workzone.

Link to the JAM docs:  https://help.sap.com/docs/SAP_JAM_COLLABORATION/9981b6fb8453459d8103a04d674ebe0f/d645aa54339c465290a...