Microsoft Fabric では、マルチタスクを使用して複数のアイテムを同時に開くことができます。 アイテムを開くと、タブが左側のウィンドウにピン留めされます。 既定では、Fabric では一度に 1 つの項目を開く機能がサポートされています。 項目タブが初期化、非アクティブ化、および破棄されると、一連のライフサイクル イベントがトリガーされ、ワークロードに必要な作業はありません。
マルチタスキングの既定のプロパティを変更する
タブのプロパティを編集するために、アイテム マニフェスト内の editorTab セクションを定義します。
"editorTab": {
}
複数の項目を同時に開く機能を有効にする
maxInstanceCount プロパティを定義し、同時に開く項目の数を割り当てます (最大 10 項目):
"editorTab": {
"maxInstanceCount": "10"
}
アクションとハンドラーをカスタマイズする
タブ アクションとハンドラー (またはその一部) を実装する場合は、 editorTab セクションのアイテムのフロントエンド マニフェストでプロパティを設定する必要があります。 そのプロパティは、独自のコードでこれらのアクションをリッスンし、それに応じてアクションを処理し、結果を返します。 アクション (またはその一部) を設定しない場合、既定のアクションは自動的に処理されます。
[ 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"
}
ワークロード アクションを登録すると、Fabric は、その情報を読み取ったり表示したりできるように、特定の形式でデータを返すアクションを想定します。
/*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>;
タブ アクションの処理の例
この例では、 item.tab に関連するすべてのアクションをリッスンし、それに応じて各アクションを処理します。
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: ID を使用して項目データをフェッチし、項目のタイトルを返します。 -
item.tab.canDeactivate:{ canDeactivate: true }を返し、タブ間を簡単に切り替えることができます。 -
item.tab.onDeactivate、item.tab.onDestroy、item.tab.onDelete: これらのアクションの空のオブジェクトを返します。 -
item.tab.canDestroy:{ canDestroy: true }を返します。
関連コンテンツ
タブ アクションの処理の完全な例については、サンプル リポジトリのindex.ui.tsを参照してください。
item.tabで始まるアクションを検索します。