Skip to Content

Hi Folks,
There has always been a need to have a lightweight editor where we can see the layouts using UI5 JavaScript Controls.
The below mentioned editor acts like a lightweight tool where we can create and view the affects of JavaScript  UI5 Controls.

http://valeurhrbem.netne.net/

 

UI5 Will never cease to amaze you !!

 

 

There are basically four segments in the tool

  • Editor                 : Here we can write the UI5 Controls in JavaScript.
  • Error Logs         : Any error in the Editor will be displayed over here real time.  
  • Result Section  : Live results can be viewed in the result area real time.
  • Settings             :Here you can toggle the theme and the compact density and have a                                       comparative view of hoe the controls will appear via different themes and .

 

Lets get started with examples . . .

 

  1. Simple Use  :  Creating a simple Button
new sap.m.Button({
text : 'Hello Ui5',
icon : 'sap-icon://feed',
type : 'Emphasized'
})

Results :

 

2.Complex Controls :  Create a custom list item

 

new sap.m.CustomListItem({
type : 'Navigation',
content : [
new sap.m.HBox({
items : [
new sap.ui.core.Icon({src:'sap-icon://video',size:'2rem'}).addStyleClass('sapUiTinyMarginBegin'),
new sap.m.VBox({
width : '50%',
items : [
new sap.m.Label({
text : 'Demo Topic',design: 'Bold'
}),
new sap.m.Text({
text : 'Demo Topic Description.Demo Topic Description.Demo Topic Description.Demo Description.Demo Topic Description.',design: 'Bold'
}).addStyleClass('sapUiSmallMarginTop'),
]
}).addStyleClass('sapUiSmallMarginBegin'),

new sap.m.ProgressIndicator({

percentValue:30,
				displayValue:"30%",
				showValue:true,
				state:"None" 
}).addStyleClass('sapUiSmallMarginBegin').addStyleClass('sapUiSmallMarginTop'),

]

})

]
})

 

Results :  

 

 

And yes you can apply different themes and compact modes on the fly.

 

 

 

*Note  the log will show error once you start typing but but  on completion it will be removed automatically

 

 

 

Request you folks to please use it and let me know if it helps in the development. Also please drop your valuable suggestions and feedback by clicking the mail icon on the right bottom.

 

 

To report this post you need to login first.

2 Comments

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

  1. Pierre DOMINIQUE

    Hi Pinaki,

    It’s a great idea! However an xml version would be even more useful.

    Now that we have a Mentor app for Fiori for iOS, we need a Mentor app for Fiori (UI5).

    Cheers,

    Pierre

    (0) 

Leave a Reply