0

First time I post here, I tried to search for an existing answer but couldn't find one.

I'm not a proficient developer but I'm trying to set up a lightning component that will display a specific message in a module of my Lightning Page.

Issue here is that I want to display 2 fields values within my text message, but the fields create line breaks in my text:

Screenshot with line breaks

Here is the code:

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<lightning:card iconName="action:close" title="Warning">

    <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="Travaux__c">

        <div class="slds-p-left_large slds-p-right_medium slds-p-bottom_small">
            Client needs to deliver <lightning:outputField fieldName="Projets_artisan_signes__c" variant="label-hidden"/> projects, and answer <lightning:outputField fieldName="Projets_artisan_proposes__c" variant="label-hidden"/> proposals.
            <br/><br/>
            <b>Please reach out to your management for further processing</b>
        </div>

    </lightning:recordViewForm>

</lightning:card></aura:component>

I tried to lookup for attributes to lightning:OutputField, with no success. Anyone has any idea what I should change / use ?

Thanks !

Joachim

5
  • Have you tried removing the class in the div? I think the classes may be causing line breaks here.
    – Jayant Das
    Commented Nov 14, 2019 at 13:51
  • Hey @JayantDas, thanks for your answer! I tried removing the div class, but it just removes left, right and bottom spacings. I think the issue comes from the behavior of lightning:OutputField component, but I don't manage to either find the attribute to remove breaks, or work with another component.
    – Joachim
    Commented Nov 14, 2019 at 14:00
  • Have you tried adding the attribute class with custom CSS class you created that has the value of display: inline. This might work since the output of lightning:outputField is a <div> (block element) tag which requires it to take the whole line which forces it to wrap onto the next line. Commented Nov 14, 2019 at 14:14
  • 1
    Thanks @BryanAnderson for the tip. I didn't try this, but I just solved the issue with the same workaround as offered Shamina.
    – Joachim
    Commented Nov 14, 2019 at 14:34
  • @Joachim Good to know the workaround solved your issue, could you mark the answer as accepted then :)
    – Shamina
    Commented Nov 14, 2019 at 14:38

2 Answers 2

1

Welcome to SFSE.

Not sure lightning:outputField could be used in that way.

But a workaround is to use lightning:formattedText instead and you need force:recordData to fetch the record field values like this :

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="objRecord" type="Object"/>
<aura:attribute name="recordLoadError" type="String"/>

<force:recordData aura:id="recordLoader"
     recordId="{!v.recordId}"
     fields="Projets_artisan_signes__c,Projets_artisan_proposes__c"
     targetFields="{!v.objRecord}"
     targetError="{!v.recordLoadError}"
/>

  <lightning:card iconName="action:close" title="Warning">

    <div class="slds-p-left_large slds-p-right_medium slds-p-bottom_small">
          Client needs to deliver 
                <lightning:formattedText value="{!v.objRecord.Projets_artisan_signes__c}"/> projects, and answer 
                <lightning:formattedText value="{!v.objRecord.Projets_artisan_proposes__c}" /> proposals.
        <br/><br/>
        <b>Please reach out to your management for further processing</b>
    </div>                  
   </lightning:card>
</aura:component>

Check the doc here

1
  • 1
    Hey Shamina, I came back to say that I found the workaround, to see that you offered the solution I also found on my side. I did try to use the "lightning:formattedText" but within the "lightning:recordViewForm", and it didn't fetch anything. This workaround here works just fine. Thanks !
    – Joachim
    Commented Nov 14, 2019 at 14:38
1

A Simple Approach Using display:flex

 <lightning:recordViewForm recordId="{!v.recordId}" objectApiName="{!v.sObjectName}">
           <span style="display: flex"> 
                   <lightning:outputField style="display: inline" fieldName="Street" variant="label-hidden" />
           </span>
</lightning:recordViewForm>

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .