I have a ToolPage app. The content of the SideContent needs to be populated from a response of Firestore collection read, which is async (promise).
So far, every single attempt to sort this out failed. Tried to fetch data in the Component.js but still response is after view got rendered. Even attempted to insert the items manually, but in this case although items have been added to the control, the view does not change at all
Is there any posible way to wait for Firestore reponse?
Or at least to rerender the view from the OpenUI5 perspective?
In case you wonder, below is the sidecontent definitions on the view:
<tnt:sideContent>
<tnt:SideNavigation id="_IDGenSideNavigation1"
visible="{= ${!device>/system/phone}}"
expanded="true"
selectedKey="Lobby"
itemSelect=".onItemSelect">
<tnt:NavigationList id="_IDGenNavigationList1" items="{path: '/Navigations>/navigations'}">
<tnt:NavigationListItem id="_IDGenNavigationListItem1"
text="{title}"
icon="{icon}"
key="{key}">
</tnt:NavigationListItem>
</tnt:NavigationList>
</tnt:SideNavigation>
</tnt:sideContent>
And this is the Firestore fetch:
getNavigations: function () {
this.collRefNavs.get().then(
function (collection) {
var navModel = this.getView().getModel("Navigations");
var navData = navModel.getData();
var navs = collection.docs.map(function (docNav) {
return docNav.data();
});
navData.navigations = navs;
var navList = this.getView().byId("_IDGenNavigationList1");
navData.navigations.forEach(
function (element) {
var index = 0;
navList.insertItem(index, element)
}
)
}.bind(this));
},
I ended up using the Visible property of each item instead. By manipulating this, it gets the job done. Any other way to change the sideContent does not get reflected. In my case this implies that I need to handle the menu in a different way, rather than binding the items to a model and expecting that to get reflected in the View