1

I am creating LSDS modal to create a Task so I have an attribute of "Task" in component and using to bind the fields of Task. When I run lightning component using Lightning Application then it shows the task fields as Input but when I add my component in Lightning Experience by putting component on Home component then its showing Blank area not the fields as input.

<aura:attribute name="newTask" type="Task" description="new Task Object" default="{'sobjectType':'Task','TaskSubtype':'Task', 'Subject':'Call'}" access="GLOBAL"/>
<div class="wk_static">    
    <div role="dialog" tabindex="-1" aura:id="Modalbox" aria-labelledby="header43" class="slds-modal ">
        <div class="slds-modal__container">         
            <div class="slds-modal__header">                    
                <h2 id="header43" class="slds-text-heading--small" style="margin:0">Log A Call</h2>
            </div>
            <div class="slds-modal__content slds-p-around--small">
                <div class="slds-grid slds-wrap">                        
                    <div class="slds-size--1-of-2">
                        <div class="slds-form-element">
                            <label class="slds-form-element__label" for="subject">Subject</label>
                            <div class="slds-form-element__control">

                                <force:inputField aura:id="subject" value="{!v.newTask.Subject}"/>
                            </div>
                        </div>
                    </div>
                    <force:inputField aura:id="subject" value="{!v.newTask.WhoId}"/>
                </div>

            </div>
            <div class="slds-modal__footer">
                <button class="slds-button slds-button--neutral" onclick="{!c.removecssAndSave}" style="height: 30px;">Save</button>
                <button class="slds-button slds-button--neutral" onclick="{!c.removecss}" style="height: 30px;">Close</button>
            </div>
        </div>
    </div>
    <div class="slds-backdrop " aura:id="MB-Back"></div>

</div>

marked as duplicate by glls, Santanu Boral, Eric, Markus Slabina, Himanshu Aug 20 '17 at 16:28

This question has been asked before and already has an answer. If those answers do not fully address your question, please ask a new question.

  • Have the same problem. – Yury Bondarau Jul 4 '17 at 11:34
  • I don't think it's a duplicate, since the marked answer refers to the Known Issue W-3342864 which is not accessible anymore (assumption: it's fixed) and you can't find it via search: success.salesforce.com/issues_index?keywords=force%3AinputField - Either it's the same issue again, or it was wrongly closed by Salesforce or it's something else. Not easy to say duplicate or not, even if it sounds similar – Uwe Heim Aug 19 '17 at 9:53
0

Put the first div of your component as:

<div class="slds">
  • Thanks for response but unfortunately that's not working – Imran Qureshi Dec 21 '16 at 7:31
  • can you share the whole component markup? – Itai Shmida Dec 21 '16 at 7:40
0

There is an important thing to note when using force:inputField. It will only work if it is directly under the aura:component tag. There is a workaround for this though.

First, this knowledge article. https://success.salesforce.com/issues_view?id=a1p3A0000008gDzQAI

And a workaround solution here: Unable to get force:inputField or force:outputField to render inside other markup in Lightning Component when used in Lightning Experience

In case that link quits working.. Here is the workaround that Charles Naccio posted that he was using as of Summer '17. I have used this type of workaround myself and I can confirm it does work.

<!-- component setup -->
<aura:handler name="init" value="{!this}" action="{!c.onInit}"/>
<aura:attribute name="newContractLine" type="Contract_Line__c" default="{'sobjectType': 'Contract_Line__c'}" />
<!-- end component setup -->

<!-- workaround for form fields below -->
<force:outputField aura:id="contractType" value="{!v.newContractLine.Type__c}" class="slds-hidden" />
<!-- end workaround -->

<!-- contract line form -->
<lightning:layout horizontalAlign="spread" multipleRows="true">

    <!-- type -->
    <lightning:layoutItem size="6" class="slds-p-horizontal--small">
        <ui:outputText class="slds-form-element--label" value="Type"/>
        <force:inputField aura:id="typeInput" value="{!v.newContractLine.Type__c}"/>
    </lightning:layoutItem>
    <!-- end type -->

</lightning:layout>
<!-- end contract line form -->

Not the answer you're looking for? Browse other questions tagged or ask your own question.