ACE with multiple quick views

Today I want to show a simple thing about ACEs and that is: how to register multiple quick views.

In this sample I’ll be using two buttons in the card view to open differents quick views.

Just a reminder before diving into the code: an ACE can be displayed in two sizes and those are medium and large. In the medium size only one button will be displayed, in the large size two buttons will be displayed.

Medium size

Large size

This sample contains two buttons so the ACE will be in the large size.

The result will be the following:

First quick view open

Second quick view open

Now let’s get down to code!

The code

First we need to create the two quick views and to do so we have to create, inside the folder quickView, the .ts files and inside the template folder the .json files that represents the views.

For this sample we will use the following structure:

This is a very basic sample so the .ts files and .json files are the same as the default ones and contains nothing more than the data and template methods.

The important part in this sample is: how to register multiple quick views?

The answer is that you can register each quick view in the onInit method inside the AceWithMultipleQuickViewAdaptiveCardExtension.ts file.

To register a quick view you can use the quickViewNavigator property:

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

To open the different quick view we can use a button for each one. In the card view footer we specified the two buttons:

footer: [
  {
    componentName: "cardButton",
    title: strings.FirstQuickViewButton,
    action: {
      type: "QuickView",
      parameters: {
        view: FIRST_QUICK_VIEW_REGISTRY_ID,
      },
    },
  },
  {
    componentName: "cardButton",
    title: strings.SecondQuickViewButton,
    action: {
      type: "QuickView",
      parameters: {
        view: SECOND_QUICK_VIEW_REGISTRY_ID,
      },
    },
  },
]

As you can see in the action.parameters.view of each button is specified the target quick view to be opened.

Et voilà, you now have an ACE with two different quick views! You can register more than two quick views and also navigate across them but I will cover that case in an another post.

Hope that helps!