Viva Connections IV: Navegar entre vistas en QuickView

Artículos anteriores


Ya hemos visto como las CardView son bastante restrictivas en cuanto a personalizaciones y las QuickView nos permiten aplicar nuestra propia Adaptive Card. Pero es posible tambien interactuar en esta Adaptive Card y navegar entre varias vistas (Por ejemplo, una vista de formulario, otra del progreso cuando lo enviamos y una vista final que nos mostrará si se ha enviado correctamente o no). Los pasos a seguir son:

Crear una nueva QuickView

En nuestra solución debemos crear una nueva QuickView (que podemos copiar de la que ya tenemos creada por defecto). Si queremos utilizar un template en un fichero JSON debemos crearlo tambien dentro de la carpeta templates (para mantener el orden en la solución), aunque también podemos mantenerlo dentro del metodo template() descrito en el artículo anterior sobre QuickViews. Nuestro fichero podría quedar así:

import { ISPFxAdaptiveCard, BaseAdaptiveCardView, IActionArguments } from '@microsoft/sp-adaptive-card-extension-base';
import { IMyAdaptiveCardExtensionProps, IMyAdaptiveCardExtensionState } from '../MyAdaptiveCardExtension';

export interface ISecondStepViewData {
  title: string;
}

export class SecondStepView extends BaseAdaptiveCardView<
  IMyNextEventAdaptiveCardExtensionProps,
  IMyNextEventAdaptiveCardExtensionState,
  ISecondStepViewData 
> {
  public get data(): ISecondStepViewData {
    return {
      title: 'Title 2'
    };
  }

  public get template(): ISPFxAdaptiveCard {
    return require('./template/SecondStepTemplate.json');
  }

  public onAction(action: IActionArguments): void {
    if (action.type === 'Submit') {
      const { id } = action.data;
      switch (id) {
        case 'secondstep':
          break;
      }
    }
  }
}

Registrar la nueva QuickView

En sgundo lugar debemos declarar y registrar la nueva vista en nuestra Adaptive Card Extension. Para ello iremos al fichero principal de la extension, donde ya tenemos registradas las dos vistas existentes (CardView y QuickView) y añadiremos primero una nueva línea donde declaramos el ID para la nueva vista:

const CARD_VIEW_REGISTRY_ID: string = 'MyTest_CARD_VIEW';
export const QUICK_VIEW_REGISTRY_ID: string = 'MyTest_QUICK_VIEW';
export const SECOND_STEP_REGISTRY_ID: string = 'MyTest_SECONDSTEP_QUICK_VIEW';

Y registraremos este nuevo ID en el QuickView Navigator:

this.cardNavigator.register(CARD_VIEW_REGISTRY_ID, () => new CardView());
this.quickViewNavigator.register(QUICK_VIEW_REGISTRY_ID, () => new QuickView());
this.quickViewNavigator.register(SECOND_STEP_REGISTRY_ID, () => new SecondStepView());

Navegar entre vistas

Por último debemos incluir la navegación dentro de nuestro QuickView principal. Para ello debemos hacer un push de la nueva vista al hacer click en el botón que hayamos preparado para ello. Nuestro método onAction quedaría de la siguiente manera:

public onAction(action: IActionArguments): void {
    if (action.type === 'Submit') {
      const { id } = action.data;
      switch (id) {
        case 'secondStep':
          this.quickViewNavigator.push(SECOND_STEP_REGISTRY_ID);
          break;
      }
    }
  }

Al navegar a la segunda vista, aparecerá automáticamente una flecha para regresar a la vista anterior.

A partir de este punto podemos empezar a jugar con las vistas, que se ordenan en una pila del tipo “last-in first-out“:

  • push(): Añadira una nueva vista sobre las existentes.
  • pop(): Eliminará la última vista añadida.
  • replace(): Reemplazará la última vista añadida por la nueva que seleccionemos.

Podéis encontrar mas información aquí: https://docs.microsoft.com/en-us/sharepoint/dev/spfx/viva/get-started/advanced-quick-view-functionality

No Responses

Leave a Reply

Your email address will not be published.