pnp / List-Formatting

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

I have a question about the honeycomb view #734

Closed CROMBES closed 8 months ago

CROMBES commented 8 months ago

Hi I'm struggling with the honeycomb view --- for some reason the URL doesn't launch although it is single line of text any obvious reason what i'm doing wrong image

tecchan1107 commented 8 months ago

Hi @CROMBES !

I'm struggling with the honeycomb view --- for some reason the URL doesn't launch although it is single line of text any obvious reason what i'm doing wrong

I just tried it in my environment and was able to open the link without any problem.

Perhaps the internal name of the column is incorrect. The internal name of a column is the name it had when it was first created. You can also check the internal name of the column from the URL on the Edit Column screen in Classic.

image

If it is wrong, please try to create a new column whose internal name is URL, or replace the $URL part in the JSON.

tecchan1107 commented 8 months ago

There was something I forgot to write.

If the view does not contain a URL column, it will also not work correctly. You can check if a view contains a URL column by going to [Add or remove fields].

image

CROMBES commented 8 months ago

@tecchan1107 thanks for the valuable feedback - everything you mentioned is in order , however no luck with the URL is always go to the blank tab as you can see in the grid view ther URL is in the view image and the honeycomb view is visually ok image

I do not find what's going wrong

tecchan1107 commented 8 months ago

Is it possible to send a screenshot of the Edit Column of the URL (the one that shows the Field= of the URL as shown in the next image) and a screenshot of the blank page? image

CROMBES commented 8 months ago

image image

thanks for your help !

tecchan1107 commented 8 months ago

Thanks for the screenshots! I just can't see the address from the Edit Column screenshot.

Sorry, can you send another screenshot of the Edit Column screen including the address? (If you can see the Field= at the end of the address, it is OK.)

CROMBES commented 8 months ago

image

tecchan1107 commented 8 months ago

Thanks for the screenshot! It seems that the link did not open because the internal name of the column is not a URL, but rather URL0 due to some effect. image

Please try the following code. Converted $URL to $URL0.

Sample Code (Click to open/close) ``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideSelection": true, "hideColumnHeader": true, "rowFormatter": { "elmType": "div", "children": [ { "elmType": "div", "style": { "height": "150px", "display": "=if(@rowIndex%5==0,'','none')" } }, { "elmType": "div", "style": { "position": "absolute", "width": "150px", "height": "150px", "left": "=if(floor(@rowIndex/5)%2==0,@rowIndex%5*170+'px',@rowIndex%5*170+85+'px')", "top": "=if(@rowIndex%5==0,'','-150px')" }, "children": [ { "elmType": "a", "style": { "position": "relative", "display": "flex", "justify-content": "center", "align-items": "center", "width": "100%", "height": "100%", "top": "=if(floor(@rowIndex/5)>0,floor(@rowIndex/5)*-10+'px','')" }, "attributes": { "href": "[$URL0]", "target": "_blank", "class": "ms-fontColor-themePrimary ms-fontColor-themeDark--hover" }, "children": [ { "elmType": "svg", "style": { "fill": "currentColor", "cursor": "pointer" }, "attributes": { "viewBox": "-150 -150 300 300" }, "children": [ { "elmType": "path", "attributes": { "d": "M130 75 L0 150 L-130 75 L-130 -75 L-0 -150 L130 -75 z" } } ] }, { "elmType": "div", "style": { "position": "absolute", "display": "flex", "flex-direction": "column", "align-items": "center", "justify-content": "center", "cursor": "pointer", "width": "100%", "height": "100%" }, "attributes": { "class": "ms-fontColor-white" }, "children": [ { "elmType": "div", "style": { "font-size": "32px", "margin-bottom": "5px" }, "attributes": { "iconName": "[$Icon]" } }, { "elmType": "div", "style": { "font-size": "14px", "width": "75%", "text-align": "center" }, "txtContent": "[$Title]" } ] } ] } ] } ] } } ```
CROMBES commented 8 months ago

@tecchan1107 perfect ! thank you very much