Is there a way to add a picture on top of our list view using the modern UI

%3CLINGO-SUB%20id%3D%22lingo-sub-1672635%22%20slang%3D%22en-US%22%3EIs%20there%20a%20way%20to%20add%20a%20picture%20on%20top%20of%20our%20list%20view%20using%20the%20modern%20UI%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1672635%22%20slang%3D%22en-US%22%3E%3CDIV%20class%3D%22s-prose%20js-post-body%22%3E%3CP%3EInside%20classic%20layout%20i%20can%20edit%20the%20list%20view%20page%20and%20add%20a%20web%20part%20to%20show%20an%20image%20on%20top%20of%20the%20list%20fields%20as%20follow%3A-%3C%2FP%3E%3CDIV%20class%3D%22mceNonEditable%20lia-copypaste-placeholder%22%3E%26nbsp%3B%3C%2FDIV%3E%3CP%3E%3CSPAN%20class%3D%22lia-inline-image-display-wrapper%20lia-image-align-inline%22%20image-alt%3D%22editadd.png%22%20style%3D%22width%3A%20999px%3B%22%3E%3CIMG%20src%3D%22https%3A%2F%2Ftechcommunity.microsoft.com%2Ft5%2Fimage%2Fserverpage%2Fimage-id%2F218717i2F03385C38CC9CFF%2Fimage-size%2Flarge%3Fv%3D1.0%26amp%3Bpx%3D999%22%20title%3D%22editadd.png%22%20alt%3D%22editadd.png%22%20%2F%3E%3C%2FSPAN%3E%3C%2FP%3E%3CP%3E%26nbsp%3B%3C%2FP%3E%3CP%3Ebut%20if%20i%20switch%20to%20modern%20UI%20i%20will%20lose%20the%20ability%20to%20edit%20the%20list%20view%20page.%20so%20my%20question%20is%20how%20i%20can%20show%20a%20picture%20above%20the%20list%20fields%20(above%20the%20%22%2B%20New%20Item%20link%22)inside%20modern%20UI%3F%20is%20this%20possible%3F%3C%2FP%3E%3CP%3EThanks%3C%2FP%3E%3C%2FDIV%3E%3C%2FLINGO-BODY%3E%3CLINGO-LABS%20id%3D%22lingo-labs-1672635%22%20slang%3D%22en-US%22%3E%3CLINGO-LABEL%3EAPIs%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EDeveloper%3C%2FLINGO-LABEL%3E%3CLINGO-LABEL%3EExtensibility%3C%2FLINGO-LABEL%3E%3C%2FLINGO-LABS%3E%3CLINGO-SUB%20id%3D%22lingo-sub-1673084%22%20slang%3D%22en-US%22%3ERe%3A%20Is%20there%20a%20way%20to%20add%20a%20picture%20on%20top%20of%20our%20list%20view%20using%20the%20modern%20UI%3C%2FLINGO-SUB%3E%3CLINGO-BODY%20id%3D%22lingo-body-1673084%22%20slang%3D%22en-US%22%3EHi%2C%20as%20per%20the%20best%20practice%2C%20that%20is%20not%20possible%20and%20even%20if%20you%20inject%20custom%20CSS%20through%20the%20spfx%20extension%2C%20later%20on%20when%20there%20is%20an%20update%20to%20the%20classnames%20or%20modern%20UI%2C%20the%20extension%20won't%20work.%20Maybe%20you%20can%20use%20the%20spfx%20extension%20to%20add%20an%20image%20checking%20for%20the%20list%20URL%20and%20then%20displaying%20the%20image%20at%20the%20top.%3C%2FLINGO-BODY%3E
Valued Contributor

Inside classic layout i can edit the list view page and add a web part to show an image on top of the list fields as follow:-

 

editadd.png

 

but if i switch to modern UI i will lose the ability to edit the list view page. so my question is how i can show a picture above the list fields (above the "+ New Item link")inside modern UI? is this possible?

Thanks

1 Reply
Hi, as per the best practice, that is not possible and even if you inject custom CSS through the spfx extension, later on when there is an update to the classnames or modern UI, the extension won't work. Maybe you can use the spfx extension to add an image checking for the list URL and then displaying the image at the top.