Odd outcome for rich text column

[UrbanCurry]

Hi there, I've been mostly successful with this - but for some reason the Answer (Rich Text) hyperlinks display as per the image - is there a way to get the links to display correctly, or is this a native SPO issue? Conversly, do we have to stick with plain text and no links in our answers?

Thanks

[tecchan1107]

Hi @UrbanCurry ! Unfortunately, rich text is not supported at this time and will appear as the image you uploaded😖 So you need to use plain multi-line text! https://learn.microsoft.com/sharepoint/dev/declarative-customization/column-formatting#supported-column-types

[UrbanCurry]

Thanks for the clarification - is it possible to have another hyperlink column below the answer? as per the mockup below

[tecchan1107]

I made it to try!

In the image above, a new hyperlink column with the internal name Hyperlink is added.

Sample Code (Click to open)

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideSelection": true, "hideColumnHeader": 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": "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", "style": { "display": "flex", "flex-direction": "column", "align-items": "flex-start", "max-width": "905px" }, "children": [ { "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", "margin": "1px 4px 4px 60px", "width": "100%" }, "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", "max-width": "900px", "min-width": "205px", "margin-top": "8px", "margin-bottom": "8px" } }, { "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", "attributes": { "class": "ms-bgColor-themeLighterAlt" }, "style": { "justify-content": "start", "color": "ms-fontColor-Primary", "display": "=if([$Hyperlink],'flex','none')", "padding": "1px 8px 10px 20px", "border-radius": "6px", "max-width": "905px", "margin": "1px 4px 4px 60px", "width": "100%" }, "children": [ { "elmType": "div", "style": { "text-align": "left", "font-weight": "400", "font-size": "15px" }, "children": [ { "elmType": "div", "children": [ { "elmType": "span", "style": { "margin-top": "8px", "padding-left": "1px", "color": "black" }, "attributes": { "class": "ms-fontSize-m", "iconName": "Lightbulb" } }, { "elmType": "span", "txtContent": "Link", "style": { "font-weight": "500", "color": "black", "padding-left": "4px" } } ] }, { "elmType": "a", "txtContent": "[$Hyperlink.desc]", "attributes": { "href": "[$Hyperlink]", "target": "_blank", "class": "ms-fontColor-themePrimary" } } ] } ] } ] } } ```

[UrbanCurry]

That looks ideal - I'll give it a go

---

From: Tetsuya Kawahara @.> Sent: 22 May 2023 2:04 PM To: pnp/List-Formatting @.> Cc: UrbanCurry @.>; Mention @.> Subject: Re: [pnp/List-Formatting] Odd outcome for rich text column (Issue #676)

Does it look like the following image? [image]https://user-images.githubusercontent.com/51254139/239915708-26a1fe9c-b875-4384-8b4a-c6f8f9a3be77.png

In the image above, a new hyperlink column with the internal name Hyperlink is added. [image]https://user-images.githubusercontent.com/51254139/239916704-00f55af3-e2be-4230-b4f3-27e16e56f161.png

Sample Code (Click to open)

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideSelection": true, "hideColumnHeader": 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": "div", "children": [ { "elmType": "span", "style": { "padding": "5px 5px 5px 5px", "font-weight": "500", "font-size": "15px" }, "txtContent": @.***" } ] }, { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "justify-content": "center" } } ] } ] } }, "rowFormatter": { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "align-items": "flex-start", "max-width": "905px" }, "children": [ { "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", "margin": "1px 4px 4px 60px", "width": "100%" }, "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", "max-width": "900px", "min-width": "205px", "margin-top": "8px", "margin-bottom": "8px" } }, { "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", "attributes": { "class": "ms-bgColor-themeLighterAlt" }, "style": { "justify-content": "start", "color": "ms-fontColor-Primary", "display": "=if([$Hyperlink],'flex','none')", "padding": "1px 8px 10px 20px", "border-radius": "6px", "max-width": "905px", "margin": "1px 4px 4px 60px", "width": "100%" }, "children": [ { "elmType": "div", "style": { "text-align": "left", "font-weight": "400", "font-size": "15px" }, "children": [ { "elmType": "div", "children": [ { "elmType": "span", "style": { "margin-top": "8px", "padding-left": "1px", "color": "black" }, "attributes": { "class": "ms-fontSize-m", "iconName": "Lightbulb" } }, { "elmType": "span", "txtContent": "Link", "style": { "font-weight": "500", "color": "black", "padding-left": "4px" } } ] }, { "elmType": "a", "txtContent": "[$Hyperlink.desc]", "style": { "padding-bottom": "10px", "display": "=if([$Hyperlink],'','none')" }, "attributes": { "href": "[$Hyperlink]", "target": "_blank", "class": "ms-fontColor-themePrimary" } } ] } ] } ] } }

— Reply to this email directly, view it on GitHubhttps://github.com/pnp/List-Formatting/issues/676#issuecomment-1557185888, or unsubscribehttps://github.com/notifications/unsubscribe-auth/BAAOP6RGPCJ6IFEMUY7FYTDXHNP7XANCNFSM6AAAAAAYKF6HSU. You are receiving this because you were mentioned.Message ID: @.***>

[UrbanCurry]

I'm not able to replicate your image above - I have all the columns, have added your JSON, and grouped the view by Question, but still no second links answer - thanks for the guidance.

[tecchan1107]

Perhaps the link is not being displayed because the internal name of the Hyperlink column is set to Link. I modified it to display the value of the column whose internal name is Link. Try the following code.

Sample Code (Click to open)

``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideSelection": true, "hideColumnHeader": 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": "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", "style": { "display": "flex", "flex-direction": "column", "align-items": "flex-start", "max-width": "905px" }, "children": [ { "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", "margin": "1px 4px 4px 60px", "width": "100%" }, "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", "max-width": "900px", "min-width": "205px", "margin-top": "8px", "margin-bottom": "8px" } }, { "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", "attributes": { "class": "ms-bgColor-themeLighterAlt" }, "style": { "justify-content": "start", "color": "ms-fontColor-Primary", "display": "=if([$Link],'flex','none')", "padding": "1px 8px 10px 20px", "border-radius": "6px", "max-width": "905px", "margin": "1px 4px 4px 60px", "width": "100%" }, "children": [ { "elmType": "div", "style": { "text-align": "left", "font-weight": "400", "font-size": "15px" }, "children": [ { "elmType": "div", "children": [ { "elmType": "span", "style": { "margin-top": "8px", "padding-left": "1px", "color": "black" }, "attributes": { "class": "ms-fontSize-m", "iconName": "Lightbulb" } }, { "elmType": "span", "txtContent": "Link", "style": { "font-weight": "500", "color": "black", "padding-left": "4px" } } ] }, { "elmType": "a", "txtContent": "[$Link.desc]", "attributes": { "href": "[$Link]", "target": "_blank", "class": "ms-fontColor-themePrimary" } } ] } ] } ] } } ```

