CRM Development Tools Beta

MKukanjac
Member | Diamond Partner
Member | Diamond Partner

Section content refresh after serverless function hook

Hello, I've been working with the Custom CRM Cards in the middle pane and I've stumbled upon a "problem". Or, probably I am doing something wrong 🙂

 

In the button component example that we have in the documentation, when you click the button it triggers a serverless function hook, fetches the quote from an external API, and the data received is loaded into the section without page reload.

 

I am trying to do the same with a form submission, but my sections don't refresh/reload with the new data that I provide. Is there a way to trigger the sections to refresh/reload after the form submission event?

 

The form example that we have is only displaying a message banner when the form is submitted and I've tried including the sections with new data in the submission event context, but I only can trigger a message banner. Sections remain the same:

 

if (event && event.type === 'SUBMIT') {
    const { example_input } = event.payload.formState;
    sendResponse({
      sections: [introMessage, ...companyInfo, ...deals],
      message: {
        type: 'SUCCESS',
        body: `Form submit was successful. Input's value: ${example_input}`,
      },
    });
  }

 

 

How come the sections refresh works by invoking a serverless function with a button and not with a form submission?

 

Thanks!

13 Replies 13
ndwilliams3
Key Advisor

Section content refresh after serverless function hook

I solved this problem by declaring the sections and message and just setting those within the event conditional. you can then update the sections before the sendResponse callback.

 

 

let introMessage = []
let message = []
if (event && event.type === 'SUBMIT') {
  const { example_input } = event.payload.formState;
   introMesssage = [
     {
       type: "text",
       text: "This is a plaintext string"
     },
   ]

   message = [
     {
       type: 'SUCCESS',
       body: `Form submit was successful. Input's value: ${example_input}`,
     },
   ]
}

const cardForm = [
  {
   "type": "form",
   "content": [
     {
        "type": "input",
        "name": "example_input",
        "inputType": "text",
        "label": "Example input field",
        "initialValue": "This is the default value for this field."
     },
     {
        "type": "button",
        "text": "Submit form",
        "onClick": {
          "type": "SUBMIT",
          "serverlessFunction": "exampleFunction"
        }
     }
   ]
 }
]

sendResponse({
  sections: [...introMessage, ...cardForm],
  if(message.length > 0) {message: [...message]}
});

 

 

 

 

ndwilliams3
Key Advisor

Section content refresh after serverless function hook

Noticing this only seems to work for sidebar cards and not for center tab cards.

ndwilliams3
Key Advisor

Section content refresh after serverless function hook

used this method to build a gross sales card that appends the data as a section component. The data is saved as a JSON object in a readonly property on the custom object record. Each time the form is submitted the JSON object is updated and the stat component is updated. 

Screen Shot 2023-03-02 at 11.22.01 AM.png

 

 

0 Upvotes
ndwilliams3
Key Advisor

Section content refresh after serverless function hook

not sure if it was clear, but you have to submit to the same serverless function.

0 Upvotes
CMcKay
Top Contributor

Section content refresh after serverless function hook

Oh interesting, I need to try this out.

0 Upvotes
SMohan33
Participant

Section content refresh after serverless function hook

@sejal_parikh Any update on this, resetting the form fields??

0 Upvotes
sejal_parikh
HubSpot Product Team
HubSpot Product Team

Section content refresh after serverless function hook

Hi, thanks for bringing this to our notice. Forms actions are not yet supported with different types of reactions such as card refresh or reset. It is a known issue and we are working on this. 

0 Upvotes
CMcKay
Top Contributor

Section content refresh after serverless function hook

@sejal_parikh any update on this? do you know of a timeline for the fix?

sejal_parikh
HubSpot Product Team
HubSpot Product Team

Section content refresh after serverless function hook

We are trying to get it out soon, tentatively next month.

0 Upvotes
SBhagat4
Member

Section content refresh after serverless function hook

@sejal_parikh Any update on above issue? if it's fixed please let me know.

0 Upvotes
sejal_parikh
HubSpot Product Team
HubSpot Product Team

Section content refresh after serverless function hook

Hi @SBhagat4 unfortunately, this will take longer than we expected. So no set timeline yet for this. 

If you are looking to refresh content after button click, you can do so by sending new sections in the response, but that's not possible for form submit.

0 Upvotes
SBhagat4
Member

Section content refresh after serverless function hook

Thanks @sejal_parikh for your quick response, I tried with button servelees action hook also but I am unable to fetch the respose🤔. Can you please suggest me how to get the respose from when we click on diffrent buttons? if you are providing some example that would be great

 

 

image.pngbutton1.PNG

0 Upvotes
SBhagat4
Member

Section content refresh after serverless function hook

Hi @sejal_parikh , I am wating for your respose.Please share with me asap

0 Upvotes