Hi,
I try to make use of the infinite scroll feature of the OE. But I can’t seem to wrap my head around it.
I enabled the feature in the model (according to the docs) and tried to make use of the InfiniteScrollProps within the ViewViews.OverviewEngineView. Unfortunately there’s already a typing error when adding infiniteScrollOptions to the component. So I had to create a new props object first to make it work.
But now I neither know if something happens when it should load nor what I should expect to happen. My loadData method won’t be called and I can’t see any actions in the redux dev tools. So what am I missing?
Regarding such “basic” features it would be quite desirable to have more than an API documentation in the docs but also a working example. Unfortunately the OE Showcase only shows that it can work but not how it’s done.
Whoever has an answer regarding this topic: thanks for pointing me in the right direction 
Hi @steve-windy-mist,
Generally, you shouldn’t need to perform any additional steps on React component level once the modeling is enabled, especially the for the infinite scroll. Could you share your view component code, which uses the ViewViews.OverviewEngineView?
Also, you could consider having the modeling option turned on via Installer’s Preview app to check whether the feature can work properly. If the models work there but don’t work on your app, we would have to look back at how you setup your application.
The changes in the model were already made with the SME.
But in my specific use case I have to overwrite the loadData method because I have a custom endpoint which is not an A12 server.
export const MessageListView = (props: OverviewEngineViewProps): JSX.Element => {
const { activity } = props;
const dispatch = useDispatch();
const data = useSelector(ActivitySelectors.data(activity.id)) as Activity.Data.DocumentListData;
const apiConfig = useSelector(UserAccountSelectors.apiConfig);
const inboxMessageListApi = new InboxMessageListApi(apiConfig);
const customMobileComponentMap = createCustomMobileComponentMap();
const infiniteScrollOverviewEngineViewProps = {
...props,
infiniteScrollOptions: {
loadData: async (startIndex, numberOfEntries) => {
const messageList = await inboxMessageListApi.getInboxMessageList({
startIndex,
numberOfEntries
});
const newData: Activity.Data.DocumentListData = {
documents: messageList.map(listItem => {
const { messageId, date, hasAttachment, isRead, sender, subject } = listItem;
return {
modelId: "MessageListItem_DM",
id: messageId,
MessageListItem: {
Date: date,
HasAttachment: hasAttachment,
IsRead: isRead,
Sender: sender,
Subject: subject
}
};
}),
totalDocumentsCount: messageList.length
};
dispatch(
ActivityActions.setData({
activityId: activity.id,
data: {
documents: data.documents.concat(newData.documents),
totalDocumentsCount: newData.totalDocumentsCount
}
})
);
},
threshold: 3
}
} as OverviewEngineViewProps & Pick<InfiniteScrollProps, "infiniteScrollOptions">;
const onOpenMessage = (messageId: string): void => {
dispatch(
InboxActions.createMessageActivity({
initiatingActivityId: activity.id,
messageId
})
);
};
return (
<StyledMessageListView
headingElements={...}
>
<ViewViews.OverviewEngineView
{...infiniteScrollOverviewEngineViewProps}
componentMap={customMobileComponentMap}
onDocumentClick={onOpenMessage}
/>
</StyledMessageListView>
);
};
But as it seems it’s not meant to work like this. @nam-secure-mesa called me with the suggestion to hook inside my data loader and try to make this one load the new data instead.