SharePoint 2013 Hosting – HostForLIFE :: How To Manage Navigation With ACE (Adaptive card extensions) In SPFx

Introduction

In this article, we will explain how we can create multiple views and navigate between multiple views (quick views and card views), or render/replace views based on conditions.

ACE Navigations:

• Every ACE has below navigation props:
  • cardNavigator
  • quickViewNavigator

• Thesee can be used in CardView and QuickView:
  • Register
  • Push
  • Pop
  • Replace
  • Read the current itemID

Scenario

In this example, we will call a graph API to fetch onedrive items. And, based on the result, we will create three card views. Based on the condition, we will render them.

So when we are calling any APIs there are multiple outcomes like records (number of records and no records found) and any error. So for this, we will create three card views. Based on that, we will render different card views.

In the end, our output will look like this:

For getting started with an Adaptive card extension in SPFx then refer to this.

Implementation
Open a command prompt.

Move to the path where you want to create a project.

Create a project directory using:

md folder-name

Move to the above-created directory using:

cd folder-name

Now execute the below command to create an SPFx solution:

yo @microsoft/sharepoint

It will ask some questions, as shown below:

After a successful installation, we can open a project in any source code tool. Here, I am using the VS code, so I will execute the command:

Now we will create a service, model, and typescript and JSON files for different views. So in the end, our project structure will look like this (here my solution name is graphApiAce):

Create a models folder inside ACE and create a file called IOnedriveItems.ts.

Now let’s create a service to get Onedrive Items using graph API. So for that, create the below files:

GraphService.ts

IGraphService.ts

Move to the GraphApiAceAdaptiveCardExtension.ts file.

Update states in onInit() as below,

Move to the ./quickView folder and create the below files.

ErrorMessageCardView.ts

In this, we will use an Error icon and text. The description will be based on our requirements.

NoRecordsCardView.ts

In this, we will use an Info icon and text. The description will be based on our requirements.

QuickView.ts

Update data() to set state values to render in JSON.

Move to the ./quickView/template folder.

Update QuickViewTemplate.json

• Update the data key with onedrive items state.
• We will render the name property with webUrl so it will update items and selectAction based on this.

Create ErrorMessageTemplate.json

Create NoRecordsTemplate.json