How to add extension points to smart template application using ReplaceFacet via breakouts

I work on SAPUI5 and smart templates as a Developer in SAP Labs, I found some interesting details on breakouts in Smart templates and hence I wanted to go for a blog on this topic.

As everyone would be aware of extending a smart template fiori app using breakouts, in this blog I will be explaining how to use the ReplaceFacet to add extension point on an existing section.

For example if there is a requirement to add a Bar Chart (or any control of your choice )in an Object page under any section, we can use extension points to add additional sections in the following places:

• BeforeFacet: The extension will be inserted before a given section.

• ReplaceFacet: The extension will be rendered instead of an existing section.

• AfterFacet: The extension will be inserted after a given section.

So now we with the help of ReplaceFacet we can make the List to render on a particular Facet of the Object page.

Before going through this blog, prerequisites for the UI5 / Non UI5 developers should be :

1. To know how to create a smart template application in Web IDE
2. To know to concept of Annotations in smart template
3. Basic UI5 knowledge on XML fragments, JS Views .

Now I have a smart template application created in https://code-fiori.dispatcher.cert.hana.ondemand.com/ with an Odata service, also it has a list view and an object page.

In my the Odata that I have used entity type is FirstEntity and EntitySet is FirstEntitySet.

In the Object page , there are two Facets written in the annotations.xml

<Annotations Target="NameSpace.FirstEntity">
				<Annotation Term="UI.Facets">
					<Collection>
						<Record Type="UI.CollectionFacet">
							<PropertyValue Property="ID" String="GeneralInformation"/>
							<PropertyValue Property="Label" String="{@i18n&gt;@GeneralInfoFacetLabel}"/>
							<PropertyValue Property="Facets">
								<Collection>
									<Record Type="UI.ReferenceFacet">
										<PropertyValue Property="Label" String="{@i18n&gt;@GeneralInfoFacetLabel}"/>
										<PropertyValue Property="Target" AnnotationPath="@UI.Identification"/>
									</Record>
								</Collection>
							</PropertyValue>
						</Record>
						<Record Type="UI.ReferenceFacet">
							<PropertyValue Property="Label" String="{@i18n&gt;@SecondFacetLabel}"/>
							<PropertyValue Property="Target" AnnotationPath="MessageSolutionSet/@UI.LineItem"/>
							<PropertyValue Property="ID" String="SecondFacet"/>
						</Record>
					</Collection>
				</Annotation>

I would like to insert the Bar Chart (sap.suite.ui.microchart.InteractiveBarChartBar) in the SecondFacet.

The most important step is to first set an ID to the facet where you would like to render the control. In my code snippet I have set the property value ID as “SecondFacet” under the UI.ReferenceFacet .

This ID will be used in a later step while configuring the app descriptor (manifest.json)

The next step is create the fragment for under which we should have the code for InteractiveBarChart.

Under webapp create a folder “ext” and under this folder create a fragment file as InteractiveBarChartControl.fragment.xml,

In the fragment xml copy the below sample snippet,

<core:FragmentDefinition
	xmlns="sap.suite.ui.microchart"
	xmlns:m="sap.m"
	xmlns:core="sap.ui.core"
	>
	<m:FlexBox width="20rem" height="10rem" alignItems="Center" class="sapUiSmallMargin">
			<m:items>
				<InteractiveBarChart labelWidth="25%" selectionChanged="selectionChanged" press="press">
					<bars>
						<InteractiveBarChartBar label="Product 1" value="10" displayedValue="10%"/>
						<InteractiveBarChartBar label="Product 2" value="20" displayedValue="20%"/>
						<InteractiveBarChartBar label="Product 3" value="70" displayedValue="70%"/>
					</bars>
				</InteractiveBarChart>
			</m:items>
		</m:FlexBox>
	
</core:FragmentDefinition>

Next step is to tweak a little bit in the manifest.json file, navigate to the “extends” property and add the following extension definition.

Since the extension is done for a view under an ObjectPage, we put the fragment name inside the viewExtensions attribute and under the template “sap.suite.ui.generic.template.ObjectPage.view.Details”.

Since we are replacing the Reference Facet of the “FirstEntity”( i.e “Second facet”),  by the Bar Chart control we keep this as “ReplaceFacet|FirstEntitySet|SecondFacet”.

Note : Format for the ReplaceFacet will be “ReplaceFacet|<<EntitySet>>|<<ID of the Facet to be used>>” Also, this is the most important step and make sure the IDs are kept unique for the facets defined.

Please refer the code snippet below for the extension in manifest,json

		"extends": {
			"extensions": {
				"sap.ui.viewExtensions":{
					"sap.suite.ui.generic.template.ObjectPage.view.Details": {
						"ReplaceFacet|FirstEntitySet|SecondFacet" : {
							"type": "XML",
							"className" : "sap.ui.core.Fragment",
							"fragmentName" : "TestApp.ext.InteractiveBarChartControl"
						}
					}
				}
			}
		},

Now save the files and once the application is executed navigate from the list View to the object page, you will find the Interactive Bar Chart rendered as shown below.

By this way, developers can easily write breakouts by including the desired controls or even custom controls in a smart template fiori app.

Hope you find this blog helpful ?.

Further references and useful links regarding extensions in generated Fiori app:

https://sapui5.hana.ondemand.com/#/topic/92ad9968e41748aeb74971f7a08a91c8.html

With this you can understand the concept of replacing a facet with any control via breakouts. Also in my further blogs I will be explaining few more topics related to breakouts in SmartTemplates and more on SAPUI5 and Fiori.

Thank you