Displaying a new column which is a hyperlink in list formatting

[afpatel1]

Hi, I used your updated code to show the list items if they have/have not got attachment, the problem I ran into is probably sharepoint administrator related as when the box is checked it doesn't open the attachment

So what I thought to do is create a new column which I named 'Reference', and this would be a hyperlink column which will simply open up an existing how to sharepoint guide.

Do you have any sample code so your template can include this additional column?

Your advice and help is much appreciated.

Thanks very much!

Afzal

[tecchan1107]

Hi @afpatel1 !

Do you have any sample code so your template can include this additional column?

I tried to create sample code to display a link for a Reference column (column type: Hyperlink, internal name of column: Reference). How about the following code?

Sample Code

```json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideSelection": true, "hideColumnHeader": true, "hideListHeader": true, "groupProps": { "headerFormatter": { "elmType": "div", "attributes": { "class": "sp-row-card" }, "style": { "color": "black", "background-color": "#FAF9F9", "flex-grow": "1", "display": "flex", "flex-direction": "row", "box-sizing": "border-box", "padding": "4px 8px 5px 8px", "border-radius": "6px", "align-items": "center", "flex-wrap": "nowrap", "overflow": "auto", "margin": "1px 4px 4px 1px" }, "children": [ { "elmType": "img", "style": { "max-width": "24px", "max-height": "24px", "margin-top": "2px", "border-radius": "2px" } }, { "elmType": "div", "children": [ { "elmType": "span", "style": { "padding": "5px 5px 5px 5px", "font-weight": "500", "font-size": "15px" }, "txtContent": "@group.fieldData.displayValue" } ] }, { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "justify-content": "center" } } ] } ] } }, "rowFormatter": { "elmType": "div", "attributes": { "class": "ms-bgColor-themeLighterAlt" }, "style": { "justify-content": "start", "color": "ms-fontColor-Primary", "display": "flex", "padding": "1px 8px 5px 20px", "border-radius": "6px", "max-width": "905px", "margin": "1px 4px 4px 60px" }, "children": [ { "elmType": "div", "style": { "text-align": "left", "font-weight": "400", "font-size": "15px" }, "children": [ { "elmType": "span", "style": { "margin-top": "8px", "padding-left": "1px", "color": "black" }, "attributes": { "class": "ms-fontSize-m", "iconName": "Lightbulb" } }, { "elmType": "span", "attributes": { "class": "sp-row-listPadding" }, "txtContent": "Answer", "style": { "font-weight": "500", "color": "black", "padding-left": "4px" } }, { "elmType": "div", "attributes": { "class": "sp-row-listPadding" }, "txtContent": "[$Answer]", "style": { "flex-grow": "1", "display": "flex", "flex-direction": "column", "flex-wrap": "nowrap", "align-items": "center", "max-width": "900px", "min-width": "205px", "margin-top": "8px", "margin-bottom": "8px" } }, { "elmType": "a", "txtContent": "[$Reference.desc]", "style": { "display": "=if([$Reference],'flex','none')", "margin-bottom": "10px" }, "attributes": { "href": "[$Reference]", "target": "_blank", "class": "ms-fontSize-m" } }, { "elmType": "div", "style": { "display": "flex", "align-items": "center", "margin-bottom": "10px" }, "attributes": { "class": "ms-fontSize-m" }, "children": [ { "elmType": "span", "style": { "margin-right": "10px" }, "attributes": { "iconName": "=if(Number([$Attachments])==1,'BoxCheckmarkSolid','Checkbox')" } }, { "elmType": "span", "attributes": { "iconName": "Attach" } }, { "elmType": "span", "txtContent": "Attachments" } ] }, { "elmType": "button", "customRowAction": { "action": "defaultClick" }, "txtContent": "Show more", "attributes": { "class": "sp-row-button" }, "style": { "display": "=if([$ShowMore] == 'Yes', 'block', 'none')", "margin-bottom": "8px", "color": "white", "background-color": "#0077DB" } } ] } ] } } ```

*Be sure to add a Reference column on the view.

*The internal name of a column can be found on the Edit Column screen.

[afpatel1]

Hi Tetsuya,

Thank you so much for your code and tips, worked a treat! :) I removed the code referencing the attachment as and used my Reference column to direct users to other sharepoint pages where it has all the screenshots etc, these are not that many as most of my faq's are text based.

I have a couple of other questions.

1. I had a situation where one of my answers has only one screenshot, so rather than creating a new page for this scenario, I thought it would be great to include another column 'Screenshot' which is type Image. I copied the code/logic for the Reference bit you did but never worked, possibly I didn't amend the code properly so will have to give that more time. But if this is something you can quickly do then that would be awesome.

