# Fiori Elements Integration
Extend the object page of a Fiori list report app with an abap2UI5 app. See the [ABAP2UI5_COMP_CONT repository](https://github.com/axelmohnen/ABAP2UI5_COMP_CONT) for a complete example.
## Guide
1. Register the FLP integration in the component.js:
```js
// Register abap2UI5 FLP integration for component container
jQuery.sap.registerModulePath("z2ui5", "/sap/bc/ui5_ui5/sap/z2ui5");
```
2. Adapt the object page extension controller.js:
```js
sap.ui.core.Component.create({
name: "z2ui5",
settings: {
componentData: {
startupParameters: {
app_start: ["ZCL_YOUR_2UI5_CLASS_APP"],
key1: ["Param1"],
key2: ["Param2"]
}
}
}
}).then(function (oComponent) {
var oCompContainer = new sap.ui.core.ComponentContainer({
component: oComponent,
async: true
});
// Add component container to your VBox
var oVBox = that.getView().byId("VBoxId")
oVBox.destroyItems();
oVBox.addItem(oCompContainer);
//Overwrite default height of object page section
var oSection = that.getView().byId(""); // replace with the ID of your object page section
oSection.addStyleClass("customSectionHeight");
});
```
3. Implement facet fragment:
```xml
```
4. Add CSS (style.css):
```css
.customSectionHeight {
height: auto !important;
}
```
5. Create abap2UI5 app class
On the ABAP side, the app receives the Fiori startup parameters (like the app class name and any custom key-value pairs) via `client->get( )-t_comp_params`. The `check_initialized` flag — a public `abap_bool` attribute of the app class — ensures the parameters are read only once, on the first roundtrip. Setting `backgrounddesign = 'List'` gives the page a white background matching the Fiori object page:
```abap
" class definition:
" PUBLIC SECTION.
" INTERFACES z2ui5_if_app.
" DATA check_initialized TYPE abap_bool.
METHOD z2ui5_if_app~main.
IF check_initialized = abap_false.
check_initialized = abap_true.
* ---------- Get startup parameters ---------------------------------------------------------------
DATA(lt_startup_params) = client->get( )-t_comp_params.
" ... evaluate the startup parameters here
ENDIF.
DATA(view) = z2ui5_cl_ui5_view_builder=>factory(
)->ele( n = `View` ns = `mvc`
)->a( n = `xmlns` v = `sap.m`
)->a( n = `xmlns:mvc` v = `sap.ui.core.mvc`
)->ele( `Page`
)->a( n = `showHeader` b = abap_false
" backgroundDesign "List" sets a white background color
)->a( n = `backgroundDesign` v = `List`
)->ele( `content`
)->tag( `Text`
)->a( n = `text` v = `TEXT` ).
client->view_display( view->stringify( ) ).
ENDMETHOD.
```