#value are becomes undefined multiplying or dividing

1 messages · Page 1 of 1 (latest)

sonic void
#

I have queries and getting values I needed to make some manipulation for that values, while doing that values become undefined , so in my widget i cannot render it

median walrusBOT
#

Hello! I'm Appsmith Support Bot, here to help you with your queries. It seems like you're facing an issue with manipulating values in your queries, which results in undefined values in your widget. To assist you better, could you please provide more details on how you're manipulating these values? Additionally, if you have any specific code snippets or examples, that would be helpful in diagnosing the issue.

If you don't find my response helpful, you can request to speak to a human agent.

sonic void
#

I am manipulationg values in my widgets
i will gives you the example
import React from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
import ReactDOM from "https://cdn.jsdelivr.net/npm/[email protected]/+esm";
function formatToKM(num) {
if (num >= 1_000_000) {
let val = (num / 1_000_000).toFixed(1);
val = val.replace(/.0$/, "");
return val + "M";
}

if (num >= 1_000) {
let val = (num / 1_000).toFixed(1);
val = val.replace(/.0$/, "");
return val + "K";
}

return num;
}
function ragCircle(isRed) {
const color = isRed ? "red" : "green";

return (
<div
style={{
width: "22px",
height: "22px",
borderRadius: "50%",
backgroundColor: color,
display: "inline-block",
margin: "auto"
}}
></div>
);
}

function CustomTable() {
const amount = Number(appsmith.model.ARR_ACTUAL);
const targetEntry = appsmith.model.ARR_ACTUAL;
const targetGrowth = Number(appsmith.model.GROWTH_PCT)
const targetExit = amount + (amount * 20 / 100);
const actualEntry = amount;
const actualGrowth = appsmith.model.ACT_GROWTH;
const actualExit = Number(appsmith.model.ACT_EXIT);
const ragStatus = appsmith.model.RAG_STATUS;

median walrusBOT
#

Are you using this code in a Custom widget?
Please share a loom.com screen recording showing your implementation, the exact steps you take, and the issues you are facing in action.

sonic void
#

yes i am using custom widget

median walrusBOT
#

In Appsmith, when using custom widgets, you can pass data and manipulate it using JavaScript. However, the custom widget code should be compatible with the Appsmith environment. Here's how you can adapt your logic for a custom widget:

  1. Pass Data to Custom Widget: You can pass data to your custom widget using the data property. For example:
sonic void
#

this is how i am passing
{
"ARR_ACTUAL": {{ Get_ARB_Account.data?.records?.[0]?.ARB__c || 0 }},
"ACT_EXIT": {{ ExitArr.exitArr.data || 0 }}
}

median walrusBOT
#

When passing data to a custom widget in Appsmith, you need to ensure that the data is correctly formatted and accessible within the widget. Here's how you can handle this:

  1. Ensure Data is Available: Make sure that the data you're trying to access is available and correctly fetched from your queries. You can use optional chaining and default values to handle cases where data might be undefined.

  2. Pass Data to Custom Widget: You can pass the data as props to your custom widget. Here's an example of how you might do this:

sonic void
#

here data is present

image.png
median walrusBOT
#

It seems like you're encountering an issue where the data is present, but you're still getting undefined in your custom widget. Here are a few steps to troubleshoot and resolve this issue:

  1. Check Data Fetching: Ensure that the queries Get_ARB_Account and ExitArr are successfully fetching data. You can do this by checking the query results in the Appsmith editor.

  2. Console Logging: Add console logs in your custom widget to verify that the data is being passed correctly. For example:

function CustomWidget({ data }) {
console.log("Data passed to widget:", data);

const amount = Number(data.ARR_ACTUAL);
const actualExit = Number(data.ACT_EXIT);

console.log("Amount:", amount);
console.log("Actual Exit:", actualExit);

return (
Amount: {amount}

Actual Exit: {actualExit}

);
}

  1. Check Data Binding: Ensure that the data binding in your widget properties is correct. Use the mustache syntax to bind data from queries:

{
"ARR_ACTUAL": {?{ Get_ARB_Account.data?.records?.[0]?.ARB__c || 0 }?} ,
"ACT_EXIT": {?{ ExitArr.exitArr.data || 0 }?}
}

  1. Verify Query Execution: Make sure that the queries are executed before the data is passed to the widget. You can use the onPageLoad property of the query to ensure it runs when the page loads.

  2. Check for Errors: Look for any errors in the browser console that might indicate issues with data fetching or rendering.

If the issue persists, please provide more details about the specific error messages or behavior you're observing, and I'll be happy to help further!

If you don't find my response helpful, you can request to speak to a human agent.