Reuse of SAPUI5 Component in SAP Web IDE

[former_member204167]

Hi Experts,

I want to reuse one of my custom SAPUI5 components (rights.dimension.tree) in another custom component (rights.availability) in the SAP Web IDE test environment:

I played around with alot with jQuey.sap.require and jQuery.sap.registerModulePath without success. Can anyone tell me what I have to do to get the component I want to embed loaded when starting the embedding component?

P.S.: I am using a flpSandbox.html to start my rights.availability app.

Thanks for help in advance.

Regards

Tobias

[former_member204167 · Accepted solution]

While searching in the corresponding documentations I have a gut feeling that this is related to the "routes" in the neo-app.json file. Can anyone give me some further explanation about these routes?

[jamie_cawley · Accepted solution]

I would suggest deploying the app into hcp and then in any app that wants to reference it add the following in the neo-app as an additional route.

,{  
      "path": "/mylibraries",  
      "target": {  
        "type": "application",  
        "name": "mylibraries"  
      },  
      "description": "Shared Library Coding"  
    } 

and add the reference in the project by either adding another entry for the resourceroots in the bootstrap or by using

jQuery.sap.registerModulePath("com.libraries.controls", "/mylibraries/controls");

and namespace in xml

xmlns:cust="com.libraries.controls"

Regards,

Jamie

SAP - Technology RIG

[former_member204167 · Accepted solution]

Hi Jamie,

I deployed the application that I want to reuse into hcp (appl. name hcp: rightsdimtree, folder name in SAP Web IDE: rights.dim.tree).

I added the following code snippet to my neo-app.json under "routes":

,{
            "path": "/rightsdimensiontree",
            "target": {
                "type": "application",
                "name": "rightsdimensiontree"
            },
            "description": "Rights Dimension Tree"
}

In the component controller init method of the embedding application (not deployed to hcp, SAP Web IDE folder name: rights.availability), I tried to load the rightsdimtree app by using the following code:

jQuery.sap.registerModulePath("rights.dimension.tree", "/rightsdimensiontree");
jQuery.sap.require("rights.dimension.tree.Component");

When checking the network traffic in my browser when executing the jQuery.sap.require statement I see the following:

Apparently the resource cant be found. Can you give me some further explanation what I have done wrong?

Another thing that really consuses me is the fact that deploying to hcp just works if the sap.app.type in the manifest.json is set to "application":

In my case this is no "standalone" application. It's more like a tree view I want to reuse in many applications as an F4-ValueHelp. As soon as I set the sap.app.type to "component" deployment to hcp is not possible anymore (Error: Can't build application).

Thanks in advance.

Regards

Tobias

[jamie_cawley · Accepted solution]

Is the app's name rightsdimtree or rightsdimensiontree?  In hcp under html5 application make sure it is running and accessible.

Regards,

Jamie

SAP - Technology RIG

[former_member204167 · Accepted solution]

Hi,

HTML5 Appl. Name:

So, just a typo in my last post. SAP Web IDE Folder Name:

I noticed that my Component.js is actually located in the Webapp folder of my rights.dimension.tree.

I adjusted my code and it is working now:

jQuery.sap.registerModulePath("rights.dimension.tree", "../../rightsdimensiontree/webapp");
jQuery.sap.require("rights.dimension.tree.Component");

Nevertheless, this looks pretty strange to me that I have to include the "webapp" folder in the path. Has this something to do with the "entryPath" in the routes settings in the neo-app.json file?

Moreover, I still don't understand how to reuse another SAPUI5 component (instead of a SAPUI5 application). As I mentioned this is not really designed to be a stand alone application that should be deployed to hcp in my opinion. It's more a component that should be used as a Value Help in many other applications.

Big Thanks for your help Jamie!

[jamie_cawley · Accepted solution]

Whats in the dist directory?  In you have a webapp folder in there then you may have to adjust the project.json where you should find a build.sourceFolder node.

Maybe this will help you

Creating a New SAPUI5 Component - UI Development Toolkit for HTML5 (SAPUI5) - SAP Library

Regards,

Jamie

SAP - Technology RIG

[former_member204167 · Accepted solution]

Distribution folder looks like:

When using the following URL in my browser:

https://webidetesting9338990-s0010643687trial.dispatcher.hanatrial.ondemand.com/rightsdimensiontree/...

I can actually see the code in the component controller of my rights dimension component.

Without the "webapp" part I get a http 404.

My project.json looks like:

[former_member204167 · Accepted solution]

