2

LWC renders fine inside the Org, but just an empty lightning card on Communities. Have set the targets up for communtiies, community profile has acccess tot he Apex, they're apex enabled, CSP Trust is enabled for the callout to AWS, FLS and object perms correct cos they can see the record "natively". No errors in browser debug.

LWC just renders a list of RTF fields, nothing complex at all.

Apex controller

public without sharing class imageAttachmentController
{
    @AuraEnabled(cacheable=true)
    public static List<SObject> getImages(Id recordId, String objectName)
    {
        System.debug(recordId + ' - ' + objectName);
        List<SObject> images = new List<SObject>();
        
        if(recordId != null && objectName != null)
        {
            String objectType = recordId.getSObjectType().getDescribe().getName();
            if(objectType == 'WorkOrder')    //Work Order
            {
                String query = 'SELECT Image_RTF__c FROM ' + objectName + ' WHERE Work_Order__c = \'' + recordId + '\'';
                System.debug(query);
                images = Database.query(query);
            }
            else if(objectType == 'WorkOrderLineItem')   //Work Order Line Item
            {
                String query = 'SELECT Image_RTF__c FROM ' + objectName + ' WHERE Work_Order_Line_Item__c = \'' + recordId + '\'';
                System.debug(query);
                images = Database.query(query);
            }
        }
        return images;
    }
}

JS controller

import { LightningElement, wire, api, track } from 'lwc';
import getImages from '@salesforce/apex/imageAttachmentController.getImages';

export default class ImageAttachmentViewer extends LightningElement
{
    
    @api listType;
    @api recordId;

    listlabel;

    @wire(getImages, {recordId: '$recordId', objectName: '$listType'})
    images;

    connectedCallback()
    {
        console.log(this.listType);

        switch(this.listType)
        {
            case 'Work_Order_Attached_Image__c':
                this.listlabel = 'Work Order Images';
                break;
            case 'Work_Order_Item_Attached_Image__c':
                this.listlabel = 'Work Order Item Images';
                break;
            case 'Damage_Report_Attached_Image__c':
                this.listlabel = 'Damage Report Images';
                break;
            case 'Risk_Assessment_Attached_Image__c':
                this.listlabel = 'Risk Assessment Images';
                break;
            case 'Meter_Attached_Image__c':
                this.listlabel = 'Meter Images';
                break;
            case 'Meter_Reading_Attached_Image__c':
                this.listlabel = 'Meter Reading Images';
                break;
            case 'Work_Inspection_Form_Attached_Image__c':
                this.listlabel = 'Work Inspection Form Content Images';
                break;
            default:
                this.listlabel = 'Attached images';
        }
    }
}

Markup

<template>
    <lightning-card title={listlabel}>
        <ul class="slds-var-m-around_medium">
            <template for:each={images.data} for:item="image">
                    <li key={image.Id}>
                        <lightning-formatted-rich-text value={image.Image_RTF__c}></lightning-formatted-rich-text>
                    </li>
            </template>
        </ul>
    </lightning-card>
</template>

Meta

<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
    <apiVersion>49.0</apiVersion>
    <isExposed>true</isExposed>
    <targets>
        <target>lightning__RecordPage</target>
        <target>lightningCommunity__Page</target>
        <target>lightningCommunity__Default</target>
    </targets>
    <targetConfigs>
        <targetConfig targets="lightning__RecordPage">
            <property name="listType" type="String" datasource="apex://imageViewerDesignController" label="Related List Type"/>
        </targetConfig>
        <targetConfig targets="lightningCommunity__Default">
            <property name="listType" type="String" datasource="apex://imageViewerDesignController" label="Related List Type"/>
        </targetConfig>
    </targetConfigs>
</LightningComponentBundle>

Design Controller

global class imageViewerDesignController extends VisualEditor.DynamicPickList
{
    global override VisualEditor.DataRow getDefaultValue()
    {
        VisualEditor.DataRow defaultValue = new VisualEditor.DataRow('Work Order', 'WorkOrder');
        return defaultValue;
    }

    global override VisualEditor.DynamicPickListRows getValues()
    {
        VisualEditor.DataRow workOrderValue = new VisualEditor.DataRow('Work Order', 'Work_Order_Attached_Image__c');
        VisualEditor.DataRow workOrderItemValue = new VisualEditor.DataRow('Work Order Line Item', 'Work_Order_Item_Attached_Image__c');
        VisualEditor.DataRow meterValue = new VisualEditor.DataRow('Meter', 'Meter_Attached_Image__c');
        VisualEditor.DataRow meterReadingValue = new VisualEditor.DataRow('Meter Reading', 'Meter_Reading_Attached_Image__c');
        VisualEditor.DataRow workInspectionFormContentValue = new VisualEditor.DataRow('Work Inspection Form Content', 'Work_Inspection_Form_Attached_Image__c');
        VisualEditor.DataRow damageReportValue = new VisualEditor.DataRow('Damage Report', 'Damage_Report_Attached_Image__c');
        VisualEditor.DataRow riskAssessmentValue = new VisualEditor.DataRow('Risk Assessment', 'Risk_Assessment_Atttached_Image__c');

        VisualEditor.DynamicPickListRows  picklistValues = new VisualEditor.DynamicPickListRows();
        picklistValues.addRow(workOrderValue);
        picklistValues.addRow(workOrderItemValue);
        picklistValues.addRow(meterValue);
        picklistValues.addRow(meterReadingValue);
        picklistValues.addRow(workInspectionFormContentValue);
        picklistValues.addRow(damageReportValue);
        picklistValues.addRow(riskAssessmentValue);
        return picklistValues;

    }
}
14
  • 1
    Are you at least seeing the console.log from connectedCallback? Are listType and recordId being set correctly the same way in the community builder than in the internal record page? Did you publish the community after adding the component? I've forgotten to do that more than once and wondered where my changes are 😂
    – adriancg
    Dec 18 '20 at 13:36
  • Yes to all of those. Admin at client is the one with Prod access, so watching via screenshare, but seems to be covered. RecordId comes in automatically, doesn't it? Even if it doesn't, I've annotated with api so it should pick it up, certainly does in a non-COmmunity recordpage view
    – Rob Cowell
    Dec 18 '20 at 13:42
  • 1
    Can.you share the lwc meta file (the one with targetConfigs, etc. I can't remember the exact name) My next approach would be changing the wired property to a method so I can put a debugger and inspect the response to see if there's an error there. (Or put a trace on the community user to see if the apex is actually being run)
    – adriancg
    Dec 18 '20 at 13:51
  • Yes can we get your target configure? Dec 18 '20 at 13:57
  • Added - I know the targetconfigs can be combined into one now, but that shouldn't be the issue, right?
    – Rob Cowell
    Dec 18 '20 at 13:59
1

Posting as an answer for anyone stumbling onto this thread with a similar issue

Communities seems to work a little differently (as at Dec 2020) with regard to RecordID. It's not automatically provided, even if you specify it in your component with an @api tag. You need to explicitly mark it as a property in your .js-meta.xml in the targetConfig secttion, like so <property name="recordId" type="String" ></property>

Additionally, when adding your component to a record page for communities in Experience Builder, you will need to set this property to the value {!recordId} as shown below

enter image description here

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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