1

I am new to SharePoint online, and I am having an issue with displaying an image when the user try to create a new item in the SharePoint list. This image is just a table with some information about the risk.

I created a content editor web part with SP on-premises and added the image there, but in SP online, I'm not sure how to do this?

Improve this question
1
  • Elsie - I'm puzzled by the suggested solution. I am creating a custom row formatter. I have a list that contains an image column, and 3 description fields (Title, text, URL). I want to display the image in one column/section and the 3 description fields stacked as a single column display in the second column/section. I have the same JSON as you have, but I am wanting to display the image that is in the data row - not hard-coded to "../MyList/myimage.png". How does one get the actual image from the list row to display in a custom rowformatter?
    – VASoftball5
    Commented Dec 1, 2021 at 15:08

3 Answers 3

Reset to default
0

If you want to show the Image or any other information on the header area of the new/edit form then you can use List form configuration using JSON option in the SharePoint online. enter image description here

Ref: https://docs.microsoft.com/en-us/sharepoint/dev/declarative-customization/list-form-configuration

https://www.youtube.com/watch?v=fb0ePBrifP0

Or the second option you can use is customizing the forms using PowerApps.

Improve this answer
1
  • Thanks again for your message. I think I found what I need, but I still need some help. The below code will add the image to the new list form, and I have saved the image I want in the document library. However, when I add the image src, it won't work. { "elmType": "img", "style": { "width": "260px", "height": "160px" }, "attributes": { "src": "[$Picture]" } }
    – Harris
    Commented Aug 4, 2021 at 0:56
0

Per my knowledge, the Modern Content Editor Web Part is currently not supported in SPO, please refer to this UserVoice for more information: Modern Content Editor Web Part

However you could try to create your own webparts to do alot of that functionality with the current spfx webparts without having to invest alot.

Similar posts for your reference:

Content Editor Web Part in Modern Landing Page

Is there a way to add a content editor web part to a modern page?

=============Update1============

Here is a blog about how to use image column:

SharePoint Online: All you need to know about New Image column type enter image description here

Improve this answer
2
  • Thanks for your information Elsie, I have completed more of the requirements using JSON except adding an image or table in the new form. I did a lot of searches but can't find anything regarding creating or adding images using JSON
    – Harris
    Commented Aug 3, 2021 at 1:56
  • If you want to use pictures, OOTB's image column is also a good choice. Please check the update1 section in my answer. :)
    – Elsie Lu_MSFT
    Commented Aug 3, 2021 at 9:30
0

In SharePoint online modern experience, to show fix image on list form, you can configure the header section of the list form using JSON formatting.

Use below JSON in header section of list form:

{
  "elmType": "img",
  "style": {
    "width": "100%",
    "max-width": "100%"
  },
  "attributes": {
    "src": "https://<tenant>.sharepoint.com/sites/siteName/LibraryName/MyImage.png"
  }
}

In src attribute, pass the complete URL of your image stored in SharePoint library.

OR

You can also use the @currentWeb token to dynamically refer the absolute URL of your current site like:

{
  "elmType": "img",
  "style": {
    "width": "100%",
    "max-width": "100%"
  },
  "attributes": {
    "src": "= @currentWeb + '/LibraryName/MyImage.png'"
  }
}

Documentation: Configure the list form

Output:

enter image description here

Improve this answer
1
  • Hi Harris, Please Upvote(^) and accept as an Answer if it helped you in any way & it will help others with similar question in future to find the correct answer easily. It also removes this question from "Unanswered questions" list.
    – Ganesh Sanap - MVP
    Commented Sep 2, 2021 at 16:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.