Hi Jamie,

I understand why I currently need the "webapp" part. I have removed the route from the neo-app.json and I have even deactivated the HTML5 App. Loading of my rights tree still works. I am pretty sure by using the "../../ " I navigate back the the "Web IDE root" and from there I can access my app by using "rightsdimensiontree/webapp". So, I can easily access other applications/components this way. I am really interested what I have to do to get this working on the ABAP Back-End later. I will deploy both applications to an ABAP Back-End later and hopefully it's still possible to load one from the other.

[jamie_cawley · Accepted solution]

Yes the path ../../rightsdimensiontree/webapp

is trying to load the app out of orion.  Switching it back to /rightsdimensiontree with the neo-app config should load the app from the hcp app, just need to figure out what is wrong with the path.  This should keep the apps working the same when deployed into abap.

Regards,

Jamie

SAP - Technology RIG

[former_member204167 · Accepted solution]

Hi,

my embedding app: "rights.availability" is not deployed to hcp. Has the neo-app.json any effect this way?

[jamie_cawley · Accepted solution]

That shouldn't matter.

Regards,

Jamie

SAP - Technology RIG

[former_member204167 · Accepted solution]

I am back to my initial settings:

route in the neo-app.json in my rights.availability app:

JS:

HTML5 App with name: "rightsdimensiontree" is running.

When starting the app I get the following error caused by jQuery.sap.require statement:

Seems like it's looking for "rightsdimensiontree" path on Orion folder.

There are some other routes in my neo-app.json file I am confused about:

and

What are these routes doing? Can they be part of the problem?

[jamie_cawley · Accepted solution]

Just to confirm, rights.dimension.tree is the namespace of the application?  The other routes are required to load the ui5 libraries.  I believe there are two because of the different folder structures apps can have.

Regards,

Jamie

SAP - Technology RIG

[former_member204167 · Accepted solution]

rights.dimension.tree is used in the manifest.json for the id (I am not sure what that actually means to define an ID here):

and it is used when the component controller is instantiated:

So, I guess it's the namespace of the component. I wouldn't know where I could define a namespace if not here.

[former_member204167 · Accepted solution]

Hi Jamie,

I think I have it solved now. First of all I start my HTML5 app that I want to reuse from hcp and noted that the following URL is called to load the component.js:

https://rightsdimensiontree-suser.dispatcher.hanatrial.ondemand.com/webapp/Component.js

As you can see there is a "webapp" folder even in the deployed app (for a reason I don't understand).

So, since the namespace of the component that I want to reuse is "rights.dimensions.tree", I mapped this namespace to "/rights/dimension/tree/webapp" and I load the component controller:

jQuery.sap.registerModulePath("rights.dimension.tree", "/rights/dimension/tree/webapp");
jQuery.sap.require("rights.dimension.tree.Component");

This just works because of the following entry in the neo-app.json, that actually maps the path "/rights/dimension/tree" to the HTML5 application "rightsdimensiontree"

{
  "path": "/rights/dimension/tree",
  "target": {
  "type": "application",
  "name": "rightsdimensiontree"
  },
  "description": "Rights Dimension Tree"
  },

The only open question is why I have this webapp path in my application. It's not contained in the "dist" folder that was automatically generated in the SAP Web IDE when deploying the application to hcp. Can this be related to the code in my ".project.json"?

{
  "projectType": [
    "sap.watt.uitools.ide.fiori",
    "com.watt.common.builder.sapui5clientbuild"
  ],
  "build": {
    "targetFolder": "dist",
    "sourceFolder": "webapp",
    "buildRequired": true,
    "lastBuildDateTime": "Tue, 19 Apr 2016 08:51:00 GMT"
  },
  "generation": [
    {
      "templateId": "ui5template.basicSAPUI5ApplicationProject",
      "templateVersion": "1.32.0",
      "dateTimeStamp": "Sat, 16 Apr 2016 11:07:48 GMT"
    }...................

Thank you for all your help Jamie. I really have a good understanding of the application descriptor file and hcp deployment now. I think I also now how to get this running in the ABAP backend later.

Regards

Tobias

[jamie_cawley · Accepted solution]

I'm not sure why.  The projects I have done this with never required the webapp mentioned in the path.

Regards,

Jamie

SAP - Technology RIG

[maheshpalavalli · Accepted solution]

Hi Jamie & Tobias,

I am facing a similar kind of issue, Could you please check it?

Loading/Instantiating one Component in another ... | SCN

Best Regards,
Mahesh