Step 3: Smart Field with Smart Link

We now show yet another but quite different feature of the SmartField control, SmartField used in combination with SmartLink, which allow you to embed a dialog with related cross-application links.

We will learn that a SmartField control in an XML view bound to an OData model with a SemanticObject annotation renders a special link that shows a dialog containing different cross-application links. These cross-application links are neither configured within the XML view nor directly specified in the OData metadata. The information about these links is extracted automatically when the view is running in the SAP Fiori launchpad or, more generally, the unified shell.

Preview

Figure 1: Smart Field with Smart Link

When you choose the link, a dialog opens:

Figure 2: Dialog with Navigation Targets (One of Which Is a “Fact Sheet”

Coding

You can view and download all files in the Explored app in the Demo Kit under Smart Controls - Step 3 - Smart Field with Smart Link.

To have a working example, we include the UShellCrossApplicationNavigationMock.js class. This class basically mocks the required services, which would normally be available in the SAP Fiori launchpad. These services provide the cross-application navigation targets along with the URL parsing, thus making it possible to determine which link qualifies as a “fact sheet” target. As these services will be provided for in a real-world scenario, we will not analyze the mock class in more detail and also not provide a code listing of the class.

SmartLink.view.xml

<mvc:View 
	xmlns:mvc="sap.ui.core.mvc"
	controllerName="sap.ui.demo.smartControls.SmartLink"
	xmlns:form="sap.ui.layout.form" 
	xmlns:smartField="sap.ui.comp.smartfield">
	<form:SimpleForm 
		minWidth="1024" 
		maxContainerCols="2"
		layout="ResponsiveGridLayout" 
		labelSpanL="3" 
		labelSpanM="3"
		emptySpanL="4" 
		emptySpanM="4" 
		columnsL="1" 
		columnsM="1" 
		class="editableForm">
		<form:content>
			<smartField:SmartLabel labelFor="idName" />
			<smartField:SmartField value="{Name}" id="idName" />
		</form:content>
	</form:SimpleForm>
</mvc:View>

We recognize our setup of the previous two examples in the view.xml. We are referring to a different field but apart from this, there is no substantial change.

SmartLink.controller.js

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

	return Controller.extend("sap.ui.demo.smartControls.SmartLink", {
		onInit: function() {
			this.getView().bindElement("/Products('4711')");

			jQuery.sap.require("sap.ui.demo.smartControls.test.service.UShellCrossApplicationNavigationMock");
			this._oUShellMock = new sap.ui.demo.smartControls.test.service.UShellCrossApplicationNavigationMock();
			this._oUShellMock.init();
		}
	});

});

In the controller.js file we notice the instantiation of the mock class UShellCrossApplicationNavigationMock mentioned above and also the subsequent cleanup.

metadata.xml

<?xml version="1.0" encoding="utf-8"?>
<edmx:Edmx Version="1.0"
	xmlns:edmx="http://schemas.microsoft.com/ado/2007/06/edmx"
	xmlns:m="http://schemas.microsoft.com/ado/2007/08/dataservices/metadata"
	xmlns:sap="http://www.sap.com/Protocols/SAPData">
	<edmx:DataServices m:DataServiceVersion="2.0">
		<Schema Namespace="com.sap.wt03" 
			sap:schema-version="1" xmlns="http://schemas.microsoft.com/ado/2008/09/edm">
			<EntityType Name="Product">
				<Key>
					<PropertyRef Name="ProductId" />
				</Key>
				<Property Name="ProductId" Type="Edm.String" />
				<Property Name="Name" Type="Edm.String" sap:label="My Favorite Product" />
			</EntityType>
			<EntityContainer m:IsDefaultEntityContainer="true"
				sap:supported-formats="json">
				<EntitySet Name="Products" EntityType="com.sap.wt03.Product" />
			</EntityContainer>
			<Annotations Target="com.sap.wt03.Product/Name"
				xmlns="http://docs.oasis-open.org/odata/ns/edm">
				<Annotation Term="com.sap.vocabularies.Common.v1.SemanticObject"
					String="Name" />
			</Annotations>
		</Schema>
	</edmx:DataServices>
</edmx:Edmx>

As you would expect, one piece of configuration is found in the metadata, namely the SemanticObject annotation. With this annotation we ensure that the SmartField embeds a special link control, the SmartLink control. Let's assume we are running in a unified shell that provides the services CrossApplicationNavigation and URLParsing (that we are mocking in our UShellCrossApplicationNavigationMock class). In this case, when the link is pressed, the SmartLink control triggers these service calls, analyzes the result, and renders the cross-application links accordingly. Since these services deliver configuration content of the unified shell, SmartLink is controlled by more than just OData metadata.

Products.json

[{
	"ProductId": "4711",
	"Name": "SAP HANA"
}]

We list the content of this for reasons of completeness. We note that this JSON file only contains the data shown for the link, nothing related to the dialog.