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:
- We need write View using XML format but without good tool, it is boring and easy make mistake (such as tag not matching...)
- 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
- Data binding syntax is complex, we need write like "{parts:[{path:'birthday/day'},{path:'birthday/month'},{path:'birthday/year'}], formatter:'my.globalFormatter'}"
- It is hard to study and understand other's complex view
- 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
- Design View easily: Just select controller/property/aggregation/event/assocation from list, ( so the Enumable property can select from a ComboBox
- Easily reuse others view by copy/paste
- 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.
- Generate Controller/XMLView source file, for the data binding also generate the sample demo data
- Load OData metada, then choose the entity/property/label easily
- 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.
- Create xml fragment, convert controls into fragment, easily preview the fragment content
- Choose ICON from the SAPUI5 icon library, just like the UI5 icon explore
- type, format, validation information select
- 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:
- Just drop Lucky a mail to report the bug
- 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.
- 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):
- Generate JavaScript code also.
- Smart data generate ( Help to create sample test data)
- Export preview result to picture
- Provide common view/design as template
- 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.