Ich benutze sapUI5 mit einer SAP Hana DB, um ein benutzerdefiniertes Dashboard zu erstellen. Ich habe einen sap.m.TileContainer, der eine Anzahl von sap.m.CustomTiles enthält, die durch die "Kacheln" -Aggregation des TileContainer aus einer JSON-Struktur gebunden sind.sapUI5 benutzerdefinierte Fliese nicht in Chrome angezeigt, aber Firefox
Jetzt muss ich ein anderes CustomTile (mit anderem Layout und Inhalt) in der Init-Funktion meines Controllers durch den folgenden Code hinzufügen. Es funktioniert perfekt in Firefox, aber in Chrome ist die Fliese einfach nicht gezeigt, und ich kann es auch nicht innerhalb der HTML-Elemente finden:
var oTileContainer = this.getView().byId("tileContainer");
var quantTile = new sap.m.CustomTile("quantTile",{
content: [
new sap.m.VBox({
items: [
new sap.m.Title("quantTileTitle", {
width : "100%",
text : "Quantitative KPIs",
titleStyle : "H4",
textAlign: "Begin",
}).addStyleClass('sapUiTinyMarginBegin sapUiTinyMarginTop'),
new sap.ui.commons.HorizontalDivider({
height : "Medium"
}),
new sap.m.RatingIndicator("quantTotalRating",{
enabled : false,
maxValue : 5,
value : 2.5
}).addStyleClass('sapUiMediumMarginBegin sapUiMediumMarginTop'),
new sap.m.Label({
text : "Gesamtbewertung",
width : "100%",
textAlign: "Center"
}).addStyleClass('')
]
})
],
press: this.handleTilePress
}).addStyleClass('sapMTile quantTile');
oTileContainer.insertTile(quantTile,0);
Der Vollständigkeit halber hier ist der relevante Teil meiner XML-Ansicht:
<TileContainer
id="tileContainer"
tileDelete="handleTileDelete"
tiles="{/TileCollection}">
<CustomTile
class="sapMTile"
press="handleTilePress">
<content>
<l:FixFlex vertical="true">
<l:fixContent>
<VBox>
<HBox alignItems="Center">
<c:Icon
src="sap-icon://{icon}"
size="1rem"
color="#000000"
class="sapUiTinyMarginBeginEnd sapUiTinyMarginTop"/>
<VBox class="sapUiTinyMarginTop">
<Title text="{title}" titleStyle="H4"/>
</VBox>
</HBox>
<u:HorizontalDivider height="Medium" />
</VBox>
</l:fixContent>
<l:flexContent>
<VBox>
<Label text="Letzte Woche" class="sapUiTinyMargin" width="100%" textAlign="Begin"/>
<HBox
alignItems="Center"
justifyContent="Center">
<Label text="{positive_week}" class="sapUiTinyMargin sapUiMediumMarginEnd KPIpositive"/>
<Label text="{negative_week}" class="sapUiTinyMargin KPInegative"/>
</HBox>
<Label text="Letzter Monat" class="sapUiTinyMargin" width="100%" textAlign="Begin"/>
<HBox
alignItems="Center"
justifyContent="Center">
<Label text="{positive_month}" class="sapUiTinyMargin sapUiMediumMarginEnd KPIpositive"/>
<Label text="{negative_month}" class="sapUiTinyMargin KPInegative"/>
</HBox>
</VBox>
</l:flexContent>
</l:FixFlex>
</content>
</CustomTile>
</TileContainer>
Hat jemand eine Idee, warum es in Chrome nicht gezeigt/gerendert wird, aber in Firefox? Gibt es eine Prozedur, die ich aufrufen kann, die ein Rendern oder ähnliches erzwingt?
Danke
Ich habe gerade getestet, dass, wenn ich den JS-Code z. Mit einem Button wird die Kachel dann auch in Firefox perfekt zur Sammlung hinzugefügt. Es geht also nur darum, wie und wann es hinzugefügt wird. Aber es hat auch nicht geholfen, das Hinzufügen der Kachel um ein Timeout zu verzögern. Ich habe versucht, es in der onAfterRendering() sowie in der onInit() -Funktion zu setzen. Gibt es andere solche Ereignisse, von denen ich nicht weiß? – Jens
Können Sie versuchen, dieses Problem in einem kleinen JSBin oder ähnlichem zu reproduzieren? –
Hier ist ein Beitrag, wo einige weitere Ereignisse skizziert sind. Haben Sie getestet, ob Chrome die Ereignisse (onInit, onAfterRendering) überhaupt auslöst? – Carsten