Forum Discussion

KyleJ90's avatar
KyleJ90
Copper Contributor
Feb 20, 2020

Cannot See File Type Icon in Document Card from the Fabruic UI-React

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

  • O365Developer's avatar
    O365Developer
    Brass Contributor

    KyleJ90 

     

    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 

    <DocumentCardPreview {...previewProps} />
     
    Can you please share the code sample if its possible?
     
    • KyleJ90's avatar
      KyleJ90
      Copper Contributor

      O365Developer 

       

      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;

       

      • KyleJ90's avatar
        KyleJ90
        Copper Contributor

        KyleJ90 

        O365Developer 

        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 

        :global() selector, and grab the ms-DocumentCardPreview-Icon Div and force a width into it. 

Resources