cancel
Showing results for 
Search instead for 
Did you mean: 

How do i set count of the Icontabfilter via annotations

selvakumar_mohan
Active Participant
0 Kudos

Hi All,

I have developed a report with ICON TAB FILTER via "SelectionPresentationVariant", the ICONTABBAR hence ICON Tab filter appears as below:

Now i am trying to get the count enable next to each icon based on the row count in the their respective tables.

How to do we do that via annotations? Do they need controller extension or view extension. Exploring options to have that done at earliest, any advice or HOW-TO-DO links would be appreciated.

Thanks,

Selvakumar M.

Accepted Solutions (1)

Accepted Solutions (1)

selvakumar_mohan
Active Participant

Hi All,

Figured it.

In the controller implementation of the list report, the function- "fnUpdateTableTabCounts" is called when a parameter-"showCounts" is set in manifest.json. as shown below:

Set the same in my Manifest.Json file as below:

"quickVariantSelectionX": {
                "enableAutoBinding": true,
		"showCounts": true,

Debugged it, the result was as expected. The function "fnUpdateTableTabCounts" was invoked and the ICON TAB BAR looks like below now:

iftah_peretz
Active Contributor

Good Job! Thanks for sharing.

Answers (3)

Answers (3)

amitcruz
Participant
0 Kudos

Can't it be done without adaptation?

amitcruz
Participant
0 Kudos

Hello Mohan,

How are you able to display ICONTAB BAR with ICONS via SelectionPresentation variant in mutliple table mode in Fiori elements . In my case I am not able to get Icons I am getting only text and count.

selvakumar_mohan
Active Participant
0 Kudos

Right click on the project, select option "SAPUI5 Visual Editor".

In the UI Adaption Screen, select the result with just text and count, you will find an option to update the icon. I have password issues with my IDE. I iwll reset and provide you screenprints. Let me know if you are able to resolve by this input.

iftah_peretz
Active Contributor
0 Kudos

Hi,

You can do it from the controller or from the XML view side.

I am going to show you the XML side.

I took the basic example from here and added to it a list from a local json file named "Invoices.json".

In that json file, I added an attribute of a list length named "InvoicesLength" and set it to the length of the list. So, on your json file do the same for each table.

Finally, in the "count" XML attribute of IconTabFilter, I used that value.

Here is the view code

<mvc:View xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"  
          controllerName="sap.m.sample.IconTabBarFiori2.IconTabBar">
	<IconTabBar id="idIconTabBarMulti" expanded="{device>/isNoPhone}" class="sapUiResponsiveContentPadding">
		<items>
			<IconTabFilter icon="sap-icon://hint">
				<Text text="Info content goes here ..."/>
			</IconTabFilter>
			<IconTabFilter icon="sap-icon://attachment" count="{invoice>/InvoicesLength}">
				<List headerText="Title" class="sapUiResponsiveMargin" width="auto" itemPress="handleInvoicePress" items="{invoice>/Invoices}">
					<items>
						<ObjectListItem type="Active" title="{invoice>Quantity} x {invoice>ProductName}"
							number="{ parts: [{path: 'invoice>ExtendedPrice'}], type: 'sap.ui.model.type.Currency', formatOptions: { showMeasure: false } }"
							numberUnit="EUR" numberState="{= ${invoice>ExtendedPrice} <= 50 ? 'Success' : 'Error'}">
						</ObjectListItem>
					</items>
				</List>
			</IconTabFilter>
			<IconTabFilter icon="sap-icon://notes" count="12">
				<Text text="Notes go here ..."/>
			</IconTabFilter>
			<IconTabFilter icon="sap-icon://group">
				<Text text="People content goes here ..."/>
			</IconTabFilter>
		</items>
	</IconTabBar>
</mvc:View>

Here is the controller file

sap.ui.define([
		'jquery.sap.global',
		'sap/ui/core/mvc/Controller',
		'sap/ui/model/json/JSONModel'
	], function(jQuery, Controller, JSONModel) {
	"use strict";


	var ListController = Controller.extend("sap.m.sample.IconTabBarFiori2.IconTabBar", {
		
		onInit : function () {
			var oInvoiceModel = new JSONModel("Invoices.json");
			 	this.getView().setModel(oInvoiceModel, "invoice");
		},
		
		handleInvoicePress: function(){
			alert("A line was selected");
		}
	});




	return ListController;


});


And here is the Invoices.json file

{
  "InvoicesLength": "6",	
  "Invoices": [
	{
	  "ProductName": "Pineapple",
	  "Quantity": 21,
	  "ExtendedPrice": 87.2000,
	  "ShipperName": "Fun Inc.",
	  "ShippedDate": "2015-04-01T00:00:00",
	  "Status": "A"
	},
	{
	  "ProductName": "Milk",
	  "Quantity": 4,
	  "ExtendedPrice": 9.99999,
	  "ShipperName": "ACME",
	  "ShippedDate": "2015-02-18T00:00:00",
	  "Status": "B"
	},
	{
	  "ProductName": "Canned Beans",
	  "Quantity": 3,
	  "ExtendedPrice": 6.85000,
	  "ShipperName": "ACME",
	  "ShippedDate": "2015-03-02T00:00:00",
	  "Status": "B"
	},
	{
	  "ProductName": "Salad",
	  "Quantity": 2,
	  "ExtendedPrice": 8.8000,
	  "ShipperName": "ACME",
	  "ShippedDate": "2015-04-12T00:00:00",
	  "Status": "C"
	},
	{
	  "ProductName": "Desk",
	  "Quantity": 33,
	  "ExtendedPrice": 19.8400,
	  "ShipperName": "ACME",
	  "ShippedDate": "2015-04-12T00:00:00",
	  "Status": "C"
	},	
	{
	  "ProductName": "Bread",
	  "Quantity": 1,
	  "ExtendedPrice": 2.71212,
	  "ShipperName": "Fun Inc.",
	  "ShippedDate": "2015-01-27T00:00:00",
	  "Status": "A"
	}
  ]
}
selvakumar_mohan
Active Participant
0 Kudos

Hi Iftah Peretz

I havent programmed any XML views or Controller myself, all parts of my application is generated via annotations. Even the Icon Tab filter was part of the Selection variants or Presentation variants, I am a new programmer on all this and forgive my dumb questions. Now i tried setting the count via annotations, I couldnt find one, ADAPT UI Editor doesnt help either.

if the controller extension is the option, what event would be the place where i need to write logic for count and if possible the code i need ot write would also be helpful.