Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
mertuytun
Participant

Introduction


Welcome to the world of extending SAP Fiori elements OData V4 apps using the Flexible Programming Model. This model offers a hassle-free approach to expanding app functionalities. Whether you prefer coding in SAPUI5 or utilizing our new building blocks, you'll find ample ways to customize your apps with ease. In this blog, I'll provide an overview of the flexible programming model and guide you to the relevant documentation.

Summary


In this blog, you'll learn how the Flexible Programming Model simplifies extending SAP Fiori Elements apps. We'll explore customization options, from basic SAPUI5 coding to leveraging new building blocks. By the end, you'll have a clear understanding of how to adapt apps effortlessly while discovering resources for further exploration.


Pre-requisites:



  • S/4 HANA System

  • Sap Fiori Elements App (OData V4)

  • VSCode with SAP Fiori Tools - Extension Pack


 

  • Extension Points

    • Custom Form Element

    • Custom Filter



  • Building Blocks

    • Table



  • Controller Extensions

    • Edit Flow




 

Extension Points


Extension points in the Flexible Programming Model act like customizable slots in SAP Fiori Elements apps. They let you easily add your own custom elements—sections, actions, form elements, filters, header facets, table columns, and even entirely new pages—just like in Fiori elements for OData V2. But now, you can even seamlessly integrate whole new pages into your app's navigation flow, giving you the freedom to personalize your app experience in unique ways.

Here are some examples:

Custom Form Element


Custom form element let you easily add your own unique elements to forms wherever you need in SAP Fiori Elements apps like below.


First, we need change manifest.json
//..
"ActivitySetObjectPage": {
"type": "Component",
"id": "ActivitySetObjectPage",
"name": "sap.fe.templates.ObjectPage",
"options": {
"settings": {
"editableHeaderContent": false,
"controlConfiguration": {
"@com.sap.vocabularies.UI.v1.FieldGroup#General": {
"fields": {
"customFormElementIdentification1": {
"template": "activity.list.report.ext.fragment.CustomField",
"label": "Custom Form Element",
"position": {
"placement": "After",
"anchor": "DataField::be_invoiced"
}
}
}
}
}
}
}
}
//..

In this code, our custom field will come from webapp/ext/fragment/CustomField.fragment.xml which has the label ‘Custom Form Element’ and is placed after the be_invoiced field. We should put our code block just below of ‘editableHeaderContent: false’. ‘activity.list.report’ is a namespace. FieldGroup#General is facet which we located our field.

 

Lastly, we will create CustomField.fragment.xml in webapp/ext/fragment/.
<core:FragmentDefinition
xmlns:core="sap.ui.core"
xmlns="sap.m"
xmlns:macros="sap.fe.macros"
>
<Switch
id="checkBoxOption2"
enabled="{ui>/isEditable}"
state="{be_invoiced}"
type="AcceptReject"
/>
</core:FragmentDefinition>

There are two important points. First, the binding field that we want for our custom component and managing the edit status of this component with binding necessary UI properties.

 

Custom Filter


Custom filters in the Flexible Programming Model allow you to add personalized filters to refine data exactly how you need in SAP Fiori Elements apps.


We need to change the manifest.json.



//...
"ActivitySetList": {
"type": "Component",
"id": "ActivitySetList",
"name": "sap.fe.templates.ListReport",
"options": {
"settings": {
"contextPath": "/ActivitySet",
"variantManagement": "Page",
"navigation": {
"ActivitySet": {
"detail": {
"route": "ActivitySetObjectPage"
}
}
},
"controlConfiguration": {
"@com.sap.vocabularies.UI.v1.SelectionFields": {
"showClearButton": true,
"filterFields": {
"activity_time": {
"label": "Activity Time",
"template": "activity.list.report.ext.fragment.CustomFilter",
"availability": "Default",
"position": {
"placement": "After",
"anchor": "activity_date"
}
}
}
}
}
}
}
},
//...

Our custom filter will come from webapp/ext/fragment/CustomFilter.fragment.xml which has label ‘Activity Time’ and placed After activity_date field with ‘Default’ availability. This custom field for ‘activity_time’ field. We should put our code block inside of settings of List Report Page. ‘activity.list.report’ is namespace.

Now, we will create CustomFilter.fragment.xml in webapp/ext/fragment/.
<core:FragmentDefinition
xmlns:core="sap.ui.core"
xmlns="sap.m"
>
<HBox
id="_IDGenHBox1234"
alignItems="Center"
width="100%"
core:require="{handler: 'activity/list/report/ext/controller/CustomFilter'}"
>
<StepInput
id="_IDGenStepInput1"
value="{path: 'filterValues>', type: 'sap.fe.macros.filter.type.Value', formatOptions: { operator: 'LE' }}"
min="0"
max="8"
step="2"
width="100px"
/>
<core:Icon
id="_IDGenIcon113212"
src="sap-icon://reset"
press="handler.onReset"
class="sapUiSmallMarginBegin"
/>
</HBox>
</core:FragmentDefinition>

We have js file to handle press event of reset button. core:require tag in HBox connects our js file to our view. Please note that, we must change dots to slashs in our namespace like that ‘activity.list.report’ to ‘activity/list/report’. Here is CustomFilter.js that is located in webapp/ext/controller.
sap.ui.define(
["sap/ui/model/Filter"],
function (Filter) {
"use strict";

return {
onReset: function (oEvent) {
this.setFilterValues("activity_time");
}
};
}
);

 

