- SAP Managed Tags:
Hi All, if you are reading this article after completing Part I and Part II, then I would like to congratulate you on completing your Backend Development Complete. If you come to this article, I suggest you go through the series of articles in sequence with the same name.
You can also use this article to create a UI5 application independent of the Backend and Service. What we need to do so is just the service link which we created in Part II (Any REST Architecture based service API link to create connection & use services).
If you created your API link, then I will say you are doing great by yourself, exploring the learning by yourself is a good thing. But if you are facing trouble with creating the API link, then here I will guide you to create one. In the previous article, I missed one step intensely because of which you are facing the trouble of not getting the API link. My Intension was not to tell you because I thought you people are smart and will find a way out by yourself. But anyway, after creating all the files in the package and before executing the .xsodata file, we need to activate the package we created. For activating the package just right click on the package and there you will find an option to do so.
Now, if you execute the .xsodata file, a new window will show up with an API service link.
For me, it comes as https://employeedetailschtanujsharmatrial.hanatrial.ondemand.com/EmployeeDetailPackage/EmployeeDetai... (This link will be different for you).
Note: If you want to see the metadata of your service then add /$metadata at the end of your service link.
Let's Start Frontend Development using SAP Web IDE.
Here, our task is to create the connection of the OData service with the User Interface application, and then we need to develop our User Interface application in the Web IDE.
Establishing the Connection:
For creating the connection move to the SAP Cloud Platform Cockpit in your trial account home page there you will find an option for Connectivity>Destinations, click on that. Few options will come up related to the connectivity.
Select the New Destination option to create new connections for your project.
Provide the details in a proper format as asked in the Destination Configuration Panel. I went for the Basic Authorization option as we have a username and password for accessing our backend system. I provided the Username as SYSTEM and the Password must be the same to get details from the backend system.
Note: In URL we just need to provide a URL for the system not for the service. So in my case, I just provided https://employeedetailschtanujsharmatrial.hanatrial.ondemand.com in the URL section.
After Save, you can check the connectivity status by clicking on the Check Connection button.
Here we are done with creating the connectivity with our OData Service. Let’s move to the next part of creating UI5 Application.
Now UI Turn:
As previously, I requested you to explore the available options in the services. I hope you people already did that part very seriously. Now open SAP Web IDE service in SAP Cloud Platform Cockpit. This will lead you to the Web IDE home page. Now we need to create the User Interface Application here using MVC framework architecture.
You will find a bunch of options there, so give yourself a little more time to explore all if you are not done yet. Let’s move forward, now our task is to create a User Interface, for that you will have multiple options but for now I will go with the New Project with Template and select SAP UI5 Application in it.
Move Next, and it will ask you to provide few details as shown below in the sequence, provide all the required detail as per your project.
When finished, it will create an MVC architecture based project for you with a view (.xml) and a controller (controller.js) file to work with inside your project name folder provided by you.
It will create a bunch of other files and folders but here we will be concerned about only a few, out of which the above two mentioned files are the important ones.
As we created one connectivity for our OData service, but to make sure that our application will work with the service which we wanted to work with we need to create an OData Service within our UI5 Application. Which will help our application connect to the connection we created to utilize the service properly.
A popup will come up, as shown below, here you need to select the Service URL option and then provide the rest of the URL to access our OData service created in the desired field. For me I placed “/EmployeeDetailPackage/EmployeeDetails.xsodata” to connect to our backend OData service.
You can test it by clicking on the Test button, if any issue will come to try to resolve that out first and then click on the Next button.
Here in this slide, we are going to select a model for our OData Service. You have two options to do that, for this project I am creating a new model for the OData Service.
This process will create a few more files into your project folder, such a file is serviceBinding.js. If you want, you can explore these files and try to understand what is happening there.
Now, we need to create the User Interface for our UI5 application, according to the requirement and functionality we decided at the beginning of the project (in Analysis Phase).
For the Employee Detail Project, I am going to create a view where we will be able to display all the records saved in our database table. For which we need to do View related coding in the .xml file and controller related coding in .controller.js file. Open these two files in your project and try to create the view first according to your requirement.
Note: If you are new to the SAP UI5 world then I would like to mention that SAP provides the best documentation for each and everything you need to work with functionally and technically. It's just on us to find out the best resource to go through. For now, I would like you all to give yourself a few hours and try to go through all the specifications SAP UI5 provides, which is well documented in the Demokit.
For the current project, I will use one of the smart control called SmartTable, which will help me in displaying all the content from the database table very easily.
As you remember, I asked you to add “/$metadata” in the end on your OData service and try to run that link in any of the browsers. There you will be able to see some of the metadata coming for the service we created based on the entities (Tables) we exposed in our .xsodata file. From there I am getting the "entitySet" Name as “EMP” (in my case) and setting it as the value to the SmartTable "entitySet" property. (Enclosed in the Red Box), and along with that, I maintained the visible fields name which I want to display in the SmartTable as given in the metadata itself (highlighted in yellow in below figure).
After that, you need to set the view model with the model you created while creating the OData service. For me, it was named as EmployeeDetailModel.
If you didn’t remember, I would request you to open the “mainifest.json” file from your project folder in Web IDE and try to search for the “models” model keyword, in there you will see the name of the OData Model we created for our project. You need to take that name and set that model to the view model of our project.
After, this tries to run your project by clicking on the run button. For the very first time, it will give you some options to execute with, select index.html, and press on the OK button.
A new window will open with your complete details from the database table in a tabular format as shown below.
Congrats, we are done with 90% of our first full-stack development project, for the rest of 10% I would like you to try it by yourself. I already provided you some of the hints to go with, so if you see the .xml file again in the SmartTable tab, you will see a keyword “smartFilterId”, this means we can use smart filters to display and achieve the functionality of filtering the table according to the data.
One more task is there which is to create a new entry from this application to the database table, try to explore the Demokit again, check for some samples, and try to finish this functionality on your own. If you will find it hard, just let me know in the comment section and I will write a separate article for creating a form and saving its data into the database table.
I wish you luck with your future projects & learnings.
#Regards
Tanuj Sharma
You can also use this article to create a UI5 application independent of the Backend and Service. What we need to do so is just the service link which we created in Part II (Any REST Architecture based service API link to create connection & use services).
If you created your API link, then I will say you are doing great by yourself, exploring the learning by yourself is a good thing. But if you are facing trouble with creating the API link, then here I will guide you to create one. In the previous article, I missed one step intensely because of which you are facing the trouble of not getting the API link. My Intension was not to tell you because I thought you people are smart and will find a way out by yourself. But anyway, after creating all the files in the package and before executing the .xsodata file, we need to activate the package we created. For activating the package just right click on the package and there you will find an option to do so.
Now, if you execute the .xsodata file, a new window will show up with an API service link.
For me, it comes as https://employeedetailschtanujsharmatrial.hanatrial.ondemand.com/EmployeeDetailPackage/EmployeeDetai... (This link will be different for you).
Note: If you want to see the metadata of your service then add /$metadata at the end of your service link.
Let's Start Frontend Development using SAP Web IDE.
Here, our task is to create the connection of the OData service with the User Interface application, and then we need to develop our User Interface application in the Web IDE.
Establishing the Connection:
For creating the connection move to the SAP Cloud Platform Cockpit in your trial account home page there you will find an option for Connectivity>Destinations, click on that. Few options will come up related to the connectivity.
Select the New Destination option to create new connections for your project.
Provide the details in a proper format as asked in the Destination Configuration Panel. I went for the Basic Authorization option as we have a username and password for accessing our backend system. I provided the Username as SYSTEM and the Password must be the same to get details from the backend system.
Note: In URL we just need to provide a URL for the system not for the service. So in my case, I just provided https://employeedetailschtanujsharmatrial.hanatrial.ondemand.com in the URL section.
After Save, you can check the connectivity status by clicking on the Check Connection button.
Here we are done with creating the connectivity with our OData Service. Let’s move to the next part of creating UI5 Application.
Now UI Turn:
As previously, I requested you to explore the available options in the services. I hope you people already did that part very seriously. Now open SAP Web IDE service in SAP Cloud Platform Cockpit. This will lead you to the Web IDE home page. Now we need to create the User Interface Application here using MVC framework architecture.
You will find a bunch of options there, so give yourself a little more time to explore all if you are not done yet. Let’s move forward, now our task is to create a User Interface, for that you will have multiple options but for now I will go with the New Project with Template and select SAP UI5 Application in it.
Move Next, and it will ask you to provide few details as shown below in the sequence, provide all the required detail as per your project.
When finished, it will create an MVC architecture based project for you with a view (.xml) and a controller (controller.js) file to work with inside your project name folder provided by you.
It will create a bunch of other files and folders but here we will be concerned about only a few, out of which the above two mentioned files are the important ones.
As we created one connectivity for our OData service, but to make sure that our application will work with the service which we wanted to work with we need to create an OData Service within our UI5 Application. Which will help our application connect to the connection we created to utilize the service properly.
A popup will come up, as shown below, here you need to select the Service URL option and then provide the rest of the URL to access our OData service created in the desired field. For me I placed “/EmployeeDetailPackage/EmployeeDetails.xsodata” to connect to our backend OData service.
You can test it by clicking on the Test button, if any issue will come to try to resolve that out first and then click on the Next button.
Here in this slide, we are going to select a model for our OData Service. You have two options to do that, for this project I am creating a new model for the OData Service.
This process will create a few more files into your project folder, such a file is serviceBinding.js. If you want, you can explore these files and try to understand what is happening there.
Now, we need to create the User Interface for our UI5 application, according to the requirement and functionality we decided at the beginning of the project (in Analysis Phase).
For the Employee Detail Project, I am going to create a view where we will be able to display all the records saved in our database table. For which we need to do View related coding in the .xml file and controller related coding in .controller.js file. Open these two files in your project and try to create the view first according to your requirement.
Note: If you are new to the SAP UI5 world then I would like to mention that SAP provides the best documentation for each and everything you need to work with functionally and technically. It's just on us to find out the best resource to go through. For now, I would like you all to give yourself a few hours and try to go through all the specifications SAP UI5 provides, which is well documented in the Demokit.
For the current project, I will use one of the smart control called SmartTable, which will help me in displaying all the content from the database table very easily.
As you remember, I asked you to add “/$metadata” in the end on your OData service and try to run that link in any of the browsers. There you will be able to see some of the metadata coming for the service we created based on the entities (Tables) we exposed in our .xsodata file. From there I am getting the "entitySet" Name as “EMP” (in my case) and setting it as the value to the SmartTable "entitySet" property. (Enclosed in the Red Box), and along with that, I maintained the visible fields name which I want to display in the SmartTable as given in the metadata itself (highlighted in yellow in below figure).
After that, you need to set the view model with the model you created while creating the OData service. For me, it was named as EmployeeDetailModel.
If you didn’t remember, I would request you to open the “mainifest.json” file from your project folder in Web IDE and try to search for the “models” model keyword, in there you will see the name of the OData Model we created for our project. You need to take that name and set that model to the view model of our project.
After, this tries to run your project by clicking on the run button. For the very first time, it will give you some options to execute with, select index.html, and press on the OK button.
A new window will open with your complete details from the database table in a tabular format as shown below.
Congrats, we are done with 90% of our first full-stack development project, for the rest of 10% I would like you to try it by yourself. I already provided you some of the hints to go with, so if you see the .xml file again in the SmartTable tab, you will see a keyword “smartFilterId”, this means we can use smart filters to display and achieve the functionality of filtering the table according to the data.
One more task is there which is to create a new entry from this application to the database table, try to explore the Demokit again, check for some samples, and try to finish this functionality on your own. If you will find it hard, just let me know in the comment section and I will write a separate article for creating a form and saving its data into the database table.
I wish you luck with your future projects & learnings.
#Regards
Tanuj Sharma
