In the previous blog Create your first SAPUI5 Application from scratch, we have build a basic Hello World application that can be run on local machine. It’s code can be modified in text editor like notepad, notepad++, etc. But the real benefits of using SAPUI5 can taken only with working on SAP Web IDE. It provides an integrated environment, various tools and plug-ins arranging all the required essential developer tools under a shed. SAP itself is investing intensively on it, by enhancing and keeping it up to date with periodic up-gradation.
We need to perform following steps before we move on with the SAPUI5 development on SAP Web IDE. Note all the steps are not mandatory but preferable as they are one time setups and next coming blogs in future will assume you have all the required setups done prior.
- Create an SAP HANA Cloud Platform (HCP) Developer Account
You have to have a developer account on HCP to proceed any further on development using SAP Web IDE. It can be created for free and quite easily at the following location.
You can provide the required details and register for a developer account. Once you authenticated and login you would see Hana Cloud Platform Cockpit with various options. Bookmark the Cockpit page for quick future access.
This is your entry point for managing cloud apps and configurations. From here, you can consume tools and applications as services.
Click ‘Services’ to see a list of applications that have been added automatically to your developer account. Search for text ‘web’ in search filter and check it is enable it if not.
Click the ‘SAP Web IDE’ tile and Click the link ‘Open SAP Web IDE’ to open an instance connected to your account.
You can now look at the SAP Web IDE, various options, tutorials and helpful links. Don’t forget to bookmark the page for quick future access.
You can switch to the development perspective by clicking the ‘</>’ icon in the left toolbar. On the left side you will see a folder list with just one entry: ‘Workspace’. The small window containing it is called Workspace window, which can be toggled from ‘View’ menu.
Add a new project folder ‘MyApp’ by right-clicking it and selecting ‘New > Folder’. Also create a ‘index.html’ file inside the MyApp and copy paste the following code
<!DOCTYPE html >
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”/>
<title>Developing Web Apps with SAPUI5</title>
Save and click ‘Run’ button from the toolbar. It will show the desired output in the browser.
2. Connect to the Demo system ES4
You can sign up and get started with the SAP Gateway Demo Consumption System using the following link.
Click ‘Sign up here!’ to connect and register for your SAP HCP developer account to the demo system.
Now, since the two required logins have been setup, lets link the SAP Gateway Demo Consumption System with your SAP HCP account.
3. Create a destination ES4 in the SAP HCP cockpit
Go to the Destinations page of the SAP HCP Cockpit. Choose ‘New Destination’ to open a configuration panel.
In the Destination Configuration section below, make the following entries.
Choose Save. Click the ‘check’ icon on the right side of the newly created destination and make sure that the connection test is successful.
Now we have setup the required two logins (HCP developer login for application development and SAP Gateway Demo Consumption System login for backend Odata / data acess). And we have also setup the destination using which we can access data required in SAP Web IDE from SAP Gateway Demo Consumption System.