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!

To report this post you need to login first.

50 Comments

You must be Logged on to comment or reply to a post.

    1. Jocelyn Dart 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!

      (0) 
  1. Gareth Ryan

    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.

    (0) 
    1. Hong Wang

      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.)
      (0) 
    2. Jocelyn Dart 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! 😛

      (0) 
      1. Gareth Ryan

        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.

        (0) 
  2. 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)

    (0) 
    1. Jocelyn Dart 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.

      (0) 
  3. 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!

    (0) 
    1. Jocelyn Dart 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.

      (0) 
      1. 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!

        (0) 
        1. Jocelyn Dart 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 

          (0) 
  4. 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

    (0) 
  5. 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

    (0) 
    1. 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

      (0) 
  6. 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

    (0) 
  7. Kornelia Anderegg

    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 ? 

    (0) 
    1. 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.

      (0) 
        1. Jocelyn Dart 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.

          (0) 
    1. Jocelyn Dart 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

      (0) 
  8. 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.

    (0) 
    1. 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

      (0) 
      1. 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 ?

        (0) 
  9. Stefano Scalcinati

    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!

    (0) 
  10. 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

    (0) 

Leave a Reply