Home

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

%3CLINGO-SUB%20id%3D%22lingo-sub-1185692%22%20slang%3D%22en-US%22%3ECannot%20See%20File%20Type%20Icon%20in%20Document%20Card%20from%20the%20Fabruic%20UI-React%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1185692%22%20slang%3D%22en-US%22%3E%3CP%3EI%20am%20using%20the%20DocumentCard%20from%20Fabric-React%20to%20create%20a%20document%20library%20web%20part%20using%20the%20react%20framework.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3ECurrently%20my%20Document%20Library%20is%20mostly%20working.%26nbsp%3B%3C%2FP%3E%3CP%3Eit%20looks%20like%20this%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22KyleJ90_0-1582236669460.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F172353iFF0CBE6160C5BE47%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22KyleJ90_0-1582236669460.png%22%20alt%3D%22KyleJ90_0-1582236669460.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EBut%20notice%20inside%20of%20my%20previews%2C%20the%20mini%20Icon%20for%20the%20File%20Type%20is%20not%20displayed.%20However%2C%20if%20i%20go%20into%20Chrome%20Dev%20Tools%2C%20and%20i%20find%20the%20ms-documentCardPreview-icon%20Div%2C%20and%20i%20add%20%22Width%3A25%25%22%20the%20icon%20will%20appear.%26nbsp%3B%3C%2FP%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22KyleJ90_1-1582236849816.png%22%20style%3D%22width%3A%20400px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Fgxcuf89792.i.lithium.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F172354i003CC5974461CEAA%2Fimage-size%2Fmedium%3Fv%3D1.0%26amp%3Bpx%3D400%22%20title%3D%22KyleJ90_1-1582236849816.png%22%20alt%3D%22KyleJ90_1-1582236849816.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3EI%20cannot%20use%20CSS%20to%20give%20the%20ms-DocumentCardPreview-icon%20div%20a%20width%2C%20because%20webpack%20adds%20a%20series%20of%20digits%20to%20the%20div%20name%20on%20build.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Eplease%20help%20me%20understand%20why%20a%20width%20is%20not%20being%20applied%20and%20how%20to%20make%20it%20apply%20so%20both%20the%20icon%20and%20the%20preview%20image%20are%20displayed%20as%20in%20the%20example%20provided%20by%20microsoft%20here%3A%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fcontrols%2Fweb%2Fdocumentcard%22%20target%3D%22_blank%22%20rel%3D%22noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%20noopener%20noreferrer%22%3Ehttps%3A%2F%2Fdeveloper.microsoft.com%2Fen-us%2Ffabric%23%2Fcontrols%2Fweb%2Fdocumentcard%3C%2FA%3E%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1185692%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EFabric-UI%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EPnP%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EReact%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3ESPFx%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1186071%22%20slang%3D%22en-US%22%3ERe%3A%20Cannot%20See%20File%20Type%20Icon%20in%20Document%20Card%20from%20the%20Fabruic%20UI-React%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1186071%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F564477%22%20target%3D%22_blank%22%3E%40KyleJ90%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EHi%2C%3C%2FP%3E%3CP%3EIn%20the%20microsoft%20link%20you%20posted%2Cthey%20have%20explicitly%20set%20the%20iconsrc%20property%20to%20TestImages.iconPPT%2CHave%20you%20set%20this%20in%20your%20Document%20card%20as%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CSPAN%3E%26lt%3B%3C%2FSPAN%3E%3CSPAN%3EDocumentCardPreview%3C%2FSPAN%3E%3CSPAN%3E%26nbsp%3B%7B...previewProps%7D%26nbsp%3B%2F%26gt%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3ECan%20you%20please%20share%20the%20code%20sample%20if%20its%20possible%3F%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1187392%22%20slang%3D%22en-US%22%3ERe%3A%20Cannot%20See%20File%20Type%20Icon%20in%20Document%20Card%20from%20the%20Fabruic%20UI-React%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1187392%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F453843%22%20target%3D%22_blank%22%3E%40O365Developer%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3Every%20bottom%20is%20the%20entire%20code%20for%20the%20document%20card.%20Just%20below%2C%20i%20have%20the%20inconSrc%20code%20for%20my%20app.%20I%20could%20potentially%20use%20the%20examples%20method%20of%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3EiconSrc%3A%3C%2FSPAN%3E%3CSPAN%3ETestImages%3C%2FSPAN%3E%3CSPAN%3E.%3C%2FSPAN%3E%3CSPAN%3EiconPpt%3C%2FSPAN%3E%3CSPAN%3E%2C%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ehowever%20that%20forces%20every%20card%20to%20have%20the%20powerpoint%20icon...%20Obviously%20i%20don't%20want%20my%20jpegs%2C%20or%20xls%20docs%2C%20or%20wordx%20docs%2C%20etc...%20with%20a%20ppt%20icon.%20But%20what%20i%20haven't%20been%20able%20to%20make%20sense%20of%20is%20how%20a%20src%20field%20is%20controlling%20display%2Fno%20display%20for%20a%20css%20element%2C%20or%20how%20to%20override%20the%20current%20settings%20for%20the%20CSS%20element%20to%20always%20show%20regardless%20of%20src.%26nbsp%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3CDIV%3E%3CSPAN%3Ecurrent%20iconSrc%20(the%20dynamically%20generated%20URL%20is%20correct.%20i%20used%20an%20If%20condition%20because%20the%20PowerBI%20url%20does%20not%20follow%20the%20same%20naming%20convention%20as%20the%20rest%20of%20the%20documents.)%3C%2FSPAN%3E%3C%2FDIV%3E%3CDIV%3E%26nbsp%3B%3C%2FDIV%3E%3C%2FDIV%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3EiconSrc%3A%20%60%24%7BDocIcon.toString()%20%3D%3D%20%60pbix%60%20%3F%20%60https%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Ffabric%2Fassets%2Fitem-types-fluent%2F20%2Fpowerbi.svg%3Fv6%60%20%3A%20%60https%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Ffabric%2Fassets%2Fitem-types-fluent%2F20%2F%24%7BDocIcon%7D.svg%3Fv6%60%7D%60%2C%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CDIV%3E%26nbsp%3Bfull%20code%20containing%20all%20of%20my%20document%20card%20data.%3C%2FDIV%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eimport%20*%20as%20React%20from%20'react'%3B%0Aimport%20styles%20from%20'..%2FDemo.module.scss'%3B%0Aimport%20%7B%0A%20%20%20%20DocumentCard%2C%0A%20%20%20%20IDocumentCardStyles%2C%2F%2Fmight%20delete%20this%3F%0A%20%20%20%20DocumentCardActivity%2C%0A%20%20%20%20DocumentCardPreview%2C%0A%20%20%20%20DocumentCardTitle%2C%0A%20%20%20%20IDocumentCardPreviewProps%2C%0A%20%20%20DocumentCardImage%2C%0A%20%20DocumentCardDetails%2C%0A%20%20DocumentCardType%2C%0A%20%20IDocumentCardActivityPerson%0A%20%20%7D%20from%20'office-ui-fabric-react%2Flib%2FDocumentCard'%3B%0Aimport%20%7B%20ImageFit%7D%20from%20'office-ui-fabric-react%2Flib%2FImage'%3B%0Aimport%20%7B%20FontWeights%2C%20FontSizes%7D%20from%20'office-ui-fabric-react%2Flib%2FStyling'%3B%0Aimport%20%7B%20Text%20%7D%20from%20'office-ui-fabric-react%2Flib%2FText'%3B%0Aimport%20%7B%20IconBase%20%7D%20from%20'office-ui-fabric-react%2Flib%2FIcon'%3B%0Aimport%20%7B%20FileTypeIcon%2C%20ApplicationType%2C%20IconType%2C%20ImageSize%20%7D%20from%20%22%40pnp%2Fspfx-controls-react%2Flib%2FFileTypeIcon%22%3B%0Aimport%20%7B%20imageProperties%20%7D%20from%20'office-ui-fabric-react%2Flib%2FUtilities'%3B%0Aimport%20%7B%20initializeIcons%20%7D%20from%20'office-ui-fabric-react%2Flib%2FIcons'%3B%0Aimport%20%7B%20Stack%2C%20IStackTokens%20%7D%20from%20'office-ui-fabric-react%2Flib%2FStack'%3B%0Aimport%20%7B%20getTheme%20%7D%20from%20'office-ui-fabric-react%2Flib%2FStyling'%3B%0A%0AinitializeIcons(%2F*%20optional%20base%20url%20*%2F)%3B%0A%0Aconst%20ItemDetail%20%3D%20(%7B%0A%20%20%20%20id%2C%20FileLeafRef%2C%20DocIcon%2C%20FileRef%2C%20siteUrl%2C%20listID%2C%20UniqueId%2C%20FirstUniqueAncestorSecurableObject%2C%20FieldValuesAsTextEditor%2C%20itemAuthor%2C%20siteServerRelativeUrl%2C%20authorEmail%2C%0A%20%20%20%20Created%2C%20ServerRedirectedEmbedUrl%2C%20lastEdited%2C%20fileSize%2C%20DisplayFields%2C%20ListName%0A%20%7D)%20%3D%26gt%3B%20%7B%0A%20%20%20%20const%20previewProps%3A%20IDocumentCardPreviewProps%20%3D%20%7B%0A%20%20%20%20%20%20%20%20previewImages%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20name%3A%20%7BFileLeafRef%7D.toString()%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20linkProps%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20href%3A'www.google.com'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20target%3A%20'www.google.com'%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20previewImageSrc%3A%60%24%7BsiteUrl.toString().split('%2Fteams'%2C0)%7D%2F_api%2Fv2.1%2Fsites%2F%24%7B%20siteUrl.split('%2FKTest'%2C0).toString().split('https%3A%2F%2F'%2C0)%20%7D%2C%24%7BlistID%7D%2C%24%7BFirstUniqueAncestorSecurableObject%7D%2Fitems%2F%24%7BUniqueId%7D%2FdriveItem%2Fthumbnails%2F0%2Fc400x99999%2Fcontent%3FpreferNoRedirect%3Dtrue%26amp%3BclientType%3DmodernWebPart%60%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20iconSrc%3A%20%60%24%7BDocIcon.toString()%20%3D%3D%20%60pbix%60%20%3F%20%60https%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Ffabric%2Fassets%2Fitem-types-fluent%2F20%2Fpowerbi.svg%3Fv6%60%20%3A%20%60https%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Ffabric%2Fassets%2Fitem-types-fluent%2F20%2F%24%7BDocIcon%7D.svg%3Fv6%60%7D%60%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20imageFit%3A%20ImageFit.contain%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20200%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20200%2C%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%3B%0A%20%2F%2F%20********************I%20DONT%20KNOW%20WHY%20THIS%20WORKS%20BUT%20IT%20DOES%20--------%20ITS%20SOMETHING%20TO%20LOOK%20INTO%20FOR%20EDITING%20THE%20CSS%20OF%20THESE%20COMPONENTS*************%0A%20%20%20%20%20%20const%20boldStyle%20%3D%20%7B%0A%20%20%20%20%20%20%20%20root%3A%5B%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20fontWeight%3A%20FontWeights.semibold%2C%0A%20%20%20%20%20%20%20%20%20%20fontSize%3A%20FontSizes.xLarge%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%0A%0A%0A%20%20%20%20return(%0A%20%20%20%20%20%20%3CDOCUMENTCARD%20aria-label%3D%22Versatile%20Document%20Library%20Created%20By%20Kyle%20Johnston.%22%20onclickhref%3D%22%7BServerRedirectedEmbedUrl.toString().length%22%3E%200%20%3F%20ServerRedirectedEmbedUrl%20%3A%20%60%24%7BsiteUrl.toString().split('%2Fteams'%2C0)%7D%2F_api%2Fv2.1%2Fsites%2F%24%7B%20siteUrl.split('%2FKTest'%2C0).toString().split('https%3A%2F%2F'%2C0)%20%7D%2C%24%7BlistID%7D%2C%24%7BFirstUniqueAncestorSecurableObject%7D%2Fitems%2F%24%7BUniqueId%7D%2FdriveItem%2Fthumbnails%2F0%2Fc400x99999%2Fcontent%3FpreferNoRedirect%3Dtrue%26amp%3BclientType%3DmodernWebPart%60%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%26gt%3B%0A%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowTitle%22)%20%3F%20%3CDOCUMENTCARDTITLE%20styles%3D%22%7BboldStyle%7D%22%3E%3C%2FDOCUMENTCARDTITLE%3E%3A%22%22%7D%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowPreview%22)%20%3F%20%3CDOCUMENTCARDPREVIEW%3E%3C%2FDOCUMENTCARDPREVIEW%3E%20%3A%22%22%7D%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowActivity%22)%20%3F%20%3CDOCUMENTCARDACTIVITY%20activity%3D%22%7B%60Created%3A%22%3E%3C%2FDOCUMENTCARDACTIVITY%3E%3A%20%22%22%7D%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowCreatedBy%22)%20%3F%20%3CTEXT%3E%20Created%20By%3A%20%3CTEXT%3E%7BitemAuthor%7D%3CBR%20%2F%3E%3C%2FTEXT%3E%3C%2FTEXT%3E%20%3A%20%22%22%7D%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowCreatedOn%22)%20%3F%20%3CTEXT%3E%20Created%20On%3A%20%3CTEXT%3E%7BCreated.toString().substr(5%2C2)%7D%2F%7BCreated.toString().substr(8%2C2)%7D%2F%7BCreated.toString().substr(0%2C4)%7D%3CBR%20%2F%3E%3C%2FTEXT%3E%3C%2FTEXT%3E%3A%20%22%22%7D%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowEditedBy%22)%20%3F%20%3CTEXT%3E%20Last%20Edited%20By%3A%20%3CTEXT%3E%7BFieldValuesAsTextEditor%7D%3CBR%20%2F%3E%3C%2FTEXT%3E%3C%2FTEXT%3E%3A%20%22%22%7D%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowEditedOn%22)%20%3F%20%3CTEXT%3E%20Last%20Edited%20On%3A%20%3CTEXT%3E%7BlastEdited%7D%3CBR%20%2F%3E%3C%2FTEXT%3E%3C%2FTEXT%3E%3A%20%22%22%7D%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowFileType%22)%20%3F%20%3CTEXT%3E%20File%20Type%3A%20%3CTEXT%3E%7BDocIcon%7D%3CBR%20%2F%3E%3C%2FTEXT%3E%3C%2FTEXT%3E%3A%20%22%22%7D%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowFileSize%22)%20%3F%20%3CTEXT%3E%20File%20Size%3A%20%3CTEXT%3E%7B(fileSize%2F1000).toFixed(2)%7D%20KB%3CBR%20%2F%3E%3C%2FTEXT%3E%3C%2FTEXT%3E%3A%20%22%22%7D%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20%3CFILETYPEICON%20type%3D%22%7BIconType.image%7D%22%20path%3D%22%7BsiteUrl%2BFileLeafRef%7D%22%20size%3D%22%7BImageSize.large%7D%22%3E%3C%2FFILETYPEICON%3E%0A%20%20%20%20%20%20%3C%2FDOCUMENTCARD%3E%0A%20%20%20%20)%3B%0A%20%20%7D%3B%0Aexport%20default%20ItemDetail%3B%0A%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1187049%22%20slang%3D%22en-US%22%3ERe%3A%20Cannot%20See%20File%20Type%20Icon%20in%20Document%20Card%20from%20the%20Fabruic%20UI-React%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1187049%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F453843%22%20target%3D%22_blank%22%3E%40O365Developer%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3EThat%20src%20in%20my%20link%20will%20show%20the%20Default%20PowerPoint%20logo%20for%20every%20single%20card%2C%20and%20i%20don't%20want%20that.%20i%20want%20the%20correct%20logo%20to%20appear%2C%20for%20whatever%20the%20document%20type%20happens%20to%20be.%20if%20its%20excel%2C%20show%20the%20excel%20icon.%20if%20its%2C%20Power%20BI%2C%20show%20me%20the%20.pbix%20icon.%26nbsp%3B%20here%20is%20essentially%20all%20of%20the%20code%20that%20contains%20anything%20to%20do%20with%20the%20document%20card.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ehere%20is%20what%20i%20have%20for%20iconSrc.%20it%20is%20also%20in%20the%20main%20code%20chunk%20below%2C%20underneath%20the%20previewImageSrc.%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-markup%22%3E%3CCODE%3EiconSrc%3A%20%60%24%7BDocIcon.toString()%20%3D%3D%20%60pbix%60%20%3F%20%60https%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Ffabric%2Fassets%2Fitem-types-fluent%2F20%2Fpowerbi.svg%3Fv6%60%20%3A%20%60https%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Ffabric%2Fassets%2Fitem-types-fluent%2F20%2F%24%7BDocIcon%7D.svg%3Fv6%60%7D%60%2C%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3EThe%20iconSrc%20is%20an%20If%20condition%20because%20the%20Power%20BI%20does%20not%20follow%20the%20same%20naming%20convention%20as%20all%20of%20the%20rest.%20As%20far%20as%20i%20can%20tell%20(with%20my%20limited%2010%20item%20test%20document%20library)%20i%20have%20the%20icons%20src%20correct.%20That's%20why%20when%20i%20go%20into%20google%20chrome%2C%20the%20ONLY%20thing%20i%20do%20is%20add%20width%3A25%25%20and%20it%20pops%20up%20just%20right.%26nbsp%3B%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CPRE%20class%3D%22lia-code-sample%20language-javascript%22%3E%3CCODE%3Eimport%20%7B%0A%20%20DocumentCard%2C%0A%20%20IDocumentCardStyles%2C%2F%2Fmight%20delete%20this%3F%0A%20%20DocumentCardActivity%2C%0A%20%20DocumentCardPreview%2C%0A%20%20DocumentCardTitle%2C%0A%20%20IDocumentCardPreviewProps%2C%0A%20%20DocumentCardImage%2C%0A%20%20DocumentCardDetails%2C%0A%20%20DocumentCardType%2C%0A%20%20IDocumentCardActivityPerson%0A%20%20%7D%20from%20'office-ui-fabric-react%2Flib%2FDocumentCard'%3B%0A%20%20import%20%7B%20ImageFit%7D%20from%20'office-ui-fabric-react%2Flib%2FImage'%3B%0A%20%20import%20%7B%20FontWeights%2C%20FontSizes%7D%20from%20'office-ui-fabric-react%2Flib%2FStyling'%3B%0A%20%20import%20%7B%20Text%20%7D%20from%20'office-ui-fabric-react%2Flib%2FText'%3B%0A%20%20import%20%7B%20FileTypeIcon%2C%20ApplicationType%2C%20IconType%2C%20ImageSize%20%7D%20from%20%22%40pnp%2Fspfx-controls-react%2Flib%2FFileTypeIcon%22%0A%0A%0A%0AinitializeIcons(%2F*%20optional%20base%20url%20*%2F)%3B%0A%0Aconst%20ItemDetail%20%3D%20(%7B%0A%20%20%20%20id%2C%20FileLeafRef%2C%20DocIcon%2C%20FileRef%2C%20siteUrl%2C%20listID%2C%20UniqueId%2C%20FirstUniqueAncestorSecurableObject%2C%20FieldValuesAsTextEditor%2C%20itemAuthor%2C%20siteServerRelativeUrl%2C%20authorEmail%2C%0A%20%20%20%20Created%2C%20ServerRedirectedEmbedUrl%2C%20lastEdited%2C%20fileSize%2C%20DisplayFields%2C%20ListName%0A%20%7D)%20%3D%26gt%3B%20%7B%0A%20%20%20%20const%20previewProps%3A%20IDocumentCardPreviewProps%20%3D%20%7B%0A%20%20%20%20%20%20%20%20previewImages%3A%20%5B%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20name%3A%20%7BFileLeafRef%7D.toString()%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20linkProps%3A%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20href%3A'www.google.com'%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20target%3A%20'www.google.com'%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20previewImageSrc%3A%60%24%7BsiteUrl.toString().split('%2Fteams'%2C0)%7D%2F_api%2Fv2.1%2Fsites%2F%24%7B%20siteUrl.split('%2FKTest'%2C0).toString().split('https%3A%2F%2F'%2C0)%20%7D%2C%24%7BlistID%7D%2C%24%7BFirstUniqueAncestorSecurableObject%7D%2Fitems%2F%24%7BUniqueId%7D%2FdriveItem%2Fthumbnails%2F0%2Fc400x99999%2Fcontent%3FpreferNoRedirect%3Dtrue%26amp%3BclientType%3DmodernWebPart%60%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20iconSrc%3A%20%60%24%7BDocIcon.toString()%20%3D%3D%20%60pbix%60%20%3F%20%60https%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Ffabric%2Fassets%2Fitem-types-fluent%2F20%2Fpowerbi.svg%3Fv6%60%20%3A%20%60https%3A%2F%2Fspoprod-a.akamaihd.net%2Ffiles%2Ffabric%2Fassets%2Fitem-types-fluent%2F20%2F%24%7BDocIcon%7D.svg%3Fv6%60%7D%60%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20imageFit%3A%20ImageFit.contain%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20width%3A%20200%2C%0A%20%20%20%20%20%20%20%20%20%20%20%20height%3A%20200%2C%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%3B%0A%20%2F%2F%20********************I%20DONT%20KNOW%20WHY%20THIS%20WORKS%20BUT%20IT%20DOES%20--------%20ITS%20SOMETHING%20TO%20LOOK%20INTO%20FOR%20EDITING%20THE%20CSS%20OF%20THESE%20COMPONENTS*************%0A%20%20%20%20%20%20const%20boldStyle%20%3D%20%7B%0A%20%20%20%20%20%20%20%20root%3A%5B%20%7B%20%0A%20%20%20%20%20%20%20%20%20%20fontWeight%3A%20FontWeights.semibold%2C%0A%20%20%20%20%20%20%20%20%20%20fontSize%3A%20FontSizes.xLarge%0A%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%5D%0A%20%20%20%20%20%20%7D%3B%0A%20%20%20%20%20%20%0A%0A%20%20%20%20return(%0A%20%20%20%20%20%20%3CDOCUMENTCARD%20aria-label%3D%22Versatile%20Document%20Library%20Created%20By%20Kyle%20Johnston.%22%20onclickhref%3D%22%7BServerRedirectedEmbedUrl.toString().length%22%3E%200%20%3F%20ServerRedirectedEmbedUrl%20%3A%20%60%24%7BsiteUrl.toString().split('%2Fteams'%2C0)%7D%2F_api%2Fv2.1%2Fsites%2F%24%7B%20siteUrl.split('%2FKTest'%2C0).toString().split('https%3A%2F%2F'%2C0)%20%7D%2C%24%7BlistID%7D%2C%24%7BFirstUniqueAncestorSecurableObject%7D%2Fitems%2F%24%7BUniqueId%7D%2FdriveItem%2Fthumbnails%2F0%2Fc400x99999%2Fcontent%3FpreferNoRedirect%3Dtrue%26amp%3BclientType%3DmodernWebPart%60%20%20%20%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%26gt%3B%0A%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowTitle%22)%20%3F%20%3CDOCUMENTCARDTITLE%20styles%3D%22%7BboldStyle%7D%22%3E%3C%2FDOCUMENTCARDTITLE%3E%3A%22%22%7D%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowPreview%22)%20%3F%20%3CDOCUMENTCARDPREVIEW%3E%3C%2FDOCUMENTCARDPREVIEW%3E%20%20%20%3A%22%22%7D%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowActivity%22)%20%3F%20%3CDIV%3E%3CDOCUMENTCARDACTIVITY%20activity%3D%22%7B%60Created%3A%22%3E%3C%2FDOCUMENTCARDACTIVITY%3E%3C%2FDIV%3E%3A%20%22%22%7D%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowCreatedBy%22)%20%3F%20%3CTEXT%3E%20Created%20By%3A%20%3CTEXT%3E%7BitemAuthor%7D%3CBR%20%2F%3E%3C%2FTEXT%3E%3C%2FTEXT%3E%20%3A%20%22%22%7D%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowCreatedOn%22)%20%3F%20%3CTEXT%3E%20Created%20On%3A%20%3CTEXT%3E%7BCreated.toString().substr(5%2C2)%7D%2F%7BCreated.toString().substr(8%2C2)%7D%2F%7BCreated.toString().substr(0%2C4)%7D%3CBR%20%2F%3E%3C%2FTEXT%3E%3C%2FTEXT%3E%3A%20%22%22%7D%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowEditedBy%22)%20%3F%20%3CTEXT%3E%20Last%20Edited%20By%3A%20%3CTEXT%3E%7BFieldValuesAsTextEditor%7D%3CBR%20%2F%3E%3C%2FTEXT%3E%3C%2FTEXT%3E%3A%20%22%22%7D%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowEditedOn%22)%20%3F%20%3CTEXT%3E%20Last%20Edited%20On%3A%20%3CTEXT%3E%7BlastEdited%7D%3CBR%20%2F%3E%3C%2FTEXT%3E%3C%2FTEXT%3E%3A%20%22%22%7D%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowFileType%22)%20%3F%20%3CTEXT%3E%20File%20Type%3A%20%3CTEXT%3E%7BDocIcon%7D%3CBR%20%2F%3E%3C%2FTEXT%3E%3C%2FTEXT%3E%3A%20%22%22%7D%0A%20%20%20%20%20%20%7BDisplayFields.toString().includes(%22ShowFileSize%22)%20%3F%20%3CTEXT%3E%20File%20Size%3A%20%3CTEXT%3E%7B(fileSize%2F1000).toFixed(2)%7D%20KB%3CBR%20%2F%3E%3C%2FTEXT%3E%3C%2FTEXT%3E%3A%20%22%22%7D%0A%20%20%20%20%20%20%0A%20%20%20%20%20%20%3CFILETYPEICON%20type%3D%22%7BIconType.image%7D%22%20path%3D%22%7BsiteUrl%2BFileLeafRef%7D%22%20size%3D%22%7BImageSize.large%7D%22%3E%3C%2FFILETYPEICON%3E%0A%20%20%20%20%20%20%3C%2FDOCUMENTCARD%3E%0A%20%20%20%20)%3B%0A%20%20%7D%3B%0Aexport%20default%20ItemDetail%3B%3C%2FCODE%3E%3C%2FPRE%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3C%2FLINGO-BODY%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1191319%22%20slang%3D%22en-US%22%3ERe%3A%20Cannot%20See%20File%20Type%20Icon%20in%20Document%20Card%20from%20the%20Fabruic%20UI-React%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1191319%22%20slang%3D%22en-US%22%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F564477%22%20target%3D%22_blank%22%3E%40KyleJ90%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3E%3CA%20href%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fuser%2Fviewprofilepage%2Fuser-id%2F453843%22%20target%3D%22_blank%22%3E%40O365Developer%3C%2FA%3E%26nbsp%3B%3C%2FP%3E%3CP%3EI%20was%20finally%20able%20to%20achieve%20expected%20results%2C%20albeit%20maybe%20not%20in%20the%20best%20way.%26nbsp%3B%3C%2FP%3E%3CP%3EIn%20my%20SCSS%20file%20i%20discovered%20i%20could%20use%20the%26nbsp%3B%3C%2FP%3E%3CDIV%3E%3CDIV%3E%3CSPAN%3E%3Aglobal()%20selector%2C%20and%20grab%20the%20ms-DocumentCardPreview-Icon%20Div%20and%20force%20a%20width%20into%20it.%26nbsp%3B%3C%2FSPAN%3E%3C%2FDIV%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E
Highlighted
Occasional Contributor

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 

KyleJ90_0-1582236669460.png

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. 

KyleJ90_1-1582236849816.png

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

3 Replies
Highlighted

@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?
 
Highlighted

@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 

@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.