Add Indicator Counter on Launchpad Application Tiles
Introduction
Sometimes you want your Launchpad tile to do more than just open the app — you want it to give quick, real-time information at a glance. For example, showing the number of pending requests, open orders, or alerts right on the tile. This is where the indicator counter comes in. In this guide, we’ll walk through how to pull data from your service and display it as a counter on the tile in SAP Launchpad.
Pre-requisite
You must have SAP Work Zone (or Launchpad Service) subscribed in your BTP cockpit.Your application should already be deployed and available on the Launchpad.
Steps
Find your entity for counting
Open your application in the browser, go to Developer Tools → Network tab, and click on your service metadata file. This lists all entities available in your OData service.Pick the entity you want to count.Append /$count to its URL to get just the number of records instead of the full dataset.You can also add filters.
/odata/v2/trm/TRMHeader/$count
2.Update manifest.json
In your application’s manifest.json, after the dataSources section under sap.app, add the crossNavigation configuration:
“crossNavigation”: {
“inbounds”: {
“trade_module-display”: {
“semanticObject”: “tilecounter”,
“icon”: “sap-icon://inspection”,
“action”: “display”,
“title”: “Tile Counter”,
“subTitle”: “No. of Request”,
“signature”: {
“parameters”: {},
“additionalParameters”: “allowed”
},
“indicatorDataSource”: {
“dataSource”: “mainService”, // Must match the name of your defined dataSource
“refresh”: 6000, // Auto-refresh every 6 seconds
“path”: “TRMHeader/$count” // Path to fetch count data
}
}
}
}{
“dataSources”: {
“mainService”: {
“uri”: “/odata/v2/trm/”,
“type”: “OData”,
“settings”: {
“annotations”: [],
“localUri”: “localService/mainService/metadata.xml”,
“odataVersion”: “2.0”
}
}
},
“crossNavigation”: {
“inbounds”: {
“trade_module-display”: {
“semanticObject”: “trade_module”, // data source should be same as mentioned at line 03
“icon”: “sap-icon://inspection”,
“action”: “display”,
“title”: “Tile Counter”,
“subTitle”: “No. of Request”,
“signature”: {
“parameters”: {},
“additionalParameters”: “allowed”
},
“indicatorDataSource”: {
“dataSource”: “mainService”,
“refresh”: 6000,
“path”: “TRMHeader/$count”
}
}
}
}
}
Explanation of each line:
crossNavigation – Tells Launchpad how this tile should behave and what data to show.inbounds – Defines the entry point configuration for your tile.trade_module-display – The unique inbound key (can be any meaningful name).semanticObject – Used for navigation in Launchpad; should align with your routing setup.action – The action to trigger when the tile is clicked.title – Main title text of the tile.subTitle – Subtitle under the main title.indicatorDataSource – This is where the magic happens:dataSource – Name of the service defined in dataSources. Must match exactly.refresh – How often to fetch new count data (in milliseconds).path – OData endpoint for the count. This is what the tile uses to update its counter.Deploy and Check
After you’ve updated and saved the manifest, build and redeploy your app. Open the Launchpad and you should now see the counter appearing and updating automatically.
Conclusion
Adding a counter to a Launchpad tile gives users instant insight without having to open the app. It’s a small change, but it can make navigation more efficient and the overall user experience more intuitive.
Add Indicator Counter on Launchpad Application Tiles IntroductionSometimes you want your Launchpad tile to do more than just open the app — you want it to give quick, real-time information at a glance. For example, showing the number of pending requests, open orders, or alerts right on the tile. This is where the indicator counter comes in. In this guide, we’ll walk through how to pull data from your service and display it as a counter on the tile in SAP Launchpad.Pre-requisiteYou must have SAP Work Zone (or Launchpad Service) subscribed in your BTP cockpit.Your application should already be deployed and available on the Launchpad.StepsFind your entity for countingOpen your application in the browser, go to Developer Tools → Network tab, and click on your service metadata file. This lists all entities available in your OData service.Pick the entity you want to count.Append /$count to its URL to get just the number of records instead of the full dataset.You can also add filters. /odata/v2/trm/TRMHeader/$count2.Update manifest.jsonIn your application’s manifest.json, after the dataSources section under sap.app, add the crossNavigation configuration:”crossNavigation”: {
“inbounds”: {
“trade_module-display”: {
“semanticObject”: “tilecounter”,
“icon”: “sap-icon://inspection”,
“action”: “display”,
“title”: “Tile Counter”,
“subTitle”: “No. of Request”,
“signature”: {
“parameters”: {},
“additionalParameters”: “allowed”
},
“indicatorDataSource”: {
“dataSource”: “mainService”, // Must match the name of your defined dataSource
“refresh”: 6000, // Auto-refresh every 6 seconds
“path”: “TRMHeader/$count” // Path to fetch count data
}
}
}
}{
“dataSources”: {
“mainService”: {
“uri”: “/odata/v2/trm/”,
“type”: “OData”,
“settings”: {
“annotations”: [],
“localUri”: “localService/mainService/metadata.xml”,
“odataVersion”: “2.0”
}
}
},
“crossNavigation”: {
“inbounds”: {
“trade_module-display”: {
“semanticObject”: “trade_module”, // data source should be same as mentioned at line 03
“icon”: “sap-icon://inspection”,
“action”: “display”,
“title”: “Tile Counter”,
“subTitle”: “No. of Request”,
“signature”: {
“parameters”: {},
“additionalParameters”: “allowed”
},
“indicatorDataSource”: {
“dataSource”: “mainService”,
“refresh”: 6000,
“path”: “TRMHeader/$count”
}
}
}
}
} Explanation of each line:crossNavigation – Tells Launchpad how this tile should behave and what data to show.inbounds – Defines the entry point configuration for your tile.trade_module-display – The unique inbound key (can be any meaningful name).semanticObject – Used for navigation in Launchpad; should align with your routing setup.action – The action to trigger when the tile is clicked.title – Main title text of the tile.subTitle – Subtitle under the main title.indicatorDataSource – This is where the magic happens:dataSource – Name of the service defined in dataSources. Must match exactly.refresh – How often to fetch new count data (in milliseconds).path – OData endpoint for the count. This is what the tile uses to update its counter.Deploy and CheckAfter you’ve updated and saved the manifest, build and redeploy your app. Open the Launchpad and you should now see the counter appearing and updating automatically. ConclusionAdding a counter to a Launchpad tile gives users instant insight without having to open the app. It’s a small change, but it can make navigation more efficient and the overall user experience more intuitive. Read More Technology Blog Posts by Members articles
#SAP
#SAPTechnologyblog
