Section content refresh after serverless function hook

[MKukanjac]

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!

[ndwilliams3]

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]

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

[ndwilliams3]

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. 

[ndwilliams3]

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

[CMcKay]

Oh interesting, I need to try this out.

[SMohan33]

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

[sejal_parikh]

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. 

[CMcKay]

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

[sejal_parikh]

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

[SBhagat4]

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

[sejal_parikh]

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.

[SBhagat4]

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

[SBhagat4]

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