Hi Team, I was trying to find a calculator UI component but it seems it doesn’t exist and you must use codeless logic to do these functions. I made something that works but I think it is probably overcomplicated.
There is a good video that shows how to do sum on a repeating list, but in my case, I am only trying to sum together two separate but related drop downs with numbers.
Currently, I am declaring variables for these text fields on the page load to and setting their values there equal to zero. I also have an on change event set in each of the two data input fields.
Finally, the actual field where the calculation occurs inserts the two prior variables with values into a list and uses the summation function.
This seems like an overly complicated solution. Is there an easier way to get to 2+2=4?
Secondly, can someone offer some assistance on how to figure out the naming conventions for different components in the UI? Whenever I try to reference another field in the value rule, it doesn’t seem to connect. I am guessing I need to first reference page data, the form, or the object, or something. How do I find the actual reference? Is there an “easy button” for this?
My solution works but I am worried if I get a more complicated use case things will become very difficult to manage/maintain. Thanks!
Hi Ryan,
Here’s how I’d approach this:
-
Create 2 input fields, call them operand1 and operand2 accordingly. Configure them to accept numbers:
-
Establish data-binding for the operand input fields. To do this, select the component and click the gear icon. On the Login screen, scroll data to the Value Logic section and enter property names for each component. I called these properties op1 and op2:
-
Add a Text label to the UI that will display the result. Go into the Logic for that component:
-
Scroll down to Content Logic and click the green + icon. This will add a data binding handler for the Text component. The handler will be triggered any time the data model will change.
Q: When will the data model change?
A: Any time you change the value in the input (operand) components described above. Why does the data model change?
Q: Why does the data model change?
A: Because the operand/component components have data binding for the Value Logic (step 2 above)
This is the logic for the Value Logic for the Result text component:
As you can see the logic is trivially simple - it gets the values of the op1 and the op2 properties and performs the sum calculation.
Here’s a live demo:
https://www.backendless.us/api/files/ui-builder/containers/support/index.html?page=math
Hope this helps.
Regards,
Mark
1 Like
HI Mark, thanks so much. This is very helpful to explain and to simplify how to do these easy operations.
The only problem I have now is I really want to only save the final total of the operation into the database so I am thinking I need to use a data input field for the result. Will that change anything? The operands are not that important to want to keep forever, just the total. I am afraid I will not be able to bind the result to a database field and query and retrieve the final sum later.
Also, how do you know in your final picture to get the data from Page Data? Are their times when you have to tell the control to search within another part? For example I have these controls inside of a form and I see an option where I can get things from form data.
I appreciate the response and I think it is smart for you to have a forum so others can do a search and find this solution later!
Hello @Ryan_Belisle!
The only problem I have now is I really want to only save the final total of the operation into the database so I am thinking I need to use a data input field for the result.
To save data to a DB, you can use the Data API:
Also, how do you know in your final picture to get the data from Page Data?
At this point, you bind the value logic, and then you can use that Page Data property.
Are their times when you have to tell the control to search within another part? For example I have these controls inside of a form and I see an option where I can get things from form data.
Sorry, I’m not quite sure what exactly you mean, perhaps if you describe the problem you are experiencing and add screenshots, we can probably find a solution.
To make it easier for you to get to know Backendless, I recommend going through all the missions on our site (Product Tour) and watching this course.
Regards,
Alexander
Thanks, that was helpful but it seems I may be narrowing the issue. I think my problem that I didn’t realize when I first sent this question is the following:
I have drop down values with different display and value pairs. I have it as a drop down because I want the user to only have a certain menu of options to choose from and I have defined a numeral as what the value should be for each drop down item. It appears that the drop down, radio button group, and others only return a string so I will have to convert them at some point. I cannot see an option to indicate it stores a number as the value. I am not sure when they best time to do this most efficiently.
Hi Ryan,
Could you please create a separate topic for the latest question? We prefer that each reported problem or question had it’s own topic. It helps to stay on point and for others to find answers.
Regards,
Mark
Sure, no problem. Let me play around with it a bit and maybe I can figure it out. If not, I will make a new topic.
Hi Mark, when I reproduce your example with the two input fields to do the calculation, I get a ‘NaN’ on the result before I enter numbers in the two input fields when I first pop open the UI because there is no data. Will this cause any issues in saving the form data? Is a best practice to set the default to zero somehow so it doesn’t display strangely or did I do something wrong? It also shows ‘NaN’ if I don’t enter numbers in both fields.
You example is pre-filled with numbers, it seems.
Another thing is that the function doesn’t seem to work if I use “pageData” to find the variable. I have to use the form variable I created as picture below. It is difficult to know exactly where a variable get stored so you can pull it out later and what syntax to use on a data binding, for example, to get that value. Here is the change I had to make to the picture above for it to work for me.
I used the “print” function to reference the object and I was able to see/find my data using these functions:
In the console window it looks like this:
The first “Proxy {}” has values of 13 and the 2 are the two test values I put in “EstForm” Data testing Mark’s solution above
The second “Proxy {}” value is the empty values from the Page Data. So…I found my values! I am guessing others may find this helpful so I am posting. It would probably be a good separate thread too on finding your data.
Your video did a good job of explaining why you used page data but I used a different form data model and it worked above…at about 30 minutes in. Just thought I would post it in case it helps someone:
