Fiori - Extend Object Page

[alexandredoyen]

Hello all,

I read some blogs about how extend object page but I am still block. Here my sources:

• Fiori elements – How to create an Object Page Extension
• Adding Custom Actions Using Extension Points
• Extension Points for Facets
• Annotating and Extending Fiori Element Applications: List Report Part 3

I am currently on a List report & object page. All extension on my list report are done and okay. My version is 1.38 ...

I have EntitySet Headers (main) and EntitySet Items (secondary).

Now I am working on my Object Page (OP). I added a custom section (with help from first link, thank you very much to jocelyn.dart) and it works perfectly.
In a second time I try to extend my OP to put two actions:

• action button in my Line Item (Smart Table ?) - Picture 1
• action in footer bar - Picture 2

Below you can find the extension part of my manifest.js. Extend list report is okay, General data from OP is okay ...

I think I am close from ... something but I do not see where is my mistake(s). Do you have any ideas/advices about what I do wrong ?

Tank you very much for any help.

Action on my Line Item (Picture 1)

Action on my foot bar (Picture 2 - Here in French, but we have Save, Cancel and Share)

Extract of my manifest

"extends": 
{
	"extensions": {
		"sap.ui.viewExtensions": {
		"sap.suite.ui.generic.template.ListReport.view.ListReport": {
		"SmartFilterBarControlConfigurationExtension|Headers": {
		"className": "sap.ui.core.Fragment",
		"fragmentName": "MyNameSpace.ext.fragment.Customfilter",
		"type": "XML"
	   }
	},
	"sap.suite.ui.generic.template.ObjectPage.view.Details": {
		"BeforeFacet|Headers|InvoiceItem": {
			"className": "sap.ui.core.mvc.View",
			"viewName": "MyNameSpace.ext.view.GeneralData",
			"type": "XML",
			"sap.ui.generic.app": {
					"title": "{@i18n>GENERALDATA}"
					}
				}
			}
		},
	"sap.ui.controllerExtensions": {
		"sap.suite.ui.generic.template.ListReport.view.ListReport": {
		"controllerName": "MyNameSpace.ext.controller.ListReportExt"
	},
"sap.suite.ui.generic.template.ObjectPage.view.Detail": {
	"controllerName": "MyNameSpace.ext.controller.ObjectPageExt",
		"sap.ui.generic.app": {
			"Items": {
				"EntitySet": "Items",
				"Sections": {
					"InvoiceItem": {
						"id": "InvoiceItem",
						"Actions": {
						"onItemRefresh": {
						"id": "onItemRefresh",
						"text": "Super",
						"press": "onItemRefresh",
						"requiresSelection": false
									}
								}
							}
						},
				"Actions": {
					"onPreSave": {
						"id": "onPreSave",
						"text": "Awesome",
						"press": "onPreSave",
						"determining": true
							}
						}
					}
				}
			}
		}
	}
}

Thank you again for helping.

[CristianBabei]

Hello,

Here is my solution forextensions, hope this can help you 🙂

Manifest.json:

"extends": {
	"component": "APP_ID",
	"extensions": {
		"sap.ui.viewExtensions": {
			"APP_ID.view.Master": {
				"EXTENSION_NAME": {
					"className": "sap.ui.core.Fragment",
					"fragmentName": "APP_ID.view.Extensions.EXTENSION_FRAGMENT_NAME",
					"type": "XML"
				}
			},
			"APP_ID.ZAPP_TEMPLATE_MD.view.Detail": {  // HERE ARE ANOTHER

The view :

<List>
      <items>
	   <core:ExtensionPoint name="EXTENSION_NAME"/>
      </items>
</List>

The fragment:

<core:FragmentDefinition xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m">
	<ObjectListItem >
		<firstStatus>
			<ObjectStatus title="{i18n>Master.FirstStatus}" text="{PriorText}" state="{PriorStatus}"/>
		</firstStatus>
                ...............................
	</ObjectListItem>
</core:FragmentDefinition>

This works fine for me 🙂

And , if you want extensionPoints, inside an Extension , you can do it, its the same :

"sap.ui.viewExtensions": {
	"APP_ID.view.Extensions.EXTENSION_FRAGMENT_NAME": {
	      "NEW_EXTENSION_NAME_INSIDE_ANOTHER_EXTENSION": {
                    ...............

Regards.

[alexandredoyen]

Thank you Cristian for this answer. But I am not sure I can apply your advice in my context. I found something wrong in my controller declaration. A "S" missed !!

"sap.suite.ui.generic.template.ObjectPage.view.Detail": {<br>

instead of

"sap.suite.ui.generic.template.ObjectPage.view.Details": {<br>

Now my controller is loaded but none of my actions 😕

I still looking for example of Object Page Extension around action in LineItem and footer bar.

Thank you again !

[EliuGonzalez86]

Hi Alexandre Doyen

maybe simmaco.ferriero's blog might help you

https://blogs.sap.com/2016/04/22/how-to-use-smart-templates-with-sap-web-ide-extensibility/

best regards,

[alexandredoyen]

Hello every one,

everything is under control ... or close ^^ Here my manifest for helps

"extends": {
	"extensions": {
		"sap.ui.viewExtensions": {
			"sap.suite.ui.generic.template.ListReport.view.ListReport": {
				"SmartFilterBarControlConfigurationExtension|Headers": {
					"className": "sap.ui.core.Fragment",
					"fragmentName": "MyNameSpace.ext.fragment.Customfilter",
					"type": "XML"
				}
			},
			"sap.suite.ui.generic.template.ObjectPage.view.Details": {
				"BeforeFacet|Headers|InvoiceItems": {
					"className": "sap.ui.core.mvc.View",
					"viewName": "MyNameSpace.ext.view.GeneralData",
					"type": "XML",
					"sap.ui.generic.app": {
						"title": "{@i18n>GeneralData}"
					}
				},
				"AfterFacet|Headers|InvoiceItems": {
					"className": "sap.ui.core.mvc.View",
					"viewName": "MyNameSpace.ext.view.Attachments",
					"type": "XML",
					"sap.ui.generic.app": {
						"title": "{@i18n>Attachments}"
					}
				},
				"ResponsiveTableColumnsExtension|Items|ToItems::com.sap.vocabularies.UI.v1.LineItem": {
					"className": "sap.ui.core.Fragment",
					"fragmentName": "MyNameSpace.ext.fragment.ObjectPageTableColumns",
					"type": "XML"
				},
				"ResponsiveTableCellsExtension|Items|ToItems::com.sap.vocabularies.UI.v1.LineItem": {
					"className": "sap.ui.core.Fragment",
					"fragmentName": "MyNameSpace.ext.fragment.ObjectPageTableCells",
					"type": "XML"
				}
			}
		},
		"sap.ui.controllerExtensions": {
			"sap.suite.ui.generic.template.ListReport.view.ListReport": {
				"controllerName": "MyNameSpace.ext.controller.ListReportExt"
			},
			"sap.suite.ui.generic.template.ObjectPage.view.Details": {
				"controllerName": "MyNameSpace.ext.controller.ObjectPageExt",
				"sap.ui.generic.app": {
					"Headers": {
						"EntitySet": "Headers",
						"Sections": {
							"InvoiceItems": {
								"id": "InvoiceItems",
								"Actions": {
									"ActionItemsRefresh": {
										"id": "ActionItemsRefresh",
										"press": "OnActionItemsRefresh",
										"requiresSelection": false
									}
								}
							}
						},
						"Header": {
							"Actions": {
								"PreSave": {
									"id": "ActionPreSave",
									"text": "PreSave",
									"press": "OnActionPreSave",
									"determining": true
								}
							}
						}
					}
				}
			}
		}
	}
	}

To apply icon on my CustomAction, I used JS on OnInit event of Object Page controller. I binded "enable" property to ui>editable.

To get CustomAction in footer bar, I must add it in manifest but I got it in header in "read" mode and in footer in "edit" mode so ... I hidden it with JS in OnInit event of Object Page controller.

Now I am working on Custom Column/Cell in smart table ... but now, it does not work yet. But I will get it, I sure 🙂

Thanks all.

[alexandredoyen]

Duplicate ID solved by added function onExit of my controller and destroy all "ID" fields.

[alexandredoyen]

Hello all,

I found something ! A "S" missed in declaration of controller. Now we have

"sap.suite.ui.generic.template.ObjectPage.view.Details"

"extends": {
"extensions": {
	"sap.ui.viewExtensions": {
		"sap.suite.ui.generic.template.ListReport.view.ListReport": {
			"SmartFilterBarControlConfigurationExtension|Headers": {
				"className": "sap.ui.core.Fragment",
				"fragmentName": "MyNameSpace.ext.fragment.Customfilter",
				"type": "XML"
			}
		},
		"sap.suite.ui.generic.template.ObjectPage.view.Details": {
			"BeforeFacet|Headers|InvoiceItems": {
				"className": "sap.ui.core.mvc.View",
				"viewName": "MyNameSpace.ext.view.GeneralData",
				"type": "XML",
				"sap.ui.generic.app": {
					"title": "{@i18n>GENERALDATA}"
				}
			}
		}
	},
	"sap.ui.controllerExtensions": {
		"sap.suite.ui.generic.template.ListReport.view.ListReport": {
			"controllerName": "MyNameSpace.ext.controller.ListReportExt"
		},
		"sap.suite.ui.generic.template.ObjectPage.view.Details": {
			"controllerName": "MyNameSpace.ext.controller.ObjectPageExt",
			"sap.ui.generic.app": {
				"Headers": {
					"EntitySet": "Headers",
					"Sections": {
						"InvoiceItems": {
							"id": "InvoiceItems",
							"Actions": {
								"ActionItemsRefresh": {
									"id": "ActionItemsRefresh",
									"text": "{@i18n>ACTIONREFRESH}",
									"press": "OnActionItemsRefresh"
								}
							}
						}
					}
				}
			}
		}
	}
}
},

I added successfully my action on my "LineItem". I linked it to a function import.

Now I have to:
- rebind data from backend
- add an icon instead a text
- add an action in footer bar

I deployed my apps for test and we have a new problem. You run the apps from launchpad, you nav back and relaunch ... app does not appear because we have a duplicate ID from first extension XML ... I don't understand why ??!!!

If you have any advice or answer .... Thank you very much all !!