sap mdk action bar style navigating from object list view

[sk_ramkumar]

Hi Experts,

I am trying to set color for the action bar item , it is working fine in all other places but not in detail view, navigated from list to detail. 

How to change the color of the left side action bar item? the text is coming by default. Even If i set Style to Add New button it is not working. 

Page metadata,

{
	"Controls": [
		{
			"FilterFeedbackBar": {
				"ShowAllFilters": false,
				"_Type": "Control.Type.FilterFeedbackBar"
			},
			"_Type": "Control.Type.SectionedTable",
			"_Name": "SectionedTable0",
			"Sections": [
				{
					"Separators": {
						"TopSectionSeparator": false,
						"BottomSectionSeparator": true,
						"HeaderSeparator": true,
						"FooterSeparator": true,
						"ControlSeparator": true
					},
					"_Type": "Section.Type.ObjectTable",
					"Target": {
						"Service": "/MDK/Services/StceApi.service",
						"EntitySet": "PayCodes",
						"QueryOptions": "$filter=payCodeType eq 'H' and favourite eq true"
					},
					"_Name": "SectionObjectTable0",
					"Visible": true,
					"EmptySection": {
						"FooterVisible": false
					},
					"ObjectCell": {
						"ContextMenu": {
							"Items": [],
							"PerformFirstActionWithFullSwipe": true,
							"LeadingItems": [],
							"TrailingItems": []
						},
						"Title": "{payCodeDesc}",
						"AccessoryType": "None",
						"AccessoryButtonIcon": "sap-icon://delete",
						"Tags": [],
						"AvatarStack": {
							"ImageIsCircular": true,
							"ImageHasBorder": false
						},
						"AvatarGrid": {
							"ImageIsCircular": true
						},
						"Selected": false
					},
					"HighlightSelectedItem": false
				}
			]
		}
	],
	"_Type": "Page",
	"_Name": "FavouritePayCode",
	"Caption": "Favourite Paycodes",
	"PrefersLargeCaption": true,
	"ActionBar": {
		"Items": [
			{
				"_Name": "ActionBarItem0",
				"Caption": "Add New",
				"Position": "Right",
				"IsIconCircular": false,
				"Visible": true,
				"OnPress": "/MDK/Actions/Favourites/NavToPayCodeFavAddNewDialog.action"
			}
		],
		"_Name": "ActionBar1"
	}
}

Action of object cell on press item,

{
	"_Type": "Action.Type.Navigation",
	"ActionResult": {
		"_Name": "NavToFavPaycode"
	},
	"PageToOpen": "/MDK/Pages/Favourites/FavouritePayCode.page"
}

Thanks in advance.

@bill_froelich @Jitendra_Kansal 

[bill_froelich]

What client platform are you using?

[sk_ramkumar]

@bill_froelich I dont have a onBackButtonPress rule in my detail view, I have one Action Bar Item only, still am facing the same issue. I tried removing all the action bar items, from my detail view, but still the back button doesnt apply the style.

[bill_froelich]

The Action bar button color is controlled through the action bar style.  Try setting both ActionBar and ActionBarTitle styles. I tested using MDK 24.4 and it worked as expected.

ActionBar {
    color: #008390;
}

ActionBarTitle {
    color: #008390; 
}

[sk_ramkumar]

@bill_froelich Yes I do have styles for ActionBar and ActionBarTitle. It is working fine in all other pages except Detail View Navigated from ObjectTable on press view.

[bill_froelich]

Can you share the detail page metadata please?

[sk_ramkumar]

@bill_froelich this is my List view page,