2. I wanted my questions sorted manually, SharePoint seems to give it its own order, we can sort the title/question column alphabetically, but again that is not suitable. So I tried creating a new column called Sequence, made it shown but without amending any code, which didn't work. So any suggestions here would be welcome.

Whilst writing this, I just had another idea, it would be great if users can rate the answer or interact it with via a selection of emojis. But this is really a wish and maybe a nice problem for you. :)

[afpatel1]

Just to add.

• I added the columns Screenshot to view
• I have used this code to try to get the image. It appears in my view indicating there is an image but nothing happens when clicking onto it

{ "elmType": "div", "children": [ { "elmType": "img", "attributes": { "src": "[$Screenshot]" }, "style": { "max-width": "50px", "max-height": "50px", "margin-left": "10px", "border-radius": "5px" } } ] }

[tecchan1107]

I had a situation where one of my answers has only one screenshot, so rather than creating a new page for this scenario, I thought it would be great to include another column 'Screenshot' which is type Image.

it would be great if users can rate the answer or interact it with via a selection of emojis.

I have created sample code that displays the image in the Sreenshot column (column type: Image) and updates the Likes column (column type: multiple selectable user columns). The code I added refers to image-lightbox and multi-person-reaction.

Sample Code

```json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideSelection": true, "hideColumnHeader": true, "hideListHeader": true, "groupProps": { "headerFormatter": { "elmType": "div", "attributes": { "class": "sp-row-card" }, "style": { "color": "black", "background-color": "#FAF9F9", "flex-grow": "1", "display": "flex", "flex-direction": "row", "box-sizing": "border-box", "padding": "4px 8px 5px 8px", "border-radius": "6px", "align-items": "center", "flex-wrap": "nowrap", "overflow": "auto", "margin": "1px 4px 4px 1px" }, "children": [ { "elmType": "img", "style": { "max-width": "24px", "max-height": "24px", "margin-top": "2px", "border-radius": "2px" } }, { "elmType": "div", "children": [ { "elmType": "span", "style": { "padding": "5px 5px 5px 5px", "font-weight": "500", "font-size": "15px" }, "txtContent": "@group.fieldData.displayValue" } ] }, { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "justify-content": "center" } } ] } ] } }, "rowFormatter": { "elmType": "div", "attributes": { "class": "ms-bgColor-themeLighterAlt" }, "style": { "justify-content": "start", "color": "ms-fontColor-Primary", "display": "flex", "padding": "1px 8px 5px 20px", "border-radius": "6px", "max-width": "905px", "margin": "1px 4px 4px 60px" }, "children": [ { "elmType": "div", "style": { "text-align": "left", "font-weight": "400", "font-size": "15px" }, "children": [ { "elmType": "span", "style": { "margin-top": "8px", "padding-left": "1px", "color": "black" }, "attributes": { "class": "ms-fontSize-m", "iconName": "Lightbulb" } }, { "elmType": "span", "attributes": { "class": "sp-row-listPadding" }, "txtContent": "Answer", "style": { "font-weight": "500", "color": "black", "padding-left": "4px" } }, { "elmType": "div", "attributes": { "class": "sp-row-listPadding" }, "txtContent": "[$Answer]", "style": { "flex-grow": "1", "display": "flex", "flex-direction": "column", "flex-wrap": "nowrap", "align-items": "center", "max-width": "900px", "min-width": "205px", "margin-top": "5px", "margin-bottom": "8px" } }, { "elmType": "div", "style": { "display": "=if([$Screenshot],'block','none')", "max-width": "64px", "max-height": "64px", "overflow": "hidden", "margin": "10px 0px", "cursor": "pointer" }, "attributes": { "title": "[$Screenshot.fileName]" }, "children": [ { "elmType": "img", "attributes": { "src": "=getThumbnailImage([$Screenshot], 64, 64)" }, "customCardProps": { "formatter": { "elmType": "div", "style": { "padding": "8px", "background-color": "black" }, "children": [ { "elmType": "img", "attributes": { "src": "=getThumbnailImage([$Screenshot], ceiling(@window.innerWidth*.5), ceiling(@window.innerHeight*.5))", "title": "[$Screenshot.fileName]" }, "style": { "background-color": "#e6e6e6" } }, { "elmType": "a", "attributes": { "iconName": "OpenInNewWindow", "href": "=getThumbnailImage([$Screenshot], 3000, 2000)", "target": "_blank", "class": "ms-bgColor-black ms-fontColor-white ms-fontColor-themeLight--hover", "title": "Open in New Window" }, "style": { "font-size": "18px", "text-decoration": "none", "position": "absolute", "right": "2px", "bottom": "2px", "padding": "8px" } } ] }, "openOnEvent": "click", "directionalHint": "rightCenter", "isBeakVisible": true, "beakStyle": { "backgroundColor": "black" } } } ] }, { "elmType": "a", "txtContent": "[$Reference.desc]", "style": { "display": "=if([$Reference],'flex','none')", "margin-bottom": "10px" }, "attributes": { "href": "[$Reference]", "target": "_blank", "class": "ms-fontSize-m" } }, { "elmType": "div", "style": { "display": "flex", "align-items": "center", "margin-bottom": "10px" }, "attributes": { "class": "ms-fontSize-m" }, "children": [ { "elmType": "span", "style": { "margin-right": "10px" }, "attributes": { "iconName": "=if(Number([$Attachments])==1,'BoxCheckmarkSolid','Checkbox')" } }, { "elmType": "span", "attributes": { "iconName": "Attach" } }, { "elmType": "span", "txtContent": "Attachments" } ] }, { "elmType": "button", "customRowAction": { "action": "defaultClick" }, "txtContent": "Show more", "attributes": { "class": "sp-row-button" }, "style": { "display": "=if([$ShowMore] == 'Yes', 'block', 'none')", "margin-bottom": "8px", "color": "white", "background-color": "#0077DB" } }, { "elmType": "div", "style": { "margin": "5px 0px", "display": "inline-block" }, "children": [ { "elmType": "div", "style": { "font-size": "18px", "padding": "2px 7px 2px 7px", "cursor": "pointer", "border-radius": "10px", "border": "1px solid" }, "attributes": { "class": " ms-bgColor-white ms-bgColor-themeTertiary--hover" }, "customRowAction": { "action": "setValue", "actionInput": { "Likes": "=if(indexOf([$Likes.email] , @me) > -1 , removeFrom([$Likes.email] , @me) , appendTo([$Likes.email] , @me) )" } }, "customCardProps": { "openOnEvent": "hover", "directionalHint": "rightCenter", "isBeakVisible": true, "formatter": { "elmType": "div", "style": { "max-height": "300px", "padding": "5px 20px 5px 20px", "display": "flex", "flex-direction": "column" }, "children": [ { "elmType": "div", "txtContent": "= '👍️ ' + length([$Likes])", "style": { "padding": "10px", "font-weight": "bold", "font-size": "20px" } }, { "elmType": "div", "children": [ { "forEach": "personIterator in [$Likes]", "elmType": "div", "style": { "margin-bottom": "5px", "display": "flex", "align-items": "center" }, "children": [ { "elmType": "img", "style": { "width": "32px", "height": "32px", "border-radius": "50%", "margin-right": "5px" }, "attributes": { "src": "=getUserImage([$personIterator.email], 'S')", "title": "[$personIterator.title]" } }, { "elmType": "span", "txtContent": "[$personIterator.title]" } ] } ] } ] } }, "children": [ { "elmType": "span", "style": { "margin-right": "5px" }, "txtContent": "️️👍️" }, { "elmType": "span", "style": { "font-weight": "=if(indexOf([$Likes.email] , @me) > -1 , 'bold' ,'' )" }, "txtContent": "=length([$Likes])" } ] } ] } ] } ] } } ```

