Skip to Content
Technical Articles
Author's profile photo Sachin Artani

Build Your SAP UI5 App with SAP Business Application Studio

SAP is focusing a lot on front-end development and the evolution has gone from SAP WebDynpro to SAP UI5/Fiori and ABAP RESTful Application will be the future.

I am a Web Developer and recently started learning SAP UI5. I found a lot of difficulties understanding how to start practicing with SAP’s Web IDE because there have been a lot of new changes in SAP recently. Before I could start practicing with SAP Web IDE, I found SAP Business Application Studio.

SAP offers SAP Business Application Studio on cloud foundry environment to build SAP UI5/Fiori apps and there is a different configuration process that needs to be followed to begin.

Earlier SAP used to offer direct service to build and start your personal SAP Web IDE which was easy with the configuration. SAP Web IDE was limited to a trial of 30 days with the paid extension. Now, as the demand for SAP rises drastically, they are offering to extend the trial up to 365 days.

Let us begin with the steps as followed –

1. Open the URL – https://account.hanatrial.ondemand.com/trial/#/home/trial and enter credentials to log in to SAP.

SAP%20Login

To create an SAP account, follow this URL – https://www.sap.com/account.html

2. Login to the URL above and create a Subaccount

SAP%20HANA%20Trial%20Account

Provide the details for Subaccount and create.

3. Open the subaccount –

 

4. Go to the Subscriptions option on the left sidebar and subscribe to SAP Business Application Studio which we will be going to use. Once you subscribe it, click on Go to Application.

5. Create a Dev Space of SAP Fiori Application type and Start it. It would take a minute or two to start.

Once the application is running, click on the app name (SAPUI). You can bookmark the current URL to open your SAP Web IDE directly.

You can choose to start a new project by creating files manually or by the available templates or by cloning projects from Github.

 

6. We will go with the template option. Click on Create project from template for quick application build and then click on SAP Fiori Freestyle project and click on Start.

7. Select the target running environment as Cloud Foundry and choose SAP UI5 Application.

8. Enter project Name

9. Keep HTMl5 Application Runtime as Standalone Approuter

10. Keep Basic attributes and View Name as per the default setup

11. The project has been created. To open it, navigate to File > Open Workspace in the toolbar and open the application you have created.

The project files will be displayed in the screen –

12. To preview the application, right-click on index.html and open it with preview.

You can also try cloning JavaScript projects for SAP UI5 and build your app. As an alternative, I would recommend you to try installing this project – https://github.com/SAP/generator-easy-ui5. It can help you to create SAP UI5 and Fiori projects.

You can provide your feedback to me in the comments and follow me for more helpful tutorials. Thank You 🙂

Assigned tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Dipak Nandeshwar
      Dipak Nandeshwar

      Very helpful.

      Author's profile photo Jelena Perfiljeva
      Jelena Perfiljeva

      Thanks for sharing, Sachin!

      I'm wondering if you could update the blog title and text since there are some statements that are inaccurate. (Although understandable confusion by someone relatively new to SAP world.)

      SAP Web IDE and SAP Business Application Studio are two different IDEs. It's not simply a new name for the same IDE, these are completely different things.

      Trial (not "trail" 🙂 ) you're mentioning is for SAP Cloud Platform environment. There used to be a trial for Web IDE but it's been discontinued altogether because it was using Neo environment and SAP is moving to Cloud Foundry. You can easily find related information simply by searching, if interested in details.

      Please also note that there are already many free tutorials available for developers here: https://developers.sap.com/tutorial-navigator.html

      There is definitely a tutorial that describes how to set up SAP CP trial environment, which is about 50% of this post. For your next posts, I would recommend searching for the existing content and referring to it instead of repeating the same exact thing. (As a developer, I'm sure you are familiar with reusability concept. 🙂 ) By doing this, you'll achieve two things: 1) less time spent on describing basic steps and instead focus on additional content; 2) SAP keeps the tutorials updated, so if anything changes, your readers will have a link to updated information instead of someone trying the steps as you described and finding something is off.

      Good luck!

      Author's profile photo Sachin Artani
      Sachin Artani
      Blog Post Author

      Thanks very much, Jelena for the insight. Since then I have learned a lot and keep learning about it. Your comment will surely help me in the future.