How to Properly Refresh a Page on Side Drawer Navigation in SAP MDK

[AnnoelSkaria]

Hi everyone,

I am working on a Mobile Development Kit (MDK) project, and I need some guidance on refreshing a page when navigating via the side drawer.

Here's the scenario: I want the target page to refresh automatically when a user selects a page from the side drawer. I tried adding a refresh action in the OnSuccess event of the NavigationAction. However, this seems to refresh the previous page (the one before navigation), not the target page.

The strange part is that this same approach works for other navigations (like selecting an entry in an Object Table), but it doesn’t seem to work for the side drawer navigation. Has anyone faced this issue or found a solution for refreshing the target page on side drawer navigation?

Any suggestions or alternatives to get this working would be greatly appreciated.

Thanks in advance!

Here’s the code I’m using to refresh the page:

export default function Refresh_page(clientAPI) {
  var page = clientAPI.getPageProxy();
  var mypage = '#Page:' + page._page.id
  alert(mypage)
  clientAPI.evaluateTargetPath(mypage).redraw();
  
  return;
}

[bill_froelich]

I am having trouble visualizing your use case here. Can you provide more details on how you have this setup? Maybe some screenshots of how the flow goes?

[AnnoelSkaria]

Hi Bill, I can provide more details and screenshots to explain my use case, which will help you understand it better. I have a page called 'Delivery List,' which is my first page and triggers all the related functions during the page load. On this page, I have a count and a log icon, both of which should update dynamically whenever there is a change in the item count or any error logs. This works fine on the Delivery page, but it’s not updating on the Customer page. I tried using data subscriptions and added the entity, but the Customer page(Inactive Page) is still not refreshing when the entity changes. As an alternative, I found that navigating to a new page and refreshing it upon opening causes all mapped rules to be recalled and updates the UI accordingly (e.g., the count and the log icon color changing to red when a log is present). This approach works fine for all pages where I use a redraw on successful navigation, except for the 'Customer List' and 'Delivery List.' Here, navigation happens via the side drawer, and the previous page is refreshed. For example, when navigating from the Customer page to the Delivery page, the Customer page gets refreshed. Ideally, the Delivery page should be refreshed to update the rules and UI. Because of this, even though the count is 0, the UI is not updating. I’ve attached a screenshot which will help explain this better.

[bill_froelich]

The thing to remember is that each drawer is it's own navigation stack. Meaning if you open Customers and then go back to Deliveries when you come back to Customers it isn't really navigating to the page. The page was still "open" in memory and it is switching back to the drawer stack. This is observed if you navigate to a customer detail page for example and then switch to Deliveries and then back you will still be on the Customer Detail page.  You can change this by setting ClearHistory to true which forces the drawer to reload back to the starting point when switching .  It will depend on your use case and desired behaviors.

[AnnoelSkaria]

I've tried using clear history true and closing the page on unload, which should reload the page when opened the next time , but it's still not refreshing the new page

[bill_froelich]

You can't close the page since it is the root page of the nav stack the close would be ignored. Clear history should always start back at the root but I am not sure if it reloads the page or not. I'll have to try it out when I have some time to expirement

[AnnoelSkaria]

Hi Bill, I tried using ClearHistory on the side drawer navigation, but it’s not refreshing the page. Is there any other approach to fulfill the use case? Specifically, any changes made on the DeliveryList (CRUD) page should refresh the Customer page, and vice versa. Additionally, any captured error logs should trigger a UI update on both the Delivery and Customer pages. I also tried using TargetPath, but it returns 'undefined' when the page is not currently active.

[bill_froelich]

I setup a test an using Clear History when you switch drawers from the side drawer menu the drawer stack is reset and the page re-renders updating as expected to the new values.

[AnnoelSkaria]

Hi Bill, thank you for taking the time to test this. Could you please provide more detailed steps or an explanation of how you achieved this? I want to ensure that I am following the right process on my end. I’ve also added clearHistory: true in the navigation, but it doesn’t seem to be working as expected. Any insights you can share would be appreciated