Feb 20 2020 02:28 PM
I am using the DocumentCard from Fabric-React to create a document library web part using the react framework.
Currently my Document Library is mostly working.
it looks like this
But notice inside of my previews, the mini Icon for the File Type is not displayed. However, if i go into Chrome Dev Tools, and i find the ms-documentCardPreview-icon Div, and i add "Width:25%" the icon will appear.
I cannot use CSS to give the ms-DocumentCardPreview-icon div a width, because webpack adds a series of digits to the div name on build.
please help me understand why a width is not being applied and how to make it apply so both the icon and the preview image are displayed as in the example provided by microsoft here:
https://developer.microsoft.com/en-us/fabric#/controls/web/documentcard
Feb 20 2020 08:47 PM
Hi,
In the microsoft link you posted,they have explicitly set the iconsrc property to TestImages.iconPPT,Have you set this in your Document card as
Feb 21 2020 06:39 AM - edited Feb 21 2020 06:44 AM
That src in my link will show the Default PowerPoint logo for every single card, and i don't want that. i want the correct logo to appear, for whatever the document type happens to be. if its excel, show the excel icon. if its, Power BI, show me the .pbix icon. here is essentially all of the code that contains anything to do with the document card.
here is what i have for iconSrc. it is also in the main code chunk below, underneath the previewImageSrc.
iconSrc: `${DocIcon.toString() == `pbix` ? `https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/powerbi.svg?v6` : `https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/${DocIcon}.svg?v6`}`,
The iconSrc is an If condition because the Power BI does not follow the same naming convention as all of the rest. As far as i can tell (with my limited 10 item test document library) i have the icons src correct. That's why when i go into google chrome, the ONLY thing i do is add width:25% and it pops up just right.
import {
DocumentCard,
IDocumentCardStyles,//might delete this?
DocumentCardActivity,
DocumentCardPreview,
DocumentCardTitle,
IDocumentCardPreviewProps,
DocumentCardImage,
DocumentCardDetails,
DocumentCardType,
IDocumentCardActivityPerson
} from 'office-ui-fabric-react/lib/DocumentCard';
import { ImageFit} from 'office-ui-fabric-react/lib/Image';
import { FontWeights, FontSizes} from 'office-ui-fabric-react/lib/Styling';
import { Text } from 'office-ui-fabric-react/lib/Text';
import { FileTypeIcon, ApplicationType, IconType, ImageSize } from "@pnp/spfx-controls-react/lib/FileTypeIcon"
initializeIcons(/* optional base url */);
const ItemDetail = ({
id, FileLeafRef, DocIcon, FileRef, siteUrl, listID, UniqueId, FirstUniqueAncestorSecurableObject, FieldValuesAsTextEditor, itemAuthor, siteServerRelativeUrl, authorEmail,
Created, ServerRedirectedEmbedUrl, lastEdited, fileSize, DisplayFields, ListName
}) => {
const previewProps: IDocumentCardPreviewProps = {
previewImages: [
{
name: {FileLeafRef}.toString(),
linkProps: {
href:'www.google.com',
target: 'www.google.com'
},
previewImageSrc:`${siteUrl.toString().split('/teams',0)}/_api/v2.1/sites/${ siteUrl.split('/KTest',0).toString().split('https://',0) },${listID},${FirstUniqueAncestorSecurableObject}/items/${UniqueId}/driveItem/thumbnails/0/c400x99999/content?preferNoRedirect=true&clientType=modernWebPart`,
iconSrc: `${DocIcon.toString() == `pbix` ? `https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/powerbi.svg?v6` : `https://spoprod-a.akamaihd.net/files/fabric/assets/item-types-fluent/20/${DocIcon}.svg?v6`}`,
imageFit: ImageFit.contain,
width: 200,
height: 200,
}
]
};
// ********************I DONT KNOW WHY THIS WORKS BUT IT DOES -------- ITS SOMETHING TO LOOK INTO FOR EDITING THE CSS OF THESE COMPONENTS*************
const boldStyle = {
root:[ {
fontWeight: FontWeights.semibold,
fontSize: FontSizes.xLarge
}
]
};
return(
<DocumentCard
aria-label="Versatile Document Library Created By Kyle Johnston."
onClickHref={ServerRedirectedEmbedUrl.toString().length > 0 ? ServerRedirectedEmbedUrl : `${siteUrl.toString().split('/teams',0)}/_api/v2.1/sites/${ siteUrl.split('/KTest',0).toString().split('https://',0) },${listID},${FirstUniqueAncestorSecurableObject}/items/${UniqueId}/driveItem/thumbnails/0/c400x99999/content?preferNoRedirect=true&clientType=modernWebPart` }
>
{DisplayFields.toString().includes("ShowTitle") ? <DocumentCardTitle
styles={boldStyle} /*<<<<<<BOLDSTYLE APPLYING CSS EDITS*/
title={FileLeafRef.toString()}
shouldTruncate={true}/>:""}
{DisplayFields.toString().includes("ShowPreview") ? <DocumentCardPreview {...previewProps}/> :""}
{DisplayFields.toString().includes("ShowActivity") ? <div><DocumentCardActivity
activity={`Created: ${Created.toString().substr(5,2)}/${Created.toString().substr(8,2)}/${Created.toString().substr(0,4)}`}
people={[{
name:itemAuthor,
profileImageSrc: `${siteUrl}/_layouts/15/userphoto.aspx?size=S&accountname=${authorEmail}`
}]}
/></div>: ""}
{DisplayFields.toString().includes("ShowCreatedBy") ? <Text> Created By: <Text>{itemAuthor}<br></br></Text></Text> : ""}
{DisplayFields.toString().includes("ShowCreatedOn") ? <Text> Created On: <Text>{Created.toString().substr(5,2)}/{Created.toString().substr(8,2)}/{Created.toString().substr(0,4)}<br></br></Text></Text>: ""}
{DisplayFields.toString().includes("ShowEditedBy") ? <Text> Last Edited By: <Text>{FieldValuesAsTextEditor}<br></br></Text></Text>: ""}
{DisplayFields.toString().includes("ShowEditedOn") ? <Text> Last Edited On: <Text>{lastEdited}<br></br></Text></Text>: ""}
{DisplayFields.toString().includes("ShowFileType") ? <Text> File Type: <Text>{DocIcon}<br></br></Text></Text>: ""}
{DisplayFields.toString().includes("ShowFileSize") ? <Text> File Size: <Text>{(fileSize/1000).toFixed(2)} KB<br></br></Text></Text>: ""}
<FileTypeIcon type={IconType.image} path={siteUrl+FileLeafRef} size={ImageSize.large} />
</DocumentCard>
);
};
export default ItemDetail;
Feb 24 2020 09:33 AM
I was finally able to achieve expected results, albeit maybe not in the best way.
In my SCSS file i discovered i could use the