cancel
Showing results for 
Search instead for 
Did you mean: 

sap mdk action bar style navigating from object list view

sk_ramkumar
Participant

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. 

Screenshot 2024-05-10 at 2.10.37 PM.png

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
Product and Topic Expert
Product and Topic Expert
0 Kudos
What client platform are you using?
sk_ramkumar
Participant
0 Kudos
@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.

Accepted Solutions (1)

Accepted Solutions (1)

bill_froelich
Product and Topic Expert
Product and Topic Expert
0 Kudos

I am unable to reproduce this.  At this point I would recommend opening a support case and include your mdkproject / metadata and reproduction steps so it can be investigated further

sk_ramkumar
Participant
0 Kudos
Thank you @bill_froelich. Will create one support ticket.

Answers (2)

Answers (2)

bill_froelich
Product and Topic Expert
Product and Topic Expert
0 Kudos

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
Participant
0 Kudos

@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
Product and Topic Expert
Product and Topic Expert
0 Kudos
Can you share the detail page metadata please?
sk_ramkumar
Participant
0 Kudos

@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
Product and Topic Expert
Product and Topic Expert
0 Kudos
And what version of MDK are you running? Have you tried with the latest 24.4.1?
sk_ramkumar
Participant
0 Kudos
@bill_froelich I am still getting the same issue in 24.4.1 client as well.
bill_froelich
Product and Topic Expert
Product and Topic Expert
0 Kudos
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
sk_ramkumar
Participant
0 Kudos

Hi @bill_froelich ,

I am using 23.12 in iOS device.

Thanks,
Ram