Share via

Funcionalidade de Exibição Rápida Avançada

  • Artigo

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.

Mostrar todos os itens na Visualização Rápida

  1. Localize e abra o seguinte arquivo no seu projeto: ./src/adaptiveCardExtensions/helloWorld/quickView/QuickView.ts.

  2. 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
  };
}

  3. 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"
        }
      ]
    }
  ]
}

  4. 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 a IListItem propriedade do objeto definido no tutorial anterior. Abra e localize o arquivo ./src/adaptiveCardExtensions/helloWorld/HelloWorldAdaptiveCardExtension.ts, depois adicione a propriedade index à definição IListItem:

    export interface IListItem {
  title: string;
  description: string;
  index: number;
}

  5. 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:

Exibição rápida renderizada

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.

Criar uma nova visualização rápida

  1. Crie um novo arquivo para manter um novo cartão de Visualização Rápida: ./src/adaptiveCardExtensions/helloWorld/quickView/DetailedQuickViewTemplate.json.

  2. 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"
          }
        }
      ]
    }
  ]
}

  3. Crie um novo arquivo para implementar uma nova Visualização Rápida: ./src/adaptiveCardExtensions/helloWorld/quickView/DetailedQuickView.ts

  4. 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');
  }
}

Registrar a nova Visualização Rápida

Com a nova Visualização Rápida detalhada criada, agora você precisa registrá-la com o ACE:

  1. Localize e abra o seguinte arquivo em seu projeto: ./src/adaptiveCardExtensions/helloWorld/HelloWorldAdaptiveCardExtension.ts.

  2. 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());
  // ...
}

ViewNavigator

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:

  1. Localize e abra o seguinte arquivo no seu projeto: ./src/adaptiveCardExtensions/helloWorld/quickView/QuickView.ts.

  2. 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});
    }
  }
}

  3. Localize e abra o seguinte arquivo no seu projeto: ./src/adaptiveCardExtensions/helloWorld/quickView/QuickView.ts

  4. 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.

Selecionando um item na exibição rápida

Tente selecionar Voltar e selecionar outro item.

onRenderTypeChanged()

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:

  1. Localize e abra o seguinte arquivo em seu projeto: ./src/adaptiveCardExtensions/helloWorld/HelloWorldAdaptiveCardExtension.ts.

  2. 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.

Conclusão

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
  • UseonRenderTypeChanged()
  • Manipulação avançada da Visualização Rápida