Skip to Content
Technical Articles
Author's profile photo Lucky Li

Fast SAPUI5 Develop tool

Announcement:

SAP Web IDE Layout Editor is now available for trial and productive use, you can try it out by following the details here .

The tool described in this page is an initiative by Lucky Li and not an SAP official product.

—————————————————————————————————————————-

When we develop Fiori application ( other SAPUI5 development also similar), we meet following challenges:

  1. We need write View using XML format but without good tool, it is boring and easy make mistake (such as tag not matching…)
  2. SAPUI5 have so many properties, it is hard to remember all of them. Especially for some enum property, we first need find out the enum define then know how to set it
  3. Data binding syntax is complex, we need write like “{parts:[{path:’birthday/day’},{path:’birthday/month’},{path:’birthday/year’}],  formatter:’my.globalFormatter’}”
  4. It is hard to study and understand other’s complex view
  5. After do some modification, we can’t see result immediate. It is hard to test on different device.  And i want to see result immediate after i change some property

 

In order to make our life easy, recently I spent some effort developed one tool named “Fast Fiori Designer” which can help you

  1. Design View easily:  Just select controller/property/aggregation/event/assocation from list, ( so the Enumable property can select from a ComboBox
  2. Easily reuse others view by copy/paste
  3. Preview it immediately, can choose preview in iPhone / iPad Full Screen / iPad Master page / iPad Slave page model.  Also provide the ‘Fast Model’ means even you have so many event/data binding, you can see result immediate without the controller.
  4. Generate Controller/XMLView source file,  for the data binding also generate the sample demo data
  5. Load OData metada, then choose the entity/property/label easily
  6. Batch create mode: You first define one template such as one column for a table, then you can select all the properties from the OData entity, then it will create the similar control for you.
  7. Create xml fragment, convert controls into fragment, easily preview the fragment content
  8. Choose ICON from the SAPUI5 icon library, just like the UI5 icon explore
  9. type, format, validation information select
  10. Provide several samples

Want to try it? (Please use Chrome Browser, if cant’ run, please send me email)

where to get source code ?

https://github.com/luckyliwen/omdd

Report Bugs:

    1. Just drop Lucky a mail to report the bug
    2. As Lucky will keep update the version, so before report a bug please ensure you download the latest version if you run it locally, or clear the browser cache to ensure it is the latest version.
    3. The browser console information is very important to find out the reason. Please copy the console log content as text file

 

It is very easy use. Here i just list some screen snapshot for reference.

Coming soon new features ( After new version come out, i will update this blog):

  1. Generate JavaScript code also.
  2. Smart data generate ( Help to create sample test data)
  3. Export preview result to picture
  4. Provide common view/design as template
  5. Project level open/save

Any comments/feedback/found some bug, please feel free contact Lucky Li

 

 

Design a view: all the enum property can easily choose from list box. And it is very easy to know what is the property biding/real value/formatter…

/wp-content/uploads/2015/09/design_view_346375.png

Smart recommend the candidate:

When add the child for an aggregation, only the valid type can be added. For example, for the sap.m.list, only the class which inherit sap.m.ListItemBase is a valid candidate. Normally, you need first find which control is a valid choice. (if it an interface, then it is more difficult to find out which control implemented this interface, for example when add the child for sap.ui.commons.Toolbar, only the item implemented the interface sap.ui.commons.ToolbarItem is a valid one)

With this tool: You just choose the aggregation node, all the valid candidate is list there, if you want to see the API document, just one click)

/wp-content/uploads/2015/09/list_item_candidate_359614.png

Generate XMLView

/wp-content/uploads/2015/09/xml_view_346445.png

Generate the Controller (include the event binding/ formatter/ default data binding)

/wp-content/uploads/2015/09/controller_346446.png

Preview, also provide the navigation tree in the left part, so you can easily see what control is what.

The iPad preview

/wp-content/uploads/2015/09/preview_ipad_359596.png

