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



8.Change Default date format in launchpad for OVP cards.

OVP does not allow you to change default date format. Use this code to achieve date format as you desire


	sap.ui.getCore().getConfiguration().getFormatSettings().setDatePattern("medium","MMM d,yyyy");


9.Removing Data loss popup

In some cases of non-draft apps(where you haven’t implemented SAPs draft functionality) we still get the data loss popup. This occurs when the model has pending changes.

To prevent it from coming up, check if the model has pending changes and reset the changes



var currListItemPath = currentListItem.getBindingContextPath();           that.getView().getModel().resetChanges([currListItemPath]);
if we pass path to reset changes, it will only reset that item with no odata call







10.Remove context filters on Navigation

In OVP cards when we do a custom Navigation,we sometimes do not want the intent to be passed(say if it redirects to  a dynamic external URL). But if it is semantic bnased Navigation even if we give “Requires Context” = false , it still passes the context by default. To prevent this from happening, we can make the context parameters empty and make “ignoreEmptyString” true in the customParams method

In Manifest.json inside card settings

	"customParams": "getParameters"

In Custom Controller

		getParameters: function (oNavigateParams, oSelectionVariantParams) {

			// to get the select option property names, make use of this to check what values are available to modify
			var navParams = Object.keys(oNavigateParams);
			var aCustomSelectionVariant = [];
			/// logic to remove Filter1 
			/// assigning empty values to Filter1 and Filter2, with ignoreEmptyString as true, this will be removed from the Selection Variant

			var filter1= {
				path: "filter1",
				operator: "EQ",
				value1: oNavigateParams['FIlter1'],
				value2: null,
				sign: "I"


			/// logic to remove Filter1 

			return {
				selectionVariant: aCustomSelectionVariant,
				ignoreEmptyString: true


11.Access the controls inside valuehelp dialog

Its great that smart templates give a well organised f4 help dialog box. But tehre are some scenarios where we need to access controls inside the value helps dialog box(say to add extra smartfiletrbar buttons inside the dialog). In that case set a small delay and get the dependents of the valuehelp control.With that you can access all it children!


smartfb.getControlByKey("control1").attachValueHelpRequest(this.dialogOpened, this);


			var control = event.getSource();
			var t = this;
			setTimeout(function () {
			}, 100);



12.Set filter parameters when navigating from OVP to a normal sapui5 app.

Thre are scenarios when you will be navigating from a smart template app to a normal sapui5 app. In this case the filters will not be carried over from OVP page like how it happens in list report page.

We have to manually set the filter which becomes very tedious. This is when Navigation handler comes in handy. write his code in initialized method of smartfilterbar


var oNavigationHandler = new;
var oParseNavigationPromise = oNavigationHandler.parseNavigation();
oParseNavigationPromise.done(function (oAppData, oStartupParameters, sNavType) {
oSmartFilter.setDataSuiteFormat(oAppData.selectionVariant, true);

And lo! all yur filters are set just like in list report!


13.Get keys of the context in Object Page

Say you have name,DOB,COmpany as keys of the current entity set in the object page
you can get them as key value pairs


will give you an array. It will contain a string like "name='abc',DOB='12/03/91',COmpany='def'"


14.Removing Scale Factor /Rounding off in OVP card header/line items

Try to change config settings of the app


15. Let the list report app know which card are you coming from

When you want to navigate to a particular section in the object page based on the card from which your are come from in dashboard you can add a parameters to the shellHash.

Note: The position of this parameter varies if its a standard or custom card.In a standard card we should ensure it doesn’t mix up with the context parameters and messes up the URL.

Check the difference here in the ‘from’ parameter.

Standard Card: “SemanticObject-action&/someurlparameters?from=’card1′

Custom card:”SemanticObject-action?from=’card2‘&/someurlparameters

16.Navigate to another app(that has redirection to another system configured in lpd_cust) in new tab from an OVP standard list card

The newer versions of sapui5 does not navigate in new tab from a list card if its navigation with datafieldforntentbasednavigation. to tweak this, use datafieldwithurl in docustomnavigation method , create hash using hrefforexternal and in the url concatenate “/sap/bc/ui2/flp”+hash and Lo it opens in new tab

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


17. Custom control in advanced search 

The flexibility to add custom control in a smartfilterbar is not the same as adding a custom control in advanced search(sometimes we want the same control in both places)

For this, first we must undnerstand the structure of advanced search in smartfilterbar value help

The advanced search is split into field groups and each field group displays in a column with a title.

Adding a custom control is possible through addfiltergroupfield(which emans it can be added onloy at the end and nowhere in between as inserfiltergroupitem is deprecated(quite unfortunately :().

In the valuehelprequest method of the f4 in smartfielter bar write this code

	filterBar.addFilterGroupItem(new sap.ui.comp.filterbar.FilterGroupItem({
				groupName: "grp1",
				label: "Custom label",
				partOfCurrentVariant: true,
				visibleInFilterBar: true,
				name: "custLbl",
				control: new sap.m.MenuButton({
					menu: menu


and lo! a new menu button is added at the end of group1 in advanced search . You can then access this control through



18. Making the correct ‘this’ instance available inside objectpageloaded method

We have ‘attachPageLoaded’ method in extensionAPI to add funstions of all extended controls in smart templates.

This method has the context object of that page and ‘this’ points to the event object here. Hence to get the actual controller object ‘this’ we can use javascript bind method, to pass the desired ‘this’ when instantiating the method


var mempageloaded = this._memPageDataLoaded.bind(this); this.extensionAPI.attachPageDataLoaded(mempageloaded);
So inside
_memPageDataLoaded function ‘this’ will point to the controller object and we can easily access all methods inside the controller as desired.
19.Visual Filters not rendering in ALP
If you have brand in both the compact and visual filter, map the brand’s valuehelpset to the compact filter in collection path(properties-brand common.valuelist) and the main entity set in visual filter(properties -brand common.valuelist with a qualifier,presentation variaint pointing to the chart and no parameters).
Both will sync automatically
20.Download custom column also from smart table in export to excel
give the name of a backend property pertaining to the entity(connected to smart table) as columnKey to the custom column. It Will be downloaded automatically
You must be Logged on to comment or reply to a post.
  • Akshaya, thanks for the blog.

    Do you, by any chance, know any trick to overcome this behaviour in the fiori list template when displaying it vertically on the phone ?:

    One of the field values is truncated and its last character is placed one line below.

    How can this be wrapped always on one line when using Fiori Elements List Template?