How to use Smart Link in Fiori Elements

[TahirLeonenko]

Main goal: Annotate an EntityType's property with multiple semantic objects.

On the website: Demo Kit - SAPUI5 SDK, in API reference, there is something called Smart Links which allow you to annotate a single property with multiple semantic objects. If you go to Samples and search for it, you can find an example for "Smart Link with field annotated to multiple SemanticObjects", and by clicking on the "Show Source Code" button, it seems like the view.xml file is implemented as:

<SmartLink text="{Name}" semanticObject="dummy" additionalSemanticObjects="demokit_smartlink_example_09_SemanticObjectNameAdditional,demokit_smartlink_example_09_SemanticObjectNameAdditional2" enableAvailableActionsPersonalization="false"/>

and there is a controller.js:

sap.ui.define([ 'sap/ui/core/mvc/Controller', 'sap/ui/comp/navpopover/SemanticObjectController' ], 
function(Controller, SemanticObjectController) { 
"use strict"; 
return Controller.extend("sap.ui.comp.sample.smartlink.example_09.Example", { onInit: function() {
SemanticObjectController.destroyDistinctSemanticObjects(); 
this.getView().bindElement("/ProductCollection('1239102')"); 
} 
}); 
}); 

However in my own Fiori project which I've created from "SAP Fiori Generator" in SAP Business Application Studio, I do not have such a views.xml file, nor anything that resembles it. I am mainly using an annotations.xml file, which implements a table using:

<Annotations xmlns="http://docs.oasis-open.org/odata/ns/edm" Target="SAP.ZZ1_C_SLCNTRINFOQRYType/SalesDocument"> 
  <Annotation Term="com.sap.vocabularies.Common.v1.SemanticObject" String="SalesContract"/> 
</Annotations> 
<Annotations Target="SAP.ZZ1_C_SLCNTRINFOQRYType"> 
  <Annotation Term="UI.LineItem" Qualifier="tab0"> 
    <Collection> 
      <Record Type="UI.DataField"> 
        <PropertyValue Property="Label" String="Sales Document"/> 
        <PropertyValue Property="Value" Path="SalesDocument"/> 
      </Record> 
      ... 
    </Collection> 
  </Annotation> 
  ... 
</Annotations>

In this case, the first Annotations element populates all references to the SalesDocument property with navigation to the apps that have the semantic object SalesContract. However I want to add a second semantic object for app navigation, "AccountingDocument", which I do not believe is possible with this annotation. Could someone please explain how I could adapt the sample Smart Link example to my case, or suggest an alternative?

Thank you for the help!

[TahirLeonenko]

Bumping

[TahirLeonenko]

Bumping

[TahirLeonenko]

Bumping

[TahirLeonenko]

Bumping

[TahirLeonenko]

Bumping

[TahirLeonenko]

Bumping

[ArunJacob]

ok in that case( add the smartLink to all elements in the column "Sales Document" of  table), the association Consumption.semanticObject comes to the rescue. link

In your CDS view for table, enhance it with the @Consumption.semanticObject annotation.

for example:-

@AbapCatalog.sqlViewName: 'ZSALES_DOC'
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Sales Document List'
define view entity ZC_SalesDocument as select from ZI_SalesDocument {  

  @ui.lineItem: [{ position: 10, type: #STANDARD }]  
  @ui.identification: [{ position: 10 }]  
  @Consumption.semanticObject: 'SalesDocument'  // Enables SmartLink  
  key SalesDocument as SalesDocument,  

  @ui.lineItem: [{ position: 20 }]  
  Customer,  

  @ui.lineItem: [{ position: 30 }]  
  NetAmount  

}

Thanks,

Arun

[TahirLeonenko]

Hi Arun, thank you for your help and time! I tried doing what you instructed me to do, but it is not working. For some reason commenting does not allow my to format any code or etc., so I've posted an "answer" on this post with the relevant code that I've created so I can achieve the desired affect of having two semantic objects annotating my Sales Document field. Could you please take a look at it and advise on what needs to be changed? Thank you for your time and knowledge!

[ArunJacob]

Hi,

When using Fiori Elements, the app is primarily metadata-driven, which explains why you don't see a views.xml file. Instead, you're working with an annotations.xml file.

To add a second semantic object for app navigation, "AccountingDocument", please try the below:-

1) Create a view.xml and corresponding controller holding the 

<SmartLink text="{Name}" semanticObject="dummy" additionalSemanticObjects="demokit_smartlink_example_09_SemanticObjectNameAdditional,demokit_smartlink_example_09_SemanticObjectNameAdditional2" enableAvailableActionsPersonalization="false"/>

2) Update the manifest.json

"routes": [
    {
        "pattern": "account",
        "name": "AccountView",
        "target": "AccountView"
    }
],
"targets": {
    "AccountView": {
        "viewType": "XML",
        "viewName": "<namespace>.view.AccountDocument"
    }
}

This way we can add custom UI elements (like smartLink) beyond what annotations provide.

[TahirLeonenko]

I probably wasn't clear enough, but I want to add the smartLink to all elements in the column "Sales Document" of my table. How would I adapt the <SmartLink> element or controller to do so?

[TahirLeonenko]

I've created a test cds view to try this out in, but currently I have these components:

@AbapCatalog.sqlViewName: 'ZCSEMTEST'
@AbapCatalog.compiler.compareFilter: true
@AbapCatalog.preserveKey: true
@AccessControl.authorizationCheck: #NOT_REQUIRED
@EndUserText.label: 'Testing for semantics'
@OData.publish: true
define view zz1_c_SemanticTesting as select from I_SalesDocument
{
  @ui.lineItem: [{ position: 10, type: #STANDARD }]  
  @ui.identification: [{ position: 10 }]  
  @Consumption.semanticObject: 'SalesDocument'  // Enables SmartLink  
  @EndUserText.label: 'Testing 1'
  key SalesDocument as SalesDocument
}

SmartLink.view.xml:

<mvc:View controllerName ="semantic.testing.controller.SmartLink"
    xmlns:mvc="sap.ui.core.mvc" displayBlock="true"
    xmlns="sap.ui.comp.navpopover"
    xmlns:m="sap.m"
    >

    <SmartLink id="smartLink" text="{SalesDocument}"
        semanticObject="SalesDocument"
        additionalSemanticObjects="SalesContract, AccoutingDocument"
        enableAvailableActionsPersonalization="false"/>
</mvc:View>

 SmartLink.controller.js:

sap.ui.define([
    "sap/ui/core/mvc/Controller",
    "sap/ui/comp/navpopover/SemanticObjectController"
], function (Controller, SemanticObjectController) {
    "use strict";

    return Controller.extend("semantic.testing.controller.SmartLink", {
        onInit: function () {
            SemanticObjectController.destroyDistinctSemanticObjects();
        }
    });
});

 manifest.json:

"routes": [
    {
        "pattern": "MultipleSemantics",
        "name": "MultipleSemantics",
        "target": "MultipleSemantics"
    }
],
"targets": {
    "MultipleSemantics":{
        "viewType": "XML",
        "viewName": "dev.mirror.dev.view.MultipleSemantics",
        "viewId": "myTable"
    }
}

But in the preview of the app, my links remain unlinked:

Could you please advise me on what should be changed here? The links for the AccountingDocument apps and SalesContract apps do not show up.