View.xml
<core:View xmlns:core="sap.ui.core" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
controllerName="dynamictable.Table" xmlns:html="http://www.w3.org/1999/xhtml"
xmlns:l="sap.ui.layout" xmlns:f="sap.ui.layout.form" xmlns:u="sap.ui.unified"
xmlns:t="sap.ui.table">
<u:Shell
id="myShell"
icon="{/logo}">
<u:headItems>
<u:ShellHeadItem
tooltip="Home"
icon="sap-icon://home"
visible="true"
press="handlePressHome" />
</u:headItems>
<u:headEndItems>
<u:ShellHeadItem
icon="sap-icon://search"
press="handlesearch" />
</u:headEndItems>
<u:user>
<u:ShellHeadUserItem
image="images/u25.jpg"
username="Karl Mustermann"
press="handleUserItemPressed" />
</u:user>
<u:content>
<Page title="{i18n>Tittle}" showNavButton="true" class="sapUiSizeCompact" navButtonPress="navigation" enableScrolling="true">
<content>
<Wizard id="Wizard" >
<WizardStep id="w1" title="{i18n>Wizardtittle1}"
validated="true">
<f:SimpleForm id="SimpleFormDisplay480" minWidth="1024"
maxContainerCols="3" editable="false" layout="ResponsiveGridLayout"
labelSpanL="4" labelSpanM="4" emptySpanL="0"
emptySpanM="0" columnsL="3" columnsM="3">
<f:content>
<VBox>
<Label text="{i18n>Droptext}" labelFor="dob1" />
<ComboBox id="dob1" width="380px" selectionChange="onSelect" selectedKey="2">
<items>
<core:Item text="{i18n>Listtext1}" key="2" />
<core:Item text="{i18n>Listtext2}" key="3" />
</items>
</ComboBox>
<HBox>
<Text text="" width="100px"/>
<Text text="" width="100px"/>
<Text text="" width="100px"/>
</HBox>
<html:br />
<HBox>
<VBox>
<Label text="{i18n>Elementlable1}" />
<HBox>
<CheckBox text="{i18n>Sendercheckbox1}" width="100px" selected="true"/>
<CheckBox text="{i18n>Sendercheckbox2}" width="200px" selected="true"/>
</HBox>
</VBox>
<VBox>
<HBox>
<Label text="" />
<Label text="" />
<Label text="{i18n>Elementlable2}" />
</HBox>
<HBox>
<Label text="" />
<Label text="" />
<CheckBox text="{i18n>Recivercheckbox1}" width="100px"/>
</HBox>
<HBox>
<Label text="" />
<Label text="" />
<CheckBox text="{i18n>Recivercheckbox2}" width="100px"/>
</HBox>
<HBox>
<Label text="" />
<Label text="" />
<CheckBox text="{i18n>Recivercheckbox3}" width="100px"/>
</HBox>
</VBox>
<VBox>
<HBox>
<Label text="" />
<Label text="" />
<Label text="" />
</HBox>
<HBox>
<Label text="" />
<Label text="" />
<CheckBox text="{i18n>Recivercheckbox4}" width="200px"/>
</HBox>
<HBox>
<Label text="" />
<Label text="" />
<CheckBox text="{i18n>Recivercheckbox5}" width="200px"/>
</HBox>
<HBox>
<Label text="" />
<Label text="" />
<CheckBox text="{i18n>Recivercheckbox6}" width="200px" selected="true"/>
</HBox>
</VBox>
<VBox>
<HBox>
<Label text="" />
<Label text="" />
<Label text="{i18n>Elementlable3}" />
</HBox>
<HBox>
<Label text="" />
<Label text="" />
<CheckBox text="{i18n>Otherscheckbox1}" />
</HBox>
<HBox>
<Label text="" />
<Label text="" />
<CheckBox text="{i18n>Otherscheckbox2}" selected="true"/>
</HBox>
</VBox>
</HBox>
</VBox>
</f:content>
</f:SimpleForm>
</WizardStep>
<WizardStep id="w2" title="{i18n>Wizardtittle2}"
validated="true" complete="onComplete">
<f:SimpleForm id="SimpleFormDisplay481" minWidth="1024"
maxContainerCols="3" editable="false" layout="ResponsiveGridLayout"
labelSpanL="4" labelSpanM="4" emptySpanL="0"
emptySpanM="0" columnsL="3" columnsM="3">
<f:content>
<VBox>
<VBox>
<Label text="{i18n>Lable1}" labelFor="1" />
<HBox>
<DatePicker id="1" displayFormat="short" change="handleChange" width="274px" value="03/12/2005"/>
<Text text="" width="10px"/>
<Input id="7" value="9" width="80px" />
</HBox>
</VBox>
<html:br />
<html:br />
<VBox>
<Label text="{i18n>Lable2}" labelFor="4" />
<HBox>
<DatePicker id="4" displayFormat="short" change="handleChange" width="274px" value="13/02/1991"/>
<Text text="" width="10px"/>
<Input id="5" value="0" width="80px" />
</HBox>
</VBox>
</VBox>
<VBox>
<VBox>
<Label text="{i18n>Lable3}" labelFor="2" />
<Input id="2" value="description" width="380px" />
</VBox>
<html:br />
<html:br />
<VBox>
<Label text="{i18n>Lable4}" labelFor="6" />
<Input id="6" value="M" width="380px" valueHelpRequest="onValueHelpRequest" showValueHelp="true"/>
</VBox>
</VBox>
<VBox>
<VBox>
<Label text="{i18n>Lable5}" labelFor="3" class="spacer41" />
<DatePicker id="3" displayFormat="short" change="handleChange" width="380px" value="01/01/2001" class="spacer41"/>
</VBox>
<html:br />
<html:br />
<VBox>
<Label text="{i18n>Lable6}" labelFor="8" class="spacer41"/>
<Input id="8" value="OL" width="380px" valueHelpRequest="onValueHelpRequest" showValueHelp="true" class="spacer41"/>
</VBox>
</VBox>
</f:content>
</f:SimpleForm>
</WizardStep>
<WizardStep id="w3" title="{i18n>Wizardtittle3}"
validated="true" activate="optionalStepActivation">
<f:SimpleForm id="SimpleFormDisplay482" minWidth="1024"
maxContainerCols="3" editable="false" layout="ResponsiveGridLayout"
labelSpanL="4" labelSpanM="4" emptySpanL="0"
emptySpanM="0" columnsL="3" columnsM="3">
<f:content>
<Panel expandable="true" expanded="true">
<headerToolbar>
<Toolbar>
<HBox>
<Text text="{i18n>Text}" />
<Label text="" />
<Text text="|" />
<Label text="" />
<Link text="{i18n>Link1}" press="onConfirmDialog"/>
</HBox>
</Toolbar>
</headerToolbar>
<content>
<HBox>
<VBox>
<Label text="{i18n>Lable7}" labelFor="cat" />
<ComboBox id="cat" width="420px" selectedKey="13">
<items>
<core:Item text="{i18n>Tablelable1}" key="10" />
<core:Item text="{i18n>Tablelable2}" key="11" />
<core:Item text="{i18n>Tablelable4}" key="12" />
<core:Item text="{i18n>Tablelable5}" key="13" />
<core:Item text="{i18n>Tablelable6}" key="14" />
</items>
</ComboBox>
</VBox>
<Label text="" />
<Label text="" />
<Label text="" />
<VBox>
<Label text="{i18n>Lable8}" labelFor="multiInput" />
<MultiInput id="multiInput" width="420px" valueHelpRequest="onValueHelpRequest" >
</MultiInput>
</VBox>
<Label text="" />
<Label text="" />
<Label text="" />
<VBox>
<Label text="" />
<Button text="{i18n>Fill}" width="100px"></Button>
</VBox>
<Label text="" />
<Label text="" />
</HBox>
</content>
</Panel>
</f:content>
</f:SimpleForm>
<VBox id="con"> (wanted to put table created in controller )
</VBox>
</WizardStep>
</Wizard>
</content>
<footer id="footer">
<Bar>
<contentRight>
<Button id="post" text="{i18n>Post}" press="handleEditPress" />
<Button id="cancel" text="{i18n>Cancel}" press="handleCancelPress" />
<Button id="action" icon="sap-icon://action" press="handleActionPress" />
</contentRight>
</Bar>
</footer>
</Page>
</u:content>
</u:Shell>
</core:View>
controller.js
sap.ui.controller("dynamictable.Table", {
/**
* 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 dynamictable.Table
*/
onInit: function() {
var i18nModel = new sap.ui.model.resource.ResourceModel({ bundleUrl : "i18n/messageBundle.properties" });
sap.ui.getCore().setModel(i18nModel, "i18n");
/*
var oModel = new sap.ui.model.json.JSONModel();
// Load JSON in model
oModel.setData({ // Set the data to the model using the JSON object defined already
modelData: ProductCollection
});
ProductCollection= [
{
"sendercost": "1001(furnace)",
"senderactivity": "labour",
},
{
"sendercost": "1001(blast)",
"senderactivity": "machine",
},
{
"sendercost": "10023(blast)",
"senderactivity": "machine",
},
{
"sendercost": "10031(blast)",
"senderactivity": "labour",
},
{
"sendercost": "10501(blast)",
"senderactivity": "machine",
}
]*/
},
onComplete :function()
{
ProductCollection= [
{
"sendercost": "1001(furnace)",
"senderactivity": "labour",
},
{
"sendercost": "1001(blast)",
"senderactivity": "machine",
},
{
"sendercost": "10023(blast)",
"senderactivity": "machine",
},
{
"sendercost": "10031(blast)",
"senderactivity": "labour",
},
{
"sendercost": "10501(blast)",
"senderactivity": "machine",
}
]
var oTable = new sap.ui.table.Table({
visibleRowCount: 5,
firstVisibleRow: 4,
selectionMode: sap.ui.table.SelectionMode.MultiToggle,
toolbar: new sap.ui.commons.Toolbar({items: [
new sap.ui.commons.Button({
text: "Add",
style: sap.ui.commons.ButtonStyle.Accept,
press: function() {
var modelData = oModel.getData();
var rowCount = modelData.modelData.length;
rowCount = rowCount + 1;
ProductCollection.push({sendercost: " ",senderactivity: " ",}); // Push data to Model
oModel.setData({modelData: ProductCollection}); // Set Model
}})
]}),
});
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "{i18n>Tablelable1}"
}),
template: new sap.ui.commons.TextField({
value: '{sendercost}',
}),
width: "150px"
}));
oTable.addColumn(new sap.ui.table.Column({
label: new sap.ui.commons.Label({
text: "{i18n>Tablelable2}"
}),
template: new sap.ui.commons.TextField({
value: '{sendercost}',
}),
width: "159px"
}));
//Create a model and bind the table rows to this model
var oModel = new sap.ui.model.json.JSONModel(); // created a JSON model
oModel.setData({ // Set the data to the model using the JSON object defined already
modelData: ProductCollection
});
oTable.setModel(oModel);
oTable.bindRows("/modelData"); // binding all the rows into the model
oTable.placeAt("con");
}
/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf dynamictable.Table
*/
// onBeforeRendering: function() {
//
// },
/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf dynamictable.Table
*/
// onAfterRendering: function() {
//
// },
/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf dynamictable.Table
*/
// onExit: function() {
//
// }
});
I m getting error whille doing this .
console error : DOM element with ID 'con' not found in page, but application tries to insert content.
My table code in controller is correct when i am putting this table in html div it gives output .check below screenshot.
oTable.placeAt("content");
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv='Content-Type' content='text/html;charset=UTF-8'/>
<script src="https://sapui5.netweaver.ondemand.com/resources/sap-ui-core.js"
id="sap-ui-bootstrap"
data-sap-ui-libs="sap.m,sap.ui.comp,sap.ui.table,sap.ui.commons"
data-sap-ui-theme="sap_bluecrystal">
</script>
<!-- only load the mobile lib "sap.m" and the "sap_bluecrystal" theme -->
<script>
sap.ui.localResources("dynamictable");
var app = new sap.m.App({initialPage:"idTable1"});
var page = sap.ui.view({id:"idTable1", viewName:"dynamictable.Table", type:sap.ui.core.mvc.ViewType.XML});
app.addPage(page);
app.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
expected output
Kindly give your suggestion.
Regards,
Abhishek