File
Login or Register via GitHub
<html><head><meta name="description" content="UI5 MVC example with JS view" /> <meta http-equiv='X-UA-Compatible' content='IE=edge' /> <meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/> <title>MVC in 22 Seconds Example</title> <!-- Load UI5, select gold reflection theme and the "commons" control library --> <script id='sap-ui-bootstrap' type='text/javascript' src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js' data-sap-ui-theme='sap_bluecrystal' data-sap-ui-libs='sap.m,sap.viz'></script> <script> /*** DEFINE RE-USE COMPONENTS - NORMALLY DONE IN SEPARATE FILES ***/ // define a new (simple) Controller type sap.ui.controller("my.own.controller", { onInit: function() { var oModel = new sap.ui.model.json.JSONModel({ book: [{ "City": "New York ", "Cost": 295584.81, "Item Category": "Action Movies", "Profit": 173793.31, "Revenue": 469378.12, "Unit Price": 1240.79, "Units Available": 17336, "Units Sold": 57571 }, { "City": "New York ", "Cost": 215065.45, "Item Category": "Alternative Movies", "Profit": 140874.87, "Revenue": 355940.33, "Unit Price": 1319.07, "Units Available": 11270, "Units Sold": 48552 }, { "City": "New York ", "Cost": 115132.04, "Item Category": "Audio Equipment", "Profit": 56994.34, "Revenue": 172126.37, "Unit Price": 763.21, "Units Available": 11248, "Units Sold": 37303 }, { "City": "New York ", "Cost": 171742.42, "Item Category": "Cameras", "Profit": 81093.4, "Revenue": 252835.82, "Unit Price": 1143.57, "Units Available": 14917, "Units Sold": 51664 }, { "City": "New York ", "Cost": 331033.94, "Item Category": "Comedy Movies", "Profit": 150465.23, "Revenue": 481499.18, "Unit Price": 2268.02, "Units Available": 22449, "Units Sold": 69005 }, { "City": "New York ", "Cost": 207854.46, "Item Category": "Country Music", "Profit": 115242.56, "Revenue": 323097.02, "Unit Price": 1456.91, "Units Available": 17996, " Units Sold": 45346 }, { "City": "New York ", "Cost": 243875.22, "Item Category": "Drama", "Profit": 124653.66, "Revenue": 368528.87, "Unit Price": 1369.83, "Units Available": 23662, "Units Sold": 66737 }, { "City": "New York ", "Cost": 294962, "Item Category": "Horror Movies", "Profit": 124668.09, "Revenue": 419630.09, "Unit Price": 1658.12, "Units Available": 26538, "Units Sold": 78528 }, { "City": "New York ", "Cost": 20362.45, "Item Category": "Pop", "Profit": 7955.24, "Revenue": 28317.7, "Unit Price": 148.76, "Units Available": 6227, "Units Sold": 16389 }, { "City": "New York ", "Cost": 253598.76, "Item Category": "Rock", "Profit": 141583.73, "Revenue": 395182.49, "Unit Price": 1337.09, "Units Available": 14801, "Units Sold": 579010 }, { "City": "New York ", "Cost": 142550.68, "Item Category": "Soul / R&B", "Profit": 80381.86, "Revenue": 222932.54, "Unit Price": 1250.65, "Units Available": 11900, "Units Sold": 321511 }, { "City": "New York ", "Cost": 174617.63, "Item Category": "TV's", "Profit": 87620.46, "Revenue": 262238.09, "Unit Price": 967.09, "Units Available": 16738, "Units Sold": 646512 }, { "City": "New York ", "Cost": 42853.89, "Item Category": "Video Equipment", "Profit": 23242.33, "Revenue": 66096.22, "Unit Price": 209.79, "Units Available": 6344, "Units Sold": 2007 }] }); this.getView().setModel(oModel); } }); // define a new (simple) View type // ...alternatively this can be done in an XML file without JavaScript! sap.ui.jsview("my.own.view", { // define the (default) controller type for this View getControllerName: function() { return "my.own.controller"; }, // defines the UI of this View createContent: function(oController) { // button text is bound to Model, "press" action is bound to Controller's event handler // create a VizFrame var oVizFrame = new sap.viz.ui5.controls.VizFrame({ 'uiConfig': { 'applicationSet': 'fiori' }, 'vizType': 'pie', 'vizProperties':{ 'title': { 'visible': 'true', 'text': 'Your Title' } } }); var oDataset = new sap.viz.ui5.data.FlattenedDataset({ dimensions: [{ name: 'Item Category', value: "{Item Category}" }], measures: [{ name: 'Revenue', value: '{Revenue}' }], data: { path: "/book" } }); oVizFrame.setDataset(oDataset); oVizFrame.setModel(this.getModel()); var feedPrimaryValues = new sap.viz.ui5.controls.common.feeds.FeedItem({ 'uid': "size", 'type': "Measure", 'values': ["Revenue"] }); var feedAxisLabels = new sap.viz.ui5.controls.common.feeds.FeedItem({ 'uid': "color", 'type': "Dimension", 'values': ["Item Category"] }); oVizFrame.addFeed(feedPrimaryValues); oVizFrame.addFeed(feedAxisLabels); return oVizFrame; } }); // instantiate the View var myView = sap.ui.view({type:sap.ui.core.mvc.ViewType.JS, viewName:"my.own.view"}); // put the View onto the screen myView.placeAt('content'); </script> </head> <body class='sapUiBody'> <div id='content'></div> </body></html>
Output
You can jump to the latest bin by adding /latest to your URL
Keyboard Shortcuts
| Shortcut | Action |
|---|---|
| ctrl + [num] | Toggle nth panel |
| ctrl + 0 | Close focused panel |
| ctrl + enter | Re-render output. If console visible: run JS in console |
| Ctrl + l | Clear the console |
| ctrl + / | Toggle comment on selected lines |
| ctrl + ] | Indents selected lines |
| ctrl + [ | Unindents selected lines |
| tab | Code complete & Emmet expand |
| ctrl + shift + L | Beautify code in active panel |
| ctrl + s | Save & lock current Bin from further changes |
| ctrl + shift + s | Open the share options |
| ctrl + y | Archive Bin |
Complete list of JS Bin shortcuts | |
JS Bin URLs
| URL | Action |
|---|---|
| / | Show the full rendered output. This content will update in real time as it's updated from the /edit url. |
| /edit | Edit the current bin |
| /watch | Follow a Code Casting session |
| /embed | Create an embeddable version of the bin |
| /latest | Load the very latest bin (/latest goes in place of the revision) |
| /[username]/last | View the last edited bin for this user |
| /[username]/last/edit | Edit the last edited bin for this user |
| /[username]/last/watch | Follow the Code Casting session for the latest bin for this user |
| /quiet | Remove analytics and edit button from rendered output |
| .js | Load only the JavaScript for a bin |
| .css | Load only the CSS for a bin |
Except for username prefixed urls, the url may start with http://jsbin.com/abc and the url fragments can be added to the url to view it differently. | |
public
0viewers