Skip to Content
Author's profile photo Jocelyn Dart

Kickstart your Fiori Web IDE project with Splash and BUILD

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

*** Latest Update – since this blog was written almost 18 months ago much has changed. BUILD has been GA for some time now for starters and is offered as part of SAP Cloud Platform.  The instructions given in this blog have been in part superseded by the new BUILD documentation.  For exact details on how to set up the Destinations please refer to the BUILD documentation for Web IDE. ***

 

BUILD logo.jpgWEbIDElogo.JPG

 

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.

BUILD User Menu.jpg

 

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

BUILD UserSettings Organization.jpg

 

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

 

Property Value
Name BUILD_WEB_IDE_PLUGIN
Type HTTP
Description BUILD
URL https://www.experiencesplash.com/webideplugin
Proxy Type Internet
Authentication NoAuthentication
WebIDEEnabled true
WebIDEUsage plugin_repository

 

Creating the destination for the BUILD organization

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

Property Value
Name your BUILD organization name_TENANT, e.g. sap_TENANT
Type HTTP
Description your BUILD organization name
URL https://www.experiencesplash.com/webide/your BUILD organization name
Proxy Type Internet
Authentication NoAuthentication
WebIDEEnabled true
WebIDEUsage build_system

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)

WebIDEoptionalplugins.jpg

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 BUILD Project Template.jpgand 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 WEBIDElogintobUIlD.jpg – 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

WebIDEselectbuildprot.jpg

 

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!

