Skip to Content
Author's profile photo Former Member

OpenUI5 & JSBin play well together .. but, is there even more?

Spoiler alert: There is! 😉

After posting my blog about how easy it is to get started with web development using OpenUI5 & JSBin, I thought I’d check out existing alternatives!

My result: There are quite a few really good ones. Developers call them Playgrounds. Playgrounds are the newest hit for front end developers and designers. They allow us to play around with code and see the live results while also being able to interact with it. It removes all the hurdles to actually getting started with coding! I wanted to see if I could make use of those playgrounds to run OpenUI5!


So, if you like front end playgrounds and do have a preference already, check out my greenfield OpenUI5 examples to get you started very quick:

Playground OpenUI5 Greenfield (Mobile) Is OpenUI5 officially supported?

JSBin

www.jsbin.com

/wp-content/uploads/2014/12/jsbin_612341.png

JSBin GreenField

YES. Thanks to DJ Adams it is.

Just hit “Add Library” on the left side of the menu bar and choose “OpenUI5 latest (Mobile BlueCrystal)”

JSFiddle

www.jsfiddle.net

/wp-content/uploads/2014/12/jsfiddle_612299.png

JSFiddle GreenField

JSFiddle Master Detail Sample

YES. Thanks to all of you guys, OpenUI5 was added recently! Here’s how to add OpenUI5 properly as pointed out by Andreas Kunz.

Advise: Use the greenfield code sample to get a greenfield project.

Plunker

www.plnkr.co

/wp-content/uploads/2014/12/plunker_612300.png

Plunker GreenField

Plunker MVC GreenField

Kind of, I added the current version (1.24.5) to the packages. You can find it in the packages browser by clicking on “Find and add external libraries” on the right menu bar. Nevertheless, you’d need to add the data attributes to the script tag – which is unfortunate.

Solution: Just use the greenfield code sample.

Update: Denise Nepraunig (@denisenepraunig) published a nice greenfield MVC code example using separate files. Thanks very much Denise!

CodePen

www.codepen.io

/wp-content/uploads/2014/12/codepen_612301.png

CodePen Greenfield

No. Only way is to modify the HTML settings (the gear-wheel icon on the left of the HTML pane). You need to set the script tag yourself to being able to set the data attributes that are required.

Status: Created a support ticket to get OpenUI officially supported.

Solution: Just use the greenfield code sample.

What is your preferred playground and why? Try them out and let me know!

Assigned Tags

      9 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Sergio Guerrero
      Sergio Guerrero

      Alexander, this is a great post. I think this is very beneficial for you, me, and the entire community. I don't know how many times I have received requests of sample code and sometimes people want a whole example. I personally like this type of examples because I don't expose my samples, the person asking a question doesn't expose their code and this is a simple, clean way to show examples.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks a lot! Actually, a28 guest created another really useful greenfield for plunker - with MVC and file seperation! I'll update my blog and add that 😉

      Author's profile photo Former Member
      Former Member

      till now, i know about the jsbin, now i came to know about more such type of tools.

      thanks a lot, much appricated and exited Alexander!! 😎

      regards,

      prasad.

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks to Harris Brakmic for the Master-Detail view code sample on JSFiddle. 🙂

      Author's profile photo Vittal Gopinath Pai
      Vittal Gopinath Pai

      Amazing post! Learned something today because of you Alex. Thanks 🙂

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Thanks, I like to hear that 😉

      Author's profile photo Christian Braukmüller
      Christian Braukmüller

      Yeah! Our voting made it.

      Jsfiddle & OpenUI5 are now available. 🙂

      Author's profile photo Former Member
      Former Member
      Blog Post Author

      Yaaay, finally 🙂

      Author's profile photo Serdar Simsekler
      Serdar Simsekler

      I like Plunker - plnkr.co - more. 😉