[UrbanCurry]

Cheers, just popped out to pup granddaughter, will try in about 30 mins. Really appreciate the help.

---

From: Tetsuya Kawahara @.> Sent: Monday, May 22, 2023 2:42:55 PM To: pnp/List-Formatting @.> Cc: UrbanCurry @.>; Mention @.> Subject: Re: [pnp/List-Formatting] Odd outcome for rich text column (Issue #676)

Perhaps the link is not being displayed because the internal name of the Hyperlink column is set to Link. I modified it to display the value of the column whose internal name is Link. Try the following code.

Sample Code (Click to open)

{ "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideSelection": true, "hideColumnHeader": 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": "div", "children": [ { "elmType": "span", "style": { "padding": "5px 5px 5px 5px", "font-weight": "500", "font-size": "15px" }, "txtContent": @.***" } ] }, { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "justify-content": "center" } } ] } ] } }, "rowFormatter": { "elmType": "div", "style": { "display": "flex", "flex-direction": "column", "align-items": "flex-start", "max-width": "905px" }, "children": [ { "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", "margin": "1px 4px 4px 60px", "width": "100%" }, "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", "max-width": "900px", "min-width": "205px", "margin-top": "8px", "margin-bottom": "8px" } }, { "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", "attributes": { "class": "ms-bgColor-themeLighterAlt" }, "style": { "justify-content": "start", "color": "ms-fontColor-Primary", "display": "=if([$Link],'flex','none')", "padding": "1px 8px 10px 20px", "border-radius": "6px", "max-width": "905px", "margin": "1px 4px 4px 60px", "width": "100%" }, "children": [ { "elmType": "div", "style": { "text-align": "left", "font-weight": "400", "font-size": "15px" }, "children": [ { "elmType": "div", "children": [ { "elmType": "span", "style": { "margin-top": "8px", "padding-left": "1px", "color": "black" }, "attributes": { "class": "ms-fontSize-m", "iconName": "Lightbulb" } }, { "elmType": "span", "txtContent": "Link", "style": { "font-weight": "500", "color": "black", "padding-left": "4px" } } ] }, { "elmType": "a", "txtContent": "[$Link.desc]", "attributes": { "href": "[$Link]", "target": "_blank", "class": "ms-fontColor-themePrimary" } } ] } ] } ] } }

— Reply to this email directly, view it on GitHubhttps://github.com/pnp/List-Formatting/issues/676#issuecomment-1557245832, or unsubscribehttps://github.com/notifications/unsubscribe-auth/BAAOP6QPUEKXYSMZVDXKWDLXHNUN7ANCNFSM6AAAAAAYKF6HSU. You are receiving this because you were mentioned.Message ID: @.***>

[tecchan1107]

The internal name of the column can be found on the Edit Column screen; check to see if Link appears after Field=.

[UrbanCurry]

Yay, genius, that was set to Link in field settings as mentioned and the second adaption worked.

Many many thanks, very skilled top notch feedback - thank you so much... that's saved me hours of work I imagine - I would suggest that bespoke solution is added to the original page allowing for links and images here:

https://pnp.github.io/List-Formatting/viewsamples/

Appreciated!!!

[tecchan1107]

I'm glad it worked out!!!

[UrbanCurry]

Apologise for another reach out - I'm getting an odd sort error. I've added a sort column, but when all is setup and in place (and sorting is by the sorting column), it refuses. The only way I can logically sort is add A-Z at beginning of each Question.

This is what I get if sorted by SORTING column - just doesnt budge:

Thanks as always

[tecchan1107]

Hi @UrbanCurry ! Since this sample is grouped, the order of the grouping is applied first!

If they are grouped, the next sort setting is the order within that grouping.

[UrbanCurry]

Sorry for delay replying (Hols). Thanks for the clarification - I have the grouping sorted by question all fine, but the odd issue is when I try to sort by the Sorting named Column (image 1), it does nothing and remains in default sort ...as ther questions are added. Even if I select order by SORTING A, B, C or C, B, A (image 2) the sorting is ignored and I remain as per (image 3). Really odd. The first one should be Try this first question. but is stuck in reverse. I've gone blind me thinks!