<!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.hana.ondemand.com/1.38.10/resources/sap-ui-core.js" id="sap-ui-bootstrap" data-sap-ui-libs="sap.ui.commons,sap.ui.core, sap.suite.ui.commons" data-sap-ui-theme="sap_bluecrystal" data-sap-ui-xx-bindingSyntax="complex" data-sap-ui-resourceroots='{
"demo": "./"
}'>
</script>
<link rel="stylesheet" type="text/css" href="news-tile.css">
<style>
.sapSuiteGTHdrContent {
height: 1.5rem !important;
}
#oTileContent-content {
min-height: 8rem;
}
</style>
<!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->
<script>
var view = sap.ui.view({
id: "viewNewsTile",
viewName: "demo.NewsTile",
type: sap.ui.core.mvc.ViewType.XML
});
view.placeAt("content");
</script>
</head>
<body class="sapUiBody" role="application">
<div id="content"></div>
</body>
</html>
jQuery.sap.require("demo.NewsTileUtils");
sap.ui.controller("demo.NewsTile", {
_setMockNewsData: function(oModel) {
var aTileData = {
"displayTime" : 5000,
"transitionTime" : 500,
"items" :
[
{
"title" : "Preview Mode: News Title Would Be Presented Here (First News Item)",
"link" : "link",
"source" : "SAP Press",
"image" : "https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/sample/SlideTile/images/NewsImage1.png",
"pubDate" : "2016-10-30T11:51:00Z",
"description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
},
{
"title" : "Preview Mode: News Title Would Be Presented Here (Second News Item)",
"link" : "link",
"source" : "SAP Press",
"image" : "https://sapui5.hana.ondemand.com/test-resources/sap/m/demokit/sample/SlideTile/images/NewsImage2.png",
"pubDate" : "2016-10-20T11:51:00Z",
"description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
},
{
"title" : "Preview Mode: News Title Would Be Presented Here (Third News Item)",
"link" : "link",
"source" : "SAP Press",
"image" : "",
"pubDate" : "2016-10-11T11:51:00Z",
"description" : "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
}
]
};
oModel.setProperty("/", aTileData);
},
onInit: function() {
var that = this;
var oView = this.getView();
var oViewData = oView.getViewData();
//Adding to allow for running script outside of Launchpad:
if (oViewData) {
var oTileApi = oViewData.chip;
oTileApi.refresh.attachRefresh(function() {
return that.refresh(that);
});
if (oTileApi.configurationUi && oTileApi.configurationUi.isEnabled()) {
oTileApi.configurationUi.setUiProvider(function() {
return that.getConfigurationUi();
});
}
if (!oTileApi.preview.isEnabled()) {
//this._feedsRefreshComplete = true;
//this.intervalRefObj = setInterval(function() {
// that.refreshFeeds();
//}, demo.NewsTileUtils.getRefreshIntervalConfig(oTileApi));
oModel = new sap.ui.model.json.JSONModel();
this._setMockNewsData(oModel, true);
oView.setModel(oModel);
}
} else {
//Design/Testing mode:
oModel = new sap.ui.model.json.JSONModel();
this._setMockNewsData(oModel, true);
oView.setModel(oModel);
}
},
onBeforeRendering: function() {
//var newsTile = this.byId("tileNews");
//window.name = newsTile;
//var binding = newsTile.getBinding("tiles");
//if (binding !== undefined) {
// var sorter = new sap.ui.model.Sorter("pubDate", true);
// binding.sort([sorter]);
//}
},
onPress: function(evt) {
var oViewData = this.getView().getViewData();
//Adding to allow for running script outside of Launchpad:
if (oViewData) {
var oTileApi = oViewData.chip;
if (oTileApi.configurationUi && oTileApi.configurationUi.isEnabled()) {
oTileApi.configurationUi.display();
return;
}
}
var itemId = evt.getParameter("itemId");
var feedItem = sap.ui.getCore().byId(itemId);
this.getView().getViewData().selectedItem = feedItem;
var fgetService = sap.ushell && sap.ushell.Container && sap.ushell.Container.getService;
var oCrossAppNavigator = fgetService && fgetService("CrossApplicationNavigation");
oCrossAppNavigator.toExternal({
target: {
semanticObject: "NewsFeed",
action: "displayNewsList"
},
params: {
newsViewId: this.getView().getId()
}
});
},
refreshFeeds: function() {
var oViewData = this.getView().getViewData();
//Adding to allow for running script outside of Launchpad:
if (oViewData) {
var oTileApi = oViewData.chip;
// TODO: Serialize calls to the aggregator so that we
// don't have more than one feed refresh executing at
// the same time.
var aInclusionFiltersConfiguration = demo.NewsTileUtils.getInclusionFiltersConfiguration(oTileApi);
var aExclusionFiltersConfiguration = demo.NewsTileUtils.getExclusionFiltersConfiguration(oTileApi);
if (this._feedsRefreshComplete) {
this._feedsRefreshComplete = false;
jQuery.sap.log.debug("NewsTile.controller: Calling aggregator to refresh feeds.");
this.model = sap.suite.ui.commons.util.FeedAggregator.getFeeds(newstile.NewsTileUtils.getFeedConfiguration(oTileApi), aInclusionFiltersConfiguration,
aExclusionFiltersConfiguration,
function() {
that.feedsRefreshed();
that.getView()._newsTile.cycle();
// sort feed list
var newsTile = that.byId("feedTile");
var binding = newsTile.getBinding("items");
if (binding !== undefined) {
var sorter = new sap.ui.model.Sorter("pubDate", true);
binding.sort([sorter]);
}
that.getView().getViewData().newsModel = that.getView()._newsTile.getModel();
});
} else {
jQuery.sap.log.debug("NewsTile.controller: Skipping feeds refresh, previous refresh not completed.");
}
}
},
feedsRefreshed: function() {
this.byId("feedTile").stageModel(this.model);
this._feedsRefreshComplete = true;
},
getNewsTileTooltip: function() {
var oViewData = this.getView().getViewData();
//Adding to allow for running script outside of Launchpad:
if (oViewData) {
var oTileApi = oViewData.chip;
var sLocale = sap.ui.getCore().getConfiguration().getLanguage();
var oBundle = jQuery.sap.resources({
url: oTileApi.url.toAbsoluteUrl("newstile/news_tile.properties"),
locale: sLocale
});
return oBundle.getText("NEWS_TILE_TOOLTIP");
}
},
onExit: function() {
clearInterval(this.intervalRefObj);
},
getConfigurationUi: function() {
var oViewData = this.getView().getViewData();
//Adding to allow for running script outside of Launchpad:
if (oViewData) {
var oTileApi = oViewData.chip;
if (!oTileApi.configurationUi || !oTileApi.configurationUi.isEnabled()) {
return;
}
var configurationUi = sap.ui.view({
type: sap.ui.core.mvc.ViewType.XML,
viewName: "demo.NewsTileConfiguration",
viewData: this.getView().getViewData()
});
return configurationUi;
}
},
refresh: function(oController) {
oController.getView()._newsTile.rerender();
},
getPreviewData: function(oController) {
//Design/Testing mode:
oModel = new sap.ui.model.json.JSONModel();
this._setMockNewsData(oModel, true);
//oView.setModel(oModel);
return oModel;
//var items = [];
//var aItems = {}; // new Object();
//var obj = {}; //new Object();
//obj.image = demo.NewsTileUtils.getDefaultImage(this.getView().oDefaultImages, -1);
//obj.title = "No articles to display";
//items.push(obj);
//aItems.items = items;
//return aItems;
}
});
jQuery.sap.require("sap.ui.model.Sorter");
jQuery.sap.require("demo.NewsTileUtils");
jQuery.sap.require("sap.suite.ui.commons.FeedTile");
jQuery.sap.require("sap.suite.ui.commons.FeedItem");
jQuery.sap.require("sap.suite.ui.commons.util.FeedAggregator");
sap.ui.jsview("demo.NewsTile", {
getControllerName: function() {
return "demo.NewsTile";
},
createContent: function(oController) {
var that = this;
this.setHeight('100%');
var oViewData = this.getViewData();
// Demo/Development test condition (chip only available in Launchpad)
var oChipApi;
if (oViewData) {
oChipApi = this.getViewData().chip;
jQuery.sap.includeStyleSheet(oChipApi.url.toAbsoluteUrl("demo/news-tile.css"));
/* var oFeedItemTemplate = new sap.suite.ui.commons.FeedItem({
title : "{title}",
image : "{image}",
link : "{link}",
source : "{source}",
publicationDate : "{pubDate}"
});*/
this.oDefaultImages = [];
var sTooltip = "";
if (!oChipApi.preview.isEnabled()) {
var oDefaultImage = demo.NewsTileUtils.getDefaultImageConfig(oChipApi);
if (!oDefaultImage) {
this.oDefaultImages = demo.NewsTileUtils.getFinalDefaultImages(oChipApi);
} else {
this.oDefaultImages.push(oDefaultImage);
}
sTooltip = oController.getNewsTileTooltip();
}
/* this._newsTile = new sap.suite.ui.commons.FeedTile(oController.createId("feedTile"), {
defaultImages : oDefaultImages,
displayArticleImage : demo.NewsTileUtils.getUseDefaultImageConfig(oChipApi),
tooltip : sTooltip,
displayDuration : parseInt(demo.NewsTileUtils.getCycleIntervalConfig(oChipApi), 10),
press : function(evt) {
oController.select(evt);
},
items : {
path : "/items",
template : oFeedItemTemplate
}
});*/
}
//-----------------------------------------------******------------------------------------------\\
var oNewsTileContent = new sap.m.TileContent({
footer: {
path: "pubDate",
formatter: function(date) {
return demo.NewsTileUtils.calculateFeedItemAge(date);
}
},
content: new sap.m.Text({
text: "{description}",
maxLines: 4
/* contentText:{
path : "title",
formatter: function(title){
if(!title){
console.log(title);
return "No Articles to display";
}
else{
console.log(title);
return title;
}
}
},*/
})
});
this.oNewsTile = new sap.m.GenericTile({
frameType: "TwoByOne",
header: "{title}",
subheader: "{source}",
size: "{size}",
backgroundImage: "{image}",
/* backgroundImage : {
path : "image",
formatter: function(image){
if(!image){
return demo.NewsTileUtils.getDefaultImage(that.oDefaultImages,-1);
}
else{
return image;
}
}
},*/
tileContent: [
oNewsTileContent
],
press: function(evt) {
oController.onPress(evt);
},
});
this._newsTile = new sap.m.SlideTile(oController.createId("feedTile"), {
displayTime: {
path: "/displayTime"
}, //parseInt(demo.NewsTileUtils.getCycleIntervalConfig(oChipApi)),
transitionTime: {
path: "/transitionTime"
},
tiles: {
template: that.oNewsTile,
path: "/items"
},
});
this.oNewsTile.attachPress(function(evt) {
oController.select(evt);
});
//------------------------------------------------*****---------------------------------------------\\
if (oChipApi && !oChipApi.preview.isEnabled()) {
var aFeedConfiguration = demo.NewsTileUtils.getFeedConfiguration(oChipApi);
var aInclusionFiltersConfiguration = demo.NewsTileUtils.getInclusionFiltersConfiguration(oChipApi);
var aExclusionFiltersConfiguration = demo.NewsTileUtils.getExclusionFiltersConfiguration(oChipApi);
this.oFeeds = sap.suite.ui.commons.util.FeedAggregator.getFeeds(aFeedConfiguration, aInclusionFiltersConfiguration, aExclusionFiltersConfiguration, function() {
that._newsTile.setModel(that.oFeeds);
that.getViewData().newsModel = that.oFeeds;
if (!demo.NewsTileUtils.getUseDefaultImageConfig(oChipApi)) {
for (var i = 0; i < that._newsTile.getModel().getData().items.length; i++) {
that._newsTile.getModel().getData().items[i].image = demo.NewsTileUtils.getDefaultImage(that.oDefaultImages, i % that.oDefaultImages.length);
}
that._newsTile.getModel().updateBindings();
}
that._newsTile.rerender();
});
var data = this.oFeeds.getData();
this._newsTile.setModel(this.oFeeds);
this.getViewData().newsModel = this.oFeeds;
if (Object.getOwnPropertyNames(data).length === 0) {
this._newsTile.getModel().setData(oController.getPreviewData());
this._newsTile.getModel().updateBindings();
// this._newsTile.rerender();
}
} else {
//var previewModel = new sap.ui.model.json.JSONModel();
//previewModel.setData(oController.getPreviewData());
var previewModel = oController.getPreviewData();
this._newsTile.setModel(previewModel);
}
this._newsTile.addStyleClass("newsTileStyle");
return this._newsTile;
}
});
sap.ui.controller("demo.NewsTileConfiguration", {
onInit : function() {
var oChipApi = this.getView().getViewData().chip;
if (oChipApi.configurationUi && oChipApi.configurationUi.isEnabled()) {
var that = this;
oChipApi.configurationUi.attachSave(function() {
return that.submit();
});
}
/*console.log(XMLHttpRequest.channelFactory.ignore);
XMLHttpRequest.channelFactory.ignore.add(function(url)
{return true;}
);*/
},
readConfiguration : function() {
var oView = this.getView();
var oChipApi = oView.getViewData().chip;
oView.byId("defaultImage").setValue(oChipApi.configuration.getParameterValueAsString("defaultImage"));
var bUseDefaultImage = oChipApi.configuration.getParameterValueAsString("useDefaultImage");
if (bUseDefaultImage === "true") {
oView.byId("useDefaultImage").setChecked(true);
} else {
oView.byId("useDefaultImage").setChecked(false);
}
var cycleInterval = parseInt(oChipApi.configuration.getParameterValueAsString("cycleInterval"));
if (Math.floor(cycleInterval) === cycleInterval) {
if (cycleInterval < 5 ) {
jQuery.sap.log.error("Invalid cycleInterval value " + cycleInterval + ". Configuration not read.");
oView.byId("cycleInterval").setValue("5");
} else {
oView.byId("cycleInterval").setValue(cycleInterval);
}
} else {
jQuery.sap.log.error("Invalid cycleInterval value " + cycleInterval + ". Configuration not read.");
oView.byId("cycleInterval").setValue("5");
}
oView.byId("refreshInterval").setValue(oChipApi.configuration.getParameterValueAsString("refreshInterval"));
this.validateUrlConfiguration("feed1");
this.validateUrlConfiguration("feed2");
this.validateUrlConfiguration("feed3");
this.validateUrlConfiguration("feed4");
this.validateUrlConfiguration("feed5");
this.validateUrlConfiguration("feed6");
this.validateUrlConfiguration("feed7");
this.validateUrlConfiguration("feed8");
this.validateUrlConfiguration("feed9");
this.validateUrlConfiguration("feed10");
oView.byId("iFilter1").setValue(oChipApi.configuration.getParameterValueAsString("iFilter1"));
oView.byId("iFilter2").setValue(oChipApi.configuration.getParameterValueAsString("iFilter2"));
oView.byId("iFilter3").setValue(oChipApi.configuration.getParameterValueAsString("iFilter3"));
oView.byId("iFilter4").setValue(oChipApi.configuration.getParameterValueAsString("iFilter4"));
oView.byId("iFilter5").setValue(oChipApi.configuration.getParameterValueAsString("iFilter5"));
oView.byId("eFilter1").setValue(oChipApi.configuration.getParameterValueAsString("eFilter1"));
oView.byId("eFilter2").setValue(oChipApi.configuration.getParameterValueAsString("eFilter2"));
oView.byId("eFilter3").setValue(oChipApi.configuration.getParameterValueAsString("eFilter3"));
oView.byId("eFilter4").setValue(oChipApi.configuration.getParameterValueAsString("eFilter4"));
oView.byId("eFilter5").setValue(oChipApi.configuration.getParameterValueAsString("eFilter5"));
},
validateUrlConfiguration : function(sFeed) {
var oView = this.getView();
var oChipApi = oView.getViewData().chip;
var sUrl = oChipApi.configuration.getParameterValueAsString(sFeed);
var validUrl = jQuery.sap.validateUrl(sUrl);
if (validUrl) {
oView.byId(sFeed).setValue(sUrl);
} else {
jQuery.sap.log.error("Invalid " + sFeed + "feed URL: " + sUrl + ". Configuration not read.");
}
},
isValidUrl : function(sUrl) {
var regexp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
var isValid =regexp.test(sUrl);
if(isValid){
return true;
} else{
var relRexp = /(\/[\w\.\-]+)+\/?/;
return relRexp.test(sUrl);
}
},
validateUrlTextField : function(oTextField) {
var sUrl = oTextField.getValue();
if (sUrl) {
var validUrl = this.isValidUrl(sUrl);
if (validUrl) {
oTextField.setValueState(sap.ui.core.ValueState.None);
} else {
oTextField.setValueState(sap.ui.core.ValueState.Error);
}
} else {
oTextField.setValueState(sap.ui.core.ValueState.None);
}
},
validateCycleInterval : function(oTextField) {
var cycleInterval = parseInt(oTextField.getValue());
if (cycleInterval) {
if (cycleInterval < 1) {
oTextField.setValueState(sap.ui.core.ValueState.Error);
} else {
oTextField.setValueState(sap.ui.core.ValueState.None);
}
} else {
oTextField.setValueState(sap.ui.core.ValueState.Error);
}
},
submit : function() {
var oView = this.getView();
var oChipApi = oView.getViewData().chip;
var
// the deferred object required from the configurationUi contract
oDeferred = jQuery.Deferred();
var mConfigurationUpdates = {};
var bConfigurationValid = true;
var sErrorMessage = "";
var oDefaultImage = oView.byId("defaultImage");
if (oDefaultImage.getValueState() === sap.ui.core.ValueState.Error) {
bConfigurationValid = false;
sErrorMessage += "Invalid defaultImage Url:'" + oDefaultImage.getValue() + "'.\n";
}
var oCycleInterval = oView.byId("cycleInterval");
if (oCycleInterval.getValueState() === sap.ui.core.ValueState.Error) {
bConfigurationValid = false;
sErrorMessage += "Invalid cycleInterval Value:'" + oCycleInterval.getValue() + "'.\n";
}
var oFeed1 = oView.byId("feed1");
if (oFeed1.getValueState() === sap.ui.core.ValueState.Error) {
bConfigurationValid = false;
sErrorMessage += "Invalid feed1 Url:'" + oFeed1.getValue() + "'.\n";
}
var oFeed2 = oView.byId("feed2");
if (oFeed2.getValueState() === sap.ui.core.ValueState.Error) {
bConfigurationValid = false;
sErrorMessage += "Invalid feed2 Url:'" + oFeed2.getValue() + "'.\n";
}
var oFeed3 = oView.byId("feed3");
if (oFeed3.getValueState() === sap.ui.core.ValueState.Error) {
bConfigurationValid = false;
sErrorMessage += "Invalid feed3 Url:'" + oFeed3.getValue() + "'.\n";
}
var oFeed4 = oView.byId("feed4");
if (oFeed4.getValueState() === sap.ui.core.ValueState.Error) {
bConfigurationValid = false;
sErrorMessage += "Invalid feed4 Url:'" + oFeed4.getValue() + "'.\n";
}
var oFeed5 = oView.byId("feed5");
if (oFeed5.getValueState() === sap.ui.core.ValueState.Error) {
bConfigurationValid = false;
sErrorMessage += "Invalid feed5 Url:'" + oFeed5.getValue() + "'.\n";
}
var oFeed6 = oView.byId("feed6");
if (oFeed6.getValueState() === sap.ui.core.ValueState.Error) {
bConfigurationValid = false;
sErrorMessage += "Invalid feed6 Url:'" + oFeed6.getValue() + "'.\n";
}
var oFeed7 = oView.byId("feed7");
if (oFeed7.getValueState() === sap.ui.core.ValueState.Error) {
bConfigurationValid = false;
sErrorMessage += "Invalid feed7 Url:'" + oFeed7.getValue() + "'.\n";
}
var oFeed8 = oView.byId("feed8");
if (oFeed8.getValueState() === sap.ui.core.ValueState.Error) {
bConfigurationValid = false;
sErrorMessage += "Invalid feed8 Url:'" + oFeed8.getValue() + "'.\n";
}
var oFeed9 = oView.byId("feed9");
if (oFeed9.getValueState() === sap.ui.core.ValueState.Error) {
bConfigurationValid = false;
sErrorMessage += "Invalid feed9 Url:'" + oFeed9.getValue() + "'.\n";
}
var oFeed10 = oView.byId("feed10");
if (oFeed10.getValueState() === sap.ui.core.ValueState.Error) {
bConfigurationValid = false;
sErrorMessage += "Invalid feed10 Url:'" + oFeed10.getValue() + "'.\n";
}
if (bConfigurationValid) {
mConfigurationUpdates["defaultImage"] = oDefaultImage.getValue();
mConfigurationUpdates["cycleInterval"] = oCycleInterval.getValue();
mConfigurationUpdates["refreshInterval"] = oView.byId("refreshInterval").getValue();
mConfigurationUpdates["useDefaultImage"] = oView.byId("useDefaultImage").getChecked().toString();
mConfigurationUpdates["feed1"] = oFeed1.getValue();
mConfigurationUpdates["feed2"] = oFeed2.getValue();
mConfigurationUpdates["feed3"] = oFeed3.getValue();
mConfigurationUpdates["feed4"] = oFeed4.getValue();
mConfigurationUpdates["feed5"] = oFeed5.getValue();
mConfigurationUpdates["feed6"] = oFeed6.getValue();
mConfigurationUpdates["feed7"] = oFeed7.getValue();
mConfigurationUpdates["feed8"] = oFeed8.getValue();
mConfigurationUpdates["feed9"] = oFeed9.getValue();
mConfigurationUpdates["feed10"] = oFeed10.getValue();
mConfigurationUpdates["iFilter1"] = oView.byId("iFilter1").getValue();
mConfigurationUpdates["iFilter2"] = oView.byId("iFilter2").getValue();
mConfigurationUpdates["iFilter3"] = oView.byId("iFilter3").getValue();
mConfigurationUpdates["iFilter4"] = oView.byId("iFilter4").getValue();
mConfigurationUpdates["iFilter5"] = oView.byId("iFilter5").getValue();
mConfigurationUpdates["eFilter1"] = oView.byId("eFilter1").getValue();
mConfigurationUpdates["eFilter2"] = oView.byId("eFilter2").getValue();
mConfigurationUpdates["eFilter3"] = oView.byId("eFilter3").getValue();
mConfigurationUpdates["eFilter4"] = oView.byId("eFilter4").getValue();
mConfigurationUpdates["eFilter5"] = oView.byId("eFilter5").getValue();
oChipApi.writeConfiguration.setParameterValues(mConfigurationUpdates,
function(){
oDeferred.resolve();
jQuery.sap.log.info("Configuration saved");
},
function(sError){
oDeferred.reject(sError.toString());
jQuery.sap.log.info("Configuration Failed.");
}
);
return oDeferred.promise();
}else {
jQuery.sap.log.error(sErrorMessage + "Invalid values. Configuration not saved.");
if(sErrorMessage || !bConfigurationValid) {
oDeferred.reject(sErrorMessage + "Invalid values. Configuration not saved.");
return oDeferred.promise();
}
}
}
});
sap.ui.jsview("demo.NewsTileConfiguration", {
getControllerName : function() {
return "demo.NewsTileConfiguration";
},
createFormElement : function(sLabel, oField) {
var oFormElement = new sap.ui.commons.form.FormElement({
label : new sap.ui.commons.Label({
text : sLabel,
width : "100%",
layoutData : new sap.ui.commons.layout.ResponsiveFlowLayoutData({
weight : 1
})
}),
fields : [ oField ],
layoutData : new sap.ui.commons.layout.ResponsiveFlowLayoutData({
linebreak : true,
margin : false
})
});
return oFormElement;
},
createTextField : function(sId, fnChange) {
var oTextField = new sap.ui.commons.TextField(this.createId(sId), {
layoutData : new sap.ui.commons.layout.ResponsiveFlowLayoutData({
weight : 4
})
});
if (fnChange) {
oTextField.attachChange(fnChange);
}
return oTextField;
},
createRefreshIntervalDropdownBox : function(sId) {
var oChipApi = this.getViewData().chip;
var sLocale = sap.ui.getCore().getConfiguration().getLanguage();
var oBundle = jQuery.sap.resources({
url : oChipApi.url.toAbsoluteUrl("newstile/news_tile_configuration.properties"),
locale : sLocale
});
var oRiDropdownBox = new sap.ui.commons.DropdownBox(this.createId(sId), {
layoutData : new sap.ui.commons.layout.ResponsiveFlowLayoutData({
weight : 4
})
});
var oItem = new sap.ui.core.ListItem();
oItem.setText(oBundle.getText("REFRESH_INTERVAL_ONE_ITEM"));
oRiDropdownBox.addItem(oItem);
oItem = new sap.ui.core.ListItem();
oItem.setText(oBundle.getText("REFRESH_INTERVAL_TWO_ITEM"));
oRiDropdownBox.addItem(oItem);
oItem = new sap.ui.core.ListItem();
oItem.setText(oBundle.getText("REFRESH_INTERVAL_THREE_ITEM"));
oRiDropdownBox.addItem(oItem);
oItem = new sap.ui.core.ListItem();
oItem.setText(oBundle.getText("REFRESH_INTERVAL_FOUR_ITEM"));
oRiDropdownBox.addItem(oItem);
oItem = new sap.ui.core.ListItem();
oItem.setText(oBundle.getText("REFRESH_INTERVAL_FIVE_ITEM"));
oRiDropdownBox.addItem(oItem);
return oRiDropdownBox;
},
createCheckBox : function(sId) {
var oCheckBox = new sap.ui.commons.CheckBox(this.createId(sId), {
layoutData : new sap.ui.commons.layout.ResponsiveFlowLayoutData({
weight : 4
})
});
return oCheckBox;
},
createButtonElement : function(sId, sLabel, fnPress) {
var oButton = new sap.ui.commons.Button(this.createId(sId), {
text : sLabel,
width : "auto",
layoutData : new sap.ui.commons.layout.ResponsiveFlowLayoutData({
weight : 4
})
});
if (fnPress) {
oButton.attachPress(fnPress);
}
var oFormElement = new sap.ui.commons.form.FormElement({
fields : [ oButton ],
layoutData : new sap.ui.commons.layout.ResponsiveFlowLayoutData({
linebreak : true,
margin : false
})
});
return oFormElement;
},
createContent : function(oController) {
var oChipApi = this.getViewData().chip;
var sLocale = sap.ui.getCore().getConfiguration().getLanguage();
var oBundle = jQuery.sap.resources({
url : oChipApi.url.toAbsoluteUrl("newstile/news_tile_configuration.properties"),
locale : sLocale
});
var oLayout = new sap.ui.commons.form.ResponsiveLayout();
var oForm1 = new sap.ui.commons.form.Form(this.createId("newsTileConfigForm"), {
layout : oLayout,
formContainers : [
new sap.ui.commons.form.FormContainer(this.createId("general-fc"), {
title : new sap.ui.commons.Title({
text : oBundle.getText("GENERAL_HEADER")
}),
formElements : [ this.createFormElement(oBundle.getText("DEFAULT_IMAGE_LABEL"), this.createTextField('defaultImage', function() {
oController.validateUrlTextField(this);
})), this.createFormElement(oBundle.getText("USE_DEFAULT_IMAGE_LABEL"), this.createCheckBox('useDefaultImage')),
this.createFormElement(oBundle.getText("CYCLE_INTERVAL_LABEL"), this.createTextField('cycleInterval', function() {
oController.validateCycleInterval(this);
})), this.createFormElement(oBundle.getText("REFRESH_INTERVAL_LABEL"), this.createRefreshIntervalDropdownBox('refreshInterval')) ],
layoutData : new sap.ui.commons.layout.ResponsiveFlowLayoutData({
linebreak : true
})
}),
new sap.ui.commons.form.FormContainer(this.createId("articleFeedsFc"), {
title : new sap.ui.commons.Title({
text : oBundle.getText("FEEDS_HEADER")
}),
formElements : [ this.createFormElement(oBundle.getText("FEED_ONE_LABEL"), this.createTextField('feed1', function() {
oController.validateUrlTextField(this);
})), this.createFormElement(oBundle.getText("FEED_TWO_LABEL"), this.createTextField('feed2', function() {
oController.validateUrlTextField(this);
})), this.createFormElement(oBundle.getText("FEED_THREE_LABEL"), this.createTextField('feed3', function() {
oController.validateUrlTextField(this);
})), this.createFormElement(oBundle.getText("FEED_FOUR_LABEL"), this.createTextField('feed4', function() {
oController.validateUrlTextField(this);
})), this.createFormElement(oBundle.getText("FEED_FIVE_LABEL"), this.createTextField('feed5', function() {
oController.validateUrlTextField(this);
})), this.createFormElement(oBundle.getText("FEED_SIX_LABEL"), this.createTextField('feed6', function() {
oController.validateUrlTextField(this);
})), this.createFormElement(oBundle.getText("FEED_SEVEN_LABEL"), this.createTextField('feed7', function() {
oController.validateUrlTextField(this);
})), this.createFormElement(oBundle.getText("FEED_EIGHT_LABEL"), this.createTextField('feed8', function() {
oController.validateUrlTextField(this);
})), this.createFormElement(oBundle.getText("FEED_NINE_LABEL"), this.createTextField('feed9', function() {
oController.validateUrlTextField(this);
})), this.createFormElement(oBundle.getText("FEED_TEN_LABEL"), this.createTextField('feed10', function() {
oController.validateUrlTextField(this);
})) ],
layoutData : new sap.ui.commons.layout.ResponsiveFlowLayoutData({
linebreak : true
})
}),
new sap.ui.commons.form.FormContainer(this.createId("inclusionFiltersFc"), {
title : new sap.ui.commons.Title({
text : oBundle.getText("INCLUSION_FILTERS_HEADER")
}),
formElements : [ this.createFormElement(oBundle.getText("INCLUSION_FILTER_ONE_LABEL"), this.createTextField('iFilter1')),
this.createFormElement(oBundle.getText("INCLUSION_FILTER_TWO_LABEL"), this.createTextField('iFilter2')),
this.createFormElement(oBundle.getText("INCLUSION_FILTER_THREE_LABEL"), this.createTextField('iFilter3')),
this.createFormElement(oBundle.getText("INCLUSION_FILTER_FOUR_LABEL"), this.createTextField('iFilter4')),
this.createFormElement(oBundle.getText("INCLUSION_FILTER_FIVE_LABEL"), this.createTextField('iFilter5')) ],
layoutData : new sap.ui.commons.layout.ResponsiveFlowLayoutData({
linebreak : true
})
}),
new sap.ui.commons.form.FormContainer(this.createId("exclusionFiltersFc"), {
title : new sap.ui.commons.Title({
text : oBundle.getText("EXCLUSION_FILTERS_HEADER")
}),
formElements : [ this.createFormElement(oBundle.getText("EXCLUSION_FILTER_ONE_LABEL"), this.createTextField('eFilter1')),
this.createFormElement(oBundle.getText("EXCLUSION_FILTER_TWO_LABEL"), this.createTextField('eFilter2')),
this.createFormElement(oBundle.getText("EXCLUSION_FILTER_THREE_LABEL"), this.createTextField('eFilter3')),
this.createFormElement(oBundle.getText("EXCLUSION_FILTER_FOUR_LABEL"), this.createTextField('eFilter4')),
this.createFormElement(oBundle.getText("EXCLUSION_FILTER_FIVE_LABEL"), this.createTextField('eFilter5')) ],
layoutData : new sap.ui.commons.layout.ResponsiveFlowLayoutData({
linebreak : true
})
}) ]
});
oController.readConfiguration();
return oForm1;
}
});
jQuery.sap.require("sap.suite.ui.commons.util.DateUtils");
jQuery.sap.declare("demo.NewsTileUtils");
demo.NewsTileUtils = {
getDefaultImageConfig : function(oChipApi) {
return oChipApi.configuration.getParameterValueAsString("defaultImage");
},
getFinalDefaultImageForDrillDown : function(oChipApi) {
return oChipApi.url.toAbsoluteUrl("images/NewsImage1.png");
},
getFinalDefaultImages : function(oChipApi) {
var oNamesOfImagesList = [ "images/NewsImage1.png", "images/NewsImage2.png", "images/NewsImage3.png", "images/NewsImage4.png", "images/NewsImage5.png",
"images/NewsImage6.png", "images/NewsImage7.png", "images/NewsImage8.png", "images/NewsImage9.png", "images/NewsImage10.png", "images/NewsImage11.png" ];
var oImagesList = [];
for ( var i = 0; i < oNamesOfImagesList.length; i++) {
var oImage = oChipApi.url.toAbsoluteUrl(oNamesOfImagesList[i]);
oImagesList.push(oImage);
}
return oImagesList;
},
getUseDefaultImageConfig : function(oChipApi) {
var bool = oChipApi.configuration.getParameterValueAsString("useDefaultImage");
return (oChipApi.configuration.getParameterValueAsString("useDefaultImage") !== "true");
},
getCycleIntervalConfig : function(oChipApi) {
return (oChipApi.configuration.getParameterValueAsString("cycleInterval")*1000);
},
getRefreshIntervalConfig : function(oChipApi) {
var sLocale = sap.ui.getCore().getConfiguration().getLanguage();
var oBundle = jQuery.sap.resources({
url : oChipApi.url.toAbsoluteUrl("newstile/news_tile_configuration.properties"),
locale : sLocale
});
var sRefreshInterval = oChipApi.configuration.getParameterValueAsString("refreshInterval");
var iRefreshInterval = 900000; // 15 minutes
switch (sRefreshInterval) {
case oBundle.getText("REFRESH_INTERVAL_ONE_ITEM"):
iRefreshInterval = 900000; // 15 minutes
break;
case oBundle.getText("REFRESH_INTERVAL_TWO_ITEM"):
iRefreshInterval = 1800000; // 30 minutes
break;
case oBundle.getText("REFRESH_INTERVAL_THREE_ITEM"):
iRefreshInterval = 3600000; // 1 hour
break;
case oBundle.getText("REFRESH_INTERVAL_FOUR_ITEM"):
iRefreshInterval = 14400000; // 4 hours
break;
case oBundle.getText("REFRESH_INTERVAL_FIVE_ITEM"):
iRefreshInterval = 43200000;
break;
}
return iRefreshInterval;
},
getFeedConfiguration : function(oChipApi) {
var aFeeds = [];
var oCurrentFeed = "";
oCurrentFeed = oChipApi.configuration.getParameterValueAsString("feed1");
if (oCurrentFeed) {
aFeeds.push(oCurrentFeed);
}
oCurrentFeed = oChipApi.configuration.getParameterValueAsString("feed2");
if (oCurrentFeed) {
aFeeds.push(oCurrentFeed);
}
oCurrentFeed = oChipApi.configuration.getParameterValueAsString("feed3");
if (oCurrentFeed) {
aFeeds.push(oCurrentFeed);
}
oCurrentFeed = oChipApi.configuration.getParameterValueAsString("feed4");
if (oCurrentFeed) {
aFeeds.push(oCurrentFeed);
}
oCurrentFeed = oChipApi.configuration.getParameterValueAsString("feee5");
if (oCurrentFeed) {
aFeeds.push(oCurrentFeed);
}
oCurrentFeed = oChipApi.configuration.getParameterValueAsString("feed6");
if (oCurrentFeed) {
aFeeds.push(oCurrentFeed);
}
oCurrentFeed = oChipApi.configuration.getParameterValueAsString("feed7");
if (oCurrentFeed) {
aFeeds.push(oCurrentFeed);
}
oCurrentFeed = oChipApi.configuration.getParameterValueAsString("feed8");
if (oCurrentFeed) {
aFeeds.push(oCurrentFeed);
}
oCurrentFeed = oChipApi.configuration.getParameterValueAsString("feed9");
if (oCurrentFeed) {
aFeeds.push(oCurrentFeed);
}
oCurrentFeed = oChipApi.configuration.getParameterValueAsString("feed10");
if (oCurrentFeed) {
aFeeds.push(oCurrentFeed);
}
for (var x in aFeeds){
if(XMLHttpRequest.channelFactory){
XMLHttpRequest.channelFactory.ignore.add(aFeeds[x]+"");
}
}
return aFeeds;
},
getExclusionFiltersConfiguration : function(oChipApi) {
var aExclusionFilters = [];
var sFilter = "";
sFilter = oChipApi.configuration.getParameterValueAsString("eFilter1");
if (sFilter) {
aExclusionFilters.push(sFilter);
}
sFilter = oChipApi.configuration.getParameterValueAsString("eFilter2");
if (sFilter) {
aExclusionFilters.push(sFilter);
}
sFilter = oChipApi.configuration.getParameterValueAsString("eFilter3");
if (sFilter) {
aExclusionFilters.push(sFilter);
}
sFilter = oChipApi.configuration.getParameterValueAsString("eFilter4");
if (sFilter) {
aExclusionFilters.push(sFilter);
}
sFilter = oChipApi.configuration.getParameterValueAsString("eFilter5");
if (sFilter) {
aExclusionFilters.push(sFilter);
}
return aExclusionFilters;
},
getInclusionFiltersConfiguration : function(oChipApi) {
var aInclusionFilters = [];
var sFilter = "";
sFilter = oChipApi.configuration.getParameterValueAsString("iFilter1");
if (sFilter) {
aInclusionFilters.push(sFilter);
}
sFilter = oChipApi.configuration.getParameterValueAsString("iFilter2");
if (sFilter) {
aInclusionFilters.push(sFilter);
}
sFilter = oChipApi.configuration.getParameterValueAsString("iFilter3");
if (sFilter) {
aInclusionFilters.push(sFilter);
}
sFilter = oChipApi.configuration.getParameterValueAsString("iFilter4");
if (sFilter) {
aInclusionFilters.push(sFilter);
}
sFilter = oChipApi.configuration.getParameterValueAsString("iFilter5");
if (sFilter) {
aInclusionFilters.push(sFilter);
}
return aInclusionFilters;
},
calculateFeedItemAge : function(dPubDate) {
var sAgo = "";
if(typeof dPubDate == "undefined") {
return sAgo;
} else if (!sap.suite.ui.commons.util.DateUtils.isValidDate(dPubDate)) {
if ( (new Date(dPubDate) === "Invalid Date" || isNaN(Date.parse(dPubDate)) )) {
return dPubDate;
} else {
dPublicationDate = new Date(dPubDate);
}
}
var dNow = new Date();
// ignore milliseconds
dPublicationDate.setMilliseconds(0);
dNow.setMilliseconds(0);
var oLocale = sap.ui.getCore().getConfiguration().getLanguage();
var oResBundle = sap.ui.getCore().getLibraryResourceBundle("sap.suite.ui.commons", oLocale);
var nMillisInOneMinute = 60000;
var nMillisInOneHour = nMillisInOneMinute * 60;
var nMillisInOneDay = nMillisInOneHour * 24;
if ((dNow.getTime() - dPublicationDate.getTime()) >= nMillisInOneDay) {
var nNumberOfDays = parseInt((dNow.getTime() - dPublicationDate.getTime()) / nMillisInOneDay, 10);
if (nNumberOfDays === 1) {
sAgo = oResBundle.getText("FEEDTILE_DAY_AGO", [ nNumberOfDays ]);
} else {
sAgo = oResBundle.getText("FEEDTILE_DAYS_AGO", [ nNumberOfDays ]);
}
} else if ((dNow.getTime() - dPublicationDate.getTime()) >= nMillisInOneHour) {
var nNumberOfHours = parseInt((dNow.getTime() - dPublicationDate.getTime()) / nMillisInOneHour, 10);
if (nNumberOfHours === 1) {
sAgo = oResBundle.getText("FEEDTILE_HOUR_AGO", [ nNumberOfHours ]);
} else {
sAgo = oResBundle.getText("FEEDTILE_HOURS_AGO", [ nNumberOfHours ]);
}
} else {
var nNumberOfMins = parseInt((dNow.getTime() - dPublicationDate.getTime()) / nMillisInOneMinute, 10);
if (nNumberOfMins === 1) {
sAgo = oResBundle.getText("FEEDTILE_MINUTE_AGO", [ nNumberOfMins ]);
} else {
sAgo = oResBundle.getText("FEEDTILE_MINUTES_AGO", [ nNumberOfMins ]);
}
}
return sAgo;
},
getDefaultImage : function(oDefaultImages,_defaultImageIndex) {
var oDefaultImage;
if (oDefaultImages && oDefaultImages.length > 0) {
var iLength = oDefaultImages.length;
if(_defaultImageIndex == -1){
var iRandom = Math.floor(Math.random() * iLength);
oDefaultImage = oDefaultImages[iRandom];
}
else{
//this is not the first time, get the next image from list
var iIndex = (_defaultImageIndex) > iLength ? 0+(_defaultImageIndex-iLength) : _defaultImageIndex;
_defaultImageIndex = iIndex;
oDefaultImage = oDefaultImages[iIndex];
}
}
return oDefaultImage;
}
};
/* Smartphones (landscape) ----------- */
@media screen and (min-width : 321px) and (max-width : 979px) , screen and (max-width : 320px) {
.sabreNews .sapMGTHdrTxt>.sapMText {
color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,1);
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
font-size: 1rem;
}
.sabreNews .sapMGTContent {
display: inline-block;
white-space: nowrap;
width: 100%;
color: white;
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
background-color: rgb(41,76,106);
background-color: rgba(41,76,106,0.70);
}
.sabreNews .sapMGTHdrContent {
border-bottom:solid 1px #ccc;
padding: 0.84rem 0.94rem 0.3rem 0.94rem;
margin:0;
background-color: rgb(255,255,255);
background-color: rgba(255,255,255,0.70);
}
.sabreNews .sapMTileCnt .sapMTileCntFtrTxt {
color: #d9d9d9;
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.sabreNews .sapMTileCntFtrTxt {
font-family: Arial,Helvetica,sans-serif;
color: #fff;
}
.sapSuiteUiCommonsFeedTileTitle {
font-size: 0.9rem;
padding: 8px 15px 0 15px;
}
.sapSuiteUiCommonsFeedTileSource {
padding-left: 7px;
}
.sapSuiteUiCommonsFeedTileAge {
padding-right: 7px;
}
.sapSuiteUiCommonsFeedTileLowerText {
font-size: .525rem;
}
.sapSuiteUiCommonsFeedTile {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
border-radius: 4px;
}
.sapSuiteUiCommonsFeedTileText {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.sapSuiteFTItemCenter {
border-radius: 4px;
}
}
/* iPads (landscape) ----------- */
@media screen and (min-width : 980px) and (orientation : landscape) , screen and (min-width : 980px) and (orientation : portrait)
{
.sabreNews .sapMGTHdrTxt>.sapMText {
color: #000;
text-shadow: 0 1px 0 rgba(255,255,255,1);
font-weight: bold;
font-family: Arial,Helvetica,sans-serif;
font-size: 1rem;
}
.sabreNews .sapMGTContent {
display: inline-block;
white-space: nowrap;
width: 100%;
color: white;
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
background-color: rgb(41,76,106);
background-color: rgba(41,76,106,0.70);
}
.sabreNews .sapMGTHdrContent {
border-bottom:solid 1px #ccc;
padding: 0.84rem 0.94rem 0.3rem 0.94rem;
margin:0;
background-color: rgb(255,255,255);
background-color: rgba(255,255,255,0.70);
}
.sabreNews .sapMTileCnt .sapMTileCntFtrTxt {
color: #d9d9d9;
text-shadow: 0 1px 0 rgba(0,0,0,0.5);
}
.sabreNews>.sapMTileCntFtrTxt {
font-family: Arial,Helvetica,sans-serif;
color: #fff;
}
.sapSuiteUiCommonsFeedTileTitle {
font-size: 1.125rem;
padding: 8px 15px 0 15px;
}
.sapSuiteUiCommonsFeedTileSource {
padding-left: 11px;
}
.sapSuiteUiCommonsFeedTileAge {
padding-right: 11px;
}
.sapSuiteUiCommonsFeedTileLowerText {
font-size: .7rem;
}
.sapSuiteUiCommonsFeedTile {
height: 100%;
width: 100%;
position: relative;
overflow: hidden;
border-radius: 4px;
}
.sapSuiteUiCommonsFeedTileText {
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px
}
.sapSuiteFTItemCenter {
border-radius: 4px;
}
}
<?xml version="1.0" encoding="UTF-8"?>
<core:View
xmlns="sap.m"
xmlns:core="sap.ui.core"
controllerName="demo.NewsTile">
<SlideTile
class="sabreNews sapUiTinyMarginBegin sapUiTinyMarginTop tileLayout"
transitionTime="{/transitionTime}"
displayTime="{/displayTime}"
tiles="{/items}">
<tiles>
<GenericTile
id="tileNews"
size="Auto"
header="{title}"
subheader="{source}"
backgroundImage="{image}"
frameType="TwoByOne"
press="onPress">
<tileContent>
<TileContent
footer="{ path: 'pubDate', formatter: 'demo.NewsTileUtils.calculateFeedItemAge' }"
frameType="TwoByOne">
<content>
<Text text="{description}" maxLines="4" />
</content>
</TileContent>
</tileContent>
</GenericTile>
</tiles>
</SlideTile>
</core:View>