Was wondering if anyone has figured out how to integrate the File Preview (for PDFs, jpgs etc.) that is present in the standard Files Related List into Lightning Data Table? i found this link that can open a preview "/sfc/servlet.shepherd/version/renditionDownload?rendition=THUMB720BY480&versionId=0688E0000008paMQAQ" but its not in the same in functionality and layout (ie. doesnt have the Download, Share etc. links). I've seen some uses of lightning:fileCard but not within Lightning Datatable
Create a row action in data table and launch slds modal opener where you can use lightning:fileCard base component to preview a file.
-
Was able to get it to work with this setup, much appreciated. Any ideas on how to autolaunch the Lightning:filecard component (ie. just have the file preview automatically open when the Modal is launched rather than the user click again)? Been stuck on that – Bobbygllh Mar 8 '19 at 20:53
-
As @user57371 said to show the view button on the rows, you need to put the attributes in the typeAttributes object just like the below example.
component.set('v.doctablecolumns', [
{label: 'Column1', fieldName: 'Column1'.....},
{label: 'Column2', fieldName: 'Column2'.....},
{
label: 'View',
type: 'button',
initialWidth: 105,
typeAttributes: { disabled: false, label: 'View', name: 'view', title: 'Click to Preview', iconName: 'utility:preview'}
}
]);
Then you add a onrowaction attribute to the lighting:datatable component:
<lightning:datatable
columns="{! v.columns }"
data="{! v.data }"
onrowaction="{! c.handleRowAction }"
/>
Then add a method to your controller to handle the button click. Something like this:
handleRowAction: function (cmp, event, helper) {
var action = event.getParam('action');
var row = event.getParam('row');
switch (action.name) {
case 'view':
helper.viewDocument(row);
break;
// TBD for other action
case 'action2':
helper.otherAction(cmp, row, action);
break;
// etc.
}
}
To show the document create a helper method and use lightning:openFiles as below.
viewDocument : function(row) {
$A.get('e.lightning:openFiles').fire({
recordIds: [row.documentId]
});
},
Please note you need to have the Content Document Id in the DataTable model.
