Technology Blogs by SAP
Learn how to extend and personalize SAP applications. Follow the SAP technology blog for insights into SAP BTP, ABAP, SAP Analytics Cloud, SAP HANA, and more.
cancel
Showing results for 
Search instead for 
Did you mean: 
lucky_li
Explorer

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



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)


Generate XMLView




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




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


The iPad preview



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



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)



 

Want to know UI5 class Hierarchy?  From "Development Assist"-->"UI5 Class Hierarchy", you can see it



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.


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.

45 Comments