SES 27: Linking to HTML5 Application’s Git Repository

The SAP Web IDE manages development artifacts that a user builds into his projects. But while developing HTML5 applications, you’ll want to ensure that project resources are linked to application’s Git repository. To track development changes to application resources, you need to clone the repository. The step-by-step procedure is discussed below:

• From the menu, select FILE * GIT * CLONE REPOSITORY. This will open CLONE REPOSITORY dialog box, where you should paste the repository URL field in the LOCATION section.
• Now, fill in the other options like HOST, REPOSITORY PATH, PROTOCOL (type), PORT. Now, you’ll want to insert your SAP HCP Account credentials (username & password).
• You can finish cloning by clicking on OK button.
• Then, SAP Web IDE will connect to target repository and sync contact.
• When everything is settled, you’ll have a folder named same as your HTML5 application name.

How to create application content?

Once the cloning procedure is done, you can start development of application content. You can do so by building a new project.

• Right-click on root folder built during cloning and choose NEW * PROJECT FROM TEMPLATE menu option.
• You’ll see NEW PROJECT wizard screen, from where you can choose number of templates defining number of projects (SAP Fiori starter projects, SAPUI5 projects, mobile application projects).
• Click on NEXT button to proceed further.
• Enter name of the project at the BASIC INFORMATION step. Better plug-in the same project name you use for HTM5 application name in SAP HCP Cockpit.
• Hit NEXT to proceed further.
• Based on the template type selected by you, you’ll be allowed to customize project settings (APPLICATION TYPE, VIEW TYPE, VIEW NAME and NAMESPACE).
• Once done, click on NEXT to continue.
• Confirm your selections and project creation wizard by hitting FINISH button.

Once the project wizard is completed, you’ll see default content in your application folder. You can move to development from here and create new files or even edit template files. during development stage, if you end up with a syntax error, a tiny red square will show up in the error line. You can get details about the error by hovering the cursor over the square.

#Insight

SAP Web IDE works just well like other IDEs, so you can start exploring the tool on your own. There are a number of resources for the help if you get stuck. These options are present in HELP men available within the IDE and documentation for the same will be available online too.

Running Local Tests

During development stage, you should run some unit tests to make sure you’re on the right path. The SAP Web IDE provides a built-in test tool. You should add some content to your application template to test on, before you launch the testing tool. From the project creation stage, you’ll have a file called App.view.xml in the VIEW folder. Open this file and amend XML. You’ll then see the test text displaying on your screen.

Now, you can run a test by choosing application’s file index.html. Hit Run button to open the test tool. This characteristic is helpful when you want to develop responsive web applications offering a consistent experience when accessed on various devices (mobiles and tablets).