{
	"Controls": [
		{
			"FilterFeedbackBar": {
				"ShowAllFilters": false,
				"_Type": "Control.Type.FilterFeedbackBar"
			},
			"_Type": "Control.Type.SectionedTable",
			"_Name": "SectionedTable0",
			"Sections": [
				{
					"Separators": {
						"TopSectionSeparator": false,
						"BottomSectionSeparator": true,
						"HeaderSeparator": true,
						"FooterSeparator": true,
						"ControlSeparator": true
					},
					"_Type": "Section.Type.ObjectTable",
					"_Name": "SectionObjectTable1",
					"Visible": true,
					"EmptySection": {
						"FooterVisible": false
					},
					"ObjectCells": [
						{
							"ObjectCell": {
								"_Name": "SectionObjectCell0",
								"Title": "$(L,fav_costobject_title)",
								"Visible": true,
								"Selected": false,
								"AccessoryType": "DisclosureIndicator",
								"PreserveIconStackSpacing": false,
								"OnPress": "/MDK/Actions/Favourites/NavToFavPaycode.action"
							}
						}						
					],
					"HighlightSelectedItem": false,
					"Selection": {
						"ExitOnLastDeselect": true,
						"LongPressToEnable": "None",
						"Mode": "None"
					}
				}
			]
		}
	],
	"_Type": "Page",
	"_Name": "FavouriteListView",
	"Caption": "$(L,fav_btn_title)",
	"PrefersLargeCaption": true
}

this is my deail page,

{
	"Controls": [
		{
			"FilterFeedbackBar": {
				"ShowAllFilters": false,
				"_Type": "Control.Type.FilterFeedbackBar"
			},
			"_Type": "Control.Type.SectionedTable",
			"_Name": "SectionedTable0",
			"Sections": [
				{
					"Separators": {
						"TopSectionSeparator": false,
						"BottomSectionSeparator": true,
						"HeaderSeparator": true,
						"FooterSeparator": true,
						"ControlSeparator": true
					},
					"_Type": "Section.Type.ObjectTable",
					"Target": {
						"Service": "/MDK/Services/StceApi.service",
						"EntitySet": "PayCodes",
						"QueryOptions": "$filter=payCodeType eq 'H' and favourite eq true"
					},
					"_Name": "SectionObjectTable0",
					"Visible": true,
					"EmptySection": {
						"FooterVisible": false,
						"Caption": "$(L,no_fav_paycode_added)"
					},
					"ObjectCell": {
						"ContextMenu": {
							"Items": [],
							"PerformFirstActionWithFullSwipe": true,
							"LeadingItems": [],
							"TrailingItems": []
						},
						"Title": "{payCodeDesc}",
						"AccessoryType": "None",
						"AccessoryButtonIcon": "sap-icon://delete",					
						"Selected": false,
						"OnAccessoryButtonPress":"/MDK/Rules/Favourites/onFavPaycodeDelete.js",
						"Styles": {
							"AccessoryButtonIcon": "tealButton"
						}
					},
					"HighlightSelectedItem": false
				}
			]
		}
	],
	"_Type": "Page",
	"_Name": "FavouritePayCode",
	"Caption": "$(L,fav_paycodes_title)",
	"PrefersLargeCaption": true,
	"ActionBar": {
		"Items": [
			{
				"_Name": "ActionBarItem0",
				"Caption": "Add New",
				"Position": "Right",
				"IsIconCircular": false,
				"Visible": true,
				"OnPress": "/MDK/Actions/Favourites/NavToPayCodeFavAddNewDialog.action",
				"Style": "tealButton"
			}
		],
		"_Name": "ActionBar1"
	}
}

and I have declared css like this,

@Teal : #008390;

ActionBar {
    color: @Teal;  
}
ActionBarTitle {
    color: @Teal;    
}
.tealButton{
    color: @Teal;    
}

[bill_froelich]

And what version of MDK are you running? Have you tried with the latest 24.4.1?

[sk_ramkumar]

@bill_froelich I am still getting the same issue in 24.4.1 client as well.

[bill_froelich]

from my testing if you have a rule for OnBackButtonPressed defined for the page the button styling is not correctly applied. I will open an internal bug for this so we can address in a future patch