*Include a Screenshot column and a Likes column on the view

I wanted my questions sorted manually, SharePoint seems to give it its own order, we can sort the title/question column alphabetically, but again that is not suitable. So I tried creating a new column called Sequence, made it shown but without amending any code, which didn't work. So any suggestions here would be welcome.

How about putting a number at the beginning of the questions so that they are in order? For more information, see the following link.

https://github.com/pnp/List-Formatting/issues/770

[afpatel1]

Thanks so much @tecchan1107 Decided to do it in chunks, got the sequencing to work and the images. (well partially as will explain)

What is strange about the images is when I apply the code I can see the image on the corresponding preview.

But when I insert it into my FAQ page as a list, it does not show, if I toggle the view to all items then my view it shows for the time I remain in the page. I tested on Chrome and Edge.

For eg, here it is not showing as default

I toggled my view to all items and then BSD General View, then it shows:

Any tips appreciated.

Thanks again!

[tecchan1107]

But when I insert it into my FAQ page as a list, it does not show, if I toggle the view to all items then my view it shows for the time I remain in the page. I tested on Chrome and Edge.

Perhaps it is happening because the BSD General View does not include a Screenshot column; please check to see if the BSD General View includes a Screenshot column.

As a test, I was able to reproduce the same phenomenon when I included the Screenshot column in the All Items view but did not include the Screenshot column in the BSD General View.

