pnp / List-Formatting

List Formatting Samples for use in SharePoint and Microsoft Lists
https://pnp.github.io/List-Formatting/
MIT License
1.75k stars 844 forks source link

Added note on how to display answers (expanded and collapsed) #782

Closed tecchan1107 closed 6 months ago

tecchan1107 commented 6 months ago
Q A
Bug fix? no
New sample? no
Related issues? fixes #781

What's in this Pull Request?

Added note on how to display answers (expanded and collapsed)

afpatel1 commented 5 months ago

Hi there, I came across your code and would first like to say it's great and really appreciated. Couple of improvements I would like,

  1. When I add an attachment to the my question it does not show when I publish my view, the attachment is there by default when adding a new entry, image

  2. I would like to have screengrabs in my answer but the answer has to be in plain text, is there any amended code which can resolve this? That's the reason I thought to add an attachment with a doc with screenshots etc, but the attachment does not display. Would appreciate your feedback.

Thanks

tecchan1107 commented 5 months ago

Hi @afpatel1 .

  1. When I add an attachment to my question it does not show when I publish my view, the attachment is there by default when adding a new entry,

The original sample code does not take Attachments into account. Therefore, Attachments are not displayed.

The following is a sample code that displays Attachments.

List Formatting can get the presence or absence of Attachemnts, but not the name or URL of the attachment😢 When using the following code, include Attachments in the view.

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": "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" } } ] } ] } } ```

image

tecchan1107 commented 5 months ago

If you ever ask a question next time, please create a new issue🙇‍♂️

image