SPFx : ACE : Unable to get cached state

[anoopt]

Target SharePoint environment

SharePoint Online

What SharePoint development model, framework, SDK or API is this about?

💥 SharePoint Framework

Developer environment

No response

What browser(s) / client(s) have you tested

• [ ] 💥 Internet Explorer
• [ ] 💥 Microsoft Edge
• [ ] 💥 Google Chrome
• [ ] 💥 FireFox
• [ ] 💥 Safari
• [ ] mobile (iOS/iPadOS)
• [ ] mobile (Android)
• [X] not applicable
• [ ] other (enter in the "Additional environment details" area below)

Additional environment details

• SPFx version 1.14 / 1.14.0-beta.5

Describe the bug / error

As per the documentation, "we should be able to get the cached state of an ACE in onInit method so that we can determine if further logic needs to be executed."

This would be useful when we perform an async operation to get the initial state which might not change frequently (e.g. values from a termset).

After following the instructions in the documentation, I can see the state being cached

However, the value of cachedLoadParameters in the onInit method is always undefined.

Can you please confirm if that should not be the case?

Steps to reproduce

1. Please clone the repo here
   • Note - Although it is using packages related to 1.14.0-beta.5 the issue can be seen in 1.14.0
2. Run gulp serve
3. Add the ACE on to a page
4. For second page load onwards, I am expecting this line to show the cached value however that is not the case.

Expected behavior

For second page load onwards, I am expecting this line to show the cached value however that is not the case.

[ghost]

Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.

[dennisjsyi]

Hi @anoopt , sorry for the late reply. Looking at your code, it looks like cacheLoadParameters are empty. Which is odd considering your local storage contains the ACE cached state. Is this still reproducing?

[anoopt]

Hi @dennisjsyi in the latest SPFx version 1.15.2 I see that ICachedLoadParameters and ICacheSettings are excluded from @microsoft/sp-adaptive-card-extension-base package.

The release notes say that the caching functionality should be available in 1.16.

Is there any other way of testing this?

[AJIXuMuK]

@anoopt - as this is still a beta API you should use beta versions of SPFx. Currently it's 1.15.0-beta.6 which is a bit behind 1.15.2 in terms of available features.

We're working on the 1.16.0 beta to be released in a few weeks.

[ghost]

This issue has been automatically marked as stale because it has marked as requiring author feedback but has not had any activity for 7 days. It will be closed if no further activity occurs within the next 7 days of this comment. Please see our wiki for more information: Issue List Labels: Needs Author Feedback & Issue List: No response from the original issue author

[anoopt]

Thank you @AJIXuMuK . I'll wait for 1.16.0 beta and test this functionality.

[anoopt]

Hi @AJIXuMuK and @dennisjsyi . I can see that state is being cached in an ACE created with 1.16.0

However, on alternative page load the cache (cachedState) is getting cleared. Please find below the implementation. Can you please let me know if that is as per the documentation?

First page load Following page load

The above repeats.

import { BaseAdaptiveCardExtension, ICachedLoadParameters, ICacheSettings } from '@microsoft/sp-adaptive-card-extension-base';
import { isEmpty } from '@microsoft/sp-lodash-subset';
...
...
public onInit(cachedLoadParameters?: ICachedLoadParameters): Promise<void> {

    console.log("cache - onInit - %o", cachedLoadParameters);

    //Expecting this to be false for every page load after the first one
    if (isEmpty(cachedLoadParameters.state?.title)) {

      console.log("cache - state empty");

      this.state = {
        title: 'Setting from onInit'
      };
    }

    this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView());
    this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView());

    return Promise.resolve();
  }
protected getCacheSettings(): Partial<ICacheSettings> {
    return {
      isEnabled: true, // can be set to false to disable caching
      expiryTimeInSeconds: 86400, // controls how long until the cached card and state are stale
      cachedCardView: () => new CardView() // function that returns the custom Card view that will be used to generate the cached card
    };
  }

  protected getCachedState(state: IHw116AdaptiveCardExtensionState): Partial<IHw116AdaptiveCardExtensionState> {
    console.log("cache - getCachedState - %o", state);

    return { title: state.title };
  }
...
...