- SAP Managed Tags
In this blog we will learn SAPUI5 Adaptation Projects to extend a standard SAP Fiori application by generating and making simple changes to an application, how to add custom fields in smartfilterbar section and button on Table Header toolbar.
Pre-requisites:
When we are creating adaptation project, you must have access of below:
1. Business Application studio.
2. On-Premise system.
3. The app type must be Fiori elements. If you want to know the Fiori app type - go to the Fiori app reference library.
Create the Fiori Adaptation Project
We will create adaptation project for Manage Sales Order - F1873.
- Go to Business Application Studio and Create project template as Adaptation Project and Start.
- Select the Target environment: ABAP
- Project the basic information like Project Name, Application Title, Namespace.
- Provide the configuration details of OnPremise system and click on Finish button.
- Project folder and all dependencies are installed in BAS tool.
- Add custom OData service in Adaptation Project -> Right click on the Project -> Adaptation Project.
- Now we can see in the project directory that a folder named Changes has been added with file for OData Model.
- Run the Fiori app - To run the adaptation project --> Right click on Project --> Adaptation Project --> Open preview.
- Now the standard fiori app can be edited and changed according to the client requirement. To make new changes, follow the steps as given in the screenshot below.
- Open the Fiori app in Edit mode.
- Scenario: As per the requirements: - Add Button on Table level – Add a Button - Select All (When the user clicks on the button, all the table rows should be selected).
- To Create a button, we will select the table header and toolbar -> Right click à Create a fragment and corresponding controller.
- Click on Add fragment --> create a fragment - selectRow.fragment.xml file under fragments folder. Add a button in the fragment.
- create a onOpenDialogpress function in extension controller file - changes.js, to select all rows from table with validation.
- When no row is selected then messagebox popup will open.
- Add custom smartfilterbars for F4 valuehelp and Dropdown for Plant and overall status fields using fragment.
- Add XML code for Dropdown and F4valuehelp in smartfbar.fragment.xml.
- To open valuehelp on Plant field smartfilterbar, Write the logic ( function: onPlantVH) in extension controller changes.js
- Create a PlantVH.fragment.xml to open the valuehelp on Plant Filterbar, as done in previous step.
- Smartfilterbars will get added for Plant and pausedOrder Field.
- Add Logic in extension controller changes.js to get the data in table based on custom and standard filters.
If you want to know more about controller extension file or adaptation Fiori app. Please read from the SAP SDK docs.
Override extension functions
- onInitSmartFilterBar
- provideExtensionAppStateData
- restoreExtensionAppStateData
- ensureFieldsForSelect
- addFilters
/***
@controller Name:sap.suite.ui.generic.template.ListReport.view.ListReport,
*@viewId:cus.sd.salesorders.manage::sap.suite.ui.generic.template.ListReport.view.ListReport::C_SalesOrderWl_F1873
*/
/*!
* OpenUI5
* (c) Copyright 2009-2023 SAP SE or an SAP affiliate company.
* Licensed under the Apache License, Version 2.0 - see LICENSE.txt.
*/
sap.ui.define([
'sap/ui/core/mvc/ControllerExtension',
'sap/m/MessageBox',
'sap/ui/model/Filter',
'sap/ui/model/FilterOperator',
'sap/m/Token'
],
function (
ControllerExtension,
MessageBox,
Filter,
FilterOperator,
Token
// ,OverrideExecution
) {
"use strict";
return ControllerExtension.extend("customer.app.variant2.Changes", {
// metadata: {
// // extension can declare the public methods
// // in general methods that start with "_" are private
// methods: {
// publicMethod: {
// public: true /*default*/ ,
// final: false /*default*/ ,
// overrideExecution: OverrideExecution.Instead /*default*/
// },
// finalPublicMethod: {
// final: true
// },
// onMyHook: {
// public: true /*default*/ ,
// final: false /*default*/ ,
// overrideExecution: OverrideExecution.After
// },
// couldBePrivate: {
// public: false
// }
// }
// },
// // adding a private method, only accessible from this controller extension
// _privateMethod: function() {},
// // adding a public method, might be called from or overridden by other controller extensions as well
// publicMethod: function() {},
// // adding final public method, might be called from, but not overridden by other controller extensions as well
// finalPublicMethod: function() {},
// // adding a hook method, might be called by or overridden from other controller extensions
// // override these method does not replace the implementation, but executes after the original method
// onMyHook: function() {},
// // method public per default, but made private via metadata
// couldBePrivate: function() {},
// // this section allows to extend lifecycle hooks or override public methods of the base controller
// override: {
// /**
// * Called when a controller is instantiated and its View controls (if available) are already created.
// * Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
// * @memberOf customer.app.variant2.Changes
// */
// onInit: function() {
// },
// /**
// * Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
// * (NOT before the first rendering! onInit() is used for that one!).
// * @memberOf customer.app.variant2.Changes
// */
// onBeforeRendering: function() {
// },
// /**
// * Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
// * This hook is the same one that SAPUI5 controls get after being rendered.
// * @memberOf customer.app.variant2.Changes
// */
// onAfterRendering: function() {
// },
// /**
// * Called when the Controller is destroyed. Use this one to free resources and finalize activities.
// * @memberOf customer.app.variant2.Changes
// */
// onExit: function() {
// },
// // override public method of the base controller
// basePublicMethod: function() {
// }
// }
_getODataModel: function () {
return this.getView().getModel("customer.sales");
},
onOpenDialogPress: function () {
// Create a confirmation dialog
if (this.getView().byId("cus.sd.salesorders.manage::sap.suite.ui.generic.template.ListReport.view.ListReport::C_SalesOrderWl_F1873--responsiveTable").getItems().length === 0 || this.getView().byId("cus.sd.salesorders.manage::sap.suite.ui.generic.template.ListReport.view.ListReport::C_SalesOrderWl_F1873--responsiveTable").getItems().length === undefined) {
sap.m.MessageBox.error("Please click on Go button to fetch the table data.");
return;
}
var oDialog = new sap.m.Dialog({
title: "Confirmation",
type: "Message",
content: new sap.m.Text({
text: "Please click on Go button to fetch the table data."
}),
beginButton: new sap.m.Button({
text: "Ok",
press: function () {
var oTable = this.getView().byId("cus.sd.salesorders.manage::sap.suite.ui.generic.template.ListReport.view.ListReport::C_SalesOrderWl_F1873--responsiveTable");
var aItems = oTable.getItems();
aItems.forEach(function(oItem) {
oItem.setSelected(true);
});
oDialog.close();
}.bind(this)
}),
endButton: new sap.m.Button({
text: "Cancel",
press: function () {
// Handle 'No' button press
oDialog.close();
}
}),
afterClose: function () {
oDialog.destroy();
}
});
// Open the dialog
oDialog.open();
},
onPlantVH: function () {
this._getDialog().open();
},
_getDialog: function (oEvent) {
if (!this.pDialog) {
this.pDialog = sap.ui.xmlfragment(
"customer.app.variant2.changes.fragments.PlantVH", this
);
this.getView().addDependent(this.pDialog);
}
return this.pDialog;
},
onPlantSearch:function (oEvent) {
var sValue = oEvent.getParameter("value");
var oFilter = new Filter("VALUE", FilterOperator.Contains, sValue);
var oBinding = oEvent.getSource().getBinding("items");
oBinding.filter([oFilter]);
},
onPlantVHClose: function(oEvent) {
var aSelectedItems = oEvent.getParameter("selectedItems"),
oMultiInput = this.byId("idPlantComboBox");
if (aSelectedItems && aSelectedItems.length > 0) {
aSelectedItems.forEach(function (oItem) {
oMultiInput.addToken(new Token({
text: oItem.getCells()[0].getText()
}));
});
}
},
override:{
onBeforeRendering: function () {
let oFilter = this.getView().byId("cus.sd.salesorders.manage::sap.suite.ui.generic.template.ListReport.view.ListReport::C_SalesOrderWl_F1873--listReportFilter");
oFilter.attachInitialise(function (oEvent) {
let aFiltersItems = oEvent.getSource().getAllFilterItems();
aFiltersItems.forEach((item) => {
// not showing the custom added filter in filterbar for Plant
if (item.getName() === "Plant" || item.getName() === "Paused_order") {
item.setVisibleInFilterBar(false);
}
});
}.bind(this));
},
templateBaseExtension:{
addFilters: function (fnAddFilter) {
// custom filter for Plant
var oPlant = this.byId("idPlantComboBox"),
aSelectedTokens = oPlant.getTokens();
if (aSelectedTokens.length > 0) {
var aFilter, aFilters = [];
aSelectedTokens.forEach((token) => {
aFilter = new sap.ui.model.Filter({
path: "Plant",
operator: sap.ui.model.FilterOperator.EQ,
value1: token
});
if (oPlant.getTokens().length > 1) {
aFilters.push(aFilter);
}
});
let aFinalFilter;
if (aFilters.length > 0) {
aFinalFilter = new sap.ui.model.Filter({
filters: aFilters
});
} else {
aFinalFilter = aFilter;
}
if (aFinalFilter) {
fnAddFilter(this, aFinalFilter);
}
}
// Custom Filter for Paused Order
var oPausedOrder = this.byId("idPaused_orderComboBox"),
aSelectedTokens = oPausedOrder.getSelectedKeys();
if (aSelectedTokens.length > 0) {
var aFilter, aFilters = [];
aSelectedTokens.forEach((token) => {
aFilter = new sap.ui.model.Filter({
path: "Paused_order",
operator: sap.ui.model.FilterOperator.EQ,
value1: token
});
if (oPausedOrder.getSelectedKeys().length > 1) {
aFilters.push(aFilter);
}
});
let aFinalFilter;
if (aFilters.length > 0) {
aFinalFilter = new sap.ui.model.Filter({
filters: aFilters
});
} else {
aFinalFilter = aFilter;
}
if (aFinalFilter) {
fnAddFilter(this, aFinalFilter);
}
}
},
provideExtensionAppStateData: function (fnSetAppStateData) {
var oPlant = this.byId("idPlantComboBox"),
aSelectedTokens = oPlant.getTokens();
fnSetAppStateData(this, {
customApprovalFilter: aSelectedTokens
});
var oPausedOrder = this.byId("idPaused_orderComboBox"),
aSelectedPausedOrder = oPausedOrder.getSelectedKeys();
fnSetAppStateData(this, {
customApprovalFilter: aSelectedPausedOrder
});
},
restoreExtensionAppStateData: function (fnGetAppStateData) {
var oExtensionData = fnGetAppStateData(this);
if (oExtensionData) {
this.byId("idPlantComboBox").setTokens(oExtensionData.customApprovalFilter);
this.byId("idPaused_orderComboBox").setSelectedKeys(oExtensionData.customApprovalFilter);
}
}
}
}
});
});
- Deployment of Adaptation Project
Right click on Project/webapp folder --> select Adaptation Project --> Open Deployment Wizard.
- Select the system, where you want to deploy.
- Provide the package information:
- Provide the Workbench TR and deploy the adaptation project.
Note: If new changes come from your client side, after making changes in the application, delete the existing project from the gateway system to redeploy and follow the below step.
Go to SE38 --> run the report (/UI5/DEL_ADAPTATION_PROJECT) --> execute --> Provide the app variant ID --> execute --> to delete the records provide the Transport No. --> select all entries from the table --> Press delete button. After completing the process we can redeploy the Fiori app same as given in deployment step.
Congratulation now you are running Adaptation project, try custom and standard Filterbar, and fetch the data based on the filters.
Keep learning & Keep Sharing!! 🙂
1 Comment
| User | Count |
|---|---|
| 13 | |
| 9 | |
| 9 | |
| 7 | |
| 7 | |
| 6 | |
| 6 | |
| 6 | |
| 5 | |
| 5 |