Assigned tags

      50 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Johannes Konings
      Johannes Konings

      Great blog. With this instructions it is easy to integrate the prototype into the WebIDE

      Author's profile photo Kashif Bashir
      Kashif Bashir

      Great blog.

      eager to jump on to system and try this.

      🙂

      Author's profile photo Sanket Chimalwar
      Sanket Chimalwar

      I already had a pdf from the build team , but was missing something. Now this clarifies to me what was missing.

      Author's profile photo Piyas Kumar Das
      Piyas Kumar Das

      Great Blog well explained step by step.

      Cheers

      Piyas

      Author's profile photo Thomas DUBREUIL
      Thomas DUBREUIL

      Great blog, thanks for the heads up Jocelyn!

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      I notice it's getting quite a following on twitter is well - so timing seems to be good.  Thanks again Thomas for providing the instructions.  Really like how easy this is to hook up! And love that feedback I gave only 2 weeks ago to the BUILD team is already getting incorporated in the solution - great to see!

      Author's profile photo Former Member
      Former Member

      Thanks for sharing!

      Author's profile photo Former Member
      Former Member

      Thanks for this Jocelyn 🙂

      I'm struggling with getting my WebIDE to authenticate with my Build as I can't seem to figure out what the username and password should be, and there doesn't seem to be an obvious way of getting it from the Build website! (I feel I should make some ironic UX joke here...)

      Other than that, it's great!

      Cheers,

      G.

      Author's profile photo Former Member
      Former Member

      To authenticate your BUILD system in WebIDE you need to provide your BUILD username and password. This should happen just one time. Afterward subsequent accesses to your BUILD system from the same WebIDE session will use the information.

      If you don't have your BUILD username you can register one via the link Jocelyn mentioned in this blog.

      If you have a BUILD username and password, but forget your password, you can

      1. Logout of your WebIDE
      2. Open a fresh new Icognito window of your Chrome browser, and then go to your Experiencesplash.com website to login using your username (your e-mail address)
      3. You can click on "Forgot password?" link to reset your password
      4. Relogin to your WebIDE to continue (you can use the same Icognito window or open a new one.)
      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Thanks Hong Wang!  Always useful info!

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Gareth

      Ok well the Splash Login shows you your user name - usually an email address.  Admit that I had a couple going and promptly forgot my password. So had to reset it in Splash/BUILD and then chuck it in a password store or leave myself a hint file. 

      Every time I get an app that uses biometric fingerprints I give a little cheer! 😛

      Author's profile photo Former Member
      Former Member

      Thanks Jocelyn & Hong...

      The issue seems to be that all of my SAP accounts generally work off the one S number via SAP certificate but somehow this has fallen apart with Build, and the password I believe I used for Build doesn't work.  LastPass shows no record of me generating something new for Build and I wasn't allowed to change the password again within 24 hours of signing up.

      Long story short:- dopey + impatient user caused the issue and after waiting a short time, I was able to reset my password properly and get it all working 🙂

      Cheers,

      G.

      Author's profile photo Vincent Weiss
      Vincent Weiss

      Great blog 🙂 Thanks for explaining what is needed.

      Oh and one error you might run into. Apparently you do have to publish your BUILD project before you can fully import it.

      (Ran into an error creating Project Folder, which origin was that WebIDE got a 404 on downloading the archive from BUILD)

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Thanks for the reminder Vincent. Yes the BUILD project does need to be a published prototype before you can use it outside of BUILD - same as with the user research study.

      Author's profile photo Laeeq Siddique
      Laeeq Siddique

      A really good blog! my question is regarding the generated code as it is not consistency with Fiori templates. but I guess it is just start and I'm going to ask this question tomorrow in a webinar for splas and build 🙂 . Again good effort!

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Laeeq - appreciate if you would update us on what you heard in the webinar... I'm in the wrong timezone so it will take me a little time to get to the replay.

      Author's profile photo Laeeq Siddique
      Laeeq Siddique

      sure will let you know!

      Author's profile photo Laeeq Siddique
      Laeeq Siddique

      Okay - I attended the webinar. Really impressed with the ability the tool provide to actually integrate excel based model with the prototype. Only thing I would like to see once project gets added to the WebIDE generated code and artifacts are not consistent with Fiori templates. It is a huge jump never the less and it is a great tool. few more tweak and I guess you have all you development there. If we get some information on how to override generated model with Odata completely we dare pretty much done!

      great tool!

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Hi Laeeq .Thanks - agree with that and have already suggested that to the BUILD team but it will help them prioritize if you give that your support. Please email them with your suggestions mailto:contact.build@sap.com

      Thx for giving the update!

      Jocelyn 

      Author's profile photo Thomas DUBREUIL
      Thomas DUBREUIL

      Hi Laeeq, your feedback has been taken into account 🙂

      Best regards

      Thomas

      Author's profile photo Former Member
      Former Member

      Hey Thomas,

      Is there already an update on integrating OData as a data model in BUILD?

      Kind regards,

      Alexander

      Author's profile photo Vishnu Pankajakshan
      Vishnu Pankajakshan

      its works like a charm ... this is too much of automation 🙂

      Author's profile photo Gaurav Dey
      Gaurav Dey

      Well composed !!

      Author's profile photo Marcus Biemueller
      Marcus Biemueller

      It just ...works...

      Cool!

      Author's profile photo VISWANATH YERRA
      VISWANATH YERRA

      Great blog. Thanks for sharing information 🙂

      Author's profile photo Laeeq Siddique
      Laeeq Siddique

      My latest blog explains

      How to use excel based data model with data to build a prototype using Splash and Build

      How to use excel based data model with data to ... | SCN

      Regards,

      Laeeq Siddique

      Author's profile photo Banupriya A
      Banupriya A

      Hi,

      I just couldn't find the user settings in user preference in my build window...

      Is there any alternate way to find the organization name.?I am disclosing my build screen.can anyone please help me with this issue asap.

      /wp-content/uploads/2016/02/build_881074.png

      Author's profile photo Thomas DUBREUIL
      Thomas DUBREUIL

      Hi Banupriya,

      Looks like you are not on the latest version, plead head to https://www.experiencesplash.com to connect to BUILD.

      You will need to use the cloud version of BUILD in order to get the integration with WebIDE.

      Best regards

      Thomas

      Author's profile photo Banupriya A
      Banupriya A

      Thank you thomas..

      Once I create the destination for WebIde plugin and check for the connection,I get "Check Connection failed"..Can u suggest me the solution.and is splash advanced version of build? or is it something different tool?

      /wp-content/uploads/2016/02/error_881298.png

      Author's profile photo Thomas DUBREUIL
      Thomas DUBREUIL

      Hi Banupriya.

      This should not happen. Can you make sure that all instructions in the Help about setting up the destinations have been followed?

      If yes, please drop an email to contact.BUILD@sap.com with screenshots of these configurations so we can double check.

      Thank you

      Thomas

      Author's profile photo Laeeq Siddique
      Laeeq Siddique

      https://www.experiencesplash.com this the link for cloud version Thomas was talking about.

      Author's profile photo Gairik Acharya
      Gairik Acharya

      Thanks  Jocelyn for this great great blog. I was unsure where and how to start regarding SAP Splash even after attending SAP TechEd. Now, I have created a project and can use it in WEB IDE after going through you blog. A big thank to you !! Couple of more features which I'm looking in  future versions are given below :


      1. If prototype gets changed in spash, how can I adjust easily my WEB IDE project without doing much manual work. It should merge the delta from the prototype along with the other changes done in WEB IDE.


      2. Options for using ODATA services in the DATA tab.


      3. Single sign-on in WEB-IDE and SAP Splash


      4. Some more documentation to use handwritten images while building the prototype.


      Regards,

      Gairik

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Good suggestions...

      Please send those through to the BUILD team for their consideration.

      Their contact address is mailto:contact.build@sap.com

      Author's profile photo Banupriya A
      Banupriya A

      Ya I sent my doubts..Thank you:-)

      Author's profile photo Former Member
      Former Member

      Just wanted to add the BUILD plugin into my WebIDE. Unfortunately there is no distinction between "optional" and "available" plugins like you've mentioned above but only "available" ones. But in this list of plugins there is no BUILD plugin.

      Any idea what to do next ? 

      Author's profile photo Jeremy Good
      Jeremy Good

      Hi Koni - once I added the first destination (BUILD_WEB_IDE_PLUGIN) -- don't forget to add the 2 additional properties, then refreshing Web IDE there was a 3rd Plugin Repository option in the listbox - 'BUILD'.  There you can enable the plugin.

      Author's profile photo Former Member
      Former Member

      Thanks Jeremy - it worked perfect !

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Glad you got it working Kornelia.  By the way those parameters were listed in the blog above already ... Just wanted to reinforce that's important to pay attention to even the details especially additional properties when it comes to settings in the HCP generally.  If you aren't sure where to find something or set something just ask - we are always happy to help.

      Author's profile photo Former Member
      Former Member

      Does anyone succeed in importing the prototype? i also have issues with passwords...

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      HI Veronika

      it works fine for me always. 

      You need to enter your BUILD user and password - this is probably different from your HCP id and password. If in doubt check it in the Login area of experiencesplash.com

      rgds

      Jocelyn

      Author's profile photo Felipe Andahur
      Felipe Andahur

      Hi,

      I try have connect SPLASH with Web IDE.

      1) When I want to select the Organization not show option SAP.

      /wp-content/uploads/2016/04/1_933580.png

      2) Then, when I want to add BUILD_WEB_IDE_PLUGIN, I press button "check connection", HANA show the follow message.

      /wp-content/uploads/2016/04/2_933611.png

      something is missing me ?


      Thanks.

      Author's profile photo Thomas DUBREUIL
      Thomas DUBREUIL

      Hello Felipe,

      1/The SAP organization is restricted to SAP employees, please make the changes according to the organization that shows in your Splash user profile.

      2/This is a know issue. You will be able to see the plugin in webIDE though if your destination is correctly configured

      Best regards

      Thomas

      Author's profile photo Felipe Andahur
      Felipe Andahur

      thanks! I can do it.

      But I have a doubt. Wich template versions is generated ?


      Can I generate template with SPLASH for one project of template 1.34 ?

      Author's profile photo Former Member
      Former Member

      Perfect! Very simple!

      Anyway, In HCP Destination configuration I get:

      Error: Connection to "BUILD_WEB_IDE_PLUGIN" Failed.

      Failure reason: "peer not authenticated"  😕

      both with no authentication and with Basic auth applied by using my SAP credentials and TrustAll = true property.


      But from Web IDE it's all ok and the plugin does its work well!

      Author's profile photo Sergio Guerrero
      Sergio Guerrero

      great blog, here are some of my exercises with splash and also hcp:

      Geeks and Grills

      Importing a splash app into web ide

      Providing Valuable feedback on Splash

      Author's profile photo Arijit Das
      Arijit Das

      Hi Jocelyn

      Love this blog! This immensely helped me complete the exercises in UX160 E2E Prototyping with Splash and BUILD (third time lucky!)

      However I faced a few issues -

      Section 4

      8. Find a Header control and drag and drop it just below the existing header. You will see a green dotted line showing where it can be dropped.

      I am not able to drab and drop a Header control here. And hence cannot add the Refresh button too.

      13. Remove Status 1 and Status 2 from the first list item

      I could not see Status 1 and 2 in my layout.

      22. Add a Button to the right of the Reject button.

      It already exists!

      31. Drag and drop the Country property to Attribute 1 in the List Item

      32. Drag and drop the StartDate field to Attribute 2

      Had to add the Attributes manually; then change them.

      34. Delete the Attachment tab from the Icon Tab Bar

      This caused a few issues; it deleted my Receipts table control! So had to do it very diligently.

      Section 6 - and this is where I have problems!

      31. Select different entries in the Master view and verify that the Details view and both icon filter tabs are updated

      The Details view has no data for all the entries in the Master! 🙁 What have I done wrong? 😕

      Web IDE Preview with No Data (same issue with BUILD too) 😕

      https://standard.experiencesplash.com/api/projects/744b7adb3b1137700be88b89/prototype/snapshot/latest/index.html#/146208…

      Travel App UI5.png

      Jocelyn Dart Thomas DUBREUIL Simon Kemp

      This is my third attemp - surprisingly I could see data (static - did not change for each entry) but at least there was something 🙁

      Any ideas are welcome!

      Regards

      Arijit

      Author's profile photo Former Member
      Former Member

      This was exactly what I was looking for, thank you!

      Author's profile photo Silke Spang
      Silke Spang

      Hey guys,

      thats nice, but how to do that for the new code-fiori WebIDE. Here I have no link to
      HCP.:-(

      Regards

      Silke

      Author's profile photo Arvind A
      Arvind A

      Hello All,

       

      As of March 2017, the above destinations which when configured in HCP/SCP wouldn’t work, as they are a bit outdated. Please use the following BUILD Help to config the same:

       

      https://sap.github.io/BUILD_User_Assistance/build/c0dccc24c587467f958a7de4273066ee.html

       

      Note: Follow the steps from the left pane if necessary.

       

      @Moderator: Please update the same at the start of this blog.

      Author's profile photo Jocelyn Dart
      Jocelyn Dart
      Blog Post Author

      Done! And thanks for the link!