Great Day,
Hope everyone are doing good!!!
Problem Statement:
In order to enhance the initial screen by adding custom button with popup table in the fragment here I am using request maintenance F1511(Standard App).
Adaptation Project:
Adaptation is a feature of SAPUI5 flexibility that allows to make UI changes for all users. By using SAP BAS, you are leveraging features of UI5 Flexibility and able to adapt and extend UI5 applications without changing the base app, which allows seamless upgrades and lifecycle stability.
it will an Adaptation Project for an On-Premise System we will be connecting to the on-premise system in our case and will be extending request maintenance application in this blog
Steps for Adaptation Project in BAS:
In the development environment prerequisite will be having access to the BAS development environment and in which it is connected to the required destination maintained and connection established. And also development and deployment access int he abap system connected to.
Let’s go over a series of steps below for the Adaption Project.
creating new project
- Select the Adoption project and Click on Start
2. Select the Target Environment from the template creation
Traget enviroment selection
3. Here, we have ABAP environment for me so I selected ABAP from the drop-down then click on Next button.it means BAS is connected to On-Premise SAP system connected using cloud connector.
ABAP System environment Selection
4.In the next section about adaption project, basic information needed. Enter the project name as you like but you must fallow some naming convention to fill project name and name space will auto populate based on project name. Click Next.
custom.<project name> will be created by default as we are creating a custom adaptation for the stander application.
5. In the configuration part we must have select the System for that you have to add the destinations in the BTP cockpit destination section.
there destinations will help to connect with the targeted system and establish the communication with the system
6. After System selection, it will auto populate the Selection of Application that you need to Adapt/Extend the Fiori application. In the drop-down section you can search with the name or Application ID and select the application which you need to extend.
We will be checking for the Application which be extended and also the application ID in the system.
we can search the same by application name as mentioned in the above point or get the same details from the Fiori App library . we can get the required details from the app library in this case its F1511 search for application and in the configuration section we can find the details.
Here I am selecting Standard App app Id- F1511(Request maintenance App).
7.Select the version as per configuration and then click on Finish. In the below screen safe mode determines the developer flexibility, in safe mode developer will have less freestyle capabilities and it will allow the application to be compatible with the future upgrades for the targeted application releasing
8. The adapted application will be automatically open in the new workspace please find the attached screenshot
App Extension process:
In the web App section, you can find the manifest.appdescr.varient file and right click on it and there you can find the Open SAPUI5 visual editor. Please find the attached screen shot for reference.
manifest.appdescr.varient is the manifest file we will be using for this variant of the application.
we would be having the specific actions available to be performed recommended to us as a options when we open the application in the editor.
Preview an Fiori Application from BAS
As per the current scenario we are looking to add a button with a fragment and in the related controller we will be specifying the logic and model related bindings for the application . We are creating a fragment shown as below.
Click on Edit Mode, to add the custom button footer section right click on the footer section and then select the Add : Fragment option.
Once you click on it you can see the below details and by creating button create new Fragment, the target aggregation which you can able to add the controls in it.
Along with the add fragment we have the options to add content and Extend with controller.
- Give the Fragment name and click on create.
After created the button here we can change the button name, Id as you like and an event for it ,to display the data in a table. and Fragment folder will created automatically once click on Create.
Displaying button like below :
Once we made the change properties of button and save the fragment and new button (button Name: Sort ) will created in the footer section. Please find the attached screenshot.
Here i created the controller with the name of newTech.js and click on Extend.after created the controller (newTech.js) it will be showing in the below mentioned path.
Path: /webapp/changes/coding.
Here i added press event for Button in the the fragment:
onEditLocation: function () {
var that = this;
var url = "/sap/opu/odata/sap/SERVICE NAME";
var oModel = new sap.ui.model.odata.ODataModel(url);
oModel.setUseBatch(false);
if (!that.btnDialog) {
that.btnDialog = sap.ui.xmlfragment("customer.EAMNotifications.changes.fragments.popTbl", that);
that.getView().addDependent(that.btnDialog);
}
that.btnDialog.open();
var sFilters =[];
sFilters.push(new sap.ui.model.Filter("Id", sap.ui.model.FilterOperator.EQ, “test"));
oModel.read("/ENTITYSET", {
filters: sFilters,
success: function (oData) {
var oModel = new sap.ui.model.json.JSONModel(oData.results); that.getView().setModel(oModel, "ModelData");
}
},
empDialogClose: function () {
var that = this;
that.btnDialog.close();
that.btnDialog.destroy();
that.btnDialog = null;
}
Similarly i want create another fragment to display the data in the popup Table.
We need to Add the service in the manifest.appdescr_varient file in the content section because I using oData service to get the data from SAP.
{
"changeType": "appdescr_ui5_addNewModel",
"content": {
"dataSource": {
"customer.oCustmServce": {
"uri": "<Your Odata Service>”,
"type": "OData",
"settings": {
"odataVersion": "2.0"
}
}
},
"model": {
"customer.custServModel": {
"dataSource": "customer.oCustmServce",
"settings": {}
}
}
}
}
Bind the data to the fragment from the model that we have constructed.
<!-- Use stable and unique IDs!-->
<core:FragmentDefinition
xmlns="sap.m"
xmlns:mvc="sap.ui.core.mvc"
xmlns:core="sap.ui.core"
xmlns:html="http://www.w3.org/1999/xhtml">
<!-- add your xml here -->
<Dialog id="dilog">
<Table id="TabId" width="auto" items="{path:'ModelData>/results'}" class="sapUiResponsiveMargin"
backgroundDesign="Solid" includeItemInSelection="true">
<columns>
<Column>
<Label text="Employee ID" design="Bold"/>
</Column>
<Column>
<Label text="Employee Name" design="Bold"/>
</Column>
<Column>
<Label text="Location" design="Bold"/>
</Column>
<Column>
<Label text="Region" design="Bold"/>
</Column>
</columns>
<items>
<ColumnListItem press="onSupervisorySubmit" type="Active">
<cells>
<Text text="{ModelData>EmpId}"/>
<Text text="{ModelData>EmpName}"/>
<Text text="{ModelData>Location}"/>
<Text text="{ModelData>Region}"/>
</cells>
</ColumnListItem>
</items>
</Table>
<endButton>
<Button text="Cancel" id="BnId" press="onDilogClose"/>
</endButton>
</Dialog>
</core:FragmentDefinition>
Result: Finally added Creating a custom button and displaying table as shown like below.
Conclusion:
This would covers creating a custom button and displaying the data in the Table level by Adaptation of SAP Standard Fiori Application.
We can use this approach to extend/Adapt standard Fiori adaptable applications(fiori elements app etc..)
For references please go-through the below links.
Fiori application library for the above used example application click here.
Extending Delivered Apps Using Adaptation Extensions click here.
Adding OData Service and New SAPUI5 Model click here.
Adaptation Project for an On-Premise System click here
Feel free to share your inputs or any other improvements!..We are all learning here!
