Skip to content

Latest commit

 

History

History
264 lines (211 loc) · 6.37 KB

Lightning Web ComponentでURLにParameterを追加する方法解説.md

File metadata and controls

264 lines (211 loc) · 6.37 KB

概要

Lightning Web Componentで開発してる際、任意のsalesforce上のサイトにparameterを追加してnavigationしたい状況があり、実装したのでメモ

ソース1（非推奨）

  • 成功するソース
<template>
    <div>
        <a href='https://環境コード.lightning.force.com/lightning/page/home?c__flag=0'>move</a>
    </div>
</template>
  • 失敗するソース
<template>
    <div>
        <a href='https://環境コード.lightning.force.com/lightning/page/home?flag=0'>move</a>
    </div>
</template>

ソース2（推奨）

  • 成功するソース
<!-- sample.html -->
<template>
    <div>
        <a href={url} onclick={handleClick}>move</a>
    </div>
</template>
//sample.js
import { LightningElement, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class Data_send_to_component_parent extends NavigationMixin(LightningElement) {
    @track url;
    PageRef;

    connectedCallback() {
        this.PageRef = {
            type: 'standard__namedPage',
            attributes: {
                pageName: 'home'
            },
            state: {
                c__flag: '0'
            }
        };
        this[NavigationMixin.GenerateUrl](this.PageRef)
            .then(url => { this.url = url });
    }

    handleClick(evt) {
        evt.preventDefault();
        evt.stopPropagation();
        this[NavigationMixin.Navigate](this.PageRef, true);
    }
}
  • 失敗するソース
<!-- sample.html -->
<template>
    <div>
        <a href={url} onclick={handleClick}>move</a>
    </div>
</template>
//sample.js
import { LightningElement, track } from 'lwc';
import { NavigationMixin } from 'lightning/navigation';

export default class Data_send_to_component_parent extends NavigationMixin(LightningElement) {
    @track url;
    PageRef;

    connectedCallback() {
        this.PageRef = {
            type: 'standard__namedPage',
            attributes: {
                pageName: 'home'
            },
            state: {
                flag: '0'
            }
        };
        this[NavigationMixin.GenerateUrl](this.PageRef)
            .then(url => { this.url = url });
    }

    handleClick(evt) {
        evt.preventDefault();
        evt.stopPropagation();
        this[NavigationMixin.Navigate](this.PageRef, true);
    }
}

ソース1解説

ザ・ハードコーディング navigationを使おう

ソース2解説

  1. lightning/navigationをインポートする。ここでは、NavigationMixinとして設定

  2. インポートしたNavigationMixin関数をコンポーネントの基本クラスに適用

  3. 遷移先のURLをthisNavigationMixin.GenerateUrlで作成する この時、thisNavigationMixin.GenerateUrlは、Promiseを返すので、thenメソッドでurlを受け取りtrackプロパティなどに格納してhtmlに渡すなどする。

  4. onclickなどでfireした際のnavigationはthis[NavigationMixin.Navigate](this.PageRef, true)で行う。

ナビゲーションするページ

this.pageRefで設定したページに飛ぶがtypeがいくつかあるので、遷移するURL別で紹介する。

  • /cmp/{componentName}
{
    type:"standard__component",
    attributes:{
        componentName:"c__MyLightningComponent"
    }
}
  • /articles/{articleType}/{urlName}
{
    type: "standard__knowledgeArticlePage",
    attributes: {
        articleType: "Briefings",
        urlName: "February-2017"
    }
}

  • /page/{pageName} ページの名前はこの様なものがある

    • home
    • chatter
    • today
    • dataAssessment
    • filePreview
{
    type: "standard__namedPage",
    attributes: {
        pageName: "home"
    }
}
{
    type: "standard__namedPage",
    attributes: {
        pageName: "chatter"
    }
}
  • /n/{devName}
{
    type: "standard__navItemPage",
    attributes: {
        apiName: "MyCustomTabName"
    }
}
  • /o/{objectApiName}/{actionName}
{
    type: "standard__objectPage",
    attributes: {
        objectApiName: "Account",
        actionName: "list"
    }
}
  • /r/{objectApiName}/{recordId}/{actionName}
  • /r/{recordId}/{actionName}
{
       type: "standard__recordPage",
       attributes: {
           recordId: "001xx000003DGg0AAG",
           objectApiName: "PersonAccount",
           actionName: "view"
       }
}
  • /r/{objectApiName}/{recordId}/related/{relationshipApiName}/{actionName}
  • /r/{recordId}/related/{relationshipApiName}/{actionName}
{
    type: "standard__recordRelationshipPage",
    attributes: {
        recordId: "500xx000000Ykt4AAC",
        objectApiName: "Case",
        relationshipApiName: "CaseComments",
        actionName: "view"
    }
}

結論

c__を付ければparameterとして認識する parameterの値はstringでないと認識しない

（追記）付加されたQuery Parameterを取得する方法

connectedCallback() {
    const param = 'c__flag';
    const paramValue = this.getUrlParamValue(window.location.hrefwindow.location.href, param);
}

getUrlParamValue(url, key) {
    return new URL(url).searchParams.get(key);
}

image.png

とすると、この様に取得することができる。 調べた限りこれが一番簡単なParameterを取得する方法かなと思うが、もし他の良い方法があれば教えて欲しいです。

参考になるサイト