Add a List Report Interface to the CAP App (SAP HANA Cloud)
- How to connect an HDI container during local development
- How to create an SAP Fiori elements web interface
- How to run the CAP application locally
- This tutorial is designed for SAP HANA Cloud. It is not intended for SAP HANA on-premise or SAP HANA, express edition.
- You have created database artifacts and loaded data, as explained in the previous tutorial.
- Step 1
Open the Run Configuration panel from the left-hand toolbar and click the + button to trigger the prompts.
Select the suggested development profile
MyHANAApp. You can provide a name for this run configuration in the next step - any name will do the job here.
You’ll see that a new run configuration has been added to the list. Expand the configuration to see that it has one dependency: The HDI container where the data is stored. Click on the plug icon to trigger the binding.
Select the HDI container you created in the previous tutorial.
You’ll see a few success messages once the binding has been established successfully.
Click on the green play button of the run configuration. This will switch the view to the debug panel, and scripts will be executed. A few moments later, a message will pop up and suggest exposing a new port. Accept this suggestion by selecting Open in New Tab.
If you accidentally close this dialog, you can always open the running services via View > Find Command and then choosing Ports: Preview and select the running service from the list.
A new browser tab should now open, and you’ll see the list of entities you exposed.
You can click on the entities to see the values in a JSON format being served from the SAP HANA Cloud database.
- Step 2
$metadataoption from the Welcome page, and you can see a technical description of the service.
You can use different methods in the OData v4 services you have created. Go back to the welcome page for the service and click
Interactions_Items. Add the following to the URL:URLCopy
Now search for "GE" (instead of "DE"). How many results are returned this time?
- Step 3
The managed approuter will make it easy for us to access web applications (such as the SAP Fiori elements app) in a serverless manner later on.
Trigger the wizard with a right-click on the
mta.yamlfile and select Create MTA Modules from Template.
This will start a wizard to add the module to your project. Choose the Module Template type of Approuter Configuration and then press Start.
Choose the application runtime type of Managed Approuter, chose
hana.appas the name of the business solution, and confirm that you want to add a UI. Then press Next to complete the wizard.
This will complete the wizard and add a few new sections to the
mta.yamlfile at the root of your project.
- Step 4
Now that the managed approuter is part of this project, it’s time to add the web application. To be more precise, an SAP Fiori elements app that implements the List Report Floorplan . We will use the built-in wizard to generate the UI.
This wizard can also be triggered via a right-click on the
mta.yamlfile and then select Create MTA Modules from Template once again.
This time you need to choose the SAP Fiori application tile and Start the wizard.
As mentioned before, we want to create a List Report Object Page. Select the corresponding tile and proceed with Next.
This Fiori app shall retrieve its data from the Local CAP Project. Provide the path to this project so that you can select the
CatalogServiceyou defined in a previous step.
For this tutorial, we want to visualize the
Fill in the properties with the following key-value pairs before you confirm with Next.
Key Value Module name
Add deployment configuration true Add FLP configuration true
Select Cloud Foundry as the target platform. Note that it’s not necessary to enter a destination name. We will create the required destination in the following tutorial directly in the code.
Last but not least, enter the launchpad configuration. This information is needed for the navigation from the Launchpad to your Fiori app. Once you provided all the data from the screenshot, hit Finish to add the new files to the project.
- Step 5
So we added the Fiori resources now, but they are not yet visible in the running development server. This is expected as we started the process before the files were created.
Go to the Debug view and hit the restart button.
Go back to the running CAP application or open a new tab (if you already closed it). There should now be an
index.htmllink under Web Applications:. Click this link.
- Step 6
It’s time to use the Fiori application!
You should only see one tile List Report in the Launchpad sandbox. Select this application.
Note that you need to select the visible columns manually before you can see any records.
Once all needed columns are selected, hit the Go button to display the data.
Congratulations! You have created a complete SAP Fiori elements application.
Now is an excellent time to commit your application to the local or remote Git.