App to App external navigation: binding configuration

[marcmaurí]

Dear Fiori Elements Experts,

I developed 2 Fiori elements apps with Fiori elements tools for an OData v2 service built on CAP.

App A is an LROP, where I deleted the OP. App B is an LROP.

My goal is to navigate from app A to B when selecting a row in A, setting a (hidden) property from A as a filter in B.

How should I configure the navigation parameters? Let me summarize my tests.

If I set the following crossNavigation parameters in app A, I get the value as expected:

            "outbounds": {
                "operation-display": {
                    "semanticObject" : "operation",
                    "action" : "display",
                    "parameters": {
                        "toWorkCenter_ID": {
                            "value": {
                                "value": "blablabla",
                                "format": "plain"
                            }
                        }
                    }
                }
            } 

Ok, so “toWorkCenter_ID” seems to be the parameter I need to fix.

As mentioned here by expanding sap.app section, I should use format = ‘binding’ and a binding path to my model as value, so I set the following configuration:

           "outbounds": {
                "operation-display": {
                    "semanticObject" : "operation",
                    "action" : "display",
                    "parameters": {
                        "toWorkCenter_ID": {
                            "value": {
                                "value": "ID",
                                "format": "binding"
                            }
                        }
                    }
                }
            }

But I get an unexpected result:

I also tested with format = 'binding' and the following values without getting success:

"value": "{/ID}",
"value": "{ID}",
"value": ">/ID",
"value": "{>/ID}",
"value": "code",       //another property

My model is defined like this:

            "": {
                "dataSource": "mainService",
                "preload": true,
                "settings": {
                    "defaultBindingMode": "TwoWay",
                    "defaultCountMode": "Inline",
                    "refreshAfterChange": false,
                    "metadataUrlParams": {
                        "sap-value-list": "none"
                    }
                }
            }

Does anyone know how the set up binding here?

Thanks in advance.

Best regards,

Marc

[former_member474405]

Hi Marc,

as far as I know, so far the outbounds are only evaluated in the plain case. properties of the context used for navigation in the source app are automatically added to the navigation parameters. If I got it right, in your case this does not work out of the box, because the property names differ in the two apps (ID in the source and toWorkCenter_ID in the target? Or should it be rather the other way round?).

To achieve a navigation with the right parameter value provided, I see several possibilities:

• (Recommended) You could use a SemanticObject Annotation on the source property together with SemanticObjectMapping Annotation. However, that would render the property as a link providing the user the option to navigate (instead of the chevron navigation).
• You could use the onListNavigationExtension to override the chevron navigation with an extension. In the extension, you could implement a mapping according to your needs and use the navigateExternal method to trigger the navigation. However, extensions should only be used as last resort if you cannot achieve the requirement by other means for several reasons (e.g.it might create future effort on your side for maintenance).
• You could define a corresponding target mapping in the FLP configuration. However, this belongs to the configuration layer, and I assume your solution should rather be provided in the development layer.

If the property should not be shown to the user (you mentioned "hidden" in your problem description), in all solutions you might additionally need to ensure that the property is actually requested from the backend. (Maybe by using RequestAtLeast.) In the recommended solution, this would mean, that you define the SemanticObject Annotation actually on a different property (the one that should be shown as a link.)

Does this answer your question?

Best regards,

Manuel

[marcmaurí]

Hi manuel.pastorini,

thank you so much for such a detailed answer!

Indeed, out-of-the-box navigation does not work because the source property (ID) differs from the destination (toWorkCenter_ID).

Thanks for the different approaches to fix this. I think the second option would fit my requirements, although I would prefer a solution where coding is not necessary.

Anyway, I still don't understand why my initial approach wouldn't work, as it's based on documentation: (Well, I know that sometimes documentation is not really accurate 🙂 )

https://help.sap.com/viewer/e7b44045619e4c32ba3dbf1383673aff/External_Beta/en-US/be0cf40f61184b358b5... (section sap.app)

"

outbounds: Specifies outbounds with a unique key or alias to describe intents that can be triggered from the application to navigate containing:

