S.B.S. Salesforce技術ブログ

教えて921さん!

リストエディターでテンキーを使いたい!

こんにちは、Nambuです。
今回はリストエディターでテンキーを使用する方法について説明していきたいと思います。なおこの記事で取り扱うリストエディターはListEditor非管理パッケージのバージョン2.43です。異なるバージョンやパッケージでは紹介する方法が使えないことがあるのでご注意ください。また、補足で書いたことはあくまで調べたことなので間違っていることがあります。

リストエディターとは

まず初めにリストエディターについて説明したいと思います。リストエディターはノンサポートながら無償で使える機能で、関連リストからレコードを一括編集できるようになります。リストエディターを使用するときは初めにインストールをします。次にリストエディターを配置したいオブジェクトのレコードページに移動し、歯車マークから編集ページをクリックします。次にコンポーネントからリストエディターを配置したい場所にドラッグして持っていき、リストエディターでどのオブジェクトの何の項目を表示したいかを設定したら完了です。

テンキーを考慮するタイミング

リストエディターを使ってレコードを編集する際にテンキーが使えないのは数値や通貨型の項目を入力するときです。テキスト型の項目に対しては何もしなくてもテンキーを使って入力することができます。また、数値や通貨型の項目に対してもキーボードがかな入力になっているとテンキーから入力することができ、ローマ字入力だと入力できません。

ローマ字入力の時でもテンキーから打てるようにする方法

それではどんな時でもテンキーを使って入力できるようにするにはどうすればよいでしょうか。方法は簡単です。設定のクイック検索にインストール済みパッケージと入力し、ListEditor非管理パッケージのコンポーネントを表示します。 f:id:sbsSF:20211115134932p:plain コンポーネント一覧の中からSF_EditInputCmpをクリックして開発者コンソールから編集します。 f:id:sbsSF:20211115134939p:plain 編集箇所はたったの一か所です。59行目に書かれている<div onkeydown="{!c.handleKeyUp }">を<div onkeypress="{!c.handleKeyUp }">に書き換えるだけです。 f:id:sbsSF:20211115134942p:plain f:id:sbsSF:20211116164234p:plain たったこれだけでテンキーがいつでも使えるようになるので、もし同じ悩みを持っていた人がいたら参考にしてみてください。

補足(onkeydownとonkeypress)

最後に書き換えたonkeydownとonkeypressについて少し説明したいと思います。Visualforce 開発者ガイド Salesforce Developersでは
onkeydown:onkeydown イベントが発生した場合 (ユーザがキーボードのキーを押した場合) に呼び出される JavaScript
onkeypress:onkeypress イベントが発生した場合 (ユーザがキーボードのキーを押したか、押したままにした場合) に呼び出される JavaScript
と書かれており、イベントの発生タイミングの違いしか分からず処理の違いまではよく分かりません。
そこで調べてみた所どうやらキーコードが関係する可能性が高いようです。キーボードから文字を入力したときにその情報は一旦キーコードの形で送られます。 javascriptにおいてキーコードを受け取るイベントにonkeydownとonkeypress、onkeyupがありますが、テンキーから入力した際のキーコードがonkeydownとonkeypressの2つでは異なる値になります。この仕様がリストエディターのApexコンポーネントでも関係しており、テンキーが使えないことにつながるのではと思います。