Hubspor CRM card Button rows

[SBhagat4]

Hi, Can any one help me how to change the exsting body content dynamically  in HubSpot CRM card when we click on different buttons below or serverlessFunction how to receive the responce.

[himanshurauthan]

Hello @SBhagat4 

You can change the existing body content dynamically in a HubSpot CRM card by using JavaScript. When a button is clicked, you can update the content of the card by accessing the elements in the DOM and modifying their inner HTML or textContent properties.

To receive the response from a serverless function, you can use an AJAX call to make a request to the function's endpoint. The function should return the desired data in a format that can be parsed and used to update the card's content.

Here's an example of how you could change the body content of a card in response to a button click using jQuery and AJAX:

$(document).ready(function() {
  $("#button1").click(function() {
    $.ajax({
      url: "your-serverless-function-endpoint",
      success: function(data) {
        $("#card-body").html(data);
      }
    });
  });
});

Note: You'll need to replace "your-serverless-function-endpoint" with the actual endpoint of your serverless function.

Thanks & Regards

[SBhagat4]

Hi @himanshurauthan , Thanks for your quick respose🙏. Can you please guide me how to include jquery function in my code? when I include it's showing error as jQuery is not defined.

// For external API calls
const axios = require("axios");

exports.main = async (context = {}, sendResponse) => {
// Store contact firstname, configured as propertiesToSend in crm-card.json
const { firstname } = context.propertiesToSend;

jQuery(document).ready(function() {
jQuery("#button1").click(function() {
alert("hi");
});
});

const { data } = await axios.get("https://zenquotes.io/api/random");
const introMessage = {
type: "alert",
title: "Deal Line Items",
variant: "success",
body: {
type: "text",
format: "markdown",
text: `**Hello ${select_input}, here's your quote for the day**!`,
},
};

try {
sendResponse({
sections:
[
{
"type": "buttonRow",
"buttons": [
{
"type": "button",
"variant": "primary",
"text": "Primary action",
"onClick": {
"type": "SERVERLESS_ACTION_HOOK",
"serverlessFunction": "crm-card-button-one"
}
},
{
"type": "button",
"text": "Action 2",

},
{
"type": "button",
"text": "Action 3"
},
{
"type": "button",
"text": "Action 4"
}
]
},introMessage,
// Button with iframe action type
/*{
"type": "button",
"text": "Current Data",
"onClick": {
"type": "IFRAME",
"width": 890,
"height": 748,
"uri": "https://example.com/iframe-contents",
"associatedObjectProperties": ["additional_crm_property"]
}
}*/
],
});
} catch (error) {
// "message" will create an error feedback banner when it catches an error
sendResponse({
message: {
type: "ERROR",
body: `Error: ${error.message}`,
},
sections: [introMessage],
});
}
};