Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<html>
  <head>
    <script id='sap-ui-bootstrap' type='text/javascript'
     src='https://sapui5.hana.ondemand.com/resources/sap-ui-core.js'
     data-sap-ui-libs="sap.m"
     data-sap-ui-theme="sap_bluecrystal"></script>
    
    
    <script id="view1" type="sapui5/xmlview">
      <mvc:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc"
    xmlns="sap.m" controllerName="table_v01.Main" xmlns:html="http://www.w3.org/1999/xhtml">
​
            
       <Table xmlns="sap.m" id="idTable1" width="auto"
            items="{
      path:'/Values',
      sorter: {
        path: 'Col1'
      }
    }" 
    >
                <columns> 
                    <Column id="idCol1" width="12em">
                        <header>
                            <Text text="{path:'/ColHeader/ColH1'}" />
                        </header>
                    </Column>
                    <Column id="idCol2">
                        <header>
                            <Text text="{path:'/ColHeader/ColH2'}" />
                        </header>
                    </Column>
                    <Column id="idCol3">
                        <header>
                            <Text text="{path:'/ColHeader/ColH3'}" />
                        </header>
                    </Column>
                    <Column id="idCol4">
                        <header>
                            <Text text="{path:'/ColHeader/ColH4'}" />
                        </header>
                    </Column>
                    <Column id="idCol5">
                        <header>
                            <Text text="{path:'/ColHeader/ColH5'}" />
                        </header>
                    </Column>
                    <Column id="idCol6">
                        <header>
                            <Text text="{path:'/ColHeader/ColH6'}" />
                        </header>
                    </Column>
                    <Column id="idCol7">
                        <header>
                            <Text text="{path:'/ColHeader/ColH7'}" />
                        </header>
                    </Column>
                    <Column id="idCol8">
                        <header>
                            <Text text="{path:'/ColHeader/ColH8'}" />
                        </header>
                    </Column>
                </columns>
        <items>
                <ColumnListItem>
                    <cells>
                    <Panel xmlns="sap.m">
                       <content>
                        <Image xmlns="sap.m"
                                src="{ColImg1}"
                                visible="true" width="30%">
                            </Image>
​
                          <Text xmlns="sap.m" text="{Col1}" textAlign="Right" width="70%">
                        </Text>
                       
                       </content>
                    </Panel>
                        <Panel xmlns="sap.m">
                           <content> 
                              <Image xmlns="sap.m"
                                src="{ColImg2}"
                                visible="true" width="30%">
                            </Image>
​
                              <Text xmlns="sap.m" text="{Col2}" textAlign="Right" width="70%">
                              </Text>
                           </content>
                        </Panel>
                        <Panel xmlns="sap.m">
                           <content> 
                              <Image xmlns="sap.m"
                                src="{ColImg3}"
                                visible="true" width="30%">
                            </Image>
​
                              <Text xmlns="sap.m" text="{Col3}" textAlign="Right" width="70%">
                              </Text>
                           </content>
                        </Panel>
                        <Panel xmlns="sap.m">
                           <content> 
                              <Image xmlns="sap.m"
                                src="{ColImg4}"
                                visible="true"  width="30%" >
                            </Image>
​
                              <Text xmlns="sap.m" text="{Col4}" textAlign="Right" width="70%">
                              </Text>
                           </content>
                        </Panel>
                        <Panel xmlns="sap.m">
                           <content> 
                              <Image xmlns="sap.m"
                                src="{ColImg5}"
                                visible="true"  width="30%">
                            </Image>
​
                              <Text xmlns="sap.m" text="{Col5}" textAlign="Right" width="70%">
                              </Text>
                           </content>
                        </Panel>
                        <Panel xmlns="sap.m">
                           <content> 
                              <Image xmlns="sap.m"
                                src="{ColImg6}"
                                visible="true"  width="30%">
                            </Image>
​
                              <Text xmlns="sap.m" text="{Col6}" textAlign="Right" width="70%">
                              </Text>
                           </content>
                        </Panel>
                        <Panel xmlns="sap.m">
                           <content> 
                              <Image xmlns="sap.m"
                                src="{ColImg7}"
                                visible="true"  width="30%">
                            </Image>
