iFrame change label on button based on value

[grizzled gorge]

I want to change the label on a button (Edit or Add) based on whether an ID is past in the Query. The query has an outer join, so sometimes there is a related ID and sometimes not.

[junior iris]

Hi @grizzled gorge. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

[grizzled gorge]

Here is the code... data.forEach((cardData) => {
htmlString +=
<div id="grid-container"> <table id="card-hdr"> <tr> <td>+cardData.WorkDate+</td> <td id="hdr-right"><button ID=+cardData.ID+` label="Edit" onclick="handleButtonClick(event)">Edit</button></td>
</tr>
<script>
function handleButtonClick(event) {
const msg = event.target.getAttribute('ID');
window.parent.postMessage(msg, '*');
}
</script>
</table>

[junior iris]

---

To change the label of a button based on whether an ID is passed in the query, you can use conditional rendering in the button's Label property. Assuming you have a query result with a property related_id, you can set the button's label like this:

{{ queryResult.related_id ? "Edit" : "Add" }}

Replace queryResult with the actual query result object you're working with. This code checks if the related_id exists, and if it does, it sets the button label to "Edit". If the related_id does not exist, it sets the button label to "Add".

However, I don't have enough information about your specific query and data structure to give you a more tailored solution. You can refer to the Appsmith documentation for more information on widgets (https://docs.appsmith.com/reference/widgets) and data binding (https://docs.appsmith.com/core-concepts/data-access-and-binding).

Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:

@grizzled gorge kapa.ai is still learning and improving, please let us how it did by reacting below

[grizzled gorge]

@fleet atlaspi.ai I think I am close, but this is not working.
data.forEach((cardData) => { htmlString += <div id="grid-container">
<table id="card-hdr">
<tr>
<td>+cardData.WorkDate+</td>
<td id="hdr-right"><button ID=+cardData.ID+ label=+cardData.ID ? "Edit" : "Add"+ onclick="handleButtonClick(event)">Edit</button></td>
</tr>
<script>
function handleButtonClick(event) { const msg = event.target.getAttribute('ID');
window.parent.postMessage(msg, '*');
}
</script>
</table>`

[candid jackal]

Is this related to your other issue about cards in an iFrame? Can you send a
screenshot of the code here? I think discord is getting its formatting confused
by the ` characters.

[grizzled gorge]

Yeah, kindof all related to trying to create and manipulate the content of Card objects in an iFrame. I sent a link to the page in the other support issue.

[candid jackal]

It was noted in a call with the user that this issue was solved by modifying
their SQL query. Can you confirm this @grizzled gorge? Even better if
you're willing to share your solution here.