ACE and quick view navigation

Some time ago I showed how to register multiple quick views and to open them with a dedicated button, but what if you want to navigate across them?

The answer is: use the quickViewNavigator property!

First thing first: the result!

This is the ACE:

When the “Quick view” button is pressed the first quick view is loaded:

From the first step in our navigation you can proceed using the “Next” button or close the quick view using the “X” button in the top right corner. Using the next button will load the second quick view:

In this second step of our navigation one small detail changed, can you guess which? Yep, the “X” button changed into a back arrow! With that you can now navigate backward!

Continuing our navigation and pressing “Next” again the third and last quick view is loaded, here you can navigate backward or close the quick view and return to the card view.

The code

I’ve created a generic Adaptive Card Extension using the @microsoft/sharepoint Yeoman generator, once the solution was ready, inside the src/adaptiveCardExtensions/{my ACE name}/quickView I created three .ts files containing the code for the quick views, and also inside the folder template I created three .json files that represent the three quick views.

NB : This is a sample and I separated the three .ts files and also the .json files but for a real world application I would suggest, whenever is possible, to reuse the code instead of duplicate it.

To register the quick views you need to define, in the {your ACE name}AdaptiveCardExtension.ts file, a constant for each class that you want to use, in our case one for each quick view:

export const FIRST_QUICK_VIEW_REGISTRY_ID: string = "FirstQuickViewNavigation_QUICK_VIEW";

export const SECOND_QUICK_VIEW_REGISTRY_ID: string = "SecondQuickViewNavigation_QUICK_VIEW";

export const THIRD_QUICK_VIEW_REGISTRY_ID: string = "ThirdQuickViewNavigation_QUICK_VIEW";

And after that you have to register the quick views linking the constants to the class that represent the quick view:

this.quickViewNavigator.register(
  FIRST_QUICK_VIEW_REGISTRY_ID,
  () => new FirstQuickView()
);

this.quickViewNavigator.register(
  SECOND_QUICK_VIEW_REGISTRY_ID,
  () => new SecondQuickView()
);

this.quickViewNavigator.register(
  THIRD_QUICK_VIEW_REGISTRY_ID,
  () => new ThirdQuickView()
);

In the quick view .ts files the interesting part is the onAction method, where we handle the navigation using the quickViewNavigator property and passing the constant representing the quick view to navigate to, for example in the second step the code would be:

public onAction(action: IActionArguments): void {
  if (action.type === "Submit") {
    if (action.id === "next") {
   this.quickViewNavigator.push(THIRD_QUICK_VIEW_REGISTRY_ID);
    }
  }
}

Hint : If you want to navigate backward simply change the push method with the pop method.

To call the onAction method inside the quick view class we need to add an action button inside the .json file, keeping the second step as a sample, here is the action button inside the view template:

{
  "type": "ActionSet",
  "actions": [
    {
      "type": "Action.Submit",
      "title": "Next",
      "id": "next"
    }
  ]
}

NB : The action id property is the same used in the if of the onAction method.

And this is how to handle navigation between quick views in an ACE!

If you want to check the full code of this sample you can find it here on GitHub.

Hope that helps!