cancel
Showing results for 
Search instead for 
Did you mean: 
Subscribe

Hi,

I am new to Fiori Elements and wondered how to use cross app navigation.

I use CAP annotations and the Launchpad Subscription in the SAP Cloud Platform Cockpit.

My app basically looks like this:

I navigate from App 1 Object Page to App 2 Object Page.

My annotations look like this:

annotate Locations with @(
    UI: {
        HeaderInfo: {
            TypeName: '{i18n>location}',
            TypeNamePlural: '{i18n>locations}',
            Title: { Value: name },
            Description: { Value: ID }
        },
        LineItem: [
            { Value: ID },
            { Value: name },
            { Value: companyCode },
            { Value: brand },
            { Value: plant },
            { Value: storageLocation }
        ]
        Facets: [
            {$Type: 'UI.ReferenceFacet', Target: 'locationMaterial/@UI.LineItem', Label: '{i18n>locationMaterials}'}, 
...
annotate LocationMaterial with @(
    UI: {
        LineItem: [
            { Value: seqnr },
            {
                $Type:'UI.DataFieldWithIntentBasedNavigation', 
                Value: material.ID, 
                SemanticObject: 'Materials',
                Action: 'display'
                
            },
            {
                $Type:'UI.DataFieldForIntentBasedNavigation',
                Label:'Action for Navigation TEST', 
                SemanticObject: 'Materials',
                Action: 'display'
            },
            { Value: serviceType },
            { Value: location.ID },
            { Value: location.name }
        ],
...

manifest.json of App1:

"crossNavigation": {
            "inbounds": {
                "intent1": {
                    "signature": {
                        "parameters": {},
                        "additionalParameters": "allowed"
                    },
                    "semanticObject": "uimodule",
                    "action": "display",
                    "title": "{{appTitle}}",
                    "icon": "sap-icon://functional-location"
                }
            },
            "outbounds": {
                "ExampleNavigationTarget": {
                    "semanticObject": "Materials",
                    "action": "display",
                    "parameters": {
                        "material_ID": {}
                    }
                }
            }
        }

manifest.json of App2

"crossNavigation": {
            "inbounds": {
                "intent1": {
                    "signature": {
                        "parameters": {
                        },
                        "additionalParameters": "allowed"
                    },
                    "semanticObject": "Materials",
                    "action": "display",
                    "title": "{{appTitle}}",
                    "icon": "sap-icon://product"
                }
            }
        },

I tried many different possibilities of inbound and outbound parameters but in any case it sends location_ID (so the ID of the object of the object page of App1) instead of material_ID resp. material.ID (so the ID of the object where I want to navigate to).

Example:

My url looks like this: ... #Materials-display?ID=Location1&altitude=0&city=NewYork∁anyCode=001&country_code=US&... (it sends all parameters of entity Location)

But it should look like this: ... #Materials-display?ID=Material1 ... (this one works when typing in manually)

So the navigation itself works. The problem is of code 404 as the second app has no Material object page to show for a material of ID location1.

Why does it send the wrong parameter? And how could I force it to use the right one(s)?

Thanks a lot in advance for your help!


Best regards

View Entire Topic
marcmaur
Participant
0 Likes

Hello shorstmann and sbarzaghi,

I managed to solve a similar issue by setting a mapping in the inboud crossnavigation settings.

Take a look here https://answers.sap.com/answers/13231958/view.html.

I hope this could help.

Best regards,

Marc

SamueleBarzaghi
Participant

Hi Marc,

I can reproduce your use case but unfortunately is not enough to solve our use case, I'm having problems with the mapping to the field with name "ID", and also the prepared link is not the direct link to an entity, doing a simple navigation seems a labyrinth 😞

Our current workaround is to use UI.DataFieldWithUrl with the url prepared by backend, something like:

const cds = require("@sap/cds");

module.exports = cds.service.impl(async function () {
    this.after("READ", "SolutionProducts", (solutionProducts, req) => {
        for (const solutionProduct of solutionProducts) {
            solutionProduct.product.portalUrl = `#Products-manage&/Products(ID=${solutionProduct.product.ID},IsActiveEntity=true)`;
        }
    });
});

////////////////////////////////////////////////////////////////////////////
//
//  SolutionProducts List Page
//
annotate Services.SolutionProducts with @(
    UI: {
        LineItem: [
            { Value : product_ID },
            {Value: notes},
            {
                $Type : 'UI.DataFieldWithUrl',
                Url : product.portalUrl,
                Value : product.name,
            },
        ]
    }
);

I'm preparing a repository with a sample.

Regards,

Sam