Cross-app navigation in cloud launchpad sends wrong parameter (with CAP CDS)

[#1]

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

[marcmaur]

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]

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

[gregorw]

I think you need to define a Mapping. Check out the UI Annotation Documentation for DataFieldWithIntentBasedNavigation.

[former_member714084]

Hi Gregor,

thank you for your suggestion. I was unsure how to implement the documentation you mentioned. I tried to do the following in the annotation for LocationMaterial (List on object page for location entity App1):

annotate LocationMaterials with @(
    UI: {
        LineItem: [
            { Value: seqnr },
            {
                $Type:'UI.DataFieldWithIntentBasedNavigation', 
                Value: material.ID, 
                SemanticObject: 'Materials',
                Action: 'display',
                Mapping: [
                    {
                        LocalProperty: material.ID,
                        SemanticObjectProperty: 'ID'
                    }
                ]
            },
...

Perhaps it is also helpful to see my data (shortened) model for this:

// This is for the object of object page (App1)
entity Locations :  {
    key ID                    : LocationIdT;
        name                  : common.NameT;
        locationMaterial      : Association to many LocationMaterials
                                    on locationMaterial.location = $self;
}


// This is for my target object page (App2)
entity Materials {
    key ID                    : common.MaterialIdT;
        name                  : localized common.NameT;
        baseUoM               : common.UnitT;
        locationMaterial      : Association to many LocationMaterials
                                    on locationMaterial.material = $self;
}

// This is for the list on object page (App1)
entity LocationMaterials {
    key material    : Association to Materials;
    key location    : Association to Locations;
    key seqnr       : common.SequenceNumber;  
}

Unfortunately this mapping did not change the outcome that the location ID is sent instead of material ID. Am I doing something wrong with the mapping?

Do you maybe have more documentation on how to implement this in CAP CDS?

Thanks a lot!

[gregorw]

Would it be possible that you share your project in a public Git repository?

Do you use OData V4 or V2?

[former_member714084]

I used OData v2.

Unfortunately I cannot share the code. But I will adapt the situation to an implementation of the bookshop example and publish the link to the repository here as soon as I am done.

Thanks!

[former_member706557]

Hi Gregor,

Is cross app navigation generally possible with OData V4?

[former_member714084]

I published the bookshop sample code under https://github.com/svhorstmann/bookshop-example. I now have books with corresponding stocks which are located in different storages. I now want to navigate from book object page to a storage object page via a stocks table.

The test data is sufficient for book 201 Wuthering Heights.

If you need any more information, please let me know. Thank you!

[gregorw]

Dear Svea,

unfortunately the backend didn't made it to the repository. Please also avoid to check in ZIP and MTAR files to the Git repository.

Best regards
Gregor

[former_member714084]

Dear Gregor,

thank you for this information. I am really sorry. Now everything should be fine.

Best regards

Svea

[former_member714084]

Hi gregorw,

I just wanted to check whether the Git respository worked for you and you found an idea of a solution for that issue 🙂

[SamueleBarzaghi]

Hi Svea,

I have the same issue, I can't navigate to intent, but using this:

    UI: {
        LineItem: [
            {
                $Type : 'UI.DataFieldForIntentBasedNavigation',
                SemanticObject : 'Products',
                Action: 'manage',
                Inline : true,
                Label : 'Manage',
                Mapping: [
                    {
                        LocalProperty: product_ID,
                        SemanticObjectProperty: 'SAM_ID'
                    }
                ]
            },

"product_ID" is mapped to "SAM_ID", look at the SAM_ID variable, it contains my product_ID:

flpSandbox.html#Products-manage?HasActiveEntity=false&HasDraftEntity=false&ID=e3959cb6-9320-4194-b7b4-105064626377&IsActiveEntity=true&SAM_ID=c841432c-c949-4c05-8937-f3cf83619ebe&name=Sol∏uct={"ID":"c841432c-c949-4c05-8937-f3cf83619ebe","name":"Prod","IsActiveEntity":true}&sap-ushell-navmode=inplace&sap-xapp-state=TASLGE9BDOIESU5FHW3HTEF20I3C4AMHIE2Y3G107&/?sap-iapp-state=TASZEMLFN76KRWESOYMLT7GDPSJVXMJTSEGSV73J0

However when I try to map to "ID" the property is not mapped and completely disappears.

Seems the wrong way, the path is completely strange too. I will investigate.

Ciao

Sam

[SamueleBarzaghi]

Looks like:

[akuller]

Hi sbarzaghi ,

have you already found a solution for the ID?I am stuck on the exact same problem.

[former_member1274800]

Hi akuqb ,

We are using the workaround that you can find in the comment below, no more investigation.