How to Display Images from File Tab to Salesforce App by using Aura Component?
What are Aura Components?
Aura components are a type of user interface framework used in Salesforce. They are built using the Aura framework, which is a collection of client-side technologies and server-side tools that help developers create dynamic web applications with a focus on performance and reusability.
Aura components are designed to be reusable building blocks for creating custom user interfaces in Salesforce. They can be used to create standalone web apps or as part of a larger Salesforce app. Aura components are modular and can be easily reused across different applications and projects, making them a powerful tool for developers.
Some of the key features of Aura components include a component-based architecture, an event-driven programming model, server-side and client-side caching, and support for various data formats and APIs. Aura components can also be easily customized with CSS and JavaScript to match the look and feel of the rest of your Salesforce app.
Overall, Aura components provide developers with a flexible and powerful way to create custom user interfaces in Salesforce that are both performant and reusable.
Don't forget to check out: Use Aura Component in Screen Flow | Salesforce Flow Builder Tutorial
How to Display Images from File Tab to Salesforce App?
Step1: Create component for displaying image
The first step is to create an Aura component that displays an image. The component has an attribute named "PictureId" that will hold the ID of the image. The image is displayed using an <img> tag with a source (src) attribute that concatenates the Salesforce content URL with the PictureId attribute value.
<aura:component controller="Galleryimage" implements="force:appHostable,flexipage:availableForAllPageTypes,flexipage:availableForRecordHome,force:hasRecordId,forceCommunity:availableForAllPageTypes,force:lightningQuickAction" access="global" > <aura:attribute name="PictureId" type="Id" default="" /> <img src="/sfc/servlet.shepherd/version/download/" + v. PictureId /> </aura:component>
Step 2: Creating Controller
The second step is to create a controller for the component. The controller uses the "doInit" function, which is called when the component is initialized. The "doInit" function makes an Apex server call to fetch the ID of the image from the "Galleryimage" Apex class. When the response is received, the "PictureId" attribute of the component is set to the ID of the image.
({
doInit : function(component, event, helper) {
var action = component.get("c.getId");
action.setCallback(this, function(response) {
var state = response.getState();
// if (state === "SUCCESS") {
var picture = response.getReturnValue();
// console.log("id", picture );
component.set("v.PictureId",picture);
});
$A.enqueueAction(action);
}
})
Step 3: Apex class for fetching Id of Images available in File
The third step is to create an Apex class named "Galleryimage" that will fetch the ID of images available in the File tab. The Apex class has a method named "getId" that returns a list of ContentVersion objects that have the ID of the images.
public class Galleryimage {
@Auraenabled
public static List<contentVersion> getId(){
List<contentVersion> picView=[Select Id from contentVersion];
return picView;
}
}
Check out another amazing blog by Rupesh here: How do you Add LWC Component to Action Button?
Conclusion
So, you can show images dynamically from the file tab by using the aura component. Above mentioned steps are necessary for getting the ids of images from file.
Responses