# How to? Create a "square" on a screen that can calculate and show a result? (w/ pics)

**URL:** <https://community.glideapps.com/t/how-to-create-a-square-on-a-screen-that-can-calculate-and-show-a-result-w-pics/72223>\
**Category:** Ask for Help\
**Created:** [April 1, 2024, 6:20pm UTC](https://community.glideapps.com/t/how-to-create-a-square-on-a-screen-that-can-calculate-and-show-a-result-w-pics/72223 "2024-04-01T18:20:10Z")\
**Posts on this page:** 15\
**Page:** 1

<div class="post-metadata">

**Author:** ![JamieErvin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jamieervin/32/57900_2.png) [@JamieErvin](https://community.glideapps.com/u/JamieErvin)\
**Post date:** [April 1, 2024, 6:20pm UTC](https://community.glideapps.com/t/how-to-create-a-square-on-a-screen-that-can-calculate-and-show-a-result-w-pics/72223/1 "2024-04-01T18:20:10Z")

</div>

Hello!

How do I create a “square” with fields that can that input an amount on one side and show a result on the other. The same concept having 4 Excel cells (2 and the top and bottom) and having the left side input the right side show a total.

We need to from here:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/e/e/eeeb7b8a2ebf5efd87c659c2357f7a13b7fb6c86.jpeg)

Using this general look:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/1/f1a2d68f1bed22ba9b015addebb5f8f292c362f0.png)

to get this:

 ![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/c/1/c16823f3ec3e5f9ef3b539ded87fa2bd892e3858.png)

It would be great if i could use the Table collection! lol

Thanks  
Jamie

---

<div class="post-metadata">

**Author:** ![Matty\_Fenny](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/matty_fenny/32/39419_2.png) [@Matty\_Fenny](https://community.glideapps.com/u/Matty_Fenny)\
**Post date:** [April 1, 2024, 8:25pm UTC](https://community.glideapps.com/t/how-to-create-a-square-on-a-screen-that-can-calculate-and-show-a-result-w-pics/72223/2 "2024-04-01T20:25:27Z")

</div>

What is the calculation? Once you put the value into the left side, what do you want to happen to that number to get the right side?

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 2, 2024, 1:51am UTC](https://community.glideapps.com/t/how-to-create-a-square-on-a-screen-that-can-calculate-and-show-a-result-w-pics/72223/3 "2024-04-02T01:51:37Z")

</div>

Have you tried using a container? Or does it not show fields horizontally like you want?

---

<div class="post-metadata">

**Author:** ![JamieErvin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jamieervin/32/57900_2.png) [@JamieErvin](https://community.glideapps.com/u/JamieErvin)\
**Post date:** [April 2, 2024, 8:10am UTC](https://community.glideapps.com/t/how-to-create-a-square-on-a-screen-that-can-calculate-and-show-a-result-w-pics/72223/4 "2024-04-02T08:10:50Z")

</div>

Hi Marty!

At the top in yellow goes a number off at least 100.

Top left gets the first number (let’s say 40) they enter that and it’s subtracted from 100 appears in the top right (100-40) =60.

Bottom left, they pick a number less than the 40 (lets say 35) And it gets added to the $60. 35+60=95

The remaining amount will go in the bottom right. ($5)

Both sides will add up to the amount in the yellow box : 100

Ex: 100

40 | ( 100 - 40)=60  
95 | (100 - 95) =5

---

<div class="post-metadata">

**Author:** ![JamieErvin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jamieervin/32/57900_2.png) [@JamieErvin](https://community.glideapps.com/u/JamieErvin)\
**Post date:** [April 2, 2024, 8:18am UTC](https://community.glideapps.com/t/how-to-create-a-square-on-a-screen-that-can-calculate-and-show-a-result-w-pics/72223/5 "2024-04-02T08:18:53Z")

</div>

I did try and yes with containers it’s just horizontal so far as the result.

---

<div class="post-metadata">

**Author:** ![Matty\_Fenny](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/matty_fenny/32/39419_2.png) [@Matty\_Fenny](https://community.glideapps.com/u/Matty_Fenny)\
**Post date:** [April 2, 2024, 2:19pm UTC](https://community.glideapps.com/t/how-to-create-a-square-on-a-screen-that-can-calculate-and-show-a-result-w-pics/72223/6 "2024-04-02T14:19:37Z")

</div>

Hi Jamie,

So I’ve had a look and this is what I’ve managed to come up with using 1 Number Entry and 2 Data Grids:

 ![Example](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/f/7/f76c3fda7ee3f8a0244c0a1b497b08ffc1f71407.png)

This is the only way I worked out that kind of matched the layout you wanted.

If you want to see the Colums I made for this let me know.

---

<div class="post-metadata">

**Author:** ![ThinhDinh](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/thinhdinh/32/49_2.png) [@ThinhDinh](https://community.glideapps.com/u/ThinhDinh)\
**Post date:** [April 2, 2024, 11:27pm UTC](https://community.glideapps.com/t/how-to-create-a-square-on-a-screen-that-can-calculate-and-show-a-result-w-pics/72223/7 "2024-04-02T23:27:10Z")

</div>

> [@JamieErvin](#):
>
> Bottom left, they pick a number less than the 40 (lets say 35) And it gets added to the $60. 35+60=95

Where do they add the 35 thing based on your example? You’re showing 95 in your comment, not the entry to input 35.

---

<div class="post-metadata">

**Author:** ![JamieErvin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jamieervin/32/57900_2.png) [@JamieErvin](https://community.glideapps.com/u/JamieErvin)\
**Post date:** [April 3, 2024, 2:31am UTC](https://community.glideapps.com/t/how-to-create-a-square-on-a-screen-that-can-calculate-and-show-a-result-w-pics/72223/8 "2024-04-03T02:31:39Z")

</div>

Yes please send it! I appreciate the effort!!

---

<div class="post-metadata">

**Author:** ![JamieErvin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jamieervin/32/57900_2.png) [@JamieErvin](https://community.glideapps.com/u/JamieErvin)\
**Post date:** [April 3, 2024, 2:37am UTC](https://community.glideapps.com/t/how-to-create-a-square-on-a-screen-that-can-calculate-and-show-a-result-w-pics/72223/9 "2024-04-03T02:37:01Z")

</div>

You are correct, my apologies. Great catch!

In the bottom left corner is a combination of numbers that add up to 95 there.  
The 35 they choose gets added to the $60 (from side 1 top right).

The top rows added together will always come out to whatever number is box initially (row now $100). The same for the bottom row when added together.

They’ll have (the users) alerts to let them know how high or low they can go though.

Hope that made sense.

---

<div class="post-metadata">

**Author:** ![Matty\_Fenny](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/matty_fenny/32/39419_2.png) [@Matty\_Fenny](https://community.glideapps.com/u/Matty_Fenny)\
**Post date:** [April 3, 2024, 3:44pm UTC](https://community.glideapps.com/t/how-to-create-a-square-on-a-screen-that-can-calculate-and-show-a-result-w-pics/72223/10 "2024-04-03T15:44:26Z")

</div>

So There are 3 (User Specific) Number columns:

Atleast 100 - This is for the Number entry at the top.

Side 1 (Top Left) - This is for the top left value of the data grid

Side 2 (Bottom Left) - This is for the bottom left value of the data grid.

There are then 3 Math Colums:

First Calculation would be: Alteast 100 - Side 1 (Top Left)  
You would have this as Side 2 (Top Right) in the data grid.

Second Calculation would be: First Calculation + Side 2 (Bottom Left)  
This wouldnt need to be displayed anywhere based on your example, its just needed for the next calculation.

Third Calculation would be to get the remaining amount: Atleast 100 - Second Calculation.  
This would be displayed bottom right in the data grid.

This is Data Grid 1:  
 ![1](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/5/6/561a5544f8a487a2efe353e00e1f31f1b453a16b.png)

This is Data Grid 2:  
 ![2](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/6/e/6ee110cf16191a51ec91b9ef05a2a43c12ce6760.png)

Hopefully that makes sense.

---

<div class="post-metadata">

**Author:** ![Matty\_Fenny](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/matty_fenny/32/39419_2.png) [@Matty\_Fenny](https://community.glideapps.com/u/Matty_Fenny)\
**Post date:** [April 3, 2024, 3:46pm UTC](https://community.glideapps.com/t/how-to-create-a-square-on-a-screen-that-can-calculate-and-show-a-result-w-pics/72223/11 "2024-04-03T15:46:17Z")

</div>

Based on this, if you’re wanting the 95 Displayed in the bottom left instead of the 35, you would need another number entry (Same as the Atleast 100 one) to input the 35… Then the bottom left of the 2nd data grid would be the Calculation of the 35 plus the Top right.

---

<div class="post-metadata">

**Author:** ![JamieErvin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jamieervin/32/57900_2.png) [@JamieErvin](https://community.glideapps.com/u/JamieErvin)\
**Post date:** [April 3, 2024, 8:41pm UTC](https://community.glideapps.com/t/how-to-create-a-square-on-a-screen-that-can-calculate-and-show-a-result-w-pics/72223/12 "2024-04-03T20:41:14Z")

</div>

Makes perfect sense and I thank you for sharing.

TRULY I appreciate you helping me solve this issue!

Great insight! 🫡

Here’s the end result based on your suggestion:

![image](https://us1.discourse-cdn.com/flex002/uploads/glideapps/original/3X/0/2/02e4eb0218e4b89d94cf394d59be062dc615369d.png)

---

<div class="post-metadata">

**Author:** ![Matty\_Fenny](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/matty_fenny/32/39419_2.png) [@Matty\_Fenny](https://community.glideapps.com/u/Matty_Fenny)\
**Post date:** [April 3, 2024, 9:25pm UTC](https://community.glideapps.com/t/how-to-create-a-square-on-a-screen-that-can-calculate-and-show-a-result-w-pics/72223/13 "2024-04-03T21:25:05Z")

</div>

Glad I could help 🙂

---

<div class="post-metadata">

**Author:** ![JamieErvin](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/jamieervin/32/57900_2.png) [@JamieErvin](https://community.glideapps.com/u/JamieErvin)\
**Post date:** [April 3, 2024, 11:40pm UTC](https://community.glideapps.com/t/how-to-create-a-square-on-a-screen-that-can-calculate-and-show-a-result-w-pics/72223/14 "2024-04-03T23:40:15Z")

</div>

As am I!

In fact, I’ll be able to clean up the interface a little more with that information!

Kudos! 🫡

---

<div class="post-metadata">

**Author:** ![system](https://sea2.discourse-cdn.com/flex002/user_avatar/community.glideapps.com/system/32/53398_2.png) [@system](https://community.glideapps.com/u/system)\
**Post date:** [April 10, 2024, 11:40pm UTC](https://community.glideapps.com/t/how-to-create-a-square-on-a-screen-that-can-calculate-and-show-a-result-w-pics/72223/15 "2024-04-10T23:40:31Z")

</div>

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.
