Skip to Content
Technical Articles

Smart templates-Tips and Tricks

Hi All,

Fiori elements have proved to be a very powerful tool for enhancing and developing complex , robust  SAP Fiori  applications that give the users flexibility to perform a wide range of operations on the UI. But the challenge comes when we want to enhance them to suit our needs. Following are some practices and tips that helped me in these extensions

  1. Object Page Sections Layout

The object page facet annotations diplay FieldGroups in a column Layout. It adaps to the screen and is of course the default. But sometimes we would want a layout that’s more compact and is still responsive. Below is the comparison of the two layouts and how to achieve the latter

Column layout


Responsive Layout


Steps for Responsive Layout in the Object Page

1.Add an objectpage extension controller ( add any extension in objectpage  to get that controller)

2. The object page is rendered as Sections->Subsections->Blocks. Hence onInit method add the below code. You can always adjust the sizing to suit your needs.

	this.getView().getContent()[0].getSections()[0].getSubSections()[0].getBlocks()[0].getContent()[0].setLayout(new sap.ui.comp.smartform
				columnsXL: 3,
				columnsL: 3,
				columnsM: 3,
				labelSpanXL: 2,
				labelSpanL: 4,
				labelSpanM: 5,
				labelSpanS: 6,
				gridDataSpan: "XL2 L3 M3 S6",
				emptySpanXL: 0,
				emptySpanL: 0,
				emptySpanM: 0,
				emptySpanS: 0


2. Adding CSS or customizing columns in the smart table

There are cases when we need to add custom CSS or perform operations on scroll  or any customizations on columns, which say cannot be done through annotations and extensions.

Then we get the Table (here a responsive table) that’s rendered within the smart table and add the operations on “UpdateFinished” method. Now ill have access to all the items inside the responsive table and here I’m doing some operation on press of each item

		this.byId("idSmartTable").getTable().attachEvent("updateFinished", function (data) {
 			var items = this.byId("idSmartTable").getTable().getItems().length;
 			var tableItems = this.byId("idSmartTable").getTable().getItems();
 			for (var i = 0; i < items; i++) {
 				this.byId("idSmartTable").getTable().getItems()[i].attachPress(this.onPressCases, this);



3. Perform Operations on Object Page loaded 

There will be times when we want to get the data from the list page context or do any operation everytime an object page is loaded, then we have a pageloaded method that the objectpage extension API offers

Note: “This” variable is not accessible inside this method. Hence if u want to use “this” you must declare it somewhere outside and use the global reference here.

OnInit of objectpagecontroller add this

this.extensionAPI.attachPageDataLoaded(this.onDetailsLoaded, this);
	onDetailsLoaded: function (event) {
 		var sPath = event.context.sPath // has the context path
 			var contextObj = event.context.getObject();//contains the context Object and has all the properties bound in the list report Item



4.Access controls by IDs

Accessing controls by IDs is a headache in smarttemplates. You ahve to either inspect and take a loooong ID from the console or any UIs add-on of chrome. This is painstaking and the code also looks jammed with such a loong ID( we never know the ID naming conventions might change too).

Its always safe to use the createId that concatenated your custom ID with the View instance



You can access this createdId through this.getView().byId(yourcreatedIdAbove).

A neater approach!


5. Concatenate Strings in Overview Page Chart Cards

The annotation helper function odata.concat comes in handy when you want to display some customized text on chart cards(chart cards are not very customisable)

	<Record Type="UI.DataField">
								<PropertyValue Property="Value">
									<Apply Function="odata.concat">
										<String>Current Tier</String>
								<PropertyValue Property="Label" String="{@i18n&gt;CURRENT_TIER}"/>


6. Default Parameters in search of SmartFilterBar when Navigating from launchpad

When we have dynamic tiles in launchpad and we want a certain searchfield to be filled when navigated from launchpad, the attachInitialized method of filterbar does this (Note: its NOT initialise)

You can then access the components startup parameters and FireSearch if need be.

	filterBar.attachInitialized(this.onInitSmartFilter, this);


7.Clear Column filters in Smarttable

Clear all values from p13nDialog(column filter) in smart Table


I’ll update this Blog as and when I see and do new things in Fiori elements. Hope you find this Blog useful!

Be the first to leave a comment
You must be Logged on to comment or reply to a post.