Currently in FSL mobile app, when a user uploads multiple pictures (e.g., 5 images) for a single work step, the only way I found is to view them is by navigating to the related Files section and opening each file one by one. However, this process is time-consuming and lacks an easy way to delete a picture if it looks bad or incorrect.
Is there a more efficient way to display all uploaded images for a single record in a unified view.
Does Salesforce offer any Lightning Web Components (LWCs) or standard features to achieve this, or would a custom solution be required? Any suggestions links to samples?
@Rimvydas Češkevičius, I've also added delete functionality. Please feel free to adjust it to suit your needs.
<template>
<lightning-card title="Image Gallery" icon-name="custom:custom63">
<template if:true={images}>
<div class="slds-grid slds-wrap">
<template for:each={images} for:item="image">
<div key={image.Id} class="slds-col slds-size_1-of-3 slds-p-around_small">
<lightning-card>
<img src={image.Url} alt={image.Title} data-recordid={image.Id} onclick={deleteImage} class="image"/>
<div class="slds-p-horizontal_small">
<p>{image.Description}</p>
</div>
</lightning-card>
</div>
</template>
</div>
</template>
<template if:false={images}>
<p>No images found.</p>
</template>
</lightning-card>
</template>
import { LightningElement, api, wire } from 'lwc';
import { ShowToastEvent } from 'lightning/platformShowToastEvent';
import { refreshApex } from '@salesforce/apex';
import getImages from '@salesforce/apex/ImageGalleryController.getImages';
import { deleteRecord } from 'lightning/uiRecordApi';
export default class ImageGallery extends LightningElement {
@api recordId = '';
wiredImagesResult;
images;
@wire(getImages, {recordId : '$recordId'})
wiredImages(result) {
this.wiredImagesResult = result;
const { data, error } = result;
if (data) {
this.images = data.map(image => ({
Id: image.contentDocumentId,
Title: image.title,
Description: image.description,
Url: image.versionDataUrl
}));
} else if (error) {
console.error('Error fetching images:', error);
this.images = null;
}
}
async deleteImage(event) {
const recordId = event.target.dataset.recordid;
try {
await deleteRecord(recordId);
this.dispatchEvent(
new ShowToastEvent({title: 'Success', message: 'Image is deleted!', variant: 'success'})
);
await refreshApex(this.wiredImagesResult);
} catch (error) {
console.error('Error deleting image:', error);
}
}
}