• semanticObject (mandatory); represents a business entity (such as 'Employee')
• action (mandatory); represents the action to perform on the business entity (such as 'display')
• parameters of navigation intents: Specifies the parameter name
  • value: parameters of navigation intents generated or triggered by the application, with:
    • a value; verbatim value (when 'plain' format is used), or a pattern (when 'regexp' format is used), or a value coming from a UI5 model (when 'binding' format is used), or a User Default reference (when 'reference' format is used) and a
    • format; indicates how value is to be interpreted: 'plain' ('value' is taken as a literal string value); 'reference' ('value' is a reference to a parameter maintained in the SAP Fiori launchpad (such as 'UserDefault.CostCenter'; the parameter value is used on the outbound intent parameter);| 'regexp' ('value' matches the specified pattern; 'binding' ('value' is a binding path; the value from the model at the specified binding path will be used on the outbound intent parameter)
• required: Indicator whether parameter is required (true, false)

Is there any other way to double check that the documentation statements are wrong?

I really appreciate your help regarding my concern.

Best regards,

Marc

[marcmaurí]

Hello everyone,

I managed to make the navigation work by configuring an inbound action in app B (the destination one) and setting a mapping between the incoming field and the existing one as a filter.

App B:

        "crossNavigation": {
            "inbounds": {                
                "navigateFromWorkCenters": {
                    "signature": {
                        "parameters": {
                            "ID": {
                                "required": true,
                                "renameTo": "toWorkCenter_ID"
                            }
                        },
                        "additionalParameters": "allowed"
                    },
                    "semanticObject": "operation",
                    "action": "navigate",
                    "title": "Operations App",
                    "subTitle": "",
                    "icon": ""
                }
            }   
        }

App A:

        "crossNavigation": {
            "inbounds": {
                …
            },
            "outbounds": {
                "operation-navigate": {
                    "semanticObject" : "operation",
                    "action" : "navigate",
                    "parameters": {}
                }
            }    
        } 

With the above settings, app A sends the property ID and app B renames it toWorkCenter_ID, which is the name of the filter field.

Anyway, I keep the question open because according to the help page, setting the outbounds in app A should also work and it doesn't.

Any thoughts are welcomed.

Thanks in advance,

Marc

[former_member818773]

Hello,

final post 🙂
it looks Mapping addition for annotation DataFieldWithIntentBasedNavigation is not working.

Anyways, there is an event you can use and it gets triggered when you press on your property annotated with DataFieldWithIntentBasedNavigation:
adaptNavigationParameterExtension

Note: pay attention to the manifest.json part.

In adaptNavigationParameterExtension you can rename(mapping) select options, and play in general with the request to App2.
So, your annotations stay as they are and it the event you do the mapping/renaming like:

adaptNavigationParameterExtension: function (oSelectionVariant, oObjectInfo) {
                if (oObjectInfo.action === 'Display' && oObjectInfo.semanticObject === 'MyProduct') {
                    var productPropertyName
                    const product_ID = oSelectionVariant.getSelectOption('product_ID')
                    if (product_ID !== undefined) {
                        productPropertyName = 'product_ID' //clicked on a product from Product assignement history LineItem facet(table)
                    } else {
                        productPropertyName = 'productId' //clicked on the product from Product FieldGroup facet
                    }
                    oSelectionVariant.getSelectOptionsPropertyNames().forEach(function (sSelectOptionName) {
                        //Remove all select options except productId/product_ID, as it is the only needed
                        //Rename it to ID in order to fit ID property name on MyProducts side
                        if (sSelectOptionName !== productPropertyName) {
                            oSelectionVariant.removeSelectOption(sSelectOptionName)
                        } else {
                            oSelectionVariant.renameSelectOption(productPropertyName, 'ID')
                        }
                    })
                }
            },

[former_member818773]

Hey guys, I just solved more or less the same issue.

I have App1 and from its object page I want to navigate to App2(MyProducts). My annotation looked like this:

$Type : 'UI.DataFieldWithIntentBasedNavigation',
            Value : product_ID,
            Label : '{i18n>product}',
            SemanticObject : 'MyProduct',
            Action : 'Display'

And it was not working as it was passing wrong ID in order to open the product on App2. It was sending the parrent ID of the object page in App1.
Anyways, after I saw you guys mentioned it is not working as the source property(product_ID in my case) and the target property(ID in my case) should be the same, I did the following:

1. defined a virtual property ID for my projection in my service.cds, so it has the same name(ID) as on target App2

@readonly entity MyEntity as projection on db.MyEntity;
    extend projection MyEntity with {
        @UI.Hidden @UI.HiddenFilter
        null as ID: UUID
    }

2. populated it with the product_ID value in my service.js file like:

srv.after('READ', 'MyEntity', async (items, request) => {
        for (const item of item) {
            item.ID = item.product_ID
        }
    })

3. and changed the annotation to:

$Type : 'UI.DataFieldWithIntentBasedNavigation',
            Value : ID,
            Label : '{i18n>product}',
            SemanticObject : 'MyProduct',
            Action : 'Display'

It works fine now. Still, it's certainly not the right way, but I spent a day figuring out how to get it to work out of the box, so I'll go with this solution for now.

If you managed to get it to work with just the annotation, please share the solution.

Thanks!

[marcmaurí]

Hi Pavel,

Thanks for sharing your solution.

Best regards,

Marc