Skip to Content

Is there a way to reuse components when deploying to the Sap Cloud Platform?

I am trying to reuse an application from another through the use of a ComponentContainer as demonstrated in this blog: https://blogs.sap.com/2017/10/23/demystifying-the-art-of-component-reuse-in-sapui5/

My application is being developed through the SAP Web IDE Full-Stack and is being deployed to the SAP Cloud Platform. I have seen examples of this working though deployment to the ABAP Repository but this is not what we are trying to do.

So far I have created a Child App and a Parent App and I am attempting to call the Child App from the Parent using a ComponentContainer. I have deployed the Child App but I am unsure as how to reference this app from the Parent.

This is my ParentApp view:

<mvc:View controllerName="Parent.MyParentApp.controller.View1"
xmlns:html="http://www.w3.org/1999/xhtml" 
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
displayBlock="true" xmlns="sap.m">
<App id="idAppControl">
    <pages>
        <Page title="{i18n>title}">
            <content>
                <Text text="Hello"/>
                <core:ComponentContainer width="100%"
                    name="MyChildApp"
                    component="MyChildApp"/>
            </content>
        </Page>
    </pages>
</App>

ParentApp Component.js

jQuery.sap.registerModulePath("MyChildApp", "/mychildapp/");
        jQuery.sap.require("MyChildApp.Component");

ParentApp neo-app.json

{
    "path": "/mychildapp/",
    "target":{
        "type": "application",
        "name": "mychildapp"
    },
    "description": "My Child App"
}

This is my ChildApp view:

<mvc:View controllerName="Child.MyChildApp.controller.View1" xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc"
displayBlock="true" xmlns="sap.m">
<App id="idAppControl">
    <pages>
        <Page title="{i18n>title}">
            <content>
                <Text text="World"/>
            </content>
        </Page>
    </pages>
</App>

Currently I am just getting the error: "Uncaught (in promise) Error: failed to load 'myChildApp/model/models.js' from ../../resources/myChildApp/model/models.js: 404 - ".

I am assuming the issue is to do with the paths given in the Component.js and neo-app.json but I am unsure what these paths need to be when working from the cloud platform.

I am quite new to Ui5 development so not sure if what I am trying to do is even possible, but any advice/help with this would be greatly appreciated.

Thanks

Add a comment
10|10000 characters needed characters exceeded

Related questions

1 Answer

  • Best Answer
    Posted on Feb 07, 2019 at 11:10 AM

    Hi Joseph Watkins,

    You did a small mistake there your child component namespace is not "mychildapp", it is "Child.MyChildApp".. and at manyplaces you are doing it incorrectly.. Just make sure you follow that blog correctly..

    In that blog the namespace is bourneMyParentApp but for you it is 'Child.MyChildApp'

    BR,

    Mahesh

    Add a comment
    10|10000 characters needed characters exceeded

Before answering

You should only submit an answer when you are proposing a solution to the poster's problem. If you want the poster to clarify the question or provide more information, please leave a comment instead, requesting additional details. When answering, please include specifics, such as step-by-step instructions, context for the solution, and links to useful resources. Also, please make sure that you answer complies with our Rules of Engagement.
You must be Logged in to submit an answer.

Up to 10 attachments (including images) can be used with a maximum of 1.0 MB each and 10.5 MB total.