<html>
<head>
<meta charset="utf-8">
<title>OpenUI5 Issue Sample: ...</title>
<!-- Click on "File", "Clone", edit, and share the new URL! -->
<script id="sap-ui-bootstrap"
src="https://sdk.openui5.org/nightly/resources/sap-ui-core.js"
data-sap-ui-libs="sap.ui.core,sap.m,sap.ui.unified,sap.ui.layout"
data-sap-ui-onInit="onUI5Init"
data-sap-ui-async="true"
data-sap-ui-compatVersion="edge"
data-sap-ui-excludeJQueryCompat="true"
data-sap-ui-resourceRoots='{ "my.demo": "./" }'
data-sap-ui-xx-waitForTheme="init"
></script><!-- Add more dependent libs to data-sap-ui-libs -->
<script id="myxmlcontent" type="text/xml">
<mvc:View controllerName="my.demo.Controller"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
displayBlock="true"
height="100%"
>
<App id="myRootApp" autoFocus="false">
<Page id="myPage"
showHeader="false"
class="sapUiResponsiveContentPadding"
floatingFooter="true"
>
<Text text="Your content ..." />
</Page>
</App>
</mvc:View>
</script>
</head>
<body id="content" class="sapUiBody"></body>
</html>
html, body {
height: 100%;
margin: 0;
}
globalThis.onUI5Init = () => sap.ui.require([
"sap/ui/core/mvc/XMLView",
"sap/ui/model/json/JSONModel",
], (XMLView, JSONModel) => {
"use strict";
sap.ui.define("my/demo/Controller.controller", [
"sap/ui/core/mvc/Controller",
], (Controller) => Controller.extend("my.demo.Controller", {
onInit() {
// ...
},
// ...
}));
XMLView.create({
definition: document.getElementById("myxmlcontent").textContent,
models: new JSONModel(/*...*/),
}).then(view => view.placeAt("content"));
});
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. |