ページの参照を使用してコンソールワークスペースタブとサブタブを開く
openTab() と openSubtab() を lightning:isUrlAddressible コンポーネントと共に使用して、カ���タム Aura コンポーネントを Lightning コンソールアプリケーションで開きます。
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:navigation aura:id="navService"/>
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 がサブタブとして開き、指定された名前と共に挨拶が表示されます。