Salesforce コンソール開発者ガイド
jページの参照を使用してコンソールワークスペースタブとサブタブを開く
openTab() と openSubtab() を lightning:isUrlAddressible コンポーネントと共に使用して、カスタム Aura コンポーネントを Lightning コンソールアプリケーションで開きます。LWC では、別のページ種別に移動することはできますが、カスタムコンポーネントの URL をアドレス指定できるようにすることはできません。
LWC でのページの参照の使用
ページの参照を使用すると、タブやサブタブでさまざまなページ種別を開くことができます。次の例では、サブタブを開き、指定された PersonAccount レコードに関するビューページを表示します。
1import { LightningElement, wire} from 'lwc';
2import { EnclosingTabId, openSubtab } from 'lightning/platformWorkspaceApi';
3
4export default class MyComponent extends LightningElement {
5 @wire(EnclosingTabId) enclosingTabId;
6
7 openAnotherSubTab {
8 if (!this.enclosingTabId) {
9 return;
10 }
11 openSubtab(this.enclosingTabId, {
12 pageReference: {
13 type: 'standard__objectPage',
14 attributes: {
15 recordId: '001xx000003DGg0AAG',
16 objectApiName: 'PersonAccount',
17 actionName: 'view'
18 }
19 }
20 };
21 }
22}Aura コンポーネントでのページの参照の使用
lightning:isUrlAddressable は force:navigateToComponent を上回る次の利点をコンソールアプリケーションに提供します。
- アプリケーションが将来の URL 形式の変更に対応できます。
- タブのユーザーフレンドリーな URL を生成します。
- ユーティリティ、フロート表示、または別のページからコールされた場合でも Aura コンポーネントをサブタブとして開きます。
- uid パラメーターを使用して、条件に応じて特定のコンポーネントを複数回開いたり、すでに開いているワークスペースまたはサブタブにリダイレクトしたりするためのメカニズムを使用できます。
ワークスペースタブやサブタブを開くために使用できるページの参照を作成できるように、greetings.cmp を作成し、lightning:isUrlAddressible を実装しましょう。このコンポーネントには「Hello, <name>」が表示されます。この名前は、コンポーネントが開いたときに c__name URL パラメーターによって提供されます。コンポーネントでは、コンポーネントに移動するために使用できる pageReference も定義します。
1<aura:component implements="lightning:isUrlAddressable">
2 <aura:attribute name="name" type="String" description="The person that will be greeted" />
3 <aura:handler name="init" value="{!this}" action="{!c.init}" />
4 <aura:handler name="change" value="{!v.pageReference}" action="{!c.handlePageChange}" />
5 <h1>Greeting Page</h1>
6 <div>Hello, {!v.name}</div>
7</aura:component>JavaScript コントローラー greetingsController.js は、init メソッドで URL パラメーターを処理し、その URL パラメーターを使用して name 属性を割り当てます。
1({
2 init: function(cmp, evt, hlp) {
3 var myPageRef = cmp.get("v.pageReference");
4 var name = myPageRef && myPageRef.state ? myPageRef.state.c__name : "World";
5 cmp.set("v.name", name);
6 },
7 handlePageChange: function(cmp, evt, hlp) {
8 var myPageRef = cmp.get("v.pageReference");
9 var name = myPageRef && myPageRef.state ? myPageRef.state.c__name : "World";
10 cmp.set("v.name", name);
11 }
12})次に、greetings.cmp を開いたときに c__name URL パラメーターを設定する入力項目が含まれる openGreetings.cmp を作成しましょう。
1<aura:component>
2 <aura:attribute name="pageReference" type="Object"/>
3 <lightning:workspaceAPI aura:id="workspace"/>
4 <lightning:button label="Open Greeting in Subtab" onclick="{!c.openSubtab}"/>
5 <lightning:input label="Name" name="myname"/>
6</aura:component>コントローラー openGreetingsController.js は openSubtab() を使用して、c__name を myname 入力項目の値に設定します。uid パラメーターを使用すれば、条件に応じてタブおよびサブタブを重複排除できます。毎回新しいタブまたはサブタブを開くには、uid を省略します。
1({
2 openSubtab: function(component, event, helper) {
3 var workspaceAPI = component.find("workspace");
4 workspaceAPI.getEnclosingTabId().then(function(enclosingTabId) {
5 workspaceAPI.openSubtab({
6 parentTabId: enclosingTabId,
7 pageReference: {
8 "type": "standard__component",
9 "attributes": {
10 "componentName": "c__greetings"
11 },
12 "state": {
13 "uid": "1",
14 "c__name": component.get("v.myName")
15 }
16 }
17 }).then(function(subtabId) {
18 console.log("The new subtab ID is:" + subtabId);
19 }).catch(function(error) {
20 console.log("error");
21 });
22 });
23 }
24})すべての設定が完了したので、openGreetings.cmp の [設定] でカスタムタブを作成してコンポーネントをテストできます。カスタムタブをコンソールアプリケーションに追加し、コンソールアプリケーションを開きます。ナビゲーションメニューからカスタムタブを選択し、openGreetings.cmp を開きます。名前を入力して、[Open Greeting in Subtab (サブタブで挨拶を開く)] をクリックします。greetings.cmp がサブタブとして開き、指定された名前と共に挨拶が表示されます。