Formatear pestañas de multitarea

En Microsoft Fabric, puede usar la multitarea para abrir varios elementos al mismo tiempo. Al abrir un elemento, se ancla una pestaña al panel izquierdo. De forma predeterminada, Fabric admite la apertura de un elemento a la vez. Se desencadena un conjunto de eventos del ciclo de vida cuando la pestaña del artículo se inicializa, desactiva y destruye sin que se requiera trabajo por parte de ninguna carga de trabajo.

Cambio de las propiedades predeterminadas para la multitarea

Defina la editorTab sección dentro del manifiesto de elemento para editar las propiedades de la pestaña:

    "editorTab": {

    }

Habilitación de la apertura de más de un elemento al mismo tiempo

Defina la maxInstanceCount propiedad y asigne el número de elementos que desea abrir al mismo tiempo (hasta 20 elementos):

    "editorTab": {
      "maxInstanceCount": "20"
    }

Personalización de acciones y controladores

Cuando decida implementar acciones y controladores de pestañas (o parte de ellos), debe establecer una propiedad en el manifiesto de front-end del elemento en la editorTab sección. Esa propiedad escucha estas acciones en su propio código, controla las acciones en consecuencia y devuelve los resultados. Si no establece ninguna de las acciones (o parte de ellas), las acciones predeterminadas se controlan automáticamente.

Defina las propiedades para las acciones de pestaña en la sección editorTab.

    "editorTab": {
      "onInit": "item.tab.onInit",
      "onDeactivate": "item.tab.onDeactivate",
      "canDeactivate": "item.tab.canDeactivate",
      "canDestroy": "item.tab.canDestroy",
      "onDestroy": "item.tab.onDestroy",
      "onDelete": "item.tab.onDelete"
    }

Al registrar la acción de carga de trabajo, Fabric espera que la acción devuelva los datos en un formato determinado para que Fabric pueda leer o mostrar esa información:

   /*An OnInit event is triggered when the item is opened for the first
   time. This event contains the ID of the tab being initialized. Based on
   this tab ID, the handler needs to be able to return the display name
   or metadata.*/

   onInit: Action<never>;

   /*A CanDeactivate event is triggered when the user moves away from the tab.
   This event contains the ID of the tab being deactivated. The
   CanDeactivate handler should return a Boolean value that indicates whether
   the item tab can be deactivated. For an ideal multitasking experience,
   the handler should always return True.*/

   canDeactivate: Action<never>;

   /*An OnDeactivate event is triggered immediately after CanDeactivate
   returns True. This event contains the ID of the tab being deactivated.
   The OnDeactivate handler should cache unsaved item changes and
   the UI state.
   The next time the user goes back to the item, the item needs
   to be able to recover its data and UI state. The actual deactivation begins
   only when this handler returns.*/

   onDeactivate: Action<never>;

   /*A CanDestroy event is triggered after the close button is selected,
    before the item tab is closed. The event contains the ID of the tab
    being destroyed and also an allowInteraction parameter.
    The CanDeactivate handler should return a Boolean value that indicates
    whether the given item tab can be destroyed.
    If allowInteraction equals False, the implementation returns True
    if there are no dirty changes, and False otherwise.
    If allowInteraction equals True, a pop-up window can be used to ask
    for the user's opinion. It returns True if the user saves or discards
    dirty changes, and False if the user cancels the pop-up window.
    The OnDestroy handler gives the item the opportunity to do some
    cleanup work.*/

   canDestroy: Action<never>;

   /*An OnDestroy event is triggered when the tab is closed. The event
   contains the ID of the tab being destroyed. The OnDestroy handler gives
   the item the opportunity to do some cleanup work.*/

   onDestroy: Action<never>;

   /*An OnDelete event is triggered when the opened item is deleted.
   The event contains the ID of the item being deleted, just to tell
   the extension that the current item is deleted.*/

   onDelete: Action<never>;

Ejemplo de control de las acciones de pestaña

En este ejemplo se escuchan todas las acciones relacionadas con item.tab y se controla cada una de ellas en consecuencia:

workloadClient.action.onAction(async function ({ action, data }) {
    switch (action) {
        case 'item.tab.onInit':
            const { id } = data as ItemTabActionContext;
            try{
                const getItemResult = await callItemGet(
                    id,
                    workloadClient
                );
                const item = convertGetItemResultToWorkloadItem<ItemPayload(getItemResult);
                return {title: item.displayName};
            } catch (error) {
                console.error(
                    `Error loading the Item (object ID:${id})`,
                    error
                );
                return {};
            }
        case 'item.tab.canDeactivate':
            return { canDeactivate: true };
        case 'item.tab.onDeactivate':
            return {};
        case 'item.tab.canDestroy':
            return { canDestroy: true };
        case 'item.tab.onDestroy':
            return {};
        case 'item.tab.onDelete':
            return {};
        default:
            throw new Error('Unknown action received');
    }
});
  • item.tab.onInit: captura los datos del elemento mediante el identificador y devuelve el título del elemento.
  • item.tab.canDeactivate: devuelve { canDeactivate: true }, que permite cambiar entre pestañas fácilmente.
  • item.tab.onDeactivate, , item.tab.onDestroyitem.tab.onDelete: devuelve un objeto vacío para estas acciones.
  • item.tab.canDestroy: devuelve { canDestroy: true }.

Contenido relacionado

Para obtener un ejemplo completo de cómo controlar las acciones de pestaña, consulte index.ui.ts en el repositorio de ejemplo. Busque acciones que comiencen por item.tab.

  • Last updated on