oData Model, oDialog, and Formatter Example

We are defining a JSON model in the manifest.json.

"main": {
        "type": "sap.ui.model.json.JSONModel"
       }

Then we added the libraries that we will use.

xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m"  xmlns:core="sap.ui.core" xmlns:smartform="sap.ui.comp.smartform

i18n propertylerinde uygulamada kullanacağım Başlık ve açamaları ekledim.

appTitle=test odata
#YDES: Application description
appDescription=test o data
#XTIT: Main view title
title=Proje Bilgileri
DialogTitle =Proje Bilgileri

Then, we place the screen objects we will use on the screen with the Project Property. I made it so that a dialog opens when data is selected from the table. I placed a Smart Form inside the dialog, and the data of the selected project item in the table will appear

  <Dialog title="{i18n>DialogTitle}"   id="dialog">
<content>
<smartform:SmartForm editable="true" id="mySmartForm">
<smartform:Group>
<smartform:GroupElement label="Proje No">
<Input value="{main>/Proje/Pno}" />
</smartform:GroupElement>

<smartform:GroupElement label="Proje Türü">
<Input value="{main>/Proje/Ptur}" />
</smartform:GroupElement>
<smartform:GroupElement label="Proje Tanım">
<Input value="{main>/Proje/Tanim}" />
</smartform:GroupElement>
<smartform:GroupElement label="Vstelle">
<Input value="{main>/Proje/Vstelle}" />
</smartform:GroupElement>
<smartform:GroupElement label="Durum">
<Input value="{main>/Proje/Durum}" />
</smartform:GroupElement>
<smartform:GroupElement label="Bina Id">
<Input value="{main>/Proje/Binaid}" />
</smartform:GroupElement>
<smartform:GroupElement label="Kayıt Tarihi">
<Input value="{
    path: 'main>/Proje/KayitTarih',
    formatter: '.formatDate'
}" />
</smartform:GroupElement>

<smartform:GroupElement label="Onay Tarihi">
<Input value="{
    path: 'main>/Proje/KayitTarih',
    formatter: '.formatDate'
}" />
</smartform:GroupElement>

<smartform:GroupElement label="Müşteri Numarası">
<Input value="{main>/Proje/Kunnr}" />
</smartform:GroupElement>

<smartform:GroupElement label="Şirket Kodu">
<Input value="{main>/Proje/Bukrs}" />
</smartform:GroupElement>
</smartform:Group>
</smartform:SmartForm>
</content>



<endButton>
<Button icon="sap-icon://exit-full-screen" text="Close" press="onCancel" />
</endButton>
</Dialog>
<content>
<!-- <core:Fragment fragmentName="com.enerya.ztestodata.Fragments.Dialog" type="XML" /> -->
<Table id="idProductsTable" updateFinished="onTableUpdateFinish" selectionChange="onSelectionChange" mode="SingleSelectMaster" inset="false" items="{/FirmaProjeSet}">
<headerToolbar>
<OverflowToolbar>
<content>
<Title text="{i18n>title}" level="H2" />
<ToolbarSpacer />
<Text text="{main>/Proje/Pno}" />
<Text text="{
    path: 'main>/Proje/KayitTarih',
    formatter: '.formatDate'
}" />
</content>
</OverflowToolbar>
</headerToolbar>
<columns>
<Column width="12em">
<Text text="Proje No" />
</Column>
<Column width="12em">
<Text text="Tanım" />
</Column>
</columns>
<items>
<ColumnListItem vAlign="Middle" type="Active">
<cells>
<Text text="{Pno}" />
<Text text="{Tanim}" />
</cells>
</ColumnListItem>
</items>
</Table>

In the Controller.js file, I define my function for the selection change property of my table. I define my table using the .getSource() function of the oEvent parameter I passed to the function. Since I will use single select, I assign the Path of the selected context array of the table to a variable.

Then, I define my oMain model with the syntax this.getView().getModel(“model name”) from the manifest.json file. I also define my oModel by using this.getView().getModel(), where I didn’t enter anything for the model name as I used the default model.

Next, I assign the row data to a variable using the Path variable I previously defined from my oModel. After that, I define a property based on the row data named “Project” in the oMainModel by using the .setProperty syntax.

To open the dialog when data is selected, I define my oDialog using the syntax this.getView().byId(‘text of the dialog’), and then I call .open() to open it.

onSelectionChange : function(oEvent){
var oTable = oEvent.getSource();
var sPath =  oTable.getSelectedContexts()[0].getPath();
var oMainModel = this.getView().getModel("main");
var oModel = this.getView().getModel();
var oRowData = oModel.getProperty(sPath);
                oMainModel.setProperty("/Proje", oRowData);
var oDialog =  this.getView().byId("dialog");
                oDialog.open()

I create a function with the name I gave to the close button in the dialog’s press section. Inside this function, I define my oDialog using the syntax this.getView().byId(‘text of the dialog’). Then, I call .close() to close it.

onCancel : function(){
var oDialog =  this.getView().byId("dialog");
                oDialog.close()
            },

I also used the Formatter structure, which I didn’t mention in my previous messages, to bring the date data in the format I wanted. Formatters in SAP Fiori/UI5 are functions used to transform data into a certain format. These functions are typically used to display data in a more user-friendly way, change the value or appearance of the data, or process data validation.

Formatters in SAP Fiori/UI5 can be defined in different ways and can vary depending on the use case and developer preferences. Some of the most common methods for defining a formatter are:

Using a separate function: The formatter function can be defined as a separate function in a controller or another JavaScript file. This function is then called using the syntax “{path: ‘…’, formatter: ‘myFormatter’}” in the view. This definition method is recommended when the formatter function is complex and needs to be reused in multiple views or controllers.

Using an anonymous function: The formatter function can be directly defined as an anonymous function in the binding expression. This definition method is recommended when the formatter function is simple and does not need to be reused in other views or controllers.

<Input value="{
    path: 'main>/Proje/KayitTarih',
    formatter: '.formatDate'
}" />

That’s correct! We create a formatter function with the name we gave in the XML view, and define a function that takes a “date” parameter. If the date parameter is not present, we convert the object to an empty string. If it is present, we use the sap.ui.core.format.DateFormat.getDateInstance method to create a formatter with the desired pattern, and use it to format the date value.

formatDate: function(date) {
if (!date) {
return "";
                }
                var dateFormatter = sap.ui.core.format.DateFormat.getDateInstance({pattern: "MM/dd/yyyy"});
return dateFormatter.format(date);
            }

The date value that normally looks like this

Thanks to the formatter I wrote, it appears like this.

You can access the codes in the article from the following repository. However, since I use oData, you can create a similar application with your own oData data.

https://github.com/kaancancalkan/Medium-Blog/tree/main/z_test_odata