function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Tulasiram ChippalaTulasiram Chippala 

Displaying no data available in Lightning Web Components

I am using the below code and placed that component in the Home page using app builder. But it is displaying No Data available.
  
<template>
    <template if:true={contact}>
        <lightning-layout vertical-align="center">
            <lightning-layout-item padding="around-small">
                <p>{contact.Name}</p>
                <p>{contact.Title}</p>
                <p>
                    <lightning-formatted-phone
                        value={contact.Phone}
                    ></lightning-formatted-phone>
                </p>
            </lightning-layout-item>
        </lightning-layout>
    </template>
    <template if:false={contact}
        ><p>No contact data available.</p></template
    >
</template>

js code: 
import { LightningElement, api } from 'lwc';

export default class ContactTile extends LightningElement {
    @api contact;
    
}

xml: 
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
<apiVersion>45.0</apiVersion>
<isExposed>true</isExposed>
<targets>
<target>lightning__AppPage</target>
<target>lightning__RecordPage</target>
<target>lightning__HomePage</target>
</targets>
<targetConfigs>
<targetConfig targets="lightning__RecordPage">
<objects>
<object>contact</object>
</objects>
</targetConfig>
</targetConfigs>
</LightningComponentBundle>​​​​​​​

Where i am doing a mistake.User-added image​​​​​​​
Raj VakatiRaj Vakati
try like this
https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.data_wire_example
  
import { LightningElement, api, wire } from 'lwc';
import { getRecord } from 'lightning/uiRecordApi';
import CONTACT_NAME_FIELD from '@salesforce/schema/Contact.Name';

export default class ContactTile extends LightningElement {
    @api recordId;
  @wire(getRecord, { recordId: '$recordId', fields: [CONTACT_NAME_FIELD] })
    record;
	
	
}
  
<template>
    <lightning-card title="Wire Function" icon-name="standard:contact">
        <template if:true={record.data}>
            <div class="slds-m-around_medium">
                <p>{name}</p>
            </div>
        </template>
		    <template if:false={record.data}
No Data 
			</template>
	
    </lightning-card>
</template>

 
Khan AnasKhan Anas (Salesforce Developers) 
Hi Ram,

Greetings to you!

To get the data, you need to use the getRecord wire adapter. Please refer to the below links which might help you further with the above requirement.

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.data_wire_example

https://medium.com/@tempflip/wiring-up-lightning-web-components-26b1c00d247d

https://sfdccoder.wordpress.com/2019/02/21/lightning-web-component-load-contacts-list-example/

I hope it helps you.

Kindly let me know if it helps you and close your query by marking it as solved so that it can help others in the future. It will help to keep this community clean.

Thanks and Regards,
Khan Anas
{tushar-sharma}{tushar-sharma}
As suggest earlier you can use wire to call apex or can use LDS too.

  
<template>
    <lightning-card title="Record Edit Form Contact" icon-name="standard:contact">

        <div class="slds-m-around_medium">
   
            <lightning-record-edit-form
                object-api-name="Contact"
                record-id="recordId">
                <lightning-messages></lightning-messages>
                <lightning-input-field field-name="Name"></lightning-input-field>
                <lightning-input-field field-name="Title"></lightning-input-field>
                <lightning-input-field field-name="Phone"></lightning-input-field>
                <lightning-input-field field-name="Email"></lightning-input-field>
                <div class="slds-m-top_medium">
                    <lightning-button variant="brand" type="submit" name="save" label="Save"></lightning-button>
                </div>
            </lightning-record-edit-form>

        </div>

    </lightning-card>
</template>

You can use lightning-record-form, lightning-record-edit-form, or lightning-record-view-form components.

You can check more details here.

https://newstechnologystuff.com/2018/12/16/lightning-web-component-the-new-development-style/

https://developer.salesforce.com/docs/component-library/documentation/lwc/lwc.data_ui_api

Thanks
Tushar
https://newstechnologystuff.com/