search

pnp / List-Formatting

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

Is my Discussion Board displaying right? #776

Closed jgq85 closed 3 months ago

jgq85 commented 4 months ago

SharePoint Online. I am trying the Discussion Board list.

I think I have all the fields added per the read-me and I added the JSON formatting, however it looks like this which has an editing type toolbar above each post. Is this permission based? Or sort of clutters so wondering how to fix.

image

tecchan1107 commented 4 months ago

Hi @jgq85 !

Is this permission based?

No, it isn't. Unfortunately, List Formatting does not allow you to get permissions, and coding with them is not possible😢 Therefore, the toolbar is visible to all users who can see the item.

It is possible to do things like "display it if the current user is included in a specific column" or "display it if the current user is included in a specific email address", as in the following code.

"style": {
  "display":"=if(indexOf([$MultiSelectUserColumn.email],@me)>-1,'','none')"
}
"style": {
  "display":"=if(indexOf('user1@contoso.com; user2@contoso.com',@me)>-1,'','none')"
}

Reference: Formatting syntax reference - @me

jgq85 commented 4 months ago

Hi @jgq85 !

Is this permission based?

No, it isn't. Unfortunately, List Formatting does not allow you to get permissions, and coding with them is not possible😢 Therefore, the toolbar is visible to all users who can see the item.

It is possible to do things like "display it if the current user is included in a specific column" or "display it if the current user is included in a specific email address", as in the following code.

"style": {
  "display":"=if(indexOf([$MultiSelectUserColumn.email],@me)>-1,'','none')"
}
"style": {
  "display":"=if(indexOf('user1@contoso.com; user2@contoso.com',@me)>-1,'','none')"
}

Reference: Formatting syntax reference - @me

Sorry I didn't realize that toolbar was always shown. I thought that "X" would delete the row. The preview page screenshot doesn't show it fully expanded. Is there a way to just keep it collapsed? It looks too cluttered when the toolbar is fully shown for every row.

image

tecchan1107 commented 4 months ago

Sooooooooo sorry... looking back at the code, I realized I was wrong., List Formatting probably allows you to get permissions, and this sample was using [$PermMask] to show and hide menus according to permissions.

If [$PermMask] was 0xb008431061 (probably view only permission), the toolbar was not displayed. image

Is there a way to just keep it collapsed?

The toolbar is controlled by the value of the Expand column, which may or may not be displayed. If you do not want it to be displayed, just set it to No.

image

Clicking on the icon updates the value in the Expand column.

image

If you do not want to control the display and hiding by column values, you can also display a toolbar on a custom card as follows.

image

