【Salesforce】2つのapex:inputfieldの値を連動させる方法

Apex

2020.04.17

こんにちは、にいるです

今回はJavaScriptを使用した2つのinputfieldの値を連動させる方法について、紹介したいと思います

・【ヘルプ】apex:inputfield

1.apex:inputfieldとは
2.2つの項目値を連動させる方法
3.まとめ

1.apex:inputfieldとは

apex:inputfieldとは、オブジェクトの項目を指定した入力コンポーネントを作成することができるタグです
こんな感じで書いておくと、自動でページ側で入力項目とその項目への紐付けをしてくれます

            <apex:pageBlockSection title="取引先責任者を登録してください">                
                <apex:inputField value="{! Contact.firstname}"/>

1 2	<apex:pageBlockSection title="取引先責任者を登録してください"> <apex:inputField value="{! Contact.firstname}"/>

上記のコードで下記のようなページを作成することができます

2.2つの項目値を連動させる方法

2つの項目値を連動させる方法の答えは、「VisualforceにJavaScriptを書くだけ」という簡単な結論なんですが、僕は結構調べました(笑)
JavaScriptが初めてだったので、お作法もわからないくらいの超初学者だったので

使用した関数はdocument.getElementById()です
これで指定した2つの項目Idを取得して.valueで代入し合うだけです！

コードはこんな感じです
上の値をを変えると下の値が変わり、下を変えると上も変わるというように2つの関数を作成します

項目値が変更されたらJavaScriptが稼働するようにinputfieldにonchangeを使用しています

    <apex:page id="pg" controller="JavaScriptTest">
        <apex:form id="fm">
            <apex:pageBlock id="pb" title="取引先">
                <apex:pageBlockSection id="pgs" title="取引先情報">
                    <apex:inputField id="name" value="{!acc.Name}"/>
                    <apex:inputField id="suuryou" value="{!acc.phone}"/>
                    <apex:inputField id="type1" value="{!acc.type}" onchange="acc1();"/>
                    <apex:inputField id="type2" value="{!acc.type}" onchange="acc2();"/>
                </apex:pageBlockSection>
            </apex:pageBlock>
            
            <script type="text/javascript">
            function acc1() {
                
                var type1 = '{!$Component.pb.pgs.type1}';
                var type1lkid = '{!$Component.pb.pgs.type1}_lkid';
                
                var type2 = '{!$Component.pb.pgs.type2}';
                var type2lkid = '{!$Component.pb.pgs.type2}_lkid';
                
                document.getElementById(type2).value = document.getElementById(type1).value;
                document.getElementById(type2lkid).value = document.getElementById(type1lkid).value;
                
            }
            function acc2() {
                
                var type2 = '{!$Component.pb.pgs.type2}';
                var type2lkid = '{!$Component.pb.pgs.type2}_lkid';
                
                var type1 = '{!$Component.pb.pgs.type1}';
                var type1lkid = '{!$Component.pb.pgs.type1}_lkid';
                
                document.getElementById(type1).value = document.getElementById(type2).value;
                document.getElementById(type1lkid).value = document.getElementById(type2lkid).value;
                
            }
            </script>
        </apex:form>
    </apex:page>

<apex:page id="pg" controller="JavaScriptTest">

<apex:form id="fm">

<apex:pageBlock id="pb" title="取引先">

<apex:pageBlockSection id="pgs" title="取引先情報">

<apex:inputField id="name" value="{!acc.Name}"/>

<apex:inputField id="suuryou" value="{!acc.phone}"/>

<apex:inputField id="type1" value="{!acc.type}" onchange="acc1();"/>

<apex:inputField id="type2" value="{!acc.type}" onchange="acc2();"/>

</apex:pageBlockSection>

</apex:pageBlock>

function acc1() {

var type1 = '{!$Component.pb.pgs.type1}';

var type1lkid = '{!$Component.pb.pgs.type1}_lkid';

var type2 = '{!$Component.pb.pgs.type2}';

var type2lkid = '{!$Component.pb.pgs.type2}_lkid';

document.getElementById(type2).value = document.getElementById(type1).value;

document.getElementById(type2lkid).value = document.getElementById(type1lkid).value;

}

function acc2() {

var type2 = '{!$Component.pb.pgs.type2}';

var type2lkid = '{!$Component.pb.pgs.type2}_lkid';

var type1 = '{!$Component.pb.pgs.type1}';

var type1lkid = '{!$Component.pb.pgs.type1}_lkid';

document.getElementById(type1).value = document.getElementById(type2).value;

document.getElementById(type1lkid).value = document.getElementById(type2lkid).value;

}

</script>

</apex:form>

</apex:page>

Apexクラスは簡単なコントローラにしています

public class JavaScriptTest {

    public Account acc {get; set;}
    
    public JavaScriptTest(){
    
        acc = [select Id,Name,Type,Phone,Industry from account limit 1];
        
    }
}

public class JavaScriptTest {

public Account acc {get; set;}

public JavaScriptTest(){

acc = [select Id,Name,Type,Phone,Industry from account limit 1];

}

【Salesforce】2つのapex:inputfieldで値を共有する方法

こんな感じの動きになっています

3.まとめ

いかがでしたでしょうか

今回、実務で使用することがあったので、連動方法を調べてみました

これだけITが発達しているので、ある程度のことはできるといつも思ってます

人に聞けばわかりますが、それは自分が考えた答えじゃないし誰かの時間を使ってますよね
それだといつまで経っても成長しないですよね

みなさんもぜひいろんなことにチャレンジしてみてください

他にも色々と標準機能やSalesforce機能について紹介していますので、ご覧ください

ではでは！