{"id":1785,"date":"2024-10-11T11:46:32","date_gmt":"2024-10-11T03:46:32","guid":{"rendered":"https:\/\/five.co\/?p=1785"},"modified":"2024-10-11T11:47:35","modified_gmt":"2024-10-11T03:47:35","slug":"calculating-field-values-in-five","status":"publish","type":"post","link":"https:\/\/preview-php85.dzine.org\/five\/blog\/calculating-field-values-in-five\/","title":{"rendered":"Calculations: Calculating Field Values In Five"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Calculating Field Values in Five<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Hi and welcome to this how-to post on <em><strong>Calculating Fields<\/strong><\/em>&nbsp;in Five. This blog post teaches you how to use functions to perform a calculation in Five. Functions can be as simple or as complex as you need them to be: there is no limit. You can perform single-step or multi-step calculations in one function. Anything you can do in Excel, for example, can be done in Five (albeit in a different syntax from Excel formulas). <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">In this post, we explain how to calculate values in your fields and display the result in your interface using Five. The objective of the tutorial is to learn:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. How to create a process in Five.<br>2. How to write and manage JavaScript \/ TypeScript functions in Five.<br>3. How to use functions to calculate field values<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"root-eb-toc-jrnh6 wp-block-essential-blocks-table-of-contents\"><div class=\"eb-parent-wrapper eb-parent-eb-toc-jrnh6 \"><div class=\"eb-toc-container eb-toc-jrnh6  eb-toc-is-not-sticky eb-toc-not-collapsible eb-toc-initially-not-collapsed eb-toc-scrollToTop style-1 list-style-none\" data-scroll-top=\"false\" data-scroll-top-icon=\"fas fa-angle-up\" data-collapsible=\"false\" data-sticky-hide-mobile=\"false\" data-sticky=\"false\" data-scroll-target=\"scroll_to_toc\" data-copy-link=\"false\" data-editor-type=\"\" data-hide-desktop=\"false\" data-hide-tab=\"false\" data-hide-mobile=\"false\" data-itemcollapsed=\"false\" data-highlight-scroll=\"false\"><div class=\"eb-toc-header\"><h2 class=\"eb-toc-title\">Table of Contents<\/h2><\/div><div class=\"eb-toc-wrapper \" data-headers=\"[{&quot;level&quot;:2,&quot;content&quot;:&quot;Calculating Field Values in Five&quot;,&quot;text&quot;:&quot;Calculating Field Values in Five&quot;,&quot;link&quot;:&quot;calculating-field-values-in-five&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Performing Calculations in Five&quot;,&quot;text&quot;:&quot;Performing Calculations in Five&quot;,&quot;link&quot;:&quot;performing-calculations-in-five&quot;},{&quot;level&quot;:4,&quot;content&quot;:&quot;1. Creating a Process&quot;,&quot;text&quot;:&quot;1. Creating a Process&quot;,&quot;link&quot;:&quot;1-creating-a-process&quot;},{&quot;level&quot;:4,&quot;content&quot;:&quot;2. Writing the Function&quot;,&quot;text&quot;:&quot;2. Writing the Function&quot;,&quot;link&quot;:&quot;2-writing-the-function&quot;},{&quot;level&quot;:4,&quot;content&quot;:&quot;Explainer: Using ChatGPT to Write Functions&quot;,&quot;text&quot;:&quot;Explainer: Using ChatGPT to Write Functions&quot;,&quot;link&quot;:&quot;explainer-using-chatgpt-to-write-functions&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;3. Attaching the Function&quot;,&quot;text&quot;:&quot;3. Attaching the Function&quot;,&quot;link&quot;:&quot;3-attaching-the-function&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;4. Run Your App to Test Your Calculation&quot;,&quot;text&quot;:&quot;4. Run Your App to Test Your Calculation&quot;,&quot;link&quot;:&quot;4-run-your-app-to-test-your-calculation&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Explainer: Event-Driven Programming&quot;,&quot;text&quot;:&quot;Explainer: Event-Driven Programming&quot;,&quot;link&quot;:&quot;explainer-event-driven-programming&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Finding Help&quot;,&quot;text&quot;:&quot;Finding Help&quot;,&quot;link&quot;:&quot;finding-help&quot;}]\" data-visible=\"[true,true,true,true,true,true]\" data-delete-headers=\"[{&quot;label&quot;:&quot;Calculating Field Values in Five&quot;,&quot;value&quot;:&quot;calculating-field-values-in-five&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Performing Calculations in Five&quot;,&quot;value&quot;:&quot;performing-calculations-in-five&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;1. Creating a Process&quot;,&quot;value&quot;:&quot;1-creating-a-process&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;2. Writing the Function&quot;,&quot;value&quot;:&quot;2-writing-the-function&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Explainer: Using ChatGPT to Write Functions&quot;,&quot;value&quot;:&quot;explainer-using-chatgpt-to-write-functions&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;3. Attaching the Function&quot;,&quot;value&quot;:&quot;3-attaching-the-function&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;4. Run Your App to Test Your Calculation&quot;,&quot;value&quot;:&quot;4-run-your-app-to-test-your-calculation&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Explainer: Event-Driven Programming&quot;,&quot;value&quot;:&quot;explainer-event-driven-programming&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Finding Help&quot;,&quot;value&quot;:&quot;finding-help&quot;,&quot;isDelete&quot;:false}]\" data-smooth=\"true\" data-top-offset=\"\"><div class=\"eb-toc__list-wrap\"><ul class=\"eb-toc__list\"><li><a href=\"#calculating-field-values-in-five\">Calculating Field Values in Five<\/a><li><a href=\"#performing-calculations-in-five\">Performing Calculations in Five<\/a><ul class=\"eb-toc__list\"><li><a href=\"#1-creating-a-process\">1. Creating a Process<\/a><li><a href=\"#2-writing-the-function\">2. Writing the Function<\/a><li><a href=\"#explainer-using-chatgpt-to-write-functions\">Explainer: Using ChatGPT to Write Functions<\/a><li><a href=\"#3-attaching-the-function\">3. Attaching the Function<\/a><li><a href=\"#4-run-your-app-to-test-your-calculation\">4. Run Your App to Test Your Calculation<\/a><li><a href=\"#explainer-event-driven-programming\">Explainer: Event-Driven Programming<\/a><\/li><\/ul><li><a href=\"#finding-help\">Finding Help<\/a><\/ul><\/div><\/div><\/div><\/div><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div style=\"background-color: #001524;\"><hr style=\"height: 5px;\">\n<pre style=\"text-align: center; overflow: hidden; white-space: pre-line;\"><span style=\"color: #f1ebda; background-color: #4588d8; font-size: calc(18px + 0.390625vw);\"><strong>Sign Up For a Free Trial<\/strong>\n<span style=\"font-size: 14pt;\">Get Instannt Access and Start Developing<\/span><\/span><\/pre>\n<p style=\"text-align: center;\"><a href=\"https:\/\/preview-php85.dzine.org\/five\/get-started\/\" target=\"_blank\" rel=\"noopener\"><button style=\"background-color: #f8b92b; border: none; color: black; padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; cursor: pointer; margin: 4px 2px; border-radius: 5px;\"><strong>Free Sign Up<\/strong><\/button><br><\/a><\/p>\n<hr style=\"height: 5px;\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Performing Calculations in Five<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">To perform a calculation in Five, follow these steps:<\/p>\n\n\n\n<h4 class=\"wp-block-heading\">1. Creating a Process<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">1. Let\u2019s launch Five and&nbsp;<a href=\"https:\/\/help.five.org\/docs\/applications\/create-an-application\" rel=\"nofollow noopener\" target=\"_blank\">click the yellow + button to create a new application<\/a>. Assign it a name and press save. Then, select&nbsp;<strong>Manage&nbsp;<\/strong>to begin developing your application.<br>If you have an existing application, click straight on <strong>Manage.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"576\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/image-1024x576.png\" alt=\"\" class=\"wp-image-1787\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/image-1024x576.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/image-300x169.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/image-768x432.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/image.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">2. Next, click on <strong>Tasks &gt; Processes.<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img width=\"1024\" height=\"190\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/image-1.png\" alt=\"\" class=\"wp-image-1788\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/image-1.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/image-1-300x56.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/image-1-768x143.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">3. Click the yellow\u00a0<strong>Plus\u00a0<\/strong>button to create a new process. Give it a name, such as <strong>CalculateRecords<\/strong>.<br>4. Next, navigate to the<strong> Screen Fields<\/strong> tab. Here, you can introduce fields to our process.<br>5. Click the <strong>+<\/strong> <strong>button <\/strong>in the top right corner to add three fields. Name the first two <strong>Field 1<\/strong> and <strong>Field 2<\/strong>, both with an integer display type. The third field should be named <strong>Result<\/strong>, also with an integer display type.<br>Here is what your screen fields should look like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img width=\"940\" height=\"313\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/10\/image-4.png\" alt=\"\" class=\"wp-image-4269\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/10\/image-4.png 940w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/10\/image-4-300x100.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/10\/image-4-768x256.png 768w\" sizes=\"(max-width: 940px) 100vw, 940px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">6. Last, click the\u00a0<strong>Tick \u2714\ufe0f Button\u00a0<\/strong>to save.<br>7. Last, we need to attach the process to a menu item. Click on <strong>Visual > Menus.<\/strong><br>8.  Click the yellow\u00a0<strong>Plus\u00a0<\/strong>button to create a new menu item, as shown here:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"384\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/10\/image-5-1024x384.png\" alt=\"\" class=\"wp-image-4270\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/10\/image-5-1024x384.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/10\/image-5-300x113.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/10\/image-5-768x288.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/10\/image-5-1536x576.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/10\/image-5-2048x768.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Menu items are shown in the left-hand side navigation of your final application. By adding a menu item, we make our process accessible to our end-users.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">2. Writing the Function<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">Next, we will write the logic that does the calculation using JavaScript, in Five we can write our own code through the <strong>Code Editor.<\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. To access the <strong>Code Editor<\/strong>, click on\u00a0<strong>Manage<\/strong>, then on\u00a0<strong>Logic,\u00a0<\/strong>and then\u00a0<strong>Code Editor.\u00a0<\/strong><br>2. Now click on the\u00a0<strong>Plus<\/strong>\u00a0icon. Write <strong>CalculateFields <\/strong>as the <strong>FunctionID<\/strong>. Keep <strong>JavaScript <\/strong>as the function language.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img width=\"1024\" height=\"548\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/image-11.png\" alt=\"\" class=\"wp-image-1807\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/image-11.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/image-11-300x161.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/image-11-768x411.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">You now can write functions using standard JavaScript. In this guide, we willl craft a straightforward logic to compute values from the two fields and display the outcome in a third &#8216;Result&#8217; field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3. Copy the code below and paste it into Five&#8217;s <strong>Code Editor<\/strong>, replacing all existing code:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"function CalculateFields(five, context, result) {\n    const a = five.field.Field1;\n    const b = five.field.Field2;\n    five.field.Result = a + b;\n    return five.success(result);\n}\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C678DD\">function<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #61AFEF\">CalculateFields<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75; font-style: italic\">five<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #E06C75; font-style: italic\">context<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #E06C75; font-style: italic\">result<\/span><span style=\"color: #ABB2BF\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">const<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">a<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">five<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E5C07B\">field<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">Field1<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">const<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">b<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">five<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E5C07B\">field<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">Field2<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #E5C07B\">five<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E5C07B\">field<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">Result<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">a<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">+<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">b<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">return<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">five<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">success<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75\">result<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">The function is quite readable. But to explain in plain language, we retrieve the values from our fields using <code>five.field<\/code>, assigning them to variables <code>a<\/code> and <code>b<\/code>. We then set the &#8216;Result&#8217; field to the sum of <code>a<\/code> and <code>b<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">4. Last, click the\u00a0<strong>Tick \u2714\ufe0f Button\u00a0<\/strong>to save.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h4 class=\"wp-block-heading\">Explainer: Using ChatGPT to Write Functions<\/h4>\n\n\n\n<p class=\"wp-block-paragraph\">If you are not proficient in JavaScript, those six lines of code can look a little intimidating. Thankfully, ChatGPT is a JavaScript expert and we can leverage AI to write functions for us.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, I can prompt ChatGPT with this:<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">I&#8217;d like to use JavaScript to add two fields. My fields are called Field1, Field2, and Result.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">I have been provided with this piece of code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><code>function CalculateFields(five, context, result) {<br>return five.success(result);<br>}<\/code><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Please add my calculation to this code.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Here is what ChatGPT returns in response:<\/p>\n\n\n\n<div class=\"wp-block-kevinbatdorf-code-block-pro cbp-has-line-numbers\" data-code-block-pro-font-family=\"Code-Pro-JetBrains-Mono\" style=\"font-size:.875rem;font-family:Code-Pro-JetBrains-Mono,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--cbp-line-number-color:#abb2bf;--cbp-line-number-width:calc(2 * 0.6 * .875rem);line-height:1.25rem;--cbp-tab-width:2;tab-size:var(--cbp-tab-width, 2)\"><span style=\"display:block;padding:16px 0 0 16px;margin-bottom:-1px;width:100%;text-align:left;background-color:#282c34\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"54\" height=\"14\" viewBox=\"0 0 54 14\"><g fill=\"none\" fill-rule=\"evenodd\" transform=\"translate(1 1)\"><circle cx=\"6\" cy=\"6\" r=\"6\" fill=\"#FF5F56\" stroke=\"#E0443E\" stroke-width=\".5\"><\/circle><circle cx=\"26\" cy=\"6\" r=\"6\" fill=\"#FFBD2E\" stroke=\"#DEA123\" stroke-width=\".5\"><\/circle><circle cx=\"46\" cy=\"6\" r=\"6\" fill=\"#27C93F\" stroke=\"#1AAB29\" stroke-width=\".5\"><\/circle><\/g><\/svg><\/span><span role=\"button\" tabindex=\"0\" data-code=\"function CalculateFields(five, context, result) {\n    \/\/ Retrieve the values of Field1 and Field2 from the context.\n    const field1Value = context.record.Field1 || 0; \/\/ Default to 0 if Field1 is undefined.\n    const field2Value = context.record.Field2 || 0; \/\/ Default to 0 if Field2 is undefined.\n\n    \/\/ Perform the addition and store it in the Result field.\n    result.Result = field1Value + field2Value;\n\n    \/\/ Return the result using the five.success method.\n    return five.success(result);\n}\n\" style=\"color:#abb2bf;display:none\" aria-label=\"Copy\" class=\"code-block-pro-copy-button\"><svg xmlns=\"http:\/\/www.w3.org\/2000\/svg\" style=\"width:24px;height:24px\" fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" stroke-width=\"2\"><path class=\"with-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2m-6 9l2 2 4-4\"><\/path><path class=\"without-check\" stroke-linecap=\"round\" stroke-linejoin=\"round\" d=\"M9 5H7a2 2 0 00-2 2v12a2 2 0 002 2h10a2 2 0 002-2V7a2 2 0 00-2-2h-2M9 5a2 2 0 002 2h2a2 2 0 002-2M9 5a2 2 0 012-2h2a2 2 0 012 2\"><\/path><\/svg><\/span><pre class=\"shiki one-dark-pro\" style=\"background-color: #282c34\" tabindex=\"0\"><code><span class=\"line\"><span style=\"color: #C678DD\">function<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #61AFEF\">CalculateFields<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75; font-style: italic\">five<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #E06C75; font-style: italic\">context<\/span><span style=\"color: #ABB2BF\">, <\/span><span style=\"color: #E06C75; font-style: italic\">result<\/span><span style=\"color: #ABB2BF\">) {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #7F848E; font-style: italic\">\/\/ Retrieve the values of Field1 and Field2 from the context.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">const<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">field1Value<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">context<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E5C07B\">record<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">Field1<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">||<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">0<\/span><span style=\"color: #ABB2BF\">; <\/span><span style=\"color: #7F848E; font-style: italic\">\/\/ Default to 0 if Field1 is undefined.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">const<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">field2Value<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">context<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E5C07B\">record<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">Field2<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">||<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">0<\/span><span style=\"color: #ABB2BF\">; <\/span><span style=\"color: #7F848E; font-style: italic\">\/\/ Default to 0 if Field2 is undefined.<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #7F848E; font-style: italic\">\/\/ Perform the addition and store it in the Result field.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #E5C07B\">result<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">Result<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">field1Value<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">+<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E06C75\">field2Value<\/span><span style=\"color: #ABB2BF\">;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #7F848E; font-style: italic\">\/\/ Return the result using the five.success method.<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #C678DD\">return<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">five<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">success<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75\">result<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span>\n<span class=\"line\"><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">Note how ChatGPT&#8217;s response and our response are almost the same. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Ignore any text starting with \/\/. These are explanatory comments. The only change I need to make is to provide the <code>context<\/code>. In our case, we know that we are dealing with fields, so we replace <code>context.record<\/code> with <code>five.field<\/code>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Once I have done the replacements, the AI-generated function will work in Five just as intended!<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">3. Attaching the Function<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Last, let&#8217;s attach our function to our fields such that whenever we alter the values of the fields, our function is called and updates the result. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">1. Start by navigating back to <strong>Processes<\/strong> inside the <strong>Task<\/strong> menu, select the process that we created earlier.<br>2. Click on <strong>Screen Fields,<\/strong> choose <strong>Field 1<\/strong>, then navigate to <strong>Events<\/strong> and select <strong>CalculateFields<\/strong> for the <strong>OnValidate <\/strong>event.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"548\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Frame-33-1024x548.png\" alt=\"\" class=\"wp-image-1808\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Frame-33-1024x548.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Frame-33-300x160.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Frame-33-768x411.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Frame-33-1536x821.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Frame-33-2048x1095.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">3. Next, repeat the process for <strong>Field 2<\/strong>. This ensures the function is triggered whenever the value of either field is modified.<br>4. Last, click the\u00a0<strong>Tick \u2714\ufe0f Button\u00a0<\/strong>to save.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">4. Run Your App to Test Your Calculation<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let&#8217;s test our calculation. Let&#8217;s <a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/getting-started-faq\/\">run our application.<\/a><\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img width=\"1024\" height=\"190\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/image-12.png\" alt=\"\" class=\"wp-image-1810\" style=\"width:840px;height:155px\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/image-12.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/image-12-300x56.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/image-12-768x143.png 768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s what your application should look like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"247\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/10\/image-6-1024x247.png\" alt=\"\" class=\"wp-image-4271\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/10\/image-6-1024x247.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/10\/image-6-300x72.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/10\/image-6-768x186.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/10\/image-6-1536x371.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/10\/image-6-2048x495.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">In terms of functionality, we have developed a simple calculator for adding two fields and for displaying the result. Whenever a new value is entered into either field 1 or field 2, the result field automatically updates.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Explainer: Event-Driven Programming<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">As we developed this application, we used a core concept of software development called event-driven programming. Event-driven programming means that a function gets triggered by an event that an end-user takes. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Almost everything in Five comes with events. Fields, for example, have on-enter, on-validate, or on-exit events. Functions can be attached to any of these events. By combining functions with events, Five can perform calculations, run processes, or alert users. For example, you could write a function that sends out an email or a notification to users, and attach it to an event.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">By mastering functions and events, you can almost build anything with Five.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Finding Help<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Have more questions?&nbsp;<a href=\"https:\/\/five.org\/\" rel=\"noreferrer noopener nofollow\" target=\"_blank\">Join our user community<\/a>&nbsp;to connect with others and get answers.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Calculating Field Values in Five Hi and welcome to this how-to post on Calculating Fields&nbsp;in Five. This blog post teaches you how to use functions to perform a calculation in Five. Functions can be as simple or as complex as you need them to be: there is no limit. You can perform single-step or multi-step [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":1822,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[21,49],"tags":[],"class_list":["post-1785","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog","category-how-to"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Five.Co-Calculating-Field-Values-In-Five.png",1280,720,false],"thumbnail":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Five.Co-Calculating-Field-Values-In-Five-150x150.png",150,150,true],"medium":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Five.Co-Calculating-Field-Values-In-Five-300x169.png",300,169,true],"medium_large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Five.Co-Calculating-Field-Values-In-Five-768x432.png",768,432,true],"large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Five.Co-Calculating-Field-Values-In-Five-1024x576.png",1024,576,true],"1536x1536":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Five.Co-Calculating-Field-Values-In-Five.png",1280,720,false],"2048x2048":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/10\/Five.Co-Calculating-Field-Values-In-Five.png",1280,720,false]},"uagb_author_info":{"display_name":"Pranoy Sarkar","author_link":"https:\/\/preview-php85.dzine.org\/five\/author\/f1v5_ed8_au\/"},"uagb_comment_info":0,"uagb_excerpt":"Calculating Field Values in Five Hi and welcome to this how-to post on Calculating Fields&nbsp;in Five. This blog post teaches you how to use functions to perform a calculation in Five. Functions can be as simple or as complex as you need them to be: there is no limit. You can perform single-step or multi-step&hellip;","_links":{"self":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/1785","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/users\/10"}],"replies":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/comments?post=1785"}],"version-history":[{"count":0,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/1785\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media\/1822"}],"wp:attachment":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media?parent=1785"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/categories?post=1785"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/tags?post=1785"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}