Learn how to connect BUILD to Web IDE to generate working Fiori apps from your BUILD prototypes.

We’ve been making a bit of a noise lately around 2 new tools Splash and BUILD. These are great tools to help with Discover and Design phases of user experience and core to scaling UX using the UXaaS strategy for Digital Transformation as explained by Sam Yen at Teched 2015. Not heard about UXaaS yet? Try thisMake it Work, Make it Right, Make it Fast – Adapting to UXaaS priorities for a bit of background.

For those of us working with Fiori apps there is one more very helpful aspect of Splash and BUILD:  you can take a BUILD prototype and generate a working Fiori app. Some of us were even lucky enough to try this out at Teched Las Vegas, Teched Barcelona, or at the recent Sydney Developer and Architect Summit.

In this blog I’ll show you how – with many thanks to Thomas Dubreuil who is the original source of these instructions.

Don’t worry … the BUILD to Web IDE integration is not some big dark secret, it’s just that the Splash and BUILD folk have been swamped with all the excitement from Teched and are playing catchup on some of the documentation.  So with their blessing let me explain how this works.

By the way, yes I’ve done this myself, it took me about 10 minutes all up assuming you already have the prerequisites.

The Prerequisites

You will need:

• a Splash/BUILD account
• a HCP account
• a HCP subscription to Web IDE

Splash is the umbrella site under which UXaaS accelerators, tools, learning links and more are offered.  This site is still hot off the presses so there is a lot more planned to be added. If you don’t yet have an account go to the Splash site, press Login or Sign up and Register for an account.

BUILD is the first major tool offered under Splash.  BUILD comes with a bunch of Youtube videos showing how to get started and create your prototypes so if you haven’t used BUILD before use those to get going. You won’t need to go hunting for the videos – as soon as you login to BUILD via Splash the videos are presented to you on the welcome page.

If you don’t yet have a HCP account you can sign up for a free trial account here: HANA free trial account signup

There’s lots of information on how to make the most of HCP in the SCN Developer Center.

For the sake of simplicity I’ll assume you already know how to use Web IDE but if not the SAPUI5 Developer Center is your best source of advice such as this Getting started with SAP Web IDE trial version … | SCN.

The Provisos

It’s very important to remember that BUILD is still in Beta – currently Beta version 4.

The generated project you will see in Web IDE reflects that – it works, it’s a great starting point, but there are some rough edge that will be smoothed down over time.

For instance the folder hierarchy in the generated SAPUI5 project doesn’t yet match current best practice… and the BUILD folk are working with the SAPUI5 development teams to fix that.  In fact even in the last week I’ve already send some big strides towards that.  However I prefer to think of it this way:

• You are an experienced (or at least hoping to be experienced) developer in Web IDE
• You get a working Fiori app generated from a BUILD prototype – nice!
• But like all generated programs, experienced developers can do better
• So consider creating a new SAPUI5 project from scratch and using the generated project to copy across what you consider relevant and useful to your final Fiori app

We can only generate a project for a prototype that uses controls that have a recognized SAPUI5 equivalent in Web IDE.  Because the Web IDE development teams are more well established than the BUILD team, there are more controls in Web IDE than in BUILD at the moment.  That’s partly because of the rapid rate at which the SAPUI5 development teams are creating new controls.  There is a plan to catch up but obviously this will take a little time, for now, remember BUILD is still in Beta and set your expectations appropriately.

Tip: start with a simple prototype using the Master/Detail page.

What you need to do in BUILD

Apart from creating your prototype itself, to integrate BUILD and Web IDE you will  need to know what organization you are assigned to in BUILD. The organization indicates which tenant you are using in the BUILD platform. 

You can find the organization you are using in your user settings which you access via the user preferences icon – your initial(s) in a circle – in the top right hand corner of the BUILD screen. Select the User Settings option.

Once you are in the user settings window, select the Organization option and look for your Current Organization.

What you need to do in HCP

In the HCP Destinations area you need to create 2 destinations:

1. Create a destination pointing to the Web IDE plugin for BUILD
2. Create a destination pointing to your BUILD organization

These are once-off activities for your HCP account so if you are working in a productive HCP account you only need to do this once for everyone in your team, assuming you are all using the same BUILD organization.

If you are using more than one BUILD organization, just create a destination for each BUILD organization you are using.

Creating the destination for the Web IDE plugin

Note that you’ll need 2 additional properties: WebIDEEnabled and WebIDEUsage

Creating the destination for the BUILD organization

Note that you’ll need 2 additional properties: WebIDEEnabled and WebIDEUsage

What you need to do in Web IDE

Now this step has to be done once by each Web IDE user.  So if you are working in a team this is the step you need to distribute to all your team members.

In your Web IDE preferences, add the BUILD plugin as an optional plugin.

1. In the Tools menu select the Preferences option
2. In Preferences select Optional Plugins
3. Select BUILD
4. Check the listed plugin
5. Select Save (towards the bottom of the screen)

If you intend to use the plugin immediately, refresh Web IDE once to make sure the new plugin settings are picked up.

How to use BUILD prototypes in Web IDE

1. Choose the menu option File > New > Project from Template
2. Choose the BUILD Project template option and select Next
3. Name your project and select Next
4. At this point you may see a pop-up asking you to authenticate to your BUILD system – make sure you enter your Splash/BUILD user id and password.  If you are generating several prototypes in the same Web IDE session, you usually aren’t asked for those details again.
5. Select your BUILD system – this is the BUILD organization you are using
6. Select your prototype.
7. Note that you will only see your personal prototypes here
8. Finish to generate your Fiori app

Note: If you get any kind of error on Finish it usually indicates the generation had a problem converting your prototype to a SAPUI5 project. Go back to BUILD and make sure your prototype is using SAPUI5 type controls.  If you still can’t get it to work, send some feedback to contact.build@sap.com explaining what you are trying to doing and what error you received.  I’m seeing these errors less often these days but again BUILD is still in Beta and working through all the possible generation combinations will take a little time.

Run your app!

Enjoy!