Option to select multiple items in Tiles View

[Ravikadri-zz]

Question

In list view formatting, is there any option to enable multi item select option(like the option in SharePoint OOB View). I am not seeing any reference which provide this option. Not sure if this feature is supported? Any hints would be a great help.

Thanks!
Ravi

[PopWarner]

Hi @ravikadri :)

Just to ensure I understand, do you mean when you apply a View Formatting Def, your wanting to be able to select multiple items?

There is a 'hideSelection' property that can be set to false and this allows you to select multiple row's when you apply a View Formatting definition. It would look like this:
"hideSelection": false

Here is what it looks like with true:

Here is what it looks like with false. There might be some additional formatting needing to apply to make sure it looks how you want.

I might be completely off base in my analysis of your question, so feel free to let me know if I'm completely wrong... :)

[Ravikadri-zz]

Thank you for prompt reply. Appreciated. I am performing this in OOB Library and also attached the JSON file for reference. Let me know, your thought on this.

Steps to reproduce.
Create an OOB Document Library and upload some sample images. Copy the attached JSON file for view formatting.

Here are my few observations
Scenario 1: With parameter option I see this has no effect on the item selection.

sample1.zip

"hideSelection": "false",
"hideListHeader": "true",

Scenario 2:
Removed both parameters and I see the item selection option. But now all the images are stacked and don’t show them tiles structure. Not sure if this is the default behavior? I am trying to get the the Item selection with items in Tiles layout.

Thanks!
Ravi

[Ravikadri-zz]

I think it is a bug. Here is the link to Chris bug. https://github.com/SharePoint/sp-dev-docs/issues/2395

[PopWarner]

I see, ok cool. So just to be sure I'm not misunderstanding, your looking for a View Formatting Definition which more closely aligns with the tile structure?

For your scenario 2, be sure that your "hideSelection" and "hideListHeader" values for true/false are not enclosed in quotes ("), or they are perceived as string's. So it should look like this:

"hideSelection": false,
"hideListHeader": true,

When you override the view, you essentially control all of the HTML, so any styling, structure, layout desired would have to be applied using desired HTML and inline CSS to create that structure.

That being said, I too see how when "hideSelection" is set to false, that it does force them onto individual rows. Let me see what I can test. I see the error Chris is pointing to and that might have some relation, but I'm not sure it's fully applicable here. His issue is around hiding the selection, BUT still being able to select all.

Let me play around with some JSON to see if we can achieve what your looking for. :)

[Ravikadri-zz]

Sure David. Thank you for testing out. I am also investigating this behavior and will update here.

Thanks again!
Ravi

[Ravikadri-zz]

@PopWarner ,
Below are my observations.
Adding "hideSelection:false" adds additional css and makes the items to appear in row. Looks like this is the default behavior.

Also, "hideListHeader" is valid only for List and this parameter has no affect on Library. For Library, i see we have verb "hideLibraryHeader" . I haven't information about this on MS documentation. :(

Ravi

[PopWarner]

@ravikadri, Yes, I would agree what your seeing on the hideSelection property being the default behavior.

When you look at the tile option you are trying to emulate, I see the "selection checkmark" is inside the item itself, but when using the View Formatting option, the selection checkmark is outside the HTML generated by the list view.

[Ravikadri-zz]

@PopWarner ,
Agreed.

@thechriskent ,
Hope will have some detailed response from Microsoft on this query.

Thanks!
Ravi

[thechriskent]

@ravikadri you are correct that the tile view (float:left) approach breaks down when selection is allowed. As pointed out by you and @PopWarner this is because the row is wrapped in a container to allow selection that prevents the float:left trick from working.

In reality, the tile trick causes some other issues (#108 & #113) and I don't think it is an intended scenario. However, it is a pretty awesome approach for a relatively small number of items in a view. I'd like to see both the scrolling and selection issues addressed since this trick is both possible and wanted by lots of users.

I'm not sure I understand your comments about hideListHeader. That is an old attribute (it still works for backwards compatibility). hideColumnHeader should be used instead. There has never been a hideLibraryHeader. Regardless, I find that both attributes (hideListHeader or hideColumnHeader) work across lists and libraries without issue. Are you having trouble using this with a document library?

Although I agree that the selection breaking the tiles format is an unfortunate side effect and possible bug, this issues list is for issues with the samples themselves not with how List Formatting is implemented. So I will close this issue here. However, I encourage you to raise this issue (feel free to reference this one) on the official issues list here: https://aka.ms/spdev-issues