<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta charset="UTF-8">
<title>TableColumns</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>
<!-- XML-based view definition -->
<script id="tableView" type="sapui5/xmlview">
<core:View
controllerName="sap.suite.ui.commons.sample.Timeline.Timeline"
xmlns="sap.suite.ui.commons"
xmlns:m="sap.m"
xmlns:core="sap.ui.core">
<m:App>
<m:pages>
<m:Page title="TimeLine">
<m:HBox justifyContent="SpaceBetween">
<Timeline
id="idTimeline"
enableSocial="true"
width="30%"
sortOldestFirst="true">
<content>
<TimelineItem
dateTime = "Date(1407049200000)"
userNameClickable = "true"
text = "ample text for a Note type item"
userName = "John Smith"
title = "added a note"
filterValue = "Note"
icon = "sap-icon://notes"
userNameClicked ="attachUserNameClicked">
</TimelineItem>
<TimelineItem
dateTime = "Date(1407222000000)"
userNameClickable = "true"
userName = "William Johnson"
title = "added a note"
filterValue = "Note"
icon = "sap-icon://notes"
userNameClicked ="attachUserNameClicked2">
<embeddedControl>
<m:Button text="Click me" press="onPress" />
</embeddedControl>
</TimelineItem>
<TimelineItem
dateTime = "Date(1407359908947)"
userNameClickable = "true"
userName = "Nancy Grace"
title = "added a note"
filterValue = "Note"
icon = "sap-icon://notes"
userNameClicked ="attachUserNameClicked1">
<embeddedControl>
<m:Link text="Link to SAP home page" href = "http://www.sap.com" target = "_blank" />
</embeddedControl>
</TimelineItem>
</content>
</Timeline>
<Timeline
id="idTimeline1"
enableSocial="true"
width="30%"
sortOldestFirst="true">
<content>
<TimelineItem
dateTime = "Date(1407049200000)"
userNameClickable = "true"
text = "ample text for a Note type item"
userName = "John Smith"
title = "added a note"
filterValue = "Note"
icon = "sap-icon://notes"
userNameClicked ="attachUserNameClicked">
</TimelineItem>
<TimelineItem
dateTime = "Date(1407222000000)"
userNameClickable = "true"
userName = "William Johnson"
title = "added a note"
filterValue = "Note"
icon = "sap-icon://notes"
userNameClicked ="attachUserNameClicked2">
<embeddedControl>
<m:Button text="Click me" press="onPress" />
</embeddedControl>
</TimelineItem>
<TimelineItem
dateTime = "Date(1407359908947)"
userNameClickable = "true"
userName = "Nancy Grace"
title = "added a note"
filterValue = "Note"
icon = "sap-icon://notes"
userNameClicked ="attachUserNameClicked1">
<embeddedControl>
<m:Link text="Link to SAP home page" href = "http://www.sap.com" target = "_blank" />
</embeddedControl>
</TimelineItem>
</content>
</Timeline>
</m:HBox>
</m:Page>
</m:pages>
</m:App>
</core:View>
</script>
<script>
// Controller definition
sap.ui.controller("sap.suite.ui.commons.sample.Timeline.Timeline", {
attachUserNameClicked : function(oControlEvent) {
var oPopover = new sap.m.Popover({
showHeader : false,
placement : sap.m.PlacementType.Auto,
contentHeight : "87px",
contentWidth : "300px"
});
var vCardName = new sap.ui.commons.Label();
var oVCard = new sap.suite.ui.commons.BusinessCard({
firstTitle : vCardName,
secondTitle : "Sales Contact at Customer Side",
width : "298px"
});
var oContent = new sap.ui.commons.layout.MatrixLayout({
widths : ["30px", "100px"]
});
oContent.createRow(new sap.ui.commons.TextView({
text : "Phone:"
}), new sap.ui.commons.TextView({
text : "+1 (635) 457-2875"
}));
oContent.createRow(new sap.ui.commons.TextView({
text : "Email:"
}), new sap.ui.commons.TextView({
text : "abc@company.com"
}));
oVCard.setContent(oContent);
oPopover.addContent(oVCard);
var oItem = oControlEvent.getSource();
vCardName.setText(oItem.getUserName());
oVCard.setIconPath("images/persons/male_MillerM.jpg");
oPopover.openBy(oItem._userNameLink);
},
attachUserNameClicked1 : function(oControlEvent) {
var oPopover = new sap.m.Popover({
showHeader : false,
placement : sap.m.PlacementType.Auto,
contentHeight : "87px",
contentWidth : "300px"
});
var vCardName = new sap.ui.commons.Label();
var oVCard = new sap.suite.ui.commons.BusinessCard({
firstTitle : vCardName,
secondTitle : "Sales Contact at Customer Side",
width : "298px"
});
var oContent = new sap.ui.commons.layout.MatrixLayout({
widths : ["30px", "100px"]
});
oContent.createRow(new sap.ui.commons.TextView({
text : "Phone:"
}), new sap.ui.commons.TextView({
text : "+1 (635) 489-5325"
}));
oContent.createRow(new sap.ui.commons.TextView({
text : "Email:"
}), new sap.ui.commons.TextView({
text : "abc@company.com"
}));
oVCard.setContent(oContent);
oPopover.addContent(oVCard);
var oItem = oControlEvent.getSource();
vCardName.setText(oItem.getUserName());
oVCard.setIconPath("images/persons/female_IngallsB.jpg");
oPopover.openBy(oItem._userNameLink);
},
attachUserNameClicked2 : function(oControlEvent) {
var oPopover = new sap.m.Popover({
showHeader : false,
placement : sap.m.PlacementType.Auto,
contentHeight : "87px",
contentWidth : "300px"
});
var vCardName = new sap.ui.commons.Label();
var oVCard = new sap.suite.ui.commons.BusinessCard({
firstTitle : vCardName,
secondTitle : "Sales Contact at Customer Side",
width : "298px"
});
var oContent = new sap.ui.commons.layout.MatrixLayout({
widths : ["30px", "100px"]
});
oContent.createRow(new sap.ui.commons.TextView({
text : "Phone:"
}), new sap.ui.commons.TextView({
text : "+1 (635) 234-4781"
}));
oContent.createRow(new sap.ui.commons.TextView({
text : "Email:"
}), new sap.ui.commons.TextView({
text : "abc@company.com"
}));
oVCard.setContent(oContent);
oPopover.addContent(oVCard);
var oItem = oControlEvent.getSource();
vCardName.setText(oItem.getUserName());
oVCard.setIconPath("images/persons/male_SmithJo.jpg");
oPopover.openBy(oItem._userNameLink);
},
onPress : function(oEvent) {
alert("Hello from Timeline item");
}
});
// Instantiate the View, assign a model
// and display
var oView = sap.ui.xmlview({
viewContent: jQuery('#tableView').html()
});
oView.placeAt('content');
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
// Code goes here
/* Styles go here */