​
                              <Text xmlns="sap.m" text="{Col7}" textAlign="Right" width="70%">
                              </Text>
                           </content>
                        </Panel>
                        <Panel xmlns="sap.m">
                           <content> 
                              <Image xmlns="sap.m"
                                src="{ColImg8}"
                                visible="true"  width="30%">
                            </Image>
​
                              <Text xmlns="sap.m" text="{Col8}" textAlign="Right" width="70%">
                              </Text>
                           </content>
                        </Panel>
                        
                    </cells>
                </ColumnListItem>
         </items>
            </Table>
                        
</mvc:View>
    </script>
    
  </head>
  <body class='sapUiBody' id="content"></body>
</html>
 
sap.ui.controller("table_v01.Main", {
​
/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf table_v01.Main
*/
    onInit: function() {
                var otabledata = {
                ColHeader: {
                    ColH1: "Location",
                    ColH2: "RBOB-Premium",
                    ColH3: "RBOB-Unleaded",
                    ColH4: "CBOB-Premium",
                    ColH5: "CBOB-Unleaded",
                    ColH6: "Ethanol",
                    ColH7: "ULSD",
                    ColH8: "ULSD-Premium"
                },
                Values: [
                        {   Col1: "Colden",
                            Col2: "11",
                            Col3: "6",
                            Col4: "9",
                            Col5: "16",
                            Col6: "7",
                            Col7: "1",
                            Col8: "7",
                            ColImg1: "icon1.png",
                            ColImg2: "border_48.png",
                            ColImg3: "border_48.png",
                            ColImg4: "border_48.png",
                            ColImg5: "alert_48.png",
                            ColImg6: "border_48.png",
                            ColImg7: "border_48.png",
                            ColImg8: "alert_red_48.png"
                        },
                        {   Col1: "Brentford",
                            Col2: "7",
                            Col3: "6",
                            Col4: "1",
                            Col5: "16",
                            Col6: "2",
                            Col7: "2",
                            Col8: "3",
                            ColImg1: "icon1.png",
                            ColImg2: "border_48.png",
                            ColImg3: "border_48.png",
                            ColImg4: "icon1.png",
                            ColImg5: "border_48.png",
                            ColImg6: "border_48.png",
                            ColImg7: "border_48.png",
                            ColImg8: "icon1.png"
                        },
                        {   Col1: "Doristown",
                            Col2: "5",
                            Col3: "3",
                            Col4: "2",
                            Col5: "6",
                            Col6: "-",
                            Col7: "7",
                            Col8: "5",
                            ColImg1: "icon1.png",
                            ColImg2: "border_48.png",
                            ColImg3: "icon1.png",
                            ColImg4: "border_48.png",
                            ColImg5: "border_48.png",
                            ColImg6: "border_48.png",
                            ColImg7: "border_48.png",
                            ColImg8: "icon1.png"
                        },
                        {   Col1: "Drenton",
                            Col2: "9",
                            Col3: "5",
                            Col4: "3",
                            Col5: "9",
                            Col6: "5",
                            Col7: "9",
                            Col8: "2",
                            ColImg1: "border_48.png",
                            ColImg2: "border_48.png",
                            ColImg3: "border_48.png",
                            ColImg4: "icon1.png",
                            ColImg5: "border_48.png",
                            ColImg6: "border_48.png",
                            ColImg7: "border_48.png",
                            ColImg8: "icon1.png"
                        },
                        {   Col1: "Santa Roma",
                            Col2: "-",
                            Col3: "-",
                            Col4: "9",
                            Col5: "5",
                            Col6: "11",
                            Col7: "4",
                            Col8: "2",
                            ColImg1: "icon1.png",
                            ColImg2: "border_48.png",
                            ColImg3: "border_48.png",
                            ColImg4: "icon1.png",
                            ColImg5: "border_48.png",
                            ColImg6: "icon1.png",
                            ColImg7: "border_48.png",
                            ColImg8: "border_48.png"
                        }
                      ]
                
        };
        
        var oModel = new sap.ui.model.json.JSONModel();
        oModel.setData(otabledata);
        this.getView().setModel(oModel);
    
        
        
    }
​
});
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
anonymouspro
0viewers