Skip to Content
Previous

Import your BUILD project into Web IDE

By Meredith Hassett

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

You will learn

Learn how to import a completed and published prototype from BUILD into 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.

Details

Please note that an imported BUILD prototype should not be used for a production application.


Step 1: Enable BUILD Services

If you haven’t already, Sign Up for a 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
Step 2: Enable Web IDE

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

In Services, search for Web IDE.

services search for web IDE

Click on the SAP Web IDE tile and enable the service.

Web IDE Service overview
Step 3: Import the destinations

In your SAP Cloud Platform cockpit, under Connectivity, select Destinations.

Destinations highlighted in cockpit

Download the four destinations files by right clicking and selecting Save As for each of the file.

You can import each of the downloaded destination files. To import, select Import Destination.

import destination link

Choose the BUILD_Production* file. Click Save.

destination import 1

Select Import Destination again. Choose the sapui5-private destination. Click Save.

destination import 2

Select Import Destination again. Choose the sapui5-private-build destination. Click Save.

destination import 3

Select Import Destination again. Choose the Web_IDE_PLUGIN destination. Click Save.

destination import 4
Step 4: Open Web IDE

In your SAP Cloud Platform cockpit, navigate back to Services.

Locate the SAP Web IDE service and Go to Service.

web IDE service launch link

This will launch your Web IDE.

Step 5: Enable the BUILD plugin

In your Web IDE, click on the Gear Icon to open the preferences view.

gear icon highlighted in Web IDE

Select Plugins.

Plugins selected in preferences

In the drop down menu, select BUILD Destinations. Enable the Import from BUILD plugin by clicking the switch on the right hand side.

BUILD filter in plugins

Click Save.

save highlighted in plugins

Your Web IDE will refresh. Click Refresh.

refresh message for web IDE
Step 6: 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
Step 7: Name the project

Give your project a Name. Click Next.

name for project
Step 8: Select a project to import

When prompted, enter your BUILD Username and Password.

If successful, you will see a list of your prototypes that you can import. Under the BUILD System Information, select standard.

Select Inventory Dashboard from the list of prototypes available. You always want to only import High Fidelity prototypes.

Build system information selection on select build prototype step

Click Finish.

finish button on select build prototype

A new project will be created in your workspace.

Step 9: 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 testFLPService.html as the file to run. Click OK.

file selection in prompt

Your application is now live in UI5!

live application in UI5 and Web IDE

Next Steps

Updated 09/13/2017

Time to Complete

15 Min

Beginner

Prerequisites

Next Steps

Next
Back to top