Technical Articles
SAP Fiori Elements using SAP Business Application Studio
Heylo Community
This weekend, I came up with the demonstration on What is SAP Business Application Studio, Difference’s between SAP Business Application Studio and SAP WEB IDE, SAP Fiori Elements development using SAP Business Application Studio.
SAP Business Application Studio: A powerful and modern development environment, tailored for efficient development of business applications for the Intelligent Enterprise. As most of us know, it is available as a Subscription in SAP Cloud Platform Cloud Foundry environment.
The most interesting fact about SAP Business Application Studio is, this service is handy with Amazon Web Services(AWS), Microsoft Azure and Alibaba Cloud.
SAP Business Application Studio Vs SAP WEB IDE Full Stack:
Now let’s practice the SAP Fiori Elements template: List report floorplan.
Open SAP Business Application Studio and create a Dev Space.
Open the Space once it is in RUNNING
From the central page, click View -> Find Command
Search for below highlighted SAP Fiori Tools and launch it.
Follow the below steps to create List Report Page
I have chosen SAP Demo Gateway System ES5 for this trial.
Name the mandatory fields
Project Structure:
Open application preview in browser:
With this, the application output will show in a new tab:
Still willing to do changes to the application, go after below steps.
Opt a view:
Click the annotation indicator:
Just copy the annotations to existing annotation file in our project.
Please play around the SAP Fiori Elements templates and let me know your comments.
Thank you!!
#EnhanceLearning
BR//Dhanasupriya Sidagam
Nice.
Almost all of these functionalities on Fiori are available on VS Code with Extentions.
I suggest you check that also.
Regards
Hi Dhanasupriya,
I am unable to produce the Application output after exposing the Port.
A new tab is opening but the output looks like below screen-shot:
Application Output not generated
Do let me know, what is missing ?
Thanks in advance
Regards,
Somenath Chanda
I had the same issue ... resolved by allowing popups for the site in the browser , i.e. disabling the popup blocker
Neil
More on this ... I'm not sure if this is the normal behavior, but if you're seeing this screen the local server is running, open the test folder and click on the sandbox or mock sandbox html file... it'll run your app
Right click on the Webapp folder and then go for preview.
Hi, I'm having an issue when I try to use all this SAP Fiori Extension tools with a Northwind OData service, it's just very strange.
I wanted to try out the Fiori Tools extensions on VS Code as Mostafa recommended but it seems to be an issue when trying to input my credentials for an OData URL comming from the ES5 Gateway system. The issue is "btoa is not defined".
Then I tried to use Northwind URI as an alternative but I found an issue with the Service Modeler as well as in SAP BAS.
I hope all this issues can be fixed sooner. If anyone knows a solution for this it would be very appreciated. There are some issues raised also on github for this.
Regards.
Juan
I am trying to understand, when we create a ui5 application from template, why it’s project structure is different from free style development ? When i expand the WebApp folder, I dont see the folders of View and Component. I think View.xml is nothing but Annotation.xml, but Component file ? Please help me to understand.
Hi,
The application generated in this blog uses the List Report and Object page floorplans . The floorplan itself will generate the view based on the annotation.xml so there is no need to add new views are controllers like the freestyle applications.
To understand better how the annotations help render the UI without the developer define views , refer to the below Fiori Elements documentation.
https://sapui5.hana.ondemand.com/#/topic/03265b0408e2432c9571d6b3feb6b1fd
Thanks,
Arun
Nice Blog, Preview works fine for me.
How can I deploy the app to CF?
I tried with the cf cli html5 plugin to push it
but it doesn't work since there is no xs-app.json.
Hi Oliver,
Were you able to deploy the app to CF?
Thanks,
Naga
Hi Oliver,
How did you deploy the app to CF. ?
Regards,
Anand
how to add the export to excel in list report
Why can't I find any "sap fiori tools" in the Business Application Studio @ cn40 ac-live? Is there an alternative way to use Fiori Elements?
How would I change the layout of the pages (add buttons, inputs, etc.)? There is no View Folder in the tree.
For example the "Create" page is empty, so is the details page.
Hi Dhanasupriya,
I need to migrate Fiori elements annotations based custom app from WEB ide to BAS. Is same way of normal UI5 application migration to be followed or any specific approach for Fiori elements annotation modeler app migration to SAP BAS.
How can I deploy this kind of project (SAP Fiori Elements) to SCP?
I understand I should build the MTA first however the file yaml.mta is not generated in these kind of projects.
Thanks
Hello 🙂 Thanks for the blog 👏
I trying to reproduce it but when I search after fiori tools iI can see only see the option "Fiori :Migrate web ide project for use in Fiori tools"
Any idea if some additional plugin I need to install?