Sp-dev-docs: Item form pops up only when tileProps: hideSelection is false
Category
- [x] Bug
Describe the bug
Any view that is built for Tiling (using the
tilePropselement in the custom list view formatting) no longer allows the item form to pop up if the propertyhideSelectionis set totrue.
Steps to reproduce
- Create a new list. I named mine TileTest. Don't worry about adding any columns.
- Create a new view for the list. I called mine HideSelectionTest.
- Click Format Current View and choose Advanced Mode.
- Paste the following json into your custom view format text area:
{
"$schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"tileProps": {
"hideSelection": true,
"height": "425",
"width": "350",
"formatter": {
"elmType": "div",
"style": {
"align-items": "stretch",
"margin": "3px 2px",
"background-color": "#fbfbfb",
"height": "375px",
"overflow": "inherit",
"border-radius": "2px",
"box-shadow": "0px 1.6px 3.6px 0 #00000024, 0px 0.3px 0.9px 0 #00000024"
},
"children": [
{
"elmType": "div",
"style": {
"display": "flex",
"flex-wrap": "wrap",
"position": "relative",
"padding-bottom": "10px",
"width": "100%"
},
"children": [
{
"elmType": "div",
"style": {
"margin-top": "0px",
"width": "100%",
"height": "180px",
"display": "block",
"align-items": "center",
"justify-content": "center",
"position": "relative",
"border-bottom": "1px solid #EEE",
"overflow": "hidden",
"border-radius": "2px 2px 0 0"
},
"children": [
{
"elmType": "button",
"style": {
"position": "absolute",
"height": "100%",
"width": "100%",
"opacity": "0",
"cursor": "pointer"
},
"customRowAction": {
"action": "defaultClick"
}
},
{
"elmType": "div",
"style": {
"width": "100%",
"height": "100%",
"oveflow": "auto",
"text-align": "center",
"margin-left": "auto",
"margin-right": "auto",
"display": "block",
"overflow": "hidden"
},
"children": [
{
"elmType": "img",
"style": {
"max-width": "100%",
"max-height": "100%",
"margin": "auto",
"display": "block"
},
"attributes": {
"src": "https://www.stratoscale.com/wp-content/uploads/2019/04/bigstock-173449184-e1500558631821.jpg"
}
},
{
"elmType": "div",
"style": {
"position": "absolute",
"bottom": "20px",
"width": "75%",
"background-color": "rgba(5,5,5,0.7)",
"color": "white",
"text-align": "left",
"padding": "5px"
},
"txtContent": "[$Title]"
},
{
"elmType": "div",
"style": {
"position": "absolute",
"top": "0",
"right": "5px",
"display": "block",
"line-height": "2",
"color": "white",
"background-color": "#228b22",
"padding": "0 7px",
"border-radius": "2px",
"font-size": "12px",
"margin-top": "10px",
"margin-right": "10px"
},
"children": [
{
"elmType": "span",
"style": {
"display": "inline"
},
"txtContent": "TEST"
}
]
}
]
}
]
},
{
"elmType": "div",
"style": {
"height": "173px",
"display": "block",
"width": "100%",
"padding": "0px 10px"
},
"children": [
{
"elmType": "div",
"style": {
"height": "90px",
"overflow": "hidden",
"line-height": "18px"
},
"txtContent": "this is dummy data for a test"
}
]
},
{
"elmType": "div",
"style": {
"width": "100%",
"height": "32px",
"padding": "0 0 0 16px",
"position": "absolute",
"bottom": "10px",
"display": "block",
"justify-content": "space-around"
},
"children": [
{
"elmType": "button",
"customRowAction": {
"action": "defaultClick"
},
"attributes": {
"title": "Learn More"
},
"style": {
"height": "32px",
"padding": "0 16px",
"margin-right": "21px",
"float": "right",
"color": "#333",
"border": "1px solid #8a8886",
"background-color": "white",
"cursor": "pointer",
"font-size": "14px",
"font-weight": "600",
"line-height": "1.4",
"border-radius": "2px"
},
"children": [
{
"elmType": "span",
"txtContent": "Learn More"
}
]
}
]
}
]
}
]
}
}
}
- Preview or Save.
- Put the list into Tile Mode
- Attempt to click a tile. Note that the item view/edit form does not appear.
Expected behavior
When clicking the tile, the view/edit form _should_ appear. NOTE that if you simply change
tileProps: hideSelectiontofalsethat the view/edit form _will_ appear, as expected.
Environment details (BOTH GA production of SharePoint Online and Targeted preview release of Dev Tenant)
- Numerous machine types that we can duplicate on, but for the purposes of this last test, I did it on MacOS Catalina 10.15.5
- SharePoint Online (both GA release and Dev Tenant targeted release)
- Numerous browsers but for the purposes of this last test, Microsoft Edge Version 83.0.478.56 (Official build) (64-bit)
mhomol
All 20 comments
Thank you for reporting this issue. We will be triaging your incoming issue as soon as possible.
msft-github-bot
on 6 Jul 2020
thought I would add that I even tried removing any existance of this element and the problem still exists:
"customRowAction": {
"action": "defaultClick"
}
I have the same problem. I created with SharePoint Formatter a TileView in which the User could interact with 3 Buttons and hover over pictures to see the names of the User. Neither the Buttons work nor the hovering over the pictures shows anything anymore.
I can't interact with anything inside the TileView since a few days ago.
It worked fine a few days/weeks ago.
Steps to reproduce:
- create a new List
- create a column named "Person"
- Type of information: Person or Group
- multiple Person
- create an item (Person field should be filled with existing users)
- Navigate to your list
- On the right side of the command bar click on All Items, then Format this View and choose Advanced Mode
- Paste the json below and click Save (I shortend it to the relevant pieces):
{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"tileProps": {
"height": "370",
"width": "528",
"hideSelection": true,
"formatter": {
"elmType": "div",
"style": {
"display": "block",
"align-items": "stretch",
"margin-bottom": "16px",
"min-width": "150px",
"flex-grow": "1",
"justify-content": "space-around",
"padding": "5px"
},
"children": [
{
"elmType": "div",
"style": {
"background-color": "#F0F8FF",
"display": "flex",
"height": "15%"
},
"children": [
{
"elmType": "div",
"style": {
"background-color": "#F0F8FF",
"display": "flex",
"box-shadow": "0px 0px 0px 0 #00000024, 0px 0px 0px 0 #00000024",
"overflow": "hidden",
"border-radius": "2px",
"padding-left": "16px",
"padding-top": "16px",
"color": "#0078d4",
"font-size": "18px",
"font-weight": "600",
"float": "left",
"width": "100%"
},
"attributes": {
"class": "ms-bgColor-neutralLighterAlt"
},
"txtContent": "[$Title]"
}
]
},
{
"elmType": "div",
"style": {
"display": "flex"
},
"children": [
{
"elmType": "div",
"style": {
"background-color": "#F0F8FF",
"width": "100%",
"height": "235px",
"display": "block",
"box-shadow": "0px 0x 0px 0 #00000024, 0px 0px 0px 0 #00000024",
"overflow": "hidden",
"border-radius": "2px",
"padding-left": "16px",
"padding-top": "16px"
},
"attributes": {
"class": "ms-bgColor-neutralLighterAlt"
},
"children": [
{
"forEach": "personIterator in [$Person]",
"elmType": "div",
"style": {
"width": "32px",
"height": "32px",
"overflow": "hidden",
"border-radius": "50%",
"margin": "2px",
"display": "=if(loopIndex('personIterator') >= 8, 'none', '')",
"float": "left"
},
"children": [
{
"elmType": "img",
"attributes": {
"src": "=@currentWeb + '/_layouts/15/userphoto.aspx?size=S&accountname=' + [$personIterator.email]",
"title": "[$personIterator.title]"
},
"style": {
"position": "relative",
"top": "50%",
"left": "50%",
"width": "100%",
"height": "auto",
"margin-left": "-50%",
"margin-top": "-50%",
"display": "=if(length([$Person]) > 8 && loopIndex('personIterator') >= 7, 'none', '')",
"vertical-align": "baseline",
"float": "left"
}
},
{
"elmType": "div",
"attributes": {
"title": "=join([$Person.title], ', ')",
"class": "ms-bgColor-neutralLight ms-fontColor-neutralSecondary"
},
"style": {
"width": "100%",
"height": "100%",
"text-align": "center",
"line-height": "30px",
"font-size": "14px",
"display": "=if(length([$Person]) > 8 && loopIndex('personIterator') == 7, '', 'none')",
"float": "left"
},
"children": [
{
"elmType": "span",
"txtContent": "='+' + toString(length([$Person]) - (7))"
}
]
}
]
}
]
}
]
},
{
"elmType": "div",
"style": {
"background-color": "#F0F8FF",
"display": "flex",
"height": "11%"
},
"children": [
{
"elmType": "div",
"style": {
"background-color": "#F0F8FF",
"display": "block",
"height": "100%",
"width": "2%"
}
},
{
"elmType": "button",
"style": {
"display": "block",
"border": "groove",
"background-color": "transparent",
"color": "#0078d4",
"cursor": "pointer",
"width": "75%",
"float": "left",
"border-color": "#0078d4",
"border-width": "2px"
},
"txtContent": {
"operator": "+",
"operands": [
"[join / leave]",
" "
]
},
"customRowAction": {
"action": "executeFlow",
"actionParams": "{\"id\": \"f0b8ad78-198a-4b13-8bc1-f452f9fb912f\"}"
}
},
{
"elmType": "div",
"style": {
"background-color": "#F0F8FF",
"display": "block",
"height": "100%",
"width": "2%"
}
},
{
"elmType": "button",
"txtContent": "Edit",
"style": {
"border": "groove",
"background-color": "transparent",
"border-color": "#0078d4",
"height": "100%",
"color": "#0078d4",
"cursor": "pointer",
"min-width": "80px",
"border-width": "2px"
},
"customRowAction": {
"action": "editProps"
}
},
{
"elmType": "div",
"style": {
"background-color": "#F0F8FF",
"display": "block",
"height": "100%",
"width": "2%"
}
},
{
"elmType": "button",
"txtContent": "Delete",
"style": {
"border": "groove",
"background-color": "transparent",
"border-color": "#0078d4",
"height": "100%",
"color": "#0078d4",
"cursor": "pointer",
"min-width": "80px",
"border-width": "2px"
},
"customRowAction": {
"action": "delete"
}
}
]
},
{
"elmType": "div",
"style": {
"background-color": "#F0F8FF",
"display": "block",
"height": "1%",
"width": "100%"
}
}
]
}
}
}
- Now go to the right side of the command bar click on All Items again to choose the new view
- You can't interact with anything in the tileview.
- A few days/weeks ago it still worked as intended. (hovering over pictures showed the names and Buttons were useable)
The Buttons do:
- join/leave - start a workflow
- edit - edit the item
- delete - delete the item
_EDIT:_ I found the same problem asked in stackexchange.
I think this can be helpfull to fixing the bug. An answer to the question shows the code and points to the possible error
<a href="javascript:;"></a> that surrounds the tile view.
Link: https://sharepoint.stackexchange.com/questions/282431/promoted-links-list-using-view-formatting-json-stopped-working-today
Kind regards
Ricardo
RicardoFH95
on 8 Jul 2020
Hello, I'm having the same issue but when trying just to open a link. It was correctly working until this week, that the link does not open. When I change hideSelection to false, it opens the item detail panel and keeps ignoring the link element.
I have prepared this minimum sample that can be tested in any list:
{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"tileProps": {
"hideSelection": true,
"width": "150",
"height": "150",
"formatter": {
"elmType": "div",
"style": {
"padding": "8px",
"border": "1px solid #ababab"
},
"children": [{
"elmType": "a",
"attributes": {
"href": "https://www.google.es",
"target": "_blank"
},
"txtContent": "[$Title]"
}]
}
}
}
AsunSanLo
on 9 Jul 2020
Thanks @AsunSanLo @RicardoFH95 @mhomol for reporting this and adding info. We have made some fixes in this area. Please do let me know if this is still reproducible.
shagra-ms
on 20 Jul 2020
@shagra-ms thanks for responding. I re-tested my initial scenario and still saw the same problem. _However_, then I looked at the json for the formatting and it looks like the following snippet was _removed_ from my formatting json for my button (I had not touched this JSON since my original post) and I had to _re-add_ it:
"customRowAction": {
"action": "defaultClick"
}
Once I re-added the JSON everything worked again as intended. So if the end user doesn't take the initiative to update the JSON it doesn't work, but if they re-update it, it _will_ work.
mhomol
on 20 Jul 2020
I just started having a problem that seems related. My custom formatting was working fine last week, and now it is not.
This isn't tileProps like the original post. Just Format current view on an "Entire Row".
Using a simple sample from the formatting examples I can see the view fail if I turn "hideSelection" to false. It works fine if set to true. I don't want to hideSelection. Searching on that lead me to this post. I'm concerned the changes made above broke something else.
`
{
"schema": "https://developer.microsoft.com/json-schemas/sp/view-formatting.schema.json",
"hideSelection": true,
"hideColumnHeader": true,
"rowFormatter": {
"elmType": "div",
"attributes": {
"class": "sp-row-card"
},
"children": [
{
"elmType": "div",
"style": {
"text-align": "left"
},
"children": [
{
"elmType": "div",
"attributes": {
"class": "sp-row-title"
},
"txtContent": "[$Title]"
}
]
}
]
}
}
`
MichaelS4G
on 27 Jul 2020
@shagra-ms everything on the list page works for me again. The Buttons do their work again!
Thank You for fixing it!
But I tried to use the same list with the same TileView Code as in my comment above as a modern page webpart and there I got the same problem again.
The Delete Button works as intended
The Workflow Button doesn't work (link is again ";")
The Edit Button desn't work too (link is again ";")
kind regards
Ricardo
RicardoFH95
on 30 Jul 2020
I've noticed an issue starting today, not tileProps related, but on a modern list with customised list forms (not with PowerApps).
The defaultClick and editProps actions of customRowAction used to navigate to the (classic) customised list forms, now they just open the details panel instead.
This behaviour happens whether the list view has a custom JSON format or not.
If the list doesn't have a custom JSON format, clicking the Title of an item also just opens the details panel, rather than navigating to the (classic) customised Display list form.
phillipharding
on 31 Jul 2020
We are seeing the same Problem as @MichaelS4G, our view formatting broke about a week ago. We use rowFormatter, not tileProps and have so far not used the hideSelection parameter, since this is an optional parameter and we need the default behaviour (same as hideSelection=false).
The formatting kind of works again (with some changes to width of divs compared to previous behaviour), if I add hideSelection=true. But we need selectable rows, so this doesn't help in our case!
wkp-thomas
on 5 Aug 2020
I can agree to @wkp-thomas . A week ago everything is fine and now our formatting don’t work. The only way to get the formatting to work is to set the HideSelection on true. Can it be that the new Microsoft List feature disable some parts of the „old“ Lists? We have more than 100 List. it would be a pain to convert all List because of the „HideSelection“ Feature..
Calle1991
on 5 Aug 2020
@wkp-thomas Thanks for reporting this. We are aware of this regression, and the issue will be fixed in the upcoming rollout.
shagra-ms
on 5 Aug 2020
Thanks @shagra-ms for your reply. Can you give any hint on when the upcoming rollout is supposed to take place?
wkp-thomas
on 5 Aug 2020
@wkp-thomas It should take around 2-3 weeks.
shagra-ms
on 5 Aug 2020
@phillipharding Your issues seems different from the issue mentioned by others. Can you please elaborate? Also, if it is indeed different, would request you to please open a new issue, I shall take a look at it. Thanks!
shagra-ms
on 7 Aug 2020
@shagra-ms thanks, I've raised a new issue at https://github.com/SharePoint/sp-dev-docs/issues/6157
cc/ @ahyland
phillipharding
on 9 Aug 2020
There are multiple issues reported on this. We have addressed all of them. Please let me know if its not resolved for anyone. Thanks!
shagra-ms
on 28 Aug 2020
It's resolved, thank you.
wkp-thomas
on 28 Aug 2020
Thanks @wkp-thomas, I'll close this issue.
shagra-ms
on 28 Aug 2020
Issues that have been closed & had no follow-up activity for at least 7 days are automatically locked. Please refer to our wiki for more details, including how to remediate this action if you feel this was done prematurely or in error: Issue List: Our approach to locked issues
msft-github-bot
on 4 Sep 2020
Related issues
SteIvanov
·
3Comments
christianbueschi
·
3Comments
thechriskent
·
3Comments
waldekmastykarz
·
3Comments
Ralms
·
3Comments
Most helpful comment
I've noticed an issue starting today, not tileProps related, but on a modern list with customised list forms (not with PowerApps).
The
defaultClickandeditPropsactions ofcustomRowActionused to navigate to the (classic) customised list forms, now they just open the details panel instead.This behaviour happens whether the list view has a custom JSON format or not.
If the list doesn't have a custom JSON format, clicking the
Titleof an item also just opens the details panel, rather than navigating to the (classic) customised Display list form.