Make a value clickable in an SPO List Gallery View

[Anthony-123]

When in List view, I have values that can be clicked to enact a desired action. When I display the list as a gallery, clicking on a value opens the item on the right side of the browser window.   

The use case is an employee list where I'm using Gallery view to show contact cards. I want to have clickable values such as emailing someone, starting a chat in Teams, viewing their Delve page, etc. These all work well in List view but not in Gallery view because clicking one of these "contact Cards" just opens the item on the side. Then the values are still not clickable until you're in Edit mode.  

[#2]

In order to make the values clickable in Gallery view, you will need to add an OnSelect action to the gallery item. Here are the steps:

1. Select the gallery control and click on the Edit button to open the Gallery control in Edit mode.
2. Click on any gallery item to select it.
3. In the right-hand pane, scroll down to the OnSelect property and click on the Edit button (pencil icon).
4. In the formula bar, enter the action that you want to perform when the gallery item is clicked. For example, if you want to start a chat in Teams, you could use the formula: TeamsChat.StartNewChat('email address removed for privacy reasons')
5. Click outside of the formula bar to save the formula.
6. Repeat steps 2-5 for each gallery item that you want to make clickable.
Once you have added the OnSelect action to each gallery item, clicking on the item will trigger the action that you specified.

[#3]

@Anthony-123 Try below things and it should work for you:

1. Set hideSelection to true like: 

"hideSelection": true,

• Then remove below part in Gallery view JSON: 

,
"customRowAction": {
    "action": "defaultClick"
}​

• Refer column formatting of columns in your gallery view formatting using columnFormatterReference

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

For SharePoint/Power Platform blogs, visit: Ganesh Sanap Blogs

[#4]

@muhammad_kekereekun 

I've already customized the right hand pane in PowerApps so I don't think your instructions are applicable. I've been able to use OnSelect in PowerApps using the following formula 

Launch(Concatenate("https://teams.microsoft.com/l/chat/0/0?users=",DataCardValue4))

Although, the pane needs to be in Edit more for the item to be clickable which is not ideal. Do you have a solution for this?

[#5]

This makes everything not-clickable.

So, the issue is that (by default) clicking a tile in gallery view is opening the right hand panel to view the full card (as I've designed it in PowerApps). The "clickable" values in this panel are not clickable unless the panel is in Edit mode.

One solution would be to prevent the panel from opening upon clicking a tile and make the links in gallery view clickable. Still, this item should be selectable (there's a radio button on the top right corner) and Edit in the SPO menu should allow the item to be opened in the right hand panel for editing values. I can always edit valued in List view so this second part is less important (although very handy).

The other solution would be for the right hand panel to open when the tile is selected and the clickable values in the item would be active without having to enter Edit mode.

[#6]

One possible solution would be to add a custom card to the Gallery view that contains the clickable values. This can be done by adding a new card to the Gallery template and then adding controls to the card to display the desired values and actions.

For example, you could add a card to the Gallery template that includes a button control with a formula like the one you're using for OnSelect, along with any other information or controls that you want to display.

Then, when a user clicks on the card in the Gallery view, they would be able to click the button to initiate the desired action without having to enter Edit mode.

To add a custom card to the Gallery template, follow these steps:

1. Open the Gallery control in Edit mode.
2. Click on the "Edit template" button to open the Gallery template.
3. Add a new card to the template by clicking on the "Add card" button.
4. Customize the card by adding controls and setting their properties as desired.
5.Save and publish the changes to the app.

I hope this helps! Let me know if you have any further questions.

[#7]

@Anthony-123 If you want to open the list form (in right pane) in edit mode by default, then use editProps action inside customRowAction in your original JSON like: 

,
"customRowAction": {
    "action": "editProps"
}

---

Please click Mark as Best Response & Like if my post helped you to solve your issue. This will help others to find the correct solution easily. It also closes the item. If the post was useful in other ways, please consider giving it Like.

For SharePoint/Power Platform blogs, visit: Ganesh Sanap Blogs

[#8]

The question I've posted in this SharePoint forum is "Make a value clickable in an SPO List Gallery View". Do you have something to offer that's not related to PowerApps?