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)

  • https://omdd-p1941824928trial.dispatcher.hanatrial.ondemand.com/

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.
To report this post you need to login first.

45 Comments

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

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

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

      (0) 
  2. Jeroen Custers

    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

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

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

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

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

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

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

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

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

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

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

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

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

          (0) 
          1. Jiri Neuzil

            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

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

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

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

      (0) 
  12. Arvind Giri

    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

    (0) 

Leave a Reply