Funcionalidade de Exibição Rápida Avançada
Este tutorial compila o seguinte tutorial: Funcionalidade Avançada de Exibição de Cartão.
Inicie com a ACE HelloWorld do tutorial anterior: Funcionalidade Avançada de Exibição de Cartão. O ACE HelloWorld exibe a contagem do total de etapas ou uma etapa individual por vez. Usando a Visualização Rápida, o ACE pode mostrar uma lista de todas as etapas. Além disso, a ACE poderá mostrar mais detalhes sobre uma etapa específica se estiver selecionada.
Localize e abra o seguinte arquivo no seu projeto: ./src/adaptiveCardExtensions/helloWorld/quickView/QuickView.ts.
Atualize o código no arquivo QuickView.ts com as seguintes alterações:
import { IListItem } from '../HelloWorldAdaptiveCardExtension'; .. export interface IQuickViewData { items: IListItem[]; } .. public get data(): IQuickViewData { return { items: this.state.items }; }
Em seguida, localize e abra o arquivo src/adaptiveCardExtensions/helloWorld/quickView/template/QuickViewTemplate.json e substitua seu conteúdo pelo JSON a seguir. Isso atualizará o cartão de Visualização Rápida renderizado no ACE:
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.2", "body": [ { "type": "Container", "$data": "${items}", "selectAction": { "type": "Action.Submit", "data": { "id": "selectAction", "newIndex": "${index}" } }, "separator": true, "items": [ { "type": "TextBlock", "text": "${title}", "color": "dark", "weight": "Bolder", "size": "large", "wrap": true, "maxLines": 1, "spacing": "None" }, { "type": "TextBlock", "text": "${description}", "color": "dark", "wrap": true, "size": "medium", "maxLines": 1, "spacing": "None" } ] } ] }
Como você pode ver no modelo JSON, usamos o ${index} para passar o índice de item selecionado para a Exibição Rápida. Para permitir que isso funcione, devemos adicionar e preencher
index
aIListItem
propriedade do objeto definido no tutorial anterior. Abra e localize o arquivo ./src/adaptiveCardExtensions/helloWorld/HelloWorldAdaptiveCardExtension.ts, depois adicione a propriedadeindex
à definiçãoIListItem
:export interface IListItem { title: string; description: string; index: number; }
Depois localize o método
fetchData()
na mesma classe e modifique a função de mapa dentro dele, para:... .then((jsonResponse) => jsonResponse.value.map( (item, index) => { return { title: item.Title, description: item.Description, index: index }; }) ) ...
Compile e inicie o ACE no workbench hospedado:
gulp serve
Depois que o servidor Web local estiver em execução, navegue até o workbench hospedado: https://{tenant}.sharepoint.com/_layouts/15/workbench.aspx
Abra a Caixa de Ferramentas e selecione o ACE. Selecione o Cartão para abrir a Visualização Rápida:
Como o onAction()
manipulador não foi alterado para manipular o clique do item, selecionar em um item não faz nada. Você resolverá isso na próxima etapa.
Crie um novo arquivo para manter um novo cartão de Visualização Rápida: ./src/adaptiveCardExtensions/helloWorld/quickView/DetailedQuickViewTemplate.json.
Adicione o seguinte JSON ao arquivo DetailedQuickViewTemplate.json:
{ "$schema": "http://adaptivecards.io/schemas/adaptive-card.json", "type": "AdaptiveCard", "version": "1.2", "body": [ { "type": "ColumnSet", "columns": [ { "type": "Column", "items": [ { "type": "TextBlock", "text": "${title}", "size": "ExtraLarge" }, { "type": "TextBlock", "text": "${description}", "size": "Medium" } ] }, { "type": "Column", "style": "emphasis", "items": [ { "type": "TextBlock", "text": "${details}", "weight": "Lighter" } ] } ] }, { "type": "ActionSet", "actions": [ { "type": "Action.Submit", "title": "Back", "data": { "id": "back" } } ] } ] }
Crie um novo arquivo para implementar uma nova Visualização Rápida: ./src/adaptiveCardExtensions/helloWorld/quickView/DetailedQuickView.ts
Adicione o código a seguir ao arquivo DetailedQuickView.ts:
import { BaseAdaptiveCardView, IActionArguments, ISPFxAdaptiveCard } from '@microsoft/sp-adaptive-card-extension-base'; import { IHelloWorldAdaptiveCardExtensionProps, IHelloWorldAdaptiveCardExtensionState } from '../HelloWorldAdaptiveCardExtension'; export interface IDetailedViewData { title: string; description: string; details: string; } export class DetailedView extends BaseAdaptiveCardView< IHelloWorldAdaptiveCardExtensionProps, IHelloWorldAdaptiveCardExtensionState, IDetailedViewData > { public get data(): IDetailedViewData { const { description, title } = this.state.items[this.state.currentIndex]; return { description, title, details: 'More details' }; } public get template(): ISPFxAdaptiveCard { return require('./template/DetailedQuickViewTemplate.json'); } }
Com a nova Visualização Rápida detalhada criada, agora você precisa registrá-la com o ACE:
Localize e abra o seguinte arquivo em seu projeto: ./src/adaptiveCardExtensions/helloWorld/HelloWorldAdaptiveCardExtension.ts.
Modifique o código no arquivo HelloWorldAdaptiveCardExtension.ts com as seguintes alterações:
import { DetailedView } from './quickView/DetailedQuickView'; .. export const DETAILED_QUICK_VIEW_REGISTRY_ID: string = 'HelloWorld_DETAILED_QUICK_VIEW'; .. public onInit(): Promise<void> { // ... this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView()); this.quickViewNavigator.register(DETAILED_QUICK_VIEW_REGISTRY_ID, () => new DetailedView()); // ... }
Os cardNavigator
e quickViewNavigator
do ACE são instâncias de um ViewNavigator.
Os recursos ViewNavigator's vão além de apenas registrar novas Exibições. O ViewNavigator é uma API de gerenciamento de estado para as Visualizações de Cartão e Rápidas. À medida que as Exibições são criadas, elas são automaticamente enviadas por push para uma pilha de Exibição.
Os ACEs podem usar o ViewNavigator para manipular a pilha.
ViewNavigator.push()
: envia por push uma nova Exibição para a parte superior da pilha de Exibição.ViewNavigator.replace()
: substitui a Exibição superior por uma nova Exibição.ViewNavigator.pop()
: se houver mais de um Modo de Exibição, retira a Exibição superior da pilha Exibir.ViewNavigator.close()
: Fecha o modo de exibição atual e remove o modo de exibição superior da pilha de Exibições.
Atualize a Visualização Rápida para navegar entre modos de exibição:
Localize e abra o seguinte arquivo no seu projeto: ./src/adaptiveCardExtensions/helloWorld/quickView/QuickView.ts.
Atualize o código no arquivo QuickView.ts para manipular quando um item for selecionado na Visualização Rápida:
import { DETAILED_QUICK_VIEW_REGISTRY_ID } from '../HelloWorldAdaptiveCardExtension'; .. public onAction(action: IActionArguments): void { if (action.type === 'Submit') { const { id, newIndex } = action.data; if (id === 'selectAction') { this.quickViewNavigator.push(DETAILED_QUICK_VIEW_REGISTRY_ID, true); this.setState({ currentIndex: newIndex}); } } }
Localize e abra o seguinte arquivo no seu projeto: ./src/adaptiveCardExtensions/helloWorld/quickView/QuickView.ts
Atualize o código no arquivo DetailedQuickView.ts para Manipular quando o botão Voltar da Visualização Rápida Detalhada estiver selecionado:
public onAction(action: IActionArguments): void { if (action.type === 'Submit') { const { id } = action.data; if (id === 'back') { this.quickViewNavigator.pop(); } } }
Recarregue o workbench, selecione o Cartão para abrir a Visualização Rápida e selecione um item na Visualização Rápida.
Tente selecionar Voltar e selecionar outro item.
Quando uma ACE faz a transição de um RenderType para outro, o método onRenderTypeChanged()
é invocado com o RenderType; this.renderType
é atualizado neste ponto. Isso pode ser útil para qualquer tarefa a ser executada entre a transição.
Por exemplo, talvez você queira manter o estado do Cartão ao abrir a Visualização Rápida. Vamos implementar isso:
Localize e abra o seguinte arquivo em seu projeto: ./src/adaptiveCardExtensions/helloWorld/HelloWorldAdaptiveCardExtension.ts.
Atualize o código no arquivo HelloWorldAdaptiveCardExtension.ts para introduzir um membro privado que mantém o controle do índice anterior durante uma alteração RenderType:
import { RenderType } from '@microsoft/sp-adaptive-card-extension-base'; import { DetailedView } from './quickView/DetailedQuickView'; private _cardIndex: number; .. protected onRenderTypeChanged(oldRenderType: RenderType): void { if (oldRenderType === 'QuickView') { // Reset to the Card state when the Quick View was opened. this.setState({ currentIndex: this._cardIndex }); } else { // The Quick View is opened, save the current index. this._cardIndex = this.state.currentIndex; } }
Recarregue o workbench. Tente abrir e fechar a Visualização Rápida depois de clicar em itens diferentes. Observe que a Exibição do Cartão permanecerá no estado em que foi aberta.
Após este laboratório, você deve estar familiarizado com:
- Criar e registrar Visualizações Rápidas
- Usando o
ViewNavigator
para navegação - Manipular ações da Visualização Rápida
- Use
onRenderTypeChanged()
- Manipulação avançada da Visualização Rápida