SOLVED

Form configuration - add buttons in footer

Occasional Contributor

Is it possible to make button works in footer?  If so, how? I found references to adding links in footer.  I tried adding a button  in the footer to set values to other columns.  You can click the button but it doesn't do any action.  

Tried browsing through this and cant find similar examples.
Form Samples - List Formatting Samples (pnp.github.io)

8 Replies

@SSantos Can you show us the JSON code you tried? Reply to this message & add complete code in reply. It will be easier for us to understand what is wrong with current JSON.


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.

best response confirmed by SSantos (Occasional Contributor)
Solution

@SSantos You can add button in list form footer like: 

 

{
    "elmType": "button",
    "txtContent": "Click"
}

 

But, if you are trying to use "setValue" in form formatting, I don't think it is supported. I will try to get confirmation from list formatting repository maintainers just to be sure. 

Documentationconfigure the list form 

 

In this case, you can customize list form using Power apps to add button & update form values.


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.

@ganeshsanap Thanks, thats what I tried and I can click the button but it doesn't really do anything. The script worked in column formatting but not in forms. But, as you said, it may not be supported yet.  Clients want to take the action (i.e. click the button) on the form without going back to the list view. 

I'm trying to see if this can be accomplished without integrating with Power Apps or Power Automate but it appears not possible.  

@ganeshsanap did you manage find a solution? I have a similar issue with button working (executing flow) from list column but not via form

@Mhr2022 I have tried using setValue action in JSON on list forms which is not supported in SharePoint list forms.

I haven't tried using executeFlow action. Check this: Advanced formatting concepts 


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.

@ganeshsanap that is the same code i use inside column view but it doesn`t seem to work in form.

@SSantos 

add links in the footer and update it to display like button using CSS.  

 

{
    "elmType": "div",
    "style": {
        "display": "block",
        "flex-wrap": "wrap",
        "flex-direction": "row",
        "justify-content": "center",
        "align-items": "center",
        "width": "100%",
        "height" : "30px"
    },
    "attributes": {
        "class": "ms-fontColor-neutralPrimary ms-bgColor-gray20"
    },
    "children": [
      {
        "elmType": "a",
        "txtContent": "Issue Gate Pass",
        "style":{
            "font": "bold 11px Arial",
            "text-decoration": "none",
            "background-color": "#EEEEEE",
            "color": "#333333",
            "padding": "2px 6px 2px 6px",
            "border-top" : "1px solid #CCCCCC",
            "border-right" : "1px solid #333333",
            "border-bottom": "1px solid #333333",
            "border-left": "1px solid #CCCCCC"
           },
        "attributes": {
            "target": "_blank",
            "href": "www.google.com"
        }
      },
      {
        "elmType": "a",
        "txtContent": "Request Approval",
        "style":{
            "font": "bold 11px Arial",
            "text-decoration": "none",
            "background-color": "#EEEEEE",
            "color": "#333333",
            "padding": "2px 6px 2px 6px",
            "border-top" : "1px solid #CCCCCC",
            "border-right" : "1px solid #333333",
            "border-bottom": "1px solid #333333",
            "border-left": "1px solid #CCCCCC"
           },
        "attributes": {
            "target": "_blank",
            "href": "www.microsoft.com"
        }
      }
       
    ]
}

@Sudhir Kesharwani This will only add hyperlinks/buttons in form footer, but it cannot set values to other columns which is what asked by @SSantos in original post.


Please consider giving a Like if my post helped you in any way.