Hello, everyone!
I've stumbled upon a request from a client who wants his product images (from the attached files) to be shown to whoever is viewing the product in a tab "Images" from said product.
I've created the tab without any trouble and associated the "Gallery" component to it, linking the "Uploaded file" (SysFiles) with the correct data souce filter (id from my record = "Record ID" from Uploaded file). It just shows me a picture of a camera..
Inside the "SysFile" object, the only options I have as to "fileType" are "File", "Link" and "Link to object"... Should there be a "jpg" or something like that for the image to be shown there?
---
What other solution is there for it to be displayed?
I've searched that on classic UI that was possible, but saw no proof of how it was done.
Btw, i'm on version 8.2.0.4183.
Hope yall can help me.
Thanks!
Like
Hello,
Unfortunately, the "SysFile" object is not suitable for use as an image source for the gallery, as it lacks some key image-related settings.
However, if the images are simple, this can be achieved using "handlers".
The main works to be done:
1. Configure a filter for the gallery to ignore invalid files.
In the example, display only files whose names end with ".png".
2. Populate the "image" property in "templateValuesMapping" within the gallery settings in the metadata.
In the designer, this field should be empty.
Let's take this one as example:
"image": "Gallery_gckk34fDS_SysFileToImage"
3. Implement a handler for "crt.HandleViewModelAttributeChangeRequest" in the metadata.
Here’s an example of the handler:
{
request: "crt.HandleViewModelAttributeChangeRequest",
handler: async (request, next) => {
if (request.attributeName === "Gallery_gckk34f" && request.value?.length > 0) {
for (var i = 0; i < request.value.length; i++) {
const record = request.value[i];
const recordId = record.attributes["Gallery_gckk34fDS_Id"];
const recordName = record.attributes["Gallery_gckk34fDS_Name"];
const recordUrl = "/0/img/entity/hash/SysFile/Data/" + recordId;
const newColumnAttribute = {
displayValue: recordName,
value: recordId,
url: recordUrl
};
record.attributes["Gallery_gckk34fDS_SysFileToImage"] = newColumnAttribute;
}
}
return next?.handle(request);
}
}
How the handler works:
When the loaded collection is not empty, we populate the attribute specified in "templateValuesMapping" for each record with a specific object.
In the "url" field, we set the following link:
"/0/img/entity/hash/SysFile/Data/" + recordId
The system will load data from the "Data" column of the "SysFile" object based on a given identifier.
If you have any additional questions, feel free to ask.