I need to have the ability to preview a ContentDocument image in a lightning web component. Apparently lightning:fileCard is not available for LWC yet and the navigation mixin solution appears to not work if your lightning component is in a lightning community. There is also no thumbnail preview when you upload the document. Any ideas on a good work around for this? Any idea when/if this feature will be available? I'm currently creating a custom app for a client so I need to be able to say that it either isn't possible or there's a relatively easy way to implement it.
[SalesForce] Preview ContentDocument Image in Lightning Web Component in a Lightning Community
Related Solutions
I would follow the below in sequential order to find a solution to the problem.
1.Lightning components works on the concept that you manipulate data and UI gets manipulated automatically. I would see if i can manipulate the data to get UI work the way i want. I would use the components init event for building the hierarchical UI
2.I would really check if i need jquery for this. Jquery would manipulate a dom element, i would check if i can manipulate that using vanilla js.
Below information is what might help you solve this problem:
3.If you would still want to use jquery for manipulation then try Using the aura:valueRender event(summer 2017) to manipulate UI after dom is constructed.
- Be little cognizant of the race condition you would run into. sometimes your jquery resource might load after the rendering cycle is complete so use a boolean in your after scripts loaded to ensure your scripts are loaded and then modify the UI in your post rendering cycle.
If you need specific help then post your code to see where the issue is
I have assumed, that data in criterion will be in this format.
{
field1: "value"
field2:223,
...
...
}
As we can't use expressions in LWC HTML, you need to preprocess the table data into an array. Basically a two-dimensional array.
Instead of having each row as an object, I changed it to an array of key, fieldApiName, and value because we need generic field identifiers.
let criterionDataArray = [];
this.criterionArray.forEach((criterionRow, index) => {
let newRow = Object.keys(criterionRow).map((currentValue, key) => {
return {
fieldApiName: key,
value: currentValue,
key: `${index}${key}`
}
});
criterionDataArray.push({ Id: index, data: newRow });
});
this.tableData = criterionDataArray;
This is how you can iterate that.
HTML
<template if:true={tableData} for:each={tableData} for:item="criterion" for:index="index">
<tr key={criterion.Id}>
<td>{index}</td>
<template if:true={criterion.data} for:each={criterion.data} for:item="row">
<td data-field-api-name={row.fieldApiName} key={row.key}>{row.value}</td>
</template>
</tr>
</template>
When you need to save the data back, you need to convert this into an original format. You can do the same using array.map method.
Best Answer
The NavigationMixin solution should work as well, with minor modification. According to this blog post, rather than using NavigationMixin.Navigate with type argument standard__namedPage and ContentDocumentId, you should be using standard__webPage along with the file URL.