Building Blocks


Building blocks, distinct from extension points, serve as reusable elements essential in constructing SAP Fiori elements apps. These components, integral to the app's template, ensure a standardized approach while simplifying development. They're orchestrated consistently by the framework, ensuring automatic compliance with SAP Fiori standards, including functionalities like draft handling and side effects. Leveraging these building blocks streamlines app extension, promising enduring and easily maintainable software.

 

Table


I added the table building block to my custom section, boosting my app's features but you can also use this building block in your custom fiori app. You can use it directly in your own app without much hassle. The cool part? Table building block is also customizable as you can see I added new custom column. It's a handy feature that makes app development easier and more consistent, giving your app an instant functionality boost.



<core:FragmentDefinition
xmlns:core="sap.ui.core"
xmlns="sap.m"
xmlns:macros="sap.fe.macros"
xmlns:mc="sap.suite.ui.microchart"
>
<macros:Table
contextPath="/ActivitySet"
metaPath="to_today/@com.sap.vocabularies.UI.v1.LineItem"
id="LineItemTable"
headerVisible="false"
readOnly="true"
enableAutoColumnWidth="true"
>
<macros:columns>
<macrosTable:Column
id="_IDGenColumn1"
header="Activity Time/Day"
importance="High"
width="10em"
key="FirstColumnKey"
>
<mc:HarveyBallMicroChart
id="_IDGenHarveyBallMicroChart1"
size="XS"
total="8"
totalScale="hr"
>
<mc:items>
<mc:HarveyBallMicroChartItem
id="_IDGenHarveyBallMicroChartItem1"
fraction="{activity_time}"
color="Good"
fractionScale="hr"
/>
</mc:items>
</mc:HarveyBallMicroChart>
</macrosTable:Column>
</macros:columns>
</macros:Table>
</core:FragmentDefinition>

ContextPath is your entity name if you want to use entity directly just make metaPath="@com.sap.vocabularies.UI.v1.LineItem" and you can add custom column and bind easily as below.

 

Controller Extensions


Controller Extensions in SAP Fiori elements offer a set of internally used extensions, exposing overrideable methods that provide developers with added flexibility in customizing app behaviors.

Edit Flow


The edit flow functionality empowers you to efficiently manage crucial object page events, such as before save, before discard, after edit, and after save, within your Fiori Elements app.


 

First, we need to add these code block to our manifest.json under sap.ui5 to extend controller for ObjectPage.
//..
"sap.ui5": {
"extends": {
"extensions": {
"sap.ui.controllerExtensions": {
"sap.fe.templates.ObjectPage.ObjectPageController": {
"controllerName": "activity.list.report.ext.OPExtend"
}
}
}
},
//..

 

Then we need to create OPExtend.controller.js under webapp/ext. We will handle every event in edit flow in that js.
sap.ui.define(
[
"sap/ui/core/mvc/ControllerExtension",
"sap/m/Dialog",
"sap/m/DialogType",
"sap/m/Text",
"sap/m/Button",
"sap/m/ButtonType",
"sap/m/MessageToast",
"sap/m/MessageBox"
],
function (ControllerExtension, Dialog, DialogType, Text, Button, ButtonType, MessageToast, MessageBox) {
"use strict";

return ControllerExtension.extend("activity.list.report.ext.OPExtend", {
// this section allows to extend lifecycle hooks or override public methods of the base controller
override: {
onInit: function () { },
editFlow: {
onBeforeSave: function (mParameters) {
var sTodayDate = new Date().toISOString().split('T')[0];
return this._createDialog("Activity Date will be changed with today's date.").then(() => {
mParameters.context.setProperty('activity_date', sTodayDate)
});
}
},
},
_createDialog: async function (sText, mParameters) {
return new Promise(function (fnResolve, fnReject) {
var oApproveDialog = new Dialog({
type: DialogType.Message,
title: "Confirm",
content: new Text({ text: sText }),
beginButton: new Button({
type: ButtonType.Emphasized,
text: "Continue",
press: function () {
oApproveDialog.close();
fnResolve();
}
}),
endButton: new Button({
text: "Cancel",
press: function () {
oApproveDialog.close();
fnReject();
}
}),
escapeHandler: (pCloseDialog) => {
pCloseDialog.resolve();
fnReject();
}
});
oApproveDialog.open();
});
}
});
}
);

This code allows you to change activity date with today’s date before save event.

 
Remember, Guided Development is another valuable tool that streamlines your app extension at various stages. It's a powerful aid in making your development process smoother and more efficient.


Conclusion


In simple terms, the Flexible Programming Model helps customize apps easily and control how they work. These examples are just the beginning to explore how it all works. Let's dive in together and discover more about how to create and shape apps using this logic. Share your thoughts too — let's explore and learn together!

 

References


SAP Fiori Elements: Flexible Programming Model Explore












2 Comments
TylerFincham
Explorer
0 Kudos

How did you achieve the 3 column layout in the forms? The standard is 6 for me...

mertuytun
Participant
0 Kudos

@TylerFinchamIt is completely about your screen width. I haven't done something different about this subject.

Labels in this area