2023.09.12

LWCとApexでカスタム住所項目における住所検索の弱点を補強

はじめに

みなさん、カスタム住所項目を使用されていますか?
Winter’23のリリースで、これまで標準項目しかなかった住所型がカスタム項目でも使用できるようになりました。
標準の住所型項目と同様に、Google住所検索から値の登録が可能であり、登録した値に地理位置情報が含まれるため、マップを表示させることもできます。

一方で、標準の住所型項目と異なる部分も多く存在するため、カスタム住所項目を使用するにあたり、操作感の違いや制限事項を考慮する必要があります。

特に、国、都道府県が選択リスト型になる点とGoogle住所検索から都道府県を自動登録できない点(2023/09時点)は、標準の住所型項目と大きく異なります。
また、都道府県は州名(ユーザに表示される名前)の五十音順で表示されるといった点も注意が必要です。

カスタム住所項目の要件と制限事項

Google住所検索から値を登録すると都道府県が登録されない

そこで今回はLWC(Lightning Web Component)を使用して住所検索画面を作成し、標準の住所項目の操作感で住所検索の結果を都道府県込みで自動登録する方法をご紹介したいと思います。

完成イメージ

本記事では、標準の住所項目のように住所を検索し、「登録」ボタンを押下して、カスタム住所項目( CustomAddressField__c)に都道府県込みの住所が登録されたCustomObject__cのレコードを新規作成するコンポーネントの完成を目標とします。

完成イメージ

コンポーネントの実装

まずはGoogle住所検索が可能なコンポーネントを実装しましょう。

「Google住所検索画面なんて、コンポーネントもロジックも複雑になりそう....」
そう思われるかもしれません。ご安心ください。すごく簡単です。

なぜなら、標準コンポーネントでGoogleの住所検索画面が提供されているからです。
標準コンポーネントの「lightning-input-address」を画面に配置し、「show-address-lookup」をtrueにしてください。
trueにすることで、住所のルックアップ検索が可能になります。
あとは、入力欄のラベルを変更すれば完成イメージのような画面を作成可能です。

公式リファレンス
<template>
    <lightning-card>
        <lightning-input-address
            show-address-lookup="true"
            address-lookup-placeholder="Google住所検索"
            address-label="カスタム住所"
            country-label="カスタム住所(国/テリトリー)"
            postal-code-label="カスタム住所(郵便番号)"
            province-label="カスタム住所(都道府県)"
            city-label="カスタム住所(市区町村)"
            street-label="カスタム住所(町名・番地)"
        ></lightning-input-address>
        <button onclick={sendAddress}>登録</button>
    </lightning-card>
</template>
entryCustomAddressFieldsComponent.html
JavaScriptでは検索結果をApexに引き渡す処理を書きます。
import { LightningElement } from 'lwc';
import CustomAddressFieldsComponent from '@Salesforce/apex/EntryCustomAddressFieldsController.entryCustomAddressFieldsController';

export default class InputAddressBase extends LightningElement {
    sendAddress(){
        const address = this.template.querySelector('lightning-input-address');
        const country = address.country;
        const postalCode = address.postalCode;
        const province = address.province;
        const city = address.city;
        const street = address.street;
        CustomAddressFieldsComponent({PostCode: postalCode, Country: country,State: province,City: city,Street: street})
    }
}
entryCustomAddressFieldsComponent.js

ロジックの実装

住所検索のロジックは標準コンポーネントで提供されているため、改めて作成する必要はありません。
しかし、カスタム住所項目の国と都道府県は選択リスト型のため、検索結果を選択リスト値に変換するロジックが必要になります。

具体的には、以下のようなロジックを作成します。
①州/国/テリトリー選択リストの州名、国/テリトリー名と州コード、国/テリトリーコードを取得。
②検索画面の入力値と州名、国/テリトリー名と州コードを突合し、対応する州コード、国/テリトリーコードを特定。
③カスタム住所項目を構成する各項目に入力値を代入し、都道府県と国は州コード、国/テリトリーコードを代入。
④レコードを新規作成。

※都道府県コード順に都道府県を並べるため、州名を「13 東京都」のように数字を入れる運用を行う場面も想定されますが、②にて、州名と検索結果を突合するため正確な都道府県名を登録してください。
public with sharing class EntryCustomAddressFieldsController {
    @AuraEnabled
    public static void entryCustomAddressFieldsController(String postCode,String country,String state,String city,String street){
          CustomObject__c co = new CustomObject__c();

           //①州/国/テリトリー選択リストの州名、国/テリトリー名と州コード、国/テリトリーコードを取得
           DescribeFieldResult countryCode = Schema.CustomObject__c.CustomAddressField__CountryCode__s.getDescribe();
           List<Schema.PicklistEntry> countryCodePle = countryCode.getPicklistValues();

           DescribeFieldResult stateCode = Schema.CustomObject__c.CustomAddressField__StateCode__s.getDescribe();
           List<Schema.PicklistEntry> stateCodePle = stateCode.getPicklistValues();

           //検索画面の入力値と州名、国/テリトリー名と州コードを突合し、対応する州コード、国/テリトリーコードを特定
           Map<String, String> countryCodeMap = new Map<String, String>();
           Map<String, String> stateCodeMap = new Map<String, String>();

           for( Schema.PicklistEntry f : countryCodePle){
                countryCodeMap.put(f.getLabel() , f.getValue());
           }

           for( Schema.PicklistEntry f : stateCodePle){
                stateCodeMap.put(f.getLabel() , f.getValue());
           }

            //③カスタム住所項目を構成する各項目に入力値を代入し、都道府県と国は州コード、国/テリトリーコードを代入
            co.CustomAddressField__PostalCode__s = postCode; //郵便番号
            co.CustomAddressField__CountryCode__s= countryCodeMap.get(country); //国/テリトリーコード
            co.CustomAddressField__StateCode__s= stateCodeMap.get(state); //州コード
            co.CustomAddressField__City__s = city; //市区郡
            co.CustomAddressField__Street__s= street; //町名・番地

            //④レコードを新規作成
            insert co;
    }
}
EntryCustomAddressFieldsController.cls

おわりに

いかがでしたでしょうか。

カスタム住所項目は標準の住所項目のように、マップ表示やGoogle住所検索、複数の項目を内包できるなどメリットの大きい項目型ですが、現時点では制限事項も多く存在します。

今回は入力面における制限事項にLWCで対応しました。
本記事がカスタム住所項目の制限事項に悩んでいる方の助けになれば幸いです。

最後までお読みいただき、ありがとうございました。
20 件
     
  • banner
  • banner

関連する記事