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. ***
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.
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.
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:
- Create a destination pointing to the Web IDE plugin for BUILD
- 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
|Name||your BUILD organization name_TENANT, e.g. sap_TENANT|
|Description||your BUILD organization name|
|URL||https://www.experiencesplash.com/webide/your BUILD organization name|
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.
- In the Tools menu select the Preferences option
- In Preferences select Optional Plugins
- Select BUILD
- Check the listed plugin
- 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
- Choose the menu option File > New > Project from Template
- Choose the BUILD Project template option and select Next
- Name your project and select Next
- 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.
- Select your BUILD system – this is the BUILD organization you are using
- Select your prototype.
- Note that you will only see your personal prototypes here
- 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 email@example.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!
Great blog. With this instructions it is easy to integrate the prototype into the WebIDE
eager to jump on to system and try this.
I already had a pdf from the build team , but was missing something. Now this clarifies to me what was missing.
Great Blog well explained step by step.
Great blog, thanks for the heads up Jocelyn!
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!
Thanks for sharing!
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!
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
Thanks Hong Wang! Always useful info!
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! 😛
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 🙂
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)
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.
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!
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.
sure will let you know!
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!
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:firstname.lastname@example.org
Thx for giving the update!
Hi Laeeq, your feedback has been taken into account 🙂
Is there already an update on integrating OData as a data model in BUILD?
its works like a charm ... this is too much of automation 🙂
Well composed !!
It just ...works...
Great blog. Thanks for sharing information 🙂
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
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.
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.
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?
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.
https://www.experiencesplash.com this the link for cloud version Thomas was talking about.
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.
Please send those through to the BUILD team for their consideration.
Their contact address is mailto:email@example.com
Ya I sent my doubts..Thank you:-)
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 ?
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.
Thanks Jeremy - it worked perfect !
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.
Does anyone succeed in importing the prototype? i also have issues with passwords...
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
I try have connect SPLASH with Web IDE.
1) When I want to select the Organization not show option SAP.
2) Then, when I want to add BUILD_WEB_IDE_PLUGIN, I press button "check connection", HANA show the follow message.
something is missing me ?
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
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 ?
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!
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
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 -
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) 😕
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!
This was exactly what I was looking for, thank you!
thats nice, but how to do that for the new code-fiori WebIDE. Here I have no link to
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:
Note: Follow the steps from the left pane if necessary.
@Moderator: Please update the same at the start of this blog.
Done! And thanks for the link!