Forum Discussion

Anthony-123's avatar
Anthony-123
Iron Contributor
Apr 06, 2023

Make a value clickable in an SPO List Gallery View

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.  

  • 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.
    • Anthony-123's avatar
      Anthony-123
      Iron Contributor

      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?

      • muhammad_kekereekun's avatar
        muhammad_kekereekun
        Iron Contributor
        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.
  • 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"
    }​

     


    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

    • Anthony-123's avatar
      Anthony-123
      Iron Contributor
      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.
      • ganeshsanap's avatar
        ganeshsanap
        MVP

        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

Resources