Want to see how it look like in iPhone? Just choose different preview mode:

/wp-content/uploads/2015/09/preview_phone_359611.png

Dynamic change the property and see result immediate:

sapui5 have so many controls and one control have a lot of property, normally you need set change source code, rerun the program to see the result. With this tool: when you select one control, all the property will display, you can change it just by click mouse and see result immediate. (So for the enum type property, it can save you a lot of time as normally it take some time to know what was the available enum value)

/wp-content/uploads/2015/09/dynamic_value_359613.png

 

Want to know UI5 class Hierarchy?  From “Development Assist”–>”UI5 Class Hierarchy”, you can see it

/wp-content/uploads/2015/09/tree_346448.png

When work for one control, want to see the corresponding document? In the view designer, just click the link, it will open the corresponding document.

/wp-content/uploads/2015/09/jump_to_doc_345785.png

Updates:

  • 2015/08/05:  Update the run file url, as the old dropbox not work
  • 2015/05/07:  For the latest OpenUI5 version 1.28.5, the old code will throw exception. I have update the code and now it can work, if you run the local version, please try to download the latest version.

Assigned tags

      45 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Robin van het Hof
      Robin van het Hof

      Hi Lucky,

      Seems like a great effort! Unfortunately I'm not able to see the top five images (only the last one is shown) due to the fact I'm not enlisted as a SAP JAM user. Could you maybe put these images on a publicly available webserver such as SCN?

      Regardless of this, the feature set seems really really really useful, so if you find ways to put it out for us non-SAP employees to use it as well (Github maybe? or deploy it to HANA Cloud?) that would be awesome!

      Looking forward to give it a try!

      Author's profile photo Lucky Li
      Lucky Li
      Blog Post Author

      I update the image so now you should see it.  I will make it access outside sap soon. Or if you have download sapui5 sdk i will share my code so you can run it locally. It is easy, just copy my files.

      Author's profile photo Robin van het Hof
      Robin van het Hof

      Looks genuinely impressive, and I really applaud your efforts!

      I can't wait to give it a try anytime soon

      Author's profile photo Former Member
      Former Member

      Hi Lucky,

      Cool tool. I can't wait until it's available for non-SAP employees. If you could provide the source code, I can run it on my local Tomcat server with sapui5 sdk.

      Thanks!

      Regards,

      Jeroen

      Author's profile photo Kumar Prashant
      Kumar Prashant

      Excellent work Lucky.Please count me also incase you are sharing the code with people outside SAP.

      Thanks

      Prashant

      Author's profile photo Hemendra Sabharwal
      Hemendra Sabharwal

      Good work Li, please count me too. I am also willing to work on this tool.

      Thanks,

      Warm Regards

      Hemendra

      Author's profile photo Arshad Ansary
      Arshad Ansary

      Hi Lucky,

      Great effort in developing this modeller tool. I am a newbie  to Ui5 and has just started scratching the surface and I am struggling with all those tags

      it would be helpful if you could post a video on how to use this tool.

      Regards

      Arshad

      Author's profile photo Lucky Li
      Lucky Li
      Blog Post Author

      I just make it accessible outside sap, please try it.  Also you can download it and run it locally.

      A new version will ready soon, some cool feature like: Smart choose controls, open sample files, choose common used composite tools,

      If you think some feature is useful and common, please add comments here.

      Author's profile photo Virinchy P
      Virinchy P

      Great effort. Thanks a lot for accessing it outside SAP.

      Regards

      Viru

      Author's profile photo L. van Hengel
      L. van Hengel

      Hi Lucky,

      Thanks for putting it online. I downloaded it and gave it a quick try. Very cool and useful, i definitely gonna use this for my developments. Looking forward to the new features.

      Cheers,

      Leo

      Author's profile photo W. Snoep
      W. Snoep

      hi Lucky,

      Thanks for putting it online even for non SAP employees. I gave it a quick try and it is very useful when creating XML views. Can't wait for the new features, hopefully preview including the controller logic will be part of this.

      What is the strategic position of this tool in comparison to the appBuilder which was released end of November?

      Thanks,

      Wim

      Author's profile photo Lucky Li
      Lucky Li
      Blog Post Author

      appBuilder was SAP official tool which was the result of a team for long time, but this tool was just my personal work, I build it for fun.  Later i will write a blog for detail compare. 

      Author's profile photo W. Snoep
      W. Snoep

      Thanks for your reply. Don't get me wrong, actualIy I really like what you created, even using XML views! Was just wondering for what SAP's official tools are going to be. Awaiting your blog!

      Author's profile photo Sanket Chimalwar
      Sanket Chimalwar

      Hi Lucky ,

      Really nice toll . I am waiting for more updates on this ..

      Author's profile photo Lucky Li
      Lucky Li
      Blog Post Author

      Just update a new version with following features: (not test fully, if found bug please drop me a mail)

      1. Easy select controls: filer both by lib and name
      2. Smart recommend candidate for aggregation:  For example for the sap.m.list then only recommend all the class which based on sap.m.ListItemBase
      3. Change property dynamically during preview.

      Planed next features:

      1. Generate JavaScript format source code
      2. Provide more sample views, so user can do copy/paste for the common views
      3. Past multiple times


      Known issues:

      1. Now the Controller editor have problem, so please edit it outside then paste back.


      If you think some feature is cool and useful for developers, please share you idea by comments.

      Author's profile photo Ranjit Rao
      Ranjit Rao

      Hi Lucky,

      I need a help regarding sapui5, it might be out of the context here. I am using a tile control to which I want a scroll across the screen feature. something like marquee. I want the tile to just keep scrolling across. Can you help?

      Author's profile photo Former Member
      Former Member

      Really nice, well done

      Author's profile photo Jitendra Kansal
      Jitendra Kansal

      Sounds good. I am sure this would be really helpful. If possible you can share it at common place so that whosoever wants can access it.

      Rgrds,

      Jitendra

      Author's profile photo Lucky Li
      Lucky Li
      Blog Post Author

      hello Kansal,

            I already shared it for both inside or outside SAP, and user can run it locally easily by download the source code from https://dl.dropboxusercontent.com/u/250426883/FastDesigner.zip

      Later i plan to put it to github.

      Author's profile photo Lucky Li
      Lucky Li
      Blog Post Author

      Release a new version on 2014/01/13:

      1. Support open files by directly select multiple files
      2. Support open Controller by open from file
      3. Fix some bugs
      Author's profile photo Former Member
      Former Member

      looks great! just tried it. thanks Ashish

      Author's profile photo Guy Soffer
      Guy Soffer

      It really looks good! I can't access the internal link, only the Dropbox one.

      Author's profile photo HP Seitz
      HP Seitz

      Hi Lucky,

      great name by the way.

      Does the Fast Designer has a version number? I tested it in January and really like it,

      In your recent post about meta data, you again use it. Same version? or was there an update?

      Thanks for your help, HP

      Author's profile photo Lucky Li
      Lucky Li
      Blog Post Author

      hi, Seitz,

         It was an update version, when i have time, i will keep add some useful feature to it. Next release will add the cool feature:  generate the javascript code. Hope can release it early.

      Lucky

      Author's profile photo Former Member
      Former Member

      Hi Lucky,

      any news about new version?

      Many thanks Jiri

      Author's profile photo Lucky Li
      Lucky Li
      Blog Post Author

      Sorry, recently are very busy, so perhaps next release will be a little delay.

      btw; What you expect most for next release ? ( long time ago i plan to generate javascript files as the most important feature,  another would be support SAP Fiori feature)

      Lucky li

      Author's profile photo Former Member
      Former Member

      Hi Lucky,

      many thanks for your answer. I think we all are focused for all things which could help us during development of SAPUI5/OPENUI5 applications, so as you've written, javascript generation will be definitely useful feature. Btw. are there any plans to develop some plugin for MS Visual studio? I think MS VS 2013 has some nice javascript features...or even if we can develop in typescript, that can help a lot in bigger SAPUI5 projects.

      Many thanks Jiri

      Author's profile photo Lucky Li
      Lucky Li
      Blog Post Author

      Sorry, currently i don't have enough time to suppor the MS visual studio. 

      as some limitation of the JavaScript (also the limitation of my time), this tool mainly focus on help user to study/design/debug the view/controls.

      And i highly recommend to use  Sublime (http://www.sublimetext.com/ ),  it is 10 times better than EClipse.  

      Author's profile photo Former Member
      Former Member

      This is great work, thanks for taking the time to create and really big thanks for sharing.

      Martin

      Author's profile photo Ranjitha Balaraman
      Ranjitha Balaraman

      Great work!

      Author's profile photo Krishnakant Joshi
      Krishnakant Joshi

      Great Work Man 🙂

      Author's profile photo Former Member
      Former Member

      Very useful tool thanks for sharing. Hats off for your effort.

      Author's profile photo Denise Nepraunig
      Denise Nepraunig

      Hello Lucky Li!

      Just stumbled upon this, I had a similar idea for a tool like that, and your work is fantastic!!! AWESOME!!! Do you plan putting it on github? I will contact you at work and then we can exchange via Lync/JAM Group.

      BR, Denise

      Author's profile photo Lucky Li
      Lucky Li
      Blog Post Author

      hello, Denise,

           Sorry for late response. Yes, i have plan to put it on github, and also plan to add OData service supporting soon.

      Author's profile photo Helmut Tammen
      Helmut Tammen

      Absolutely great work. Thank you very much.
      Putting it on Github is a good idea.

      Author's profile photo Maximilian Schmid
      Maximilian Schmid

      Thank you. Great blog. Help me a lot!!

      Author's profile photo Former Member
      Former Member

      Hello Lucky,

                             ToolDesign is awesome.any update regarding new version for same.

      Regards,

      RipuDaman

      Author's profile photo Wei Rao
      Wei Rao

      Great work with a fantastic tool!!!

      Thank you! will definitely roll out to other colleagues

      Author's profile photo Former Member
      Former Member

      Lucky, I am a beginner in SAPUI5 and appreciate if you could post some recordings that would really help us understand this better. Like a end-to-end example would be great.

      Just to make it clear, this may be easy to use for web developers but for beginners like me with SAP development background and SAPUI5 really tough to get.

      Appreciate your response.

      Thanks

      Arvi

      Author's profile photo Guy Soffer
      Guy Soffer

      Hi Arvi,

      If you are a beginner in SAPUI5 I also recommend to use Web IDE and its Layout Editor (WYSIWYG tool).

      SAP Web IDE Layout Editor (WYSIWYG or Drag&Drop) available for productive use

      Less Coding, More Designing: The New SAP Web IDE Layout Editor 1.12

      Thanks,

      Guy

      Author's profile photo Saurabh Singh
      Saurabh Singh

      Hi Lucky,

      Could you please upload a video tutorial of how to use fiori fast design for beginners.

      Thanks,

      Saurabh.

      Author's profile photo Former Member
      Former Member

      Hi Lucky,

      What is the min version of SAPUI5 or OpenUI5 required to run this tool.

      I have OpenUI5 1.26.10 but it is not working.

      Author's profile photo Lucky Li
      Lucky Li
      Blog Post Author

      the 1.26.10 should work, please send the error log (chrome console window log) to me

      Author's profile photo Former Member
      Former Member

      I have downloaded the SDK from OpenUI5.org.. I have lot of errors, could not attach the file. I will email you.

      Author's profile photo Former Member
      Former Member

      Hello Lucky Li,

       

      Appreciate your effort. This is very great IDE for Fiori app development. Way to go,

       

      Regards,

      Dhamodharan