<template> <lightning-layout-item> <h3 class="slds-text-heading_small slds-col slds-p-around_small brandColor"><b>Updated Communications Section</b></h3> <div class="slds-box"> <!-- Checking if there is data returned --> <template if:true={contact}> <!-- Creating a Lightning Accordion Section --> <lightning-accordion allow-multiple-sections-open class = "slds-accordion_communications"> <lightning-accordion-section label="Alternative billing name "> <!-- Creating a Lightning DataTable to view that Data Returned --> <lightning-datatable key-field="id" data={caseAccountContactData} columns={columns} hide-checkbox-column="true"> </lightning-datatable> </lightning-accordion-section> </lightning-accordion> <!-- Creating new fields and formatting it in a URL --> <p><lightning-formatted-url value={contact.strContactURL} label={contact.strMarketingConsent} target="_self"></lightning-formatted-url></p> <p><lightning-formatted-url value={contact.strContactURL} label={contact.strContactPrefs} target="_self"></lightning-formatted-url></p> <p><lightning-formatted-url value={contact.strContactURL} label={contact.strCommsPrefFormat} target="_self"></lightning-formatted-url></p> </template> <!-- Checking if there is no data returned --> <template if:false={contact}> <div> There is no Communication record.</div> </template> </div> </lightning-layout-item> </template>
Preview:
downloadDownload PNG
downloadDownload JPEG
downloadDownload SVG
Tip: You can change the style, width & colours of the snippet with the inspect tool before clicking Download!
Click to optimize width for Twitter