All structures displayed on the screen are written in Main.view.xml inside the view (like the html body).

To add something to the screen, we embed our example from the SAP HANA Tutorial page by opening the content and depending on the version number, the version changes. We showed the source code.


When we added the code we will use after opening the content, it gave us an error that these elements were not defined. The terms at the beginning of the Fiori elements indicate the libraries. Core: Item is from the core library. Items without anything at the beginning are default structures in the sap.m library.

I am adding the library at the beginning of the code.

The library is now defined. I added the texts I want to appear on the screen.

My Combobox came on the screen.

Fiori uses the Model View Controller structure. To briefly remind you of MVC;
Model: the area where the data to be used in the developed project is stored.
View: interface elements used in the developed projects.
Controller: the control section where all operations in the developed projects (various calculations, data exchange, database operations, etc.) are performed.

The controller is defined at the beginning of View.XMl. Each view has a controller. The common controller for the views is written in component.js.
<mvc:View controllerName="com.mediumblog02.mediumblog02.controller.Main"
When I type “Change” for the Combobox and press CTRL+Space, it brings me the function defined in main.controller.js.



We added a new function here, being careful with the commas while adding it. It says “No references.”

When I come back to the Main view, it appears when I type CTRL+Space. I defined this function here.

Since it is defined, I no longer receive a reference warning. I wrote console.log and alert for testing the function.

When I make a selection in the Combobox on the main screen, this screen appears.

If there is an “o” at the beginning of an object definition, it is an object, and if there is an “s,” it is a string. The function takes a single parameter, not multiple.

To debug, after clicking “Inspect,” we selected the controller from the sources and added a debug pointer to the relevant line.

After making the selection, we dropped it into debug mode. The “Paused in debugger” screen appeared.

We cleared the console.

When we type “oEvent” and press enter, the parameters are displayed in the parameter section. It gave itself in the source section.

We can read any of the above with oEvent.getParameter(“Value”) in the debugger. With Get Parameter, we can also read anything above.

If we want to read from the source, we can say oEvent.getSource().getValue().

For the details of what this element does, we can look at the API Reference.”


No Comments