JSBin: How to create demo example's of sapui5?

Question

I want share working live example of SAPUI5 on stackoverflow, but I don't know how to create the JSBin example or which things we have to add or is there any simple way to create demo example of JSBin.

Answer 1

You will need bootstrap script, View which will be in HTML tab only and its Controller under Javascript tab.

You can save this as your template after logging in and use it as starting point for your expamples.

Answer 2

Or, you can create a Stack Snippet which is runnable by clicking the blue 'Run Code Snippet' button:

sap.ui.controller("view1.initial", {
onInit : function(oEvent) {
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.setData({
        rows : [
            { value : "sap-icon://syringe",    col2 : "Value 2",  col3 : "Value 3",  ol4 : "Value 4" },
            { value : "sap-icon://account",    col2 : "Value 10", col3 : "Value 11", col4 : "Value 12" },
            { value : "sap-icon://chalkboard", col2 : "Value 14", col3 : "Value 15", col4 : "Value 16" },
            { value : "sap-icon://e-care",     col2 : "Value 18", col3 : "Value 19", col4 : "Value 20" }
        ]
    });

    this.getView().setModel(oModel);
}
});

sap.ui.xmlview("main", {
viewContent: jQuery("#view1").html()
})
.placeAt("uiArea");

/* extra CSS classes here */

<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_bluecrystal"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-libs="sap.m"></script>

<div id="uiArea"></div>

<script id="view1" type="ui5/xmlview">
<mvc:View controllerName="view1.initial" xmlns="sap.m" xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc">
    <Table items="{/rows}">
        <columns>
            <Column>
                <Text text="Col1" />
            </Column>
            <Column>
                <Text text="Col2" />
            </Column>
            <Column>
                <Text text="Col3" />
            </Column>
        </columns>
        <items>
            <ColumnListItem>
                <cells>
                    <core:Icon src="{value}" />
                    <Text text="{col2}" />
                    <Text text="{col3}" />
                </cells>
            </ColumnListItem>
        </items>
    </Table>
</mvc:View>
</script>