[afpatel1]

Indeed, sorry rookie mistake! Thanks for pointing that out, working nicely now. Guessing only way to include multiple screenshots is having another column?

On the liking code, it brings forth the emoji (only the thumbs up) one, not heart, if I click onto it nothing happens, I asked my colleague to do so and nothing happens as well.

Your code into mentions this: "You need to set the actionInput to the internal name of the column to be updated." Can you explain how I do this, does one of my columns (Question, Answer, Reference, Screenshot) need to be assigned to actionInput?

Thanks

My code for my test view is as follows; this has screenshots rendering, reference column for hyperlink, and sorting working properly.
Not working is the liking

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideSelection": true, "hideColumnHeader": true, "hideListHeader": true, "groupProps": { "headerFormatter": { "elmType": "div", "attributes": { "class": "sp-row-card" }, "style": { "color": "black", "background-color": "#FAF9F9", "flex-grow": "1", "display": "flex", "flex-direction": "row", "box-sizing": "border-box", "padding": "4px 8px 5px 8px", "border-radius": "6px", "align-items": "center", "flex-wrap": "nowrap", "overflow": "auto", "margin": "1px 4px 4px 1px" }, "children": [ { "elmType": "img", "style": { "max-width": "24px", "max-height": "24px", "margin-top": "2px", "border-radius": "2px" } }, { "elmType": "div", "children": [ { "elmType": "span", "style": { "padding": "5px 5px 5px 5px", "font-weight": "500", "font-size": "15px" }, "txtContent": "=substring(@group.fieldData.displayValue,3,indexOf(@group.fieldData.displayValue+'^','^'))" } ] }, { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "justify-content": "center" } } ] } ] } }, "rowFormatter": { "elmType": "div", "attributes": { "class": "ms-bgColor-themeLighterAlt" }, "style": { "justify-content": "start", "color": "ms-fontColor-Primary", "display": "flex", "padding": "1px 8px 5px 20px", "border-radius": "6px", "max-width": "905px", "margin": "1px 4px 4px 60px" }, "children": [ { "elmType": "div", "style": { "text-align": "left", "font-weight": "400", "font-size": "15px" }, "children": [ { "elmType": "span", "style": { "margin-top": "8px", "padding-left": "1px", "color": "black" }, "attributes": { "class": "ms-fontSize-m", "iconName": "Lightbulb" } }, { "elmType": "span", "attributes": { "class": "sp-row-listPadding" }, "txtContent": "Answer", "style": { "font-weight": "500", "color": "black", "padding-left": "4px" } }, { "elmType": "div", "attributes": { "class": "sp-row-listPadding" }, "txtContent": "[$Answer]", "style": { "flex-grow": "1", "display": "flex", "flex-direction": "column", "flex-wrap": "nowrap", "align-items": "center", "max-width": "900px", "min-width": "205px", "margin-top": "5px", "margin-bottom": "8px" } }, { "elmType": "div", "style": { "display": "=if([$Screenshot],'block','none')", "max-width": "64px", "max-height": "64px", "overflow": "hidden", "margin": "10px 0px", "cursor": "pointer" }, "attributes": { "title": "[$Screenshot.fileName]" }, "children": [ { "elmType": "img", "attributes": { "src": "=getThumbnailImage([$Screenshot], 64, 64)" }, "customCardProps": { "formatter": { "elmType": "div", "style": { "padding": "8px", "background-color": "black" }, "children": [ { "elmType": "img", "attributes": { "src": "=getThumbnailImage([$Screenshot], ceiling(@window.innerWidth*.5), ceiling(@window.innerHeight*.5))", "title": "[$Screenshot.fileName]" }, "style": { "background-color": "#e6e6e6" } }, { "elmType": "a", "attributes": { "iconName": "OpenInNewWindow", "href": "=getThumbnailImage([$Screenshot], 3000, 2000)", "target": "_blank", "class": "ms-bgColor-black ms-fontColor-white ms-fontColor-themeLight--hover", "title": "Open in New Window" }, "style": { "font-size": "18px", "text-decoration": "none", "position": "absolute", "right": "2px", "bottom": "2px", "padding": "8px" } } ] }, "openOnEvent": "click", "directionalHint": "rightCenter", "isBeakVisible": true, "beakStyle": { "backgroundColor": "black" } } } ] }, { "elmType": "a", "txtContent": "[$Reference.desc]", "style": { "display": "=if([$Reference],'flex','none')", "margin-bottom": "10px" }, "attributes": { "href": "[$Reference]", "target": "_blank", "class": "ms-fontSize-m" } }, { "elmType": "button", "customRowAction": { "action": "defaultClick" }, "txtContent": "Show more", "attributes": { "class": "sp-row-button" }, "style": { "display": "=if([$ShowMore] == 'Yes', 'block', 'none')", "margin-bottom": "8px", "color": "white", "background-color": "#0077DB" } }, { "elmType": "div", "style": { "margin": "5px 0px", "display": "inline-block" }, "children": [ { "elmType": "div", "style": { "font-size": "18px", "padding": "2px 7px 2px 7px", "cursor": "pointer", "border-radius": "10px", "border": "1px solid" }, "attributes": { "class": " ms-bgColor-white ms-bgColor-themeTertiary--hover" }, "customRowAction": { "action": "setValue", "actionInput": { "Likes": "=if(indexOf([$Likes.email] , @me) > -1 , removeFrom([$Likes.email] , @me) , appendTo([$Likes.email] , @me) )" } }, "customCardProps": { "openOnEvent": "hover", "directionalHint": "rightCenter", "isBeakVisible": true, "formatter": { "elmType": "div", "style": { "max-height": "300px", "padding": "5px 20px 5px 20px", "display": "flex", "flex-direction": "column" }, "children": [ { "elmType": "div", "txtContent": "= '👍️ ' + length([$Likes])", "style": { "padding": "10px", "font-weight": "bold", "font-size": "20px" } }, { "elmType": "div", "children": [ { "forEach": "personIterator in [$Likes]", "elmType": "div", "style": { "margin-bottom": "5px", "display": "flex", "align-items": "center" }, "children": [ { "elmType": "img", "style": { "width": "32px", "height": "32px", "border-radius": "50%", "margin-right": "5px" }, "attributes": { "src": "=getUserImage([$personIterator.email], 'S')", "title": "[$personIterator.title]" } }, { "elmType": "span", "txtContent": "[$personIterator.title]" } ] } ] } ] } }, "children": [ { "elmType": "span", "style": { "margin-right": "5px" }, "txtContent": "️️👍️" }, { "elmType": "span", "style": { "font-weight": "=if(indexOf([$Likes.email] , @me) > -1 , 'bold' ,'' )" }, "txtContent": "=length([$Likes])" } ] } ] } ] } ] } }

