DynamicControls

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta charset="UTF-8">
        <title>Dynamic Controls with Table</title>
        <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"
                data-sap-ui-xx-bindingSyntax="complex">
        </script>

		<style>
		.productLabel {
		color: #666666;
		font-size: 0.895rem;
		font-family: Arial,Helvetica,sans-serif;
		font-weight: bold;
		margin-top: 10%;
		}
		</style>
		
        <!-- XML-based view definition -->
        <script id="chartView" type="sapui5/xmlview">
<mvc:View
  controllerName="DynamicControls.Main"
  xmlns:l="sap.ui.layout"
  xmlns:u="sap.ui.unified"
  xmlns:mvc="sap.ui.core.mvc"
  xmlns="sap.m"
  class="viewPadding">
  <App>
  <pages>
<Page
    title="Products Page"
    class="marginBoxContent" >
    <content>
<VBox id="oVBox">
 <Table id="idProductsTable"
     mode= "MultiSelect"
    selectionChange = "rowSelect"
     items="{/modelData/productsData}">
    <columns>
      <Column>
        <Label text="Product" />
      </Column>
      <Column>
        <Label text="Weight" />
      </Column>
    </columns>
    <items>
      <ColumnListItem>
        <cells>
	<Text  text="{Product}" />
	 <Text text="{Weight}" />
        </cells>
      </ColumnListItem>
    </items>
  </Table>
  </VBox>
    </content>
  </Page>
  </pages>
  </App>
  </mvc:View>
        </script>

        <script>
            // Controller definition
sap.ui.controller("DynamicControls.Main", {
	onInit: function() {	
	var dataObject = [
				{Product: "Power Projector 4713", Weight: "1467"},
				{Product: "Gladiator MX", Weight: "321"},
				{Product: "Hurricane GX", Weight: "588"},
				{Product: "Webcam", Weight: "700"},
				{Product: "Monitor Locking Cable", Weight: "40"},
				{Product: "Laptop Case", Weight: "1289"}];
	
	var model = new sap.ui.model.json.JSONModel();
		model.setData({
			modelData: {
			productsData : []
			}
			});
		sap.ui.getCore().setModel(model);
		sap.ui.getCore().getModel().setProperty("/modelData/productsData", dataObject)
	},
	
	rowSelect: function(oEvent){
	var oSelectedItems = oEvent.getParameter("listItems");
		var getSelectedValue = oEvent.getParameters().selected;
	if(getSelectedValue == true){
	for(var i = 0; i< oSelectedItems.length ; i++)
		{
		var productText	= oSelectedItems[i].getCells()[0].getText();
		var productValue = oSelectedItems[i].getCells()[1].getText();
		var oLabel = new sap.m.Label({text: productText + ":"}).addStyleClass("productLabel");
		var oInput = new sap.m.Input({value: productValue});
		var oHBox = new sap.m.HBox({items:[oLabel,oInput]});
		var oVBox = this.getView().byId("oVBox");
		oVBox.insertItem(oHBox, i+1);
			}
			}
	}
});            
            // Instantiate the View, assign a model
            // and display
            var oView = sap.ui.xmlview({
                viewContent: jQuery('#chartView').html()
            });
            
            oView.placeAt('content');
        </script>
    </head>
    <body class="sapUiBody" role="application">
        <div id="content"></div>
    </body>
</html>

// Code goes here

/* Styles go here */