Sample Code (Click to open/close) ``` json { "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json", "hideColumnHeader": true, "hideSelection": true, "rowFormatter": { "elmType": "div", "attributes": { "class": "ms-bgColor-info--hover" }, "style": { "border-bottom": "1px solid #eee" }, "children": [ { "elmType": "div", "children": [ { "elmType": "div", "style": { "padding": "5px 10px 0 10px", "float": "left" }, "children": [ { "elmType": "div", "style": { "display": "=if([$PermMask]=='0xb008431061','none','')", "border": "1px solid ", "border-radius": "50%", "padding": "10px", "cursor": "pointer", "margin-right": "10px" }, "attributes": { "title": "Menu", "iconName": "GlobalNavButton", "class": "ms-fontSize-20 ms-bgColor-gray60--hover ms-fontColor-themePrimary" }, "customCardProps": { "openOnEvent": "click", "directionalHint": "rightCenter", "isBeakVisible": true, "formatter": { "elmType": "div", "style": { "padding": "10px" }, "children": [ { "elmType": "div", "style": { "display": "inline-block" }, "children": [ { "elmType": "div", "style": { "padding": "10px", "cursor": "pointer", "border-top": "1px solid", "border-bottom": "1px solid", "border-left": "1px solid", "border-top-left-radius": "25px", "border-bottom-left-radius": "25px" }, "attributes": { "title": "Permission Mask", "iconName": "SignIn", "class": "ms-fontSize-20 ms-bgColor-gray60--hover ms-fontColor-themePrimary" }, "customCardProps": { "openOnEvent": "click", "directionalHint": "topCenter", "isBeakVisible": true, "formatter": { "elmType": "div", "children": [ { "elmType": "div", "style": {}, "children": [ { "elmType": "div", "style": { "display": "flex", "padding-top": "10px" }, "children": [ { "elmType": "div", "style": { "padding": "0px 10px" }, "attributes": { "iconName": "Signin", "class": "ms-fontColor-themePrimary ms-fontSize-20" } }, { "elmType": "div", "attributes": { "class": "ms-fontColor-themePrimary ms-fontSize-16 ms-fontWeight-bold" }, "txtContent": "USER PERMISSION" } ] }, { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex", "padding": "10px 10px 0px 10px" }, "children": [ { "elmType": "div", "style": { "display": "flex" }, "attributes": { "class": "ms-fontWeight-bold" }, "children": [ { "elmType": "div", "style": { "padding": "5px" }, "attributes": { "iconName": "Contact", "class": "ms-fontColor-themePrimary ms-fontSize-28" } }, { "elmType": "div", "style": { "padding": "5px 0px" }, "attributes": { "class": "ms-fontColor-info ms-fontSize-16" }, "txtContent": "@me" } ] } ] } ] }, { "elmType": "div", "children": [ { "elmType": "div", "style": { "display": "flex", "padding": "0px 10px 0px 10px" }, "children": [ { "elmType": "div", "style": { "display": "flex" }, "attributes": { "class": "ms-fontWeight-bold" }, "children": [ { "elmType": "div", "style": { "padding": "5px" }, "attributes": { "iconName": "Signin", "class": "ms-fontColor-themePrimary ms-fontSize-28" } }, { "elmType": "div", "style": { "padding": "5px 0px" }, "attributes": { "class": "ms-fontColor-info ms-fontSize-24" }, "txtContent": "=if([$PermMask]== '0x7fffffffffffffff','Full Control',if([$PermMask]== '0x1b03c431aef','Edit',if([$PermMask]== '0xb008431061','Read','')))" } ] } ] } ] } ] } ] } } }, { "elmType": "div", "style": { "padding": "10px", "cursor": "pointer", "border-top": "1px solid", "border-bottom": "1px solid" }, "attributes": { "title": "Send/Copy link", "iconName": "Link", "class": "ms-fontSize-20 ms-bgColor-gray60--hover ms-fontColor-themePrimary" }, "customRowAction": { "action": "share" } }, { "elmType": "div", "style": { "display": "=if([$_CommentCount]>0,'inline-flex','none')" }, "children": [ { "elmType": "div", "style": { "padding": "10px", "display": "flex", "cursor": "pointer", "border-bottom": "1px solid", "border-top": "1px solid" }, "attributes": { "title": "= [$_CommentCount] + ' Comments'", "class": "ms-bgColor-gray60--hover ms-fontColor-themePrimary" }, "customRowAction": { "action": "defaultClick" }, "children": [ { "elmType": "div", "attributes": { "iconName": "Comment", "class": "ms-fontSize-20 ms-fontColor-themePrimary" } }, { "elmType": "div", "style": { "padding-left": "5px" }, "attributes": { "class": "ms-fontSize-14 ms-fontColor-themePrimary" }, "txtContent": "[$_CommentCount]" } ] } ] }, { "elmType": "div", "style": { "padding": "10px", "cursor": "pointer", "border-bottom": "1px solid", "border-top": "1px solid" }, "attributes": { "title": "Edit", "iconName": "Edit", "class": "ms-fontSize-20 ms-bgColor-gray60--hover ms-fontColor-themePrimary" }, "customRowAction": { "action": "defaultClick" } }, { "elmType": "div", "style": { "padding": "10px", "border-top": "1px solid", "border-bottom": "1px solid", "border-right": "1px solid", "border-top-right-radius": "25px", "border-bottom-right-radius": "25px", "cursor": "pointer" }, "attributes": { "title": "Delete", "iconName": "Delete", "class": "ms-fontSize-20 ms-bgColor-gray60--hover ms-fontColor-themePrimary" }, "customRowAction": { "action": "delete" } } ] } ] } } } ] }, { "elmType": "div", "style": { "display": "flex" }, "children": [ { "elmType": "div", "style": { "border": "1px solid", "border-radius": "10px", "width": "40px", "height": "20px", "padding": "5px", "text-align": "center", "margin-top": "20px", "cursor": "pointer" }, "attributes": { "class": "ms-bgColor-neutralLight--hover ms-fontColor-themePrimary" }, "customRowAction": { "action": "setValue", "actionInput": { "Vote": "=if(indexOf([$Vote.email],@me) > -1, removeFrom([$Vote.email],@me), appendTo([$Vote.email],@me))" } }, "children": [ { "elmType": "div", "attributes": { "iconName": "SortUp", "class": "ms-fontSize-16 ms-fontWeight-semibold ms-fontColor-themePrimary" }, "style": { "display": "inline-block" } }, { "elmType": "div", "txtContent": "=length([$Vote])", "attributes": { "class": "ms-fontSize-16 ms-fontWeight-semibold" }, "style": { "display": "inline-block" } } ] }, { "elmType": "div", "attributes": { "class": "ms-fontSize-16 ms-bgColor-gray30" }, "style": { "padding": "15px", "border-radius": "10px", "margin": "10px", "height": "20px" }, "children": [ { "elmType": "div", "style": { "cursor": "pointer" }, "inlineEditField": "[$Categories]", "txtContent": "=substring([$Categories],0,indexOf([$Categories], ' '))" } ] }, { "elmType": "div", "style": {}, "children": [ { "elmType": "div", "style": { "cursor": "pointer", "white-space": "nowrap", "overflow": "hidden", "text-overflow": "ellipsis", "padding": "0 10px" }, "txtContent": "[$Title]", "attributes": { "class": "ms-fontSize-20 ms-fontWeight-semibold ms-fontColor-themePrimary" }, "customCardProps": { "formatter": { "elmType": "div", "style": { "display": "inherit", "width": "400px", "padding-right": "10px" }, "children": [ { "elmType": "div", "style": { "padding": "5px" }, "children": [ { "elmType": "div", "style": { "padding": "0px 5px", "display": "inline-block", "vertical-align": "super" }, "attributes": { "iconName": "Blog", "class": "ms-fontSize-20 ms-fontColor-themePrimary" } }, { "elmType": "div", "inlineEditField": "[$Title]", "txtContent": "[$Title]", "style": { "padding": "0px 5px 5px 5px", "display": "inline-block", "white-space": "nowrap", "overflow": "hidden", "text-overflow": "ellipsis", "width": "330px", "cursor": "pointer" }, "attributes": { "class": "ms-fontSize-24 ms-fontWeight-semibold ms-fontColor-themePrimary", "title": "[$Title]" } } ] }, { "elmType": "div", "children": [ { "elmType": "div", "inlineEditField": "[$Description]", "txtContent": "[$Description]", "style": { "padding": "10px", "margin-left": "15px", "display": "inline-block", "width": "350px", "max-height": "300px", "overflow": "auto", "cursor": "pointer" }, "attributes": { "class": "sp-field-italic sp-css-backgroundColor-neutralLighterAlt" } } ] }, { "elmType": "div", "style": { "padding": "10px" }, "children": [ { "elmType": "div", "style": { "display": "inline-block" }, "children": [ { "elmType": "div", "style": { "border": "3px solid #ccc", "border-radius": "50%", "padding": "5px", "cursor": "pointer" }, "attributes": { "iconName": "Add", "class": "ms-fontSize-18 ms-fontColor-blueDark ms-bgColor-communicationTint40 ms-bgColor-communicationTint20--hover" }, "customCardProps": { "openOnEvent": "click", "directionalHint": "topCenter", "isBeakVisible": true, "formatter": { "elmType": "div", "style": { "padding": "10px" }, "children": [ { "elmType": "div", "style": { "padding": "5px", "border-radius": "5px", "cursor": "pointer" }, "attributes": { "class": "ms-bgColor-gray30--hover ms-fontSize-18" }, "txtContent": "🙂", "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'🙂'+@me) > -1, replace([$Emotion],'🙂'+@me,''), [$Emotion]+'🙂'+@me)", "EmotionCount": "=if(length([$EmotionCount])==0,'🙂1🙁0😃0👏0👋0🔔0👑0🔎0☕0|',if(indexOf([$Emotion],'🙂'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'🙂')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙂')+2,lastIndexOf([$EmotionCount],'🙁'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🙁'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'🙂')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙂')+2,lastIndexOf([$EmotionCount],'🙁'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🙁'),indexOf([$EmotionCount]+'.','.'))))" } } }, { "elmType": "div", "style": { "padding": "5px", "border-radius": "5px", "cursor": "pointer" }, "attributes": { "class": "ms-bgColor-gray30--hover ms-fontSize-18" }, "txtContent": "🙁", "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'🙁'+@me) > -1, replace([$Emotion],'🙁'+@me,''), [$Emotion]+'🙁'+@me)", "EmotionCount": "=if(length([$EmotionCount])==0,'🙂0🙁1😃0👏0👋0🔔0👑0🔎0☕0|',if(indexOf([$Emotion],'🙁'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'🙁')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙁')+2,lastIndexOf([$EmotionCount],'😃'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'😃'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'🙁')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙁')+2,lastIndexOf([$EmotionCount],'😃'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'😃'),indexOf([$EmotionCount]+'.','.'))))" } } }, { "elmType": "div", "style": { "padding": "5px", "border-radius": "5px", "cursor": "pointer" }, "attributes": { "class": "ms-bgColor-gray30--hover ms-fontSize-18" }, "txtContent": "😃", "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'😃'+@me) > -1, replace([$Emotion],'😃'+@me,''), [$Emotion]+'😃'+@me)", "EmotionCount": "=if(length([$EmotionCount])==0,'🙂0🙁0😃1👏0👋0🔔0👑0🔎0☕0|',if(indexOf([$Emotion],'😃'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'😃')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'😃')+2,lastIndexOf([$EmotionCount],'👏'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👏'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'😃')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'😃')+2,lastIndexOf([$EmotionCount],'👏'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👏'),indexOf([$EmotionCount]+'.','.'))))" } } }, { "elmType": "div", "style": { "padding": "5px", "border-radius": "5px", "cursor": "pointer" }, "attributes": { "class": "ms-bgColor-gray30--hover ms-fontSize-18" }, "txtContent": "👏", "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'👏'+@me) > -1, replace([$Emotion],'👏'+@me,''), [$Emotion]+'👏'+@me)", "EmotionCount": "=if(length([$EmotionCount])==0,'🙂0🙁0😃0👏1👋0🔔0👑0🔎0☕0|',if(indexOf([$Emotion],'👏'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'👏')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👏')+2,lastIndexOf([$EmotionCount],'👋'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👋'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'👏')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👏')+2,lastIndexOf([$EmotionCount],'👋'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👋'),indexOf([$EmotionCount]+'.','.'))))" } } }, { "elmType": "div", "style": { "padding": "5px", "border-radius": "5px", "cursor": "pointer" }, "attributes": { "class": "ms-bgColor-gray30--hover ms-fontSize-18" }, "txtContent": "👋", "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'👋'+@me) > -1, replace([$Emotion],'👋'+@me,''), [$Emotion]+'👋'+@me)", "EmotionCount": "=if(length([$EmotionCount])==0,'🙂0🙁0😃0👏0👋1🔔0👑0🔎0☕0|',if(indexOf([$Emotion],'👋'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'👋')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👋')+2,lastIndexOf([$EmotionCount],'🔔'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🔔'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'👋')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👋')+2,lastIndexOf([$EmotionCount],'🔔'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🔔'),indexOf([$EmotionCount]+'.','.'))))" } } }, { "elmType": "div", "style": { "padding": "5px", "border-radius": "5px", "cursor": "pointer" }, "attributes": { "class": "ms-bgColor-gray30--hover ms-fontSize-18" }, "txtContent": "🔔", "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'🔔'+@me) > -1, replace([$Emotion],'🔔'+@me,''), [$Emotion]+'🔔'+@me)", "EmotionCount": "=if(length([$EmotionCount])==0,'🙂0🙁0😃0👏0👋0🔔1👑0🔎0☕0|',if(indexOf([$Emotion],'🔔'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'🔔')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔔')+2,lastIndexOf([$EmotionCount],'👑'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👑'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'🔔')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔔')+2,lastIndexOf([$EmotionCount],'👑'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👑'),indexOf([$EmotionCount]+'.','.'))))" } } }, { "elmType": "div", "style": { "padding": "5px", "border-radius": "5px", "cursor": "pointer" }, "attributes": { "class": "ms-bgColor-gray30--hover ms-fontSize-18" }, "txtContent": "👑", "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'👑'+@me) > -1, replace([$Emotion],'👑'+@me,''), [$Emotion]+'👑'+@me)", "EmotionCount": "=if(length([$EmotionCount])==0,'🙂0🙁0😃0👏0👋0🔔0👑1🔎0☕0|',if(indexOf([$Emotion],'👑'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'👑')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👑')+2,lastIndexOf([$EmotionCount],'🔎'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🔎'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'👑')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👑')+2,lastIndexOf([$EmotionCount],'🔎'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🔎'),indexOf([$EmotionCount]+'.','.'))))" } } }, { "elmType": "div", "style": { "padding": "5px", "border-radius": "5px", "cursor": "pointer" }, "attributes": { "class": "ms-bgColor-gray30--hover ms-fontSize-18" }, "txtContent": "🔎", "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'🔎'+@me) > -1, replace([$Emotion],'🔎'+@me,''), [$Emotion]+'🔎'+@me)", "EmotionCount": "=if(length([$EmotionCount])==0,'🙂0🙁0😃0👏0👋0🔔0👑0🔎1☕0|',if(indexOf([$Emotion],'🔎'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'🔎')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔎')+2,lastIndexOf([$EmotionCount],'☕'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'☕'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'🔎')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔎')+2,lastIndexOf([$EmotionCount],'☕'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'☕'),indexOf([$EmotionCount]+'.','.'))))" } } }, { "elmType": "div", "style": { "padding": "5px", "border-radius": "5px", "cursor": "pointer" }, "attributes": { "class": "ms-bgColor-gray30--hover ms-fontSize-18" }, "txtContent": "☕", "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'☕'+@me) > -1, replace([$Emotion],'☕'+@me,''), [$Emotion]+'☕'+@me)", "EmotionCount": "=if(length([$EmotionCount])==0,'🙂0🙁0😃0👏0👋0🔔0👑0🔎0☕1|',if(indexOf([$Emotion],'☕'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'☕')+1)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'☕')+1,lastIndexOf([$EmotionCount],'|'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'|'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'☕')+1)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'☕')+1,lastIndexOf([$EmotionCount],'|'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'|'),indexOf([$EmotionCount]+'.','.'))))" } } } ] } } } ] }, { "elmType": "div", "style": { "display": "inline-block", "padding": "5px" }, "children": [ { "elmType": "div", "style": { "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙂')+2,indexOf([$EmotionCount],'🙁'))) >0,'inline-block','none')", "padding": "5px 0px 5px 5px" }, "children": [ { "elmType": "div", "attributes": { "class": "ms-bgColor-communicationTint20--hover" }, "style": { "border": "1px solid #ccc", "border-radius": "5px", "padding-left": "5px" }, "children": [ { "elmType": "div", "style": { "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "🙂" }, { "elmType": "div", "style": { "padding": "5px", "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙂')+2,indexOf([$EmotionCount],'🙁')))" } ] } ], "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'🙂'+@me) > -1, replace([$Emotion],'🙂'+@me,''), [$Emotion]+'🙂'+@me)", "EmotionCount": "=if(indexOf([$Emotion],'🙂'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'🙂')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙂')+2,lastIndexOf([$EmotionCount],'🙁'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🙁'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'🙂')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙂')+2,lastIndexOf([$EmotionCount],'🙁'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🙁'),indexOf([$EmotionCount]+'.','.')))" } } }, { "elmType": "div", "style": { "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙁')+2,indexOf([$EmotionCount],'😃'))) >0,'inline-block','none')", "padding": "5px 0px 5px 5px" }, "children": [ { "elmType": "div", "style": { "border": "1px solid #ccc", "border-radius": "5px", "padding-left": "5px" }, "attributes": { "class": "ms-bgColor-communicationTint20--hover" }, "children": [ { "elmType": "div", "style": { "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "🙁" }, { "elmType": "div", "style": { "padding": "5px", "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙁')+2,indexOf([$EmotionCount],'😃')))" } ] } ], "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'🙁'+@me) > -1, replace([$Emotion],'🙁'+@me,''), [$Emotion]+'🙁'+@me)", "EmotionCount": "=if(indexOf([$Emotion],'🙁'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'🙁')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙁')+2,lastIndexOf([$EmotionCount],'😃'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'😃'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'🙁')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🙁')+2,lastIndexOf([$EmotionCount],'😃'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'😃'),indexOf([$EmotionCount]+'.','.')))" } } }, { "elmType": "div", "style": { "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'😃')+2,indexOf([$EmotionCount],'👏'))) >0,'inline-block','none')", "padding": "5px 0px 5px 5px" }, "children": [ { "elmType": "div", "style": { "border": "1px solid #ccc", "border-radius": "5px", "padding-left": "5px" }, "attributes": { "class": "ms-bgColor-communicationTint20--hover" }, "children": [ { "elmType": "div", "style": { "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "😃" }, { "elmType": "div", "style": { "padding": "5px", "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'😃')+2,indexOf([$EmotionCount],'👏')))" } ] } ], "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'😃'+@me) > -1, replace([$Emotion],'😃'+@me,''), [$Emotion]+'😃'+@me)", "EmotionCount": "=if(indexOf([$Emotion],'😃'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'😃')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'😃')+2,lastIndexOf([$EmotionCount],'👏'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👏'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'😃')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'😃')+2,lastIndexOf([$EmotionCount],'👏'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👏'),indexOf([$EmotionCount]+'.','.')))" } } }, { "elmType": "div", "style": { "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'👏')+2,indexOf([$EmotionCount],'👋'))) >0,'inline-block','none')", "padding": "5px 0px 5px 5px" }, "children": [ { "elmType": "div", "style": { "border": "1px solid #ccc", "border-radius": "5px", "padding-left": "5px" }, "attributes": { "class": "ms-bgColor-communicationTint20--hover" }, "children": [ { "elmType": "div", "style": { "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "👏" }, { "elmType": "div", "style": { "padding": "5px", "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'👏')+2,indexOf([$EmotionCount],'👋')))" } ] } ], "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'👏'+@me) > -1, replace([$Emotion],'👏'+@me,''), [$Emotion]+'👏'+@me)", "EmotionCount": "=if(indexOf([$Emotion],'👏'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'👏')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👏')+2,lastIndexOf([$EmotionCount],'👋'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👋'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'👏')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👏')+2,lastIndexOf([$EmotionCount],'👋'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👋'),indexOf([$EmotionCount]+'.','.')))" } } }, { "elmType": "div", "style": { "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'👋')+2,indexOf([$EmotionCount],'🔔'))) >0,'inline-block','none')", "padding": "5px 0px 5px 5px" }, "children": [ { "elmType": "div", "style": { "border": "1px solid #ccc", "border-radius": "5px", "padding-left": "5px" }, "attributes": { "class": "ms-bgColor-communicationTint20--hover" }, "children": [ { "elmType": "div", "style": { "padding": "5px", "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "👋" }, { "elmType": "div", "style": { "padding": "5px", "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'👋')+2,indexOf([$EmotionCount],'🔔')))" } ] } ], "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'👋'+@me) > -1, replace([$Emotion],'👋'+@me,''), [$Emotion]+'👋'+@me)", "EmotionCount": "=if(indexOf([$Emotion],'👋'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'👋')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👋')+2,lastIndexOf([$EmotionCount],'🔔'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🔔'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'👋')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👋')+2,lastIndexOf([$EmotionCount],'🔔'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🔔'),indexOf([$EmotionCount]+'.','.')))" } } }, { "elmType": "div", "style": { "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔔')+2,indexOf([$EmotionCount],'👑'))) >0,'inline-block','none')", "padding": "5px 0px 5px 5px" }, "children": [ { "elmType": "div", "style": { "border": "1px solid #ccc", "border-radius": "5px", "padding-left": "5px" }, "attributes": { "class": "ms-bgColor-communicationTint20--hover" }, "children": [ { "elmType": "div", "style": { "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "🔔" }, { "elmType": "div", "style": { "padding": "5px", "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔔')+2,indexOf([$EmotionCount],'👑')))" } ] } ], "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'🔔'+@me) > -1, replace([$Emotion],'🔔'+@me,''), [$Emotion]+'🔔'+@me)", "EmotionCount": "=if(indexOf([$Emotion],'🔔'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'🔔')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔔')+2,lastIndexOf([$EmotionCount],'👑'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👑'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'🔔')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔔')+2,lastIndexOf([$EmotionCount],'👑'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'👑'),indexOf([$EmotionCount]+'.','.')))" } } }, { "elmType": "div", "style": { "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'👑')+2,indexOf([$EmotionCount],'🔎'))) >0,'inline-block','none')", "padding-left": "5px" }, "children": [ { "elmType": "div", "style": { "display": "inline-block", "padding": "5px 0px 5px 5px" }, "children": [ { "elmType": "div", "style": { "border": "1px solid #ccc", "border-radius": "5px", "display": "inline-block", "padding-left": "5px" }, "attributes": { "class": "ms-bgColor-communicationTint20--hover" }, "children": [ { "elmType": "div", "style": { "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "👑" }, { "elmType": "div", "style": { "padding": "5px", "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'👑')+2,indexOf([$EmotionCount],'🔎')))" } ] } ] } ], "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'👑'+@me) > -1, replace([$Emotion],'👑'+@me,''), [$Emotion]+'👑'+@me)", "EmotionCount": "=if(indexOf([$Emotion],'👑'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'👑')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👑')+2,lastIndexOf([$EmotionCount],'🔎'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🔎'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'👑')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'👑')+2,lastIndexOf([$EmotionCount],'🔎'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'🔎'),indexOf([$EmotionCount]+'.','.')))" } } }, { "elmType": "div", "style": { "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔎')+2,indexOf([$EmotionCount],'☕'))) >0,'inline-block','none')", "padding-left": "5px" }, "children": [ { "elmType": "div", "style": { "border": "1px solid #ccc", "border-radius": "5px", "display": "inline-block", "padding-left": "5px" }, "attributes": { "class": "ms-bgColor-communicationTint20--hover" }, "children": [ { "elmType": "div", "style": { "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "🔎" }, { "elmType": "div", "style": { "padding": "5px", "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔎')+2,indexOf([$EmotionCount],'☕')))" } ] } ], "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'🔎'+@me) > -1, replace([$Emotion],'🔎'+@me,''), [$Emotion]+'🔎'+@me)", "EmotionCount": "=if(indexOf([$Emotion],'🔎'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'🔎')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔎')+2,lastIndexOf([$EmotionCount],'☕'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'☕'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'🔎')+2)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'🔎')+2,lastIndexOf([$EmotionCount],'☕'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'☕'),indexOf([$EmotionCount]+'.','.')))" } } }, { "elmType": "div", "style": { "display": "=if(Number(substring([$EmotionCount],indexOf([$EmotionCount],'☕')+1,lastIndexOf([$EmotionCount],'|'))) >0,'inline-block','none')", "padding-left": "5px" }, "children": [ { "elmType": "div", "style": { "border": "1px solid #ccc", "border-radius": "5px", "padding-left": "5px" }, "attributes": { "class": "ms-bgColor-communicationTint20--hover" }, "children": [ { "elmType": "div", "style": { "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "☕" }, { "elmType": "div", "style": { "padding": "5px", "cursor": "pointer", "display": "inline-block" }, "attributes": { "class": "ms-fontSize-16" }, "txtContent": "=Number(substring([$EmotionCount],indexOf([$EmotionCount],'☕')+1,lastIndexOf([$EmotionCount],'|')))" } ] } ], "customRowAction": { "action": "setValue", "actionInput": { "Emotion": "=if(indexOf([$Emotion],'☕'+@me) > -1, replace([$Emotion],'☕'+@me,''), [$Emotion]+'☕'+@me)", "EmotionCount": "=if(indexOf([$Emotion],'☕'+@me) > -1, substring([$EmotionCount],0,indexOf([$EmotionCount],'☕')+1)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'☕')+1,lastIndexOf([$EmotionCount],'|'))))-1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'|'),indexOf([$EmotionCount]+'.','.')), substring([$EmotionCount],0,indexOf([$EmotionCount],'☕')+1)+toString((Number(substring([$EmotionCount],indexOf([$EmotionCount],'☕')+1,lastIndexOf([$EmotionCount],'|'))))+1)+substring([$EmotionCount],lastIndexOf([$EmotionCount],'|'),indexOf([$EmotionCount]+'.','.')))" } } } ] } ] }, { "elmType": "div", "forEach": "personIterator in [$Editor]", "children": [ { "elmType": "div", "txtContent": "= [$ID] +' Last Modified ' + if(getMonth([$Modified])==0, 'Jan', if(getMonth([$Modified])==1, 'Feb', if(getMonth([$Modified])==2, 'Mar', if(getMonth([$Modified])==3, 'Apr', if(getMonth([$Modified])==4, 'May', if(getMonth([$Modified])==5, 'Jun', if(getMonth([$Modified])==6 , 'Jul', if(getMonth([$Modified])==7, 'Aug', if(getMonth([$Modified])==8 , 'Sep', if(getMonth([$Modified])==9, 'Oct', if(getMonth([$Modified])==10, 'Nov', if(getMonth([$Modified])==11, 'Dec', ''))))))))))))+ ' ' +getDate([$Modified])+ ', '+ getYear([$Modified]) + ' by ' + [$personIterator.title] +' v'+[$owshiddenversion]", "attributes": { "class": "ms-fontSize-12 ms-fontColor-gray100" }, "style": { "padding": "0px 10px 10px 5px", "margin-left": "5px", "display": "inline-block" } } ] } ] }, "openOnEvent": "click", "directionalHint": "bottomCenter", "isBeakVisible": true } }, { "elmType": "div", "style": { "height": "30px", "white-space": "nowrap", "overflow": "hidden", "text-overflow": "ellipsis", "cursor": "pointer" }, "inlineEditField": "[$Tags]", "attributes": { "iconName": "=if(length([$Tags])==0,'Tag','')", "class": "=if(length([$Tags])==0,'ms-fontSize-24','ms-fontSize-14')+ ' ms-fontColor-themePrimary'" }, "children": [ { "columnFormatterReference": "[$Tags]" } ] }, { "elmType": "div", "style": { "padding": "10px" }, "forEach": "personIterator in [$Author]", "children": [ { "elmType": "div", "style": { "border-radius": "50%" }, "attributes": { "class": "ms-fontColor-gray100" }, "txtContent": "=[$personIterator.title] + ' started on '+ if(getMonth([$Created])==0, 'Jan', if(getMonth([$Created])==1, 'Feb', if(getMonth([$Created])==2, 'Mar', if(getMonth([$Created])==3, 'Apr', if(getMonth([$Created])==4, 'May', if(getMonth([$Created])==5, 'Jun', if(getMonth([$Created])==6 , 'Jul', if(getMonth([$Created])==7, 'Aug', if(getMonth([$Created])==8 , 'Sep', if(getMonth([$Created])==9, 'Oct', if(getMonth([$Created])==10, 'Nov', if(getMonth([$Created])==11, 'Dec', ''))))))))))))+ ' ' +getDate([$Created])+ ', '+ getYear([$Created]) +' in '+ substring([$Categories],indexOf([$Categories], ' '),lastIndexOf([$Categories]+';', ';'))" } ] } ] }, { "elmType": "div", "style": { "padding": "10px" }, "forEach": "personIterator in [$Author]", "children": [ { "elmType": "img", "defaultHoverField": "[$personIterator]", "style": { "width": "40", "border-radius": "50%" }, "attributes": { "src": "=getUserImage('[$personIterator.email]','small')" } } ] } ] } ] } ] } } ```
tecchan1107 commented 4 months ago

PermMask was mentioned in the following article. https://www.sharepointpro.com.au/blog/hiding-columns-based-on-permission-levels/

Regarding the values for each permission, the values in the code differed from those in the article above. (In the code it says 0xb008431061, but in the article it says 0xb008431041)

I am not familiar with PermMask and do not know if either is correct. Sorry😢 (I only learned about PermMask today😱)