V GANGIREDDY SAPUI5_On_BTP Linkedin
UI elements:
Every UI element can have items below.
1) Properties: the property of an UI element directly reflects its appearance in the
output/behavior in the output.
2) Aggregations: if an UI element has a subpart, then those subparts are called as
“Aggregations” / the subparts of an UI element are called as “aggregations”.
3) Events (or actions): Any action that we can perform on the UI elements is called
“Events”. The event names are pre-defined by SAP. So, we need to use those names
only. when the user wants to perform some action on the UI elements, that logic should
write in the particular view controller.
Every UI element cannot contain all the above 3 items. Based on the UI element it will vary
from element to element.
If a tag starts with a capital letter i.e., a UI element. Every UI element starts with an open tag
and closed tag.
Navigation between 2 pages:
By using buttons, we navigate the 1st page to 2nd page and 2nd page to 1st page.
To solve this requirement, we need to create a 2nd view page and 2nd view controller.
2nd view creation:
STEP 1: Right click on View → click on “new file”
vgangireddy09@[Link] 1
V GANGIREDDY SAPUI5_On_BTP Linkedin
STEP 2: User has the option to enter the View name like below one.
STEP 3: Once the user enters the view name and clicks on enter button, a file is created.
However, the file contains no code. it's empty, as shown in the image below.
vgangireddy09@[Link] 2
V GANGIREDDY SAPUI5_On_BTP Linkedin
STEP 4: I copied the code from the [Link] file and pasted it into the controller for the
second page. Since this controller is intended to handle View2, we need to update all
references from View1 to View2 in the copied code. I have highlighted the necessary changes in
the image below. Additionally, I updated the page ID to "Page2" because, in a UI5/Fiori
application, each ID must uniquely identify a single UI element.
Controller creation for View2:
STEP 1: Right click on Controller -> click on “new file”
vgangireddy09@[Link] 3
V GANGIREDDY SAPUI5_On_BTP Linkedin
STEP 2: User has option to enter the Controller name like below one.
STEP 3: Once the user enters a name and clicks on enter button, a file is created. However, the
file contains no code—it's empty, as shown in the image below.
vgangireddy09@[Link] 4
V GANGIREDDY SAPUI5_On_BTP Linkedin
STEP 4: I copied the code from the [Link] file and pasted it into the controller for
the second page. Since this controller is intended to handle View2, we need to update all
references from View1 to View2 in the copied code. I have highlighted the changes in the image
below.
vgangireddy09@[Link] 5
V GANGIREDDY SAPUI5_On_BTP Linkedin
[Link] file configuration:
In the [Link] file, we need to configure the routes as shown below for the second view,
so that the user can navigate between views smoothly. Each route defines a specific pattern
(URL hash) and is associated with a target view. The target specifies which view should be
loaded and displayed when the route is matched, allowing structured navigation within the SAP
UI5 application.
Button UI element: When the user clicks the button on the first page, it navigates to the second
page. When the user clicks the button on the second page, it navigates back to the first page.
CASE 1:
STEP 1: In the [Link] file we have some default code.
vgangireddy09@[Link] 6
V GANGIREDDY SAPUI5_On_BTP Linkedin
STEP 2: Remember this step to run the application: Right-click on "webapp" and then click on
"Preview Application".
STEP 3: Select “start-noflp”.
vgangireddy09@[Link] 7
V GANGIREDDY SAPUI5_On_BTP Linkedin
The application is now starting properly, and the terminal output confirms that it is being
loaded.
STEP 4: Once the server starts successfully, the application will open in a new window,
displaying the interface as shown below.
vgangireddy09@[Link] 8
V GANGIREDDY SAPUI5_On_BTP Linkedin
STEP 5: We add the Button code in the [Link] file. In the Button UI element, text is a
property, and press is an event. In our case, the press event is handled by the “onPress”
function. The logic for the “onPress” event is implemented in the corresponding controller, so
we need to write the “onPress” function in the [Link] file.
Content Tag: The <content> tag is used to put things (like buttons, text, or other controls)
inside a page in a UI5 app. It's the main area of the page where you show what the user will
interact with.
vgangireddy09@[Link] 9
V GANGIREDDY SAPUI5_On_BTP Linkedin
STEP 6: Add the “onPress” function in the [Link] file. See the image below for the
code.
STEP 7: Rerun the application: You will see a UI similar to the one shown below.
When the user clicks the highlighted button, it triggers the onPress function defined in the
controller. This function handles the navigation to the second page.
vgangireddy09@[Link] 10
V GANGIREDDY SAPUI5_On_BTP Linkedin
STEP 8: Now the second page is displayed, as shown in the image below.
CASE 2:
In the second view, we are not directly creating a button. Instead, we use the “showNavButton”
property to display a navigation button in the navigation bar, and the “navButtonPress” event
to handle its functionality.
STEP 1: I have added the code in the second view ([Link]) as shown below. We are
enabling the “showNavButton” property to display the navigation button, and using the
“navButtonPress” event with the “goToBackPage” function to handle the navigation back to the
previous page.
vgangireddy09@[Link] 11
V GANGIREDDY SAPUI5_On_BTP Linkedin
STEP 2: Add the “goToBackPage” function in the [Link] file. See the image below
for the code.
You can use [Link](-1), which takes the user back to the previous page in the browser’s
history. If there are multiple views (e.g., View1, View2, and View3), and the user navigates
between them (e.g., from View1 to View2, View2 back to View1, or View3 back to View1),
[Link](-1) can be used to navigate back to the previous page. It helps by simply taking the
user back to the last visited page, regardless of the specific view.
vgangireddy09@[Link] 12
V GANGIREDDY SAPUI5_On_BTP Linkedin
STEP 3: Now we need to check complete functionality. Run the application. Now we will get the
Output like below images.
First Page: The first page is shown in the picture below. When the user clicks the highlighted
button, it will navigate to the second page.
Second Page: The second page is shown in the picture below. When the user clicks the
highlighted button, it will navigate back to the first page.
vgangireddy09@[Link] 13