Skip to Content

Import your TechEd BUILD project into SAP Web IDE

0 %
Import your TechEd BUILD project into SAP Web IDE
// Explore More Tutorials

Import your TechEd BUILD project into SAP Web IDE

Once your prototype is complete, you can import it as a template into SAP Web IDE to convert it to UI5 code

You will learn

Learn how to import a completed and published prototype from BUILD into SAP Web IDE. This will help you convert your prototype into a live application. This will be your guide or template for creating the real UI5/Fiori version.

Please note that an imported BUILD prototype should not be used for a production application. The version of BUILD used in these tutorials is for prototyping and designing purposes only. The code generated is not optimized for performance and security. Stay tuned to BUILD for updates about BUILD Apps, a drag and drop tool to create production ready applications!

Step 1: Enable BUILD Services

Open your SAP Cloud Platform account.

In your SAP Cloud Platform cockpit, go to the Services.

service tab in SAP Cloud Platform cockpit

In the Search Bar, search for BUILD.

build search in services

Click on the BUILD service tile under the User Experience section.

build tile in services

Enable the service.

build service overview
Copy and paste the URL of the BUILD service in SAP Cloud Platform into the below text box.
Step 2: Enable SAP Web IDE Full-Stack

If you haven’t enabled SAP Web IDE Full-Stack yet, you will need to do that as well.

In Services, search for Web IDE.

NOTE: SAP Web IDE will be deprecated at the end of 2018. Please use SAP Web IDE Full-Stack for all current and future development, and begin migrating any projects from SAP Web IDE to SAP Web IDE Full-Stack to avoid any loses of code.

services search for web IDE

Click on the SAP Web IDE Full-Stack tile and enable the service.

Web IDE Service Full-Stack overview
Log on to answer question
Step 3: Open SAP Web IDE Full-Stack

In the SAP Web IDE Full-Stack service, scroll down to the Take Action section. Click on Go to Service.

SAP web IDE service launch link

This will launch your SAP Web IDE Full-Stack.

Log on to answer question
Step 4: Enable the BUILD plugin

In your SAP Web IDE Full-Stack, click on the Gear Icon to open the preferences view.

gear icon highlighted in Web IDE

Select Features under the Workspace Preferences.

Features selected in preferences

In the search bar, type in Build. Enable the Import Prototype from BUILD feature by clicking the switch on the right hand side to change it from Off to On.

BUILD filter in features list

Click Save.

save highlighted in features

Your SAP Web IDE Full-Stack will refresh top enable the new features. Click Refresh.

refresh message for SAP Web IDE Full-Stack
Log on to answer question
Step 5: Create a new project

Go back to the code view by clicking the angle brackets icon (</>).

code icon highlighted

In the code view, create a new project by selecting File > New > Project from Template.

file path for creating new project

Under the Category drop down, select BUILD Project. Select the BUILD Project tile. Click Next.

template selection for build projects
Log on to answer question
Step 6: Name the project

In the Name field, enter te2018lotteryapp. Click Next.

name for project

When prompted, enter your BUILD Username and Password. This will be your email address and password you used when signing up for BUILD in the previous tutorial.

SAP EMPLOYEES: If you are an SAP Employee, your SSO password will not work. To continue, you must follow the directions to reset your BUILD password. You are NOT resetting your SSO password, just the password to access BUILD. If you have followed the above steps and you are still unable to login, you can alternatively download the project from Build and import into SAP Web IDE.

Log on to answer question
Step 7: Select a project to import

If you successfully logged in, you will see a list of your prototypes that you can import. Under the BUILD System Information, make sure the BUILD System Information is set to standard Click on the Select Prototype button.

Build system information selection on select build prototype step

In the list of prototypes, select the Inventory Dashboard from the list. You always want to only import High Fidelity prototypes.

Select prototype options

Click Finish.

finish button on select build prototype

A new project will be created in your workspace.

Log on to answer question
Step 8: Run your application

Right click on your project name.

From the menu options, select Run > Run as > Web Application.

right click path for selecting run as web application

If prompted, select testFLPServiceMockServer.html as the file to run. Click OK.

file selection in prompt

Your application is now running on SAPUI5!

live application in UI5 and Web IDE
Copy and paste the URL of your live BUILD application in SAP Web IDE.

Next Steps

Back to top