Extending Fiori Elements with the CodeEditor using FPE

[felixw]

Dear community,

I'm working on a project using Fiori Elements together the Fiori application generator from VSCode. Currently  am trying to integrate the sap.ui.codeeditor.CodeEditor control into my application using the Flexible Programming Model. What I have done so far is:

1. Added  a line to load the codeeditor module:

sap.ui.define(
    ["sap/fe/core/AppComponent",
    "sap/ui/codeeditor/CodeEditor"], // New
    function (Component, CodeEditor) {
        "use strict";

        return Component.extend("project1.Component", {
            metadata: {
                manifest: "json"
            }
        });
    }
);

2. Added the code editor control to the fragment (the fragment works in principle):

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns="sap.m" xmlns:ce="sap.ui.codeeditor" xmlns:macros="sap.fe.macros">
	<VBox core:require="{ handler: 'project1/ext/fragment/MyFragment'}">
		<Button text="MyFragment" press="handler.onPress" />

		<ce:CodeEditor
		type="json"
		value='\{
		"Chinese" : "你好世界",
		"Dutch" : "Hallo wereld",
		"English" : "Hello world",
		"French" : "Bonjour monde"
	}'
	height="300px" />

	</VBox>
</core:FragmentDefinition>

When loading the App I receive the following error message:

Uncaught (in promise) ModuleError: Failed to resolve dependencies of 'project1/Component.js' -> 'sap/ui/codeeditor/CodeEditor.js': failed to load 'sap/ui/codeeditor/CodeEditor.js' from ../resources/sap/ui/codeeditor/CodeEditor.js: script load errorWhat can I do to solve this problem?

I also have the related question how the resources are provided in general when using the VScode application generator. The bootstrap entry in index.html contains "

resources/sap-ui-core.js". The folder resources does not exist. Apparently there is some magic working?

 

Thanks for your support!

[nicolas_lunet]

Hi, i'm assuming that you load the resources from the local project, in which case you have to define the dependency to the sap/ui/codeeditor library as well in your ui5.yaml. This should help you there 🙂

[Noel_Hendrikx]

Hi Felix,

I think you forgot the dependencies in your manifest.json:

{
	"sap.ui5": {
		"dependencies": {
			"libs": {
				"sap.ui.core": {},
				"sap.ui.codeeditor": {}
			}
		}
		
	}
}

Check out https://sapui5.hana.ondemand.com/#/entity/sap.ui.codeeditor.CodeEditor/sample/sap.ui.codeeditor.samp... for an example.

Cheers,

Noël