<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta charset="utf-8">
<title>Notification List Item</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-libs="sap.m"
data-sap-ui-theme="sap_belize"
data-sap-ui-xx-bindingSyntax="complex"
data-sap-ui-preload="async"
data-sap-ui-compatVersion="edge"
data-sap-ui-resourceroots='{"sap.m.sample.NotificationListItem": "./", "sap.ui.demo.mock": "mockdata"}'>
</script>
<!-- Application launch configuration -->
<script>
sap.ui.getCore().attachInit(function() {
new sap.m.App ({
pages: [
new sap.m.Page({
title: "Title",
enableScrolling : false,
content: [ new sap.ui.core.ComponentContainer({
height : "100%",
widht : "100%",
name : "sap.m.sample.NotificationListItem"
})]
})
]
}).placeAt("content");
});
</script>
</head>
<!-- UI Content -->
<body class="sapUiBody" id="content" role="application">
</body>
</html>
// Code goes here
.sapMApp {
background: #bdecbd;
}
.sapMBarPH {
background: #80da80;
}
.sapMGT.OneByOne {
width: auto;
height: auto;
background: #b1b0b080;
}
.sapMGTContent {
height: auto;
display: inline-block;
white-space: nowrap;
width: 100%;
overflow: hidden;
}
/* Tile content */
.sapMTileCnt {
display: inline-block;
box-sizing: border-box;
position: relative;
height: auto;
}
.sapMTileCntContent {
margin-top: 0.85rem;
height: 17.875rem;
}
.sapMGTHdrContent {
height: 0.5rem;
margin-top: 0.625rem;
margin-left: 0.94rem;
margin-right: 0.94rem;
}
/* Cuadro tiles */
.sapMGT {
border-radius: 1.125rem;
}
/* Tile */
.sapMTileCnt.sapMFrameTypeAuto {
min-width: 20rem;
max-width: 20rem;
}
.sapMFlexBoxAlignContentStretch {
-webkit-align-content: stretch;
align-content: stretch;
width: 18rem;
height: 18rem;
}
/* Objeto lista */
.sapMListUl {
min-width: 16rem;
max-width: 16rem;
min-height: 14rem;
}
/* Notif. Items */
.sapMLIB.sapMNLB {
min-height: 7rem;
max-height: 7rem;
}
.lock {
color: red;
}
.boy {
color: blue;
}
.girl {
color: #dc4d66;
}
.unknown {
color: black;
}
.baby {
font-size: 1.3rem!important;
vertical-align: sub;
}
.moved {
color: green;
}
/* Herencia de color para poder modificarlo */
.sapMNLB-AuthorPicture .sapUiIcon {
color: inherit;
font-size: 2rem;
}
/* Texto de cabecera */
.sapMGTHdrTxt .sapMText {
display: inline;
line-height: 1.375rem;
text-align: center!important;
}
/* Punto adicional en autor */
.sapMNLB-Bullet {
display: none;
}
/* Gris locked */
.customSapMNLB {
background: #adadad;
}
/* icono en habitación */
.sapMGTHdrIconImage {
float: right;
width: 1.5rem;
min-height: 0.5rem;
max-height: 0.5rem;
font-size: 1.5rem;
font-family: "72",Arial,Helvetica,sans-serif;
font-weight: normal;
color: red;
}
/* over items */
.sapMNLI:hover {
background: #f0f0f0;
}
.sapMNLB-Medium {
background: yellow;
}
.sapMTitleStyleAuto {
font-size: 2rem;
font-weight: bold;
}
html {
zoom: 100%;
}
.sapMTileCntContent>.sapMTcInnerMarker {
width: 98%!important;
}
/* Punteado de tiles */
.sapMGT .sapMGTFocusDiv {
display: none;
}
/* Selección de tiles */
html.sap-desktop .sapMGTWithoutImageHoverOverlay, html.sap-desktop .sapMGTWithImageHoverOverlay {
display: none;
}
/* Punteado de objects */
html.sap-desktop .sapMBtn:focus>.sapMFocusable {
outline: 0px dotted #000000;
outline-offset: -3px;
}
/* Distancia entre objetos */
div[class*="sapUiRespGrid"]>div[class*="sapUiRespGridSpan"] {
width: auto!important;
}
/* Color de los bloques */
.sapUxAPBlockContainerDesktop {
background-color: #bdecbd;
}
/* Color de cabecera general */
.sapUxAPObjectPageHeaderIdentifier {
background-color: #bdecbd!important;
}
/* Color de selector de nodos */
.sapUxAPAnchorBar.sapMTB {
background: #def5de!important;
}
/* Color de cabeceras */
.sapUxAPObjectPageSectionHeader {
background: #def5de!important;
}
/* Color del resto del container */
.sapUxAPObjectPageContainer, .sapUxAPObjectPageContainer + div, .sapUxAPObjectPageHeaderDetailsHidden {
background-color: #def5de!important;
}
@font-face {
font-family: 'awesome'; /*Please replace 'SAP-icons' with your font name which will be used when register in sap.ui.core.IconPool*/
src: url("../css/webfonts/fa-solid-900.eot");
src: url("../css/webfonts/fa-solid-900.eot?#iefix") format("embedded-opentype"),
url("../css/webfonts/fa-solid-900.woff2") format("woff2"),
url("../css/webfonts/fa-solid-900.woff") format("woff"),
url("../css/webfonts/fa-solid-900.ttf") format("truetype"),
url("../css/webfonts/fa-solid-900.svg#fontawesome") format("svg");
font-weight: normal;
font-style: normal;
}
sap.ui.define(['sap/ui/core/UIComponent'],
function(UIComponent) {
"use strict";
var Component = UIComponent.extend("sap.m.sample.NotificationListItem.Component", {
metadata: {
rootView: "sap.m.sample.NotificationListItem.V",
dependencies: {
libs: [
"sap.m",
"sap.ui.layout"
]
},
config: {
sample: {
files: [
"V.view.xml",
"C.controller.js"
]
}
},
includes : [ "style.css" ]
}
});
return Component;
});
sap.ui.define([
'jquery.sap.global',
'sap/ui/core/mvc/Controller',
'sap/m/MessageToast'
], function (jQuery, Controller, MessageToast) {
'use strict';
var CController = Controller.extend('sap.m.sample.NotificationListItem.C', {
onInit: function () {
jQuery.sap.require("sap.ui.core.IconPool");
sap.ui.core.IconPool.addIcon("male", "patients", "awesome", "f183");
},
onAfterRendering: function () {
//lista 1
var items = this.getView().byId('notificationList').getItems();
for (var i = 0; i < items.length; i++) {
var item = items[i];
switch ( i ) {
case 0:
item.$().find('.sapMNLB-AuthorPicture').addClass('boy');
break;
case 1:
item.$().find('.sapMNLB-AuthorPicture').addClass('girl');
break;
}
}
//lista 2
var items = this.getView().byId('notificationList2').getItems();
for (var i = 0; i < items.length; i++) {
var item = items[i];
switch ( item.mProperties.authorPicture ) {
case "sap-icon://private":
item.$().find('.sapMNLB-AuthorPicture').addClass('lock');
break;
case "sap-icon://locked":
item.$().find('.sapMNLB-AuthorPicture').addClass('lock');
break;
}
}
//lista 3
var items = this.getView().byId('notificationList3').getItems();
for (var i = 0; i < items.length; i++) {
var item = items[i];
switch ( item.mProperties.authorPicture ) {
case "sap-icon://private":
item.$().find('.sapMNLB-AuthorPicture').addClass('lock');
break;
case "sap-icon://locked":
item.$().find('.sapMNLB-AuthorPicture').addClass('lock');
break;
case "sap-icon://action-settings":
item.$().find('.sapMNLB-AuthorPicture').addClass('boy');
break;
}
}
//lista 4
var items = this.getView().byId('notificationList4').getItems();
for (var i = 0; i < items.length; i++) {
var item = items[i];
switch ( i ) {
case 0:
item.$().find('.sapMNLB-AuthorPicture').addClass('girl');
item.$().find('.sapUiIcon').addClass('baby');
break;
}
}
//lista 5
var items = this.getView().byId('notificationList5').getItems();
for (var i = 0; i < items.length; i++) {
var item = items[i];
switch ( item.mProperties.authorPicture ) {
case "sap-icon://private":
item.$().find('.sapMNLB-AuthorPicture').addClass('lock');
break;
case "sap-icon://locked":
item.$().find('.sapMNLB-AuthorPicture').addClass('lock');
break;
case "sap-icon://journey-change":
item.$().find('.sapMNLB-AuthorPicture').addClass('moved');
break;
}
}
//lista 6
var items = this.getView().byId('notificationList6').getItems();
for (var i = 0; i < items.length; i++) {
var item = items[i];
switch ( i ) {
case 0:
item.$().find('.sapMNLB-AuthorPicture').addClass('girl');
break;
}
}
},
onListItemPress: function (oEvent) {
MessageToast.show('Item Presionado: ' + oEvent.getSource().getTitle());
},
onRejectPress: function () {
MessageToast.show('Reject Button Pressed');
},
onAcceptPress: function () {
MessageToast.show('Accept Button Pressed');
},
onErrorPress: function (event) {
var messageStrip = new sap.m.MessageStrip({
type: 'Information',
showIcon: true,
showCloseButton: true,
text: 'Alerta relacionada con la solicitud'
});
var notification = event.getSource().getParent().getParent();
notification.setProcessingMessage(messageStrip);
},
onItemClose: function (oEvent) {
var oItem = oEvent.getSource(),
oList = oItem.getParent();
oList.removeItem(oItem);
MessageToast.show('Item Cerrado: ' + oEvent.getSource().getTitle());
}
});
return CController;
});
<mvc:View controllerName="sap.m.sample.NotificationListItem.C"
xmlns:l="sap.ui.layout" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
xmlns:core="sap.ui.core"
xmlns:uxap="sap.uxap"
height="100%"
widht="100%">
<uxap:ObjectPageLayout id="ObjectPageLayout">
<uxap:headerTitle>
<uxap:ObjectPageHeader objectTitle="Object Title"/>
</uxap:headerTitle>
<uxap:sections>
<uxap:ObjectPageSection title="111111">
<uxap:subSections>
<uxap:ObjectPageSubSection title="11111">
<uxap:blocks>
<GenericTile id="oCustom5" header="1111"
class="sapUiTinyMargin">
<tileContent>
<TileContent>
<content>
<ScrollContainer height="90%" widht="85%" vertical="true" horizontal="false">
<List id="notificationList5">
<NotificationListItem title="ONE"
showCloseButton="false" unread="true" priority="Medium"
close="onItemClose" press="onListItemPress"
description="11"
authorName="1">
</NotificationListItem>
<NotificationListItem title="TWO"
showCloseButton="false" unread="true" priority="Low"
close="onItemClose" press="onListItemPress"
authorPicture="sap-icon://journey-change"
description="22"
authorName="2">
</NotificationListItem>
<NotificationListItem title="33"
showCloseButton="false" unread="false" priority="None"
close="onItemClose" press="onListItemPress">
</NotificationListItem>
<NotificationListItem title="44"
showCloseButton="false" unread="false" priority="None"
close="onItemClose" press="onListItemPress">
</NotificationListItem>
<NotificationListItem title="55"
showCloseButton="false" unread="false" priority="None"
close="onItemClose" press="onListItemPress">
</NotificationListItem>
<NotificationListItem title="66"
showCloseButton="false" unread="false" priority="None"
close="onItemClose" press="onListItemPress">
</NotificationListItem>
<NotificationListItem title="77"
showCloseButton="false" unread="false" priority="None"
close="onItemClose" press="onListItemPress">
</NotificationListItem>
<NotificationListItem title="88"
showCloseButton="false" unread="false" priority="None"
close="onItemClose" press="onListItemPress">
</NotificationListItem>
</List>
</ScrollContainer>
</content>
</TileContent>
</tileContent>
</GenericTile>
</uxap:blocks>
</uxap:ObjectPageSubSection>
</uxap:subSections>
</uxap:ObjectPageSection>
</uxap:sections>
</uxap:ObjectPageLayout>
</mvc:View>