How to add IconTabSeparator in items template?

[former_member349101]

I have a sapui5 app with json view. Below is the code for json view

The json view is like below

    "sections": [
  {
    "id": "idMenuButtonSection",
    "subSections": [
      {
        "main": [
          {
            "Type": "sap.m.IconTabBar",
            "headerMode": "Inline",
            "headerBackgroundDesign": "{widgetModel>/headerBackgroundDesign}",
            "items": [
              {
                "path": "widgetModel>/filters",
                "template": {
                  "Type": "sap.m.IconTabFilter",
                  "showAll": "{widgetModel>showAll}",
                  "enabled": "{widgetModel>enabled}",
                  "text": "{widgetModel>text}",
                  "icon": "{widgetModel>icon}",
                  "iconColor": "{widgetModel>color}",
                  "count": "{widgetModel>count}",
                  "content": [
                    {
                      "Type": "sap.m.Button",
                      "text": "{widgetModel>text}"
                    }
                  ]
                }
              }
            ]
          }
        ]
      }
    ]
  }
]

and the data is bound is like below

"widgetModel": {  "headerBackgroundDesign": "Transparent",  "filters": [    {      "text": "Releases",      "count": "9",      "showAll": true},    {      "text": "Initial Period",      "color": "Default",      "enabled": true,      "count": 1,      "icon": "sap-icon://appointment-2"},    {      "text": "Option 1",      "color": "Default",      "count": "2",      "enabled": true,      "icon": "sap-icon://appointment-2"},    {      "text": "Option 2",      "count": "3",      "color": "Positive",      "enabled": true,      "icon": "sap-icon://appointment-2"},    {      "text": "Option 3",      "count": "3",      "color": "Default",      "enabled": false,      "icon": "sap-icon://appointment-2"}  ]}

and the output is like in the attachemnts. Now I would like to add IconTabSeparator. How to add that in filters?

[arthursilva]

Hello Santosh, hope you're well.

Try to adjust your widget model by adding a field that correspond the type of IconTabBar item. Eg.: field "type", just like below:

"widgetModel": {
	"headerBackgroundDesign": "Transparent",
	"filters": [{
                "type": "sap.m.IconTabFilter",
		"text": "Releases",
		"count": "9",
		"showAll": true
	}, {
                "type": "sap.m.IconTabSeparator"
	}, {
                "type": "sap.m.IconTabFilter",
		"text": "Initial Period",
		"color": "Default",
		"enabled": true,
		"count": 1,
		"icon": "sap-icon://appointment-2"
	}, {
                "type": "sap.m.IconTabFilter",
		"text": "Option 1",
		"color": "Default",
		"count": "2",
		"enabled": true,
		"icon": "sap-icon://appointment-2"
	}, {
		"text": "Option 2",
                "type": "sap.m.IconTabFilter",
		"count": "3",
		"color": "Positive",
		"enabled": true,
		"icon": "sap-icon://appointment-2"
	}, {
		"text": "Option 3",
		"count": "3",
		"color": "Default",
		"enabled": false,
		"icon": "sap-icon://appointment-2"
	}] 
}

On the JSON view side, modify the property "Type" of IconTabBar template to receive the newly model property properly.

...
"template": {
	"Type": "{widgetModel>type}",
	"showAll": "{widgetModel>showAll}",
	"enabled": "{widgetModel>enabled}",
	"text": "{widgetModel>text}",
	"icon": "{widgetModel>icon}",
	"iconColor": "{widgetModel>color}",
	"count": "{widgetModel>count}",
	"content": [{
		"Type": "sap.m.Button",
		"text": "{widgetModel>text}"
	}]
}
...

KR,
Arthur Silva

[former_member349101]

Thank you so much, I'll try this immediatly.

[former_member349101]

This is not working. I'm getting a console error.

Could you please suggest me a solution!