Making a Fiori Calculator

I define the libraries I will use in the Controller.js of my screen.

sap.ui.define(
  ["sap/ui/core/mvc/Controller", "sap/ui/model/json/JSONModel"],

/**
   * @param {typeof sap.ui.core.mvc.Controller} Controller
   */
function (Controller,JSONModel,Fragment)

Then I define the properties that I will use in the project in a JSON file.

After that, I create the operators, inputs, and variables that I will use in the project in JSON format.

I create a variable named oModel and create a model that will take this defined JSON file as a parameter.

When getting the view with this.getView(), I assigned a model to the view using the setModel(oModel) method.

 onInit: function () {
var oCalculationData ={
input1:'1',
input2:'3',
operator:'+',
result:'',
aSelect: [{
key:'+'
            },
            {
key:'-'
            },
            {
key:'/'
            },
            {
key:'*'
            }]
        },
        oModel = new JSONModel(oCalculationData);
this.getView().setModel(oModel);
      },

“In the function, first, we obtained the JSON model assigned to the view using this.getView().getModel() and assigned it to the oModel variable.

Then, we used parseInt to get the input value from oModel and assign it to variables in a tenth (0.1) format.

Similarly, we obtained the operator from our oModel and assigned it to a variable.

We set the result to 0.

Then, we used a switch case structure with this variable to set the functions of the buttons in the calculator.

Finally, we assigned our result variable to the Result property in oModel.

   calculate: function () {
var oModel =this.getView().getModel()
          sValue = parseInt(oModel.getProperty("/input1"),10),
          sValue2 = parseInt(oModel.getProperty("/input2"),10),
          sOperator = oModel.getProperty("/operator"),
          iResult = 0;
switch(sOperator){
case '+':
                iResult = sValue + sValue2;
break ;
case '-':
                iResult = sValue -  sValue2;
break ;  
case '/':
                iResult = sValue / sValue2;
break ;  
case '*':
                iResult = sValue * sValue2;
break ;      
        }
        oModel.setProperty("/result", iResult);

      },

We enter the values we will use in the i18n.properties file inside the i18n folder.

# This is the resource bundle for fiori.calculator

#Texts for manifest.json

#XTIT: Application name
appTitle=Fiori Calculator

#YDES: Application description
appDescription=A Fiori application.
#XTIT: Main view title
title=Fiori Calculator
buttontext = Calculate 
appResult =The Answer is {0}

Next, we write a function using the result variable as a parameter to convert the result into the desired format.

We obtained the i18n model and its resources using getResourceBundle() method. The oBundle variable represents an object that contains the resources of the model.

If the value of the oBundle variable is correct (i.e., if the resources are loaded successfully), the following code will run:

We combine the iResult parameter with the ({0}) part in the “appResult” resource text and assign the resulting text to the sResult variable.

If iResult has a value, sResult variable is returned. If iResult is false or if the oBundle variable is null or undefined, an empty string (“”) is returned.

formatResult: function(iResult){
var oBundle = this.getView().getModel("i18n") && this.getView().getModel("i18n").getResourceBundle();
if (oBundle) {
var sResult = oBundle.getText("appResult", [iResult]);
if (iResult) {
return sResult;
          }
        }
return "";
      }

   <Page id="page" title="{i18n>title}" class ="sapUiResponsiveContentPadding
">
<content>
<Input type="Number" id="input1" value="{/input1}" />
<Select id= "Operator" items="{/aSelect}" selectedKey="{/operator}">
<items>
<core:Item key="{key}" text="{key}"  />

</items>
</Select>
<Input type="Number" id="input2" value="{/input2}" />
<Button text ="{i18n>buttontext}"  type="Emphasized" press="calculate"/>
<Text text ="{parts:[{path:'/result'}], formatter :'.formatResult'}" class="sapUiLargeMarginBegin"/>
</content>
</Page>

Then, we place the screen objects we will use on this screen in the Xml of our Screen by binding them with the model data used in the project. We also adjust the spaces on the screen using the Margin and Padding classes of SapUI5.

   <Page id="page" title="{i18n>title}" class ="sapUiResponsiveContentPadding
">
<content>
<Input type="Number" id="input1" value="{/input1}" />
<Select id= "Operator" items="{/aSelect}" selectedKey="{/operator}">
<items>
<core:Item key="{key}" text="{key}"  />

</items>
</Select>
<Input type="Number" id="input2" value="{/input2}" />
<Button text ="{i18n>buttontext}"  type="Emphasized" press="calculate"/>
<Text text ="{parts:[{path:'/result'}], formatter :'.formatResult'}" class="sapUiLargeMarginBegin"/>
</content>
</Page>

You can access the code I wrote from the link below.

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