Skip to Content
Author's profile photo Pinaki Patra

UI5 Javascript Online Editor

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.

 

 

Assigned tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Pierre DOMINIQUE
      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

      Author's profile photo Tim Molloy
      Tim Molloy

      This is fantastic! Thanks for putting this together! I agree, having an XML version would be very useful as well!

      Author's profile photo Prashant Kumar Patnaik
      Prashant Kumar Patnaik

      Site doesn't exist. the URL redirects to the hosting page..