[tecchan1107]

Indeed, sorry rookie mistake! Thanks for pointing that out, working nicely now. Guessing only way to include multiple screenshots is having another column?

Yes. To place multiple screenshots, you will need to prepare image columns for the number of screenshots you want to place.

On the liking code, it brings forth the emoji (only the thumbs up) one, not heart, if I click onto it nothing happens, I asked my colleague to do so and nothing happens as well.

If you want it to be a heart, change 👍️ to 💖 in the code.

Your code into mentions this: "You need to set the actionInput to the internal name of the column to be updated." Can you explain how I do this, does one of my columns (Question, Answer, Reference, Screenshot) need to be assigned to actionInput?

Not working is the liking

The code updates the Likes column (multiple selectable person column).

If you want to use the Like function, prepare a Likes column (column internal name: Likes, column type: multiple selectable person column) and include that column in the view.

[afpatel1]

Hello, Amazing! Thank you so much. My page is looking is really good thanks to you, I super appreciate it.

There is only one last thing which I need to work on but that can wait for now, the attachments code you provided displayed the check boxes and was checked or not depending on if the attachment was uploaded against the Question column which has the attachment component added. But clicking on it didn't do anything, ie no indication when you hover to open.
I think I may have used someone else's code before when the attachment did open but with an error, not sure if its a sharepoint thing where documents have a specific path.

No rush but any advice on the attachments will be appreciated.

Thanks so much once again!

[tecchan1107]

It's my pleasure!

Do you mean that you want the attachment to open when clicked? If so, unfortunately, I don't think it is possible at this time😣 The reason is that List Formatting can get whether there is an attachment or not, but not the name or URL of the attachment.

[tecchan1107]

If you would like to be able to retrieve the name or URL of an attachment in List Formatting, please submit feedback to Microsoft🙇‍♂️ https://feedbackportal.microsoft.com/feedback/forum/ab3ad59e-6dd1-ec11-a7b5-0022481f35a4

[afpatel1]

Thanks for the quick update. Feel free to close this thread off.

One use case is searching, currently SharePoint look at everything in search results, and prioritizes pages over list results which only appear in show all results, so not a good UX. He doesn't think we can have custom search results views for specific pages. I believe the best knowledge base has the option to search effectively. I can open a new thread if you want should you want to explore this further.

Have a great rest of the week and I will be sure to follow you on any new developments around list formatting.