lightning:inputFieldに主従・参照項目を割り当て使用するときに気をつけた方がいいこと

Posted at 2019-02-01

lightning:inputFieldに主従・参照項目を割り当てて使う際に苦労したので
書き置きしておきます。

ちなみにwinter19の環境で確認しています。

確認に使うベースとなるコードはこちら

component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <aura:attribute name="recordId" type="Id" default="a0J7F00000Cf3f0UAB"/>
    <aura:attribute name="isReadOnly" type="Boolean" default="false" />
    
    <lightning:recordEditForm recordId="{!v.recordId}" objectApiName="TestObject__c">
        <lightning:inputField fieldName="ReferenceObject__c" disabled="{!v.isReadOnly}"/>
        <lightning:inputField fieldName="ParentObject__c" disabled="{!v.isReadOnly}"/>
     	<div class="slds-m-top_medium">
            <lightning:button disabled="{!v.disabled}" variant="brand" type="submit" name="save" label="Save" />
        </div>
    </lightning:recordEditForm>
    
</aura:component>

##使用する参照項目を標準のページレイアウトに含めないと機能しない。
まずページレイアウトに含めた状態から

入力フォーム

特に問題なく表示されています。

ではページレイアウトから参照項目を外します。
※主従項目は必須項目のため外せません。

入力フォームを確認すると…

入力欄に「Select an item」と表示され、
フォーカスをあててもテキストが打ち込めるのみで、
ルックアップの機能が使えなくなります。

####対策：lightning:inputFieldに割り当てた参照項目は、ページレイアウトに含める。(参照のみでも可)

#####参考

https://salesforce.stackexchange.com/questions/229323/lightningrecordform-with-lookup-to-account-object-does-not-work-bug-identifie/229328

##Enterキーを押すと、セットされている値がリセットあるいはセットされる。
冒頭のコードにテキスト項目を割り当てたlightning:inputFieldを追加しました。

component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <aura:attribute name="recordId" type="Id" default="a0J7F00000Cf3f0UAB"/>
    <aura:attribute name="isReadOnly" type="Boolean" default="false" />
    
    <lightning:recordEditForm recordId="{!v.recordId}" objectApiName="TestObject__c">
        <lightning:inputField fieldName="ReferenceObject__c" disabled="{!v.isReadOnly}"/>
        <lightning:inputField fieldName="ParentObject__c" disabled="{!v.isReadOnly}"/>
       <!--テキスト項目追加-->
        <lightning:inputField fieldName="Text__c" disabled="{v.isReadOnly}"/>
     	<div class="slds-m-top_medium">
            <lightning:button disabled="{!v.disabled}" variant="brand" type="submit" name="save" label="Save" />
        </div>
    </lightning:recordEditForm>
    
</aura:component>

テキスト項目にフォーカスをあて、Enterキーを押すとフォーカスが参照項目に移り、値がリセットされます。

####対策：該当箇所をspanタグで囲み、onkeydownでEnterキーを無効にする。

component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <aura:attribute name="recordId" type="Id" default="a0J7F00000Cf3f0UAB"/>
    <aura:attribute name="isReadOnly" type="Boolean" default="false" />
    
    <lightning:recordEditForm recordId="{!v.recordId}" objectApiName="TestObject__c">
        <span onkeydown="{!c.preventEnterKey}" >
            <lightning:inputField fieldName="ReferenceObject__c" disabled="{!v.isReadOnly}"/>
            <lightning:inputField fieldName="ParentObject__c" disabled="{!v.isReadOnly}"/>
           <!--テキスト項目追加-->
            <lightning:inputField fieldName="Text__c" disabled="{v.isReadOnly}"/>
            <div class="slds-m-top_medium">
                <lightning:button disabled="{!v.disabled}" variant="brand" type="submit" name="save" label="Save" />
            </div>
        </span>
    </lightning:recordEditForm>
    
</aura:component>

controller

{(
    preventEnterKey: function ( cmp, event, helper ) {
        if ( event.which === 13 ) {
            event.preventDefault();
        }
    },
})

#####参考

##disabledが効かない。
isReadOnlyのデフォルト値をtrueに設定して、入力フォームを確認

component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <aura:attribute name="recordId" type="Id" default="a0J7F00000Cf3f0UAB"/>
    <aura:attribute name="isReadOnly" type="Boolean" default="true" />
    
    <lightning:recordEditForm recordId="{!v.recordId}" objectApiName="TestObject__c">
            <lightning:inputField fieldName="ReferenceObject__c" disabled="{!v.isReadOnly}"/>
            <lightning:inputField fieldName="ParentObject__c" disabled="{!v.isReadOnly}"/>
            <div class="slds-m-top_medium">
                <lightning:button disabled="{!v.disabled}" variant="brand" type="submit" name="save" label="Save" />
            </div>
    </lightning:recordEditForm>
    
</aura:component>

disabledになっておらず、編集可能

####対策？：disabledっぽくするスタイルをあてる。

component

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId" access="global" >
    
    <aura:attribute name="recordId" type="Id" default="a0J7F00000Cf3f0UAB"/>
    <aura:attribute name="isReadOnly" type="Boolean" default="false" />
    
    <lightning:recordEditForm recordId="{!v.recordId}" objectApiName="TestObject__c">
        <lightning:inputField fieldName="ReferenceObject__c" class="custom-disabled" />
        <lightning:inputField fieldName="ParentObject__c" class="custom-disabled" />
        
        <div class="slds-m-top_medium">
            <lightning:button disabled="{!v.disabled}" variant="brand" type="submit" name="save" label="Save" />
        </div>
    </lightning:recordEditForm>
    
</aura:component>

style

.THIS {
    background: white;
}

.THIS .custom-disabled input {
    pointer-events: none;
    border: none;
}

.THIS .custom-disabled button {
    display: none;
}

見た目はこんな感じ

#####参考

##最後に
すでに修正済み、仕様として記載されているなど
確認漏れがありましたら、ご指摘ください。
またもっと良い方法があれば、コメントお願いします。
最後まで読んでいただきありがとうございました。

You get articles that match your needs
You can efficiently read back useful information
You can use dark theme

What you can do with signing up