この文章は Salesforce 機械翻訳システムを使用して翻訳されました。詳細はこちらをご参照ください。

ページの参照を使用して Lightning でタブとサブタブを開く

ページの参照を使用して、タブおよびサブタブで直接 Lightning コンポーネントを開きます。

まず、greetings.cmp (lightning:isUrlAddressible を実装するコンポーネント) を作成してみましょう。

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    <aura:handler name="init" value="{! this }" action="{! c.init }"/>
4    <lightning:navigation aura:id="navService"/>
5    <lightning:button label="Open Greeting in Subtab" onclick="{!c.handleClick}"/>
6    <lightning:input label="Name" name="myname"
7</aura:component>

コントローラ openGreetingsController.js は openSubtab() を使用して、c__name を myname 入力項目の値に設定します。uid パラメータを使用すれば、条件に応じてタブおよびサブタブを重複排除できます。毎回新しいタブまたはサブタブを開くには、uid を省略します。

1({
2openSubtab: function(component, event, helper) {
3        var workspaceAPI = component.find("workspace");
4        workspaceAPI.openSubtab({
5            pageReference: {
6                // Lightning Components have a type of "standard__component"
7                "type": "standard__component",
8                "attributes": {
9                    "componentName":"c__greetings",
10                },
11                "state": {
12                    "uid": "1",
13                    "c__name": component.get("v.myName");
14                }
15            },
16            focus: true
17        }).then(function(response) {
18        workspaceAPI.getTabInfo({
19            tabId: response
20        }).then(function(tabInfo) {
21            console.log("The recordId for this tab is: " + tabInfo.recordId);
22        });
23        }).catch(function(error) {
24            console.log(error);
25        });
26    }
27)}

Salesforce コンソール開発者ガイド

ページの参照を使用して Lightning でタブとサブタブを開く