Calculating Field Values In Five
Tags: tutorial, fieldvalues, javascript, typescript
Published: 2023-11-28 00:23:35

<!-- wp:heading -->
<h2 class="wp-block-heading">Five Labs: Calculating Field Values</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Welcome to Five Labs, a step-by-step guide to building applications using Five.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This lab will guide you on how to calculate the values in your fields and display the result in your interface using Five. The objective of the tutorial is to learn:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>How to create a process in Five</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Write and manage JavaScript / TypeScript</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Calculating Field Values</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Lab Objectives</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>By the end of this lab, you will learn how to set up a process in Five, add values from two fields, and show the result on the screen. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To get started, here’s what we need:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Have Five installed in your system or run Five on the cloud (with a paid subscription).</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 1: Creating An App in Five</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>First, let’s launch Five and&nbsp;<a href="https://help.five.org/docs/applications/create-an-application" target="_blank" rel="noreferrer noopener">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.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1787,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/10/image-1024x576.png" alt="" class="wp-image-1787"/></figure>
<!-- /wp:image -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading"><h3 class="wp-block-heading" id="step-2-adding-a-database-table-and-a-form" style="box-sizing: border-box; margin-top: 0px; margin-bottom: 15px; font-weight: 700; line-height: var(--title-line-height); font-size: 18px; font-family: Montserrat, Arial, sans-serif; white-space-collapse: collapse;"></h3></h3>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 2: Creating A Process</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>First, we need to add 3 fields to our app. We'll input values into the first two fields, and the third will display the result.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We will achieve this by creating a simple process, begin by navigating to Processes: click on ‘<strong>Tasks</strong>’, and then on ‘<strong>Processes</strong>’</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1788,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2023/10/image-1.png" alt="" class="wp-image-1788"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Create a new process by clicking on the yellow ‘<strong>+</strong>’ button and giving it a name ( we will call it <strong>CalculateRecords</strong>)</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next, navigate to the 'Screen Fields' tab. Here, you can introduce fields to our process.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Click the '+' button in the top right corner to add three fields. Name the first two 'Field 1' and 'Field 2', both with an integer display type. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>The third field should be named 'Result', also with an integer display type.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Step 3: Writing JavaScript Function</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>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>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To access it, click on&nbsp;<strong>Manage</strong>, then on&nbsp;<strong>Logic,&nbsp;</strong>and then&nbsp;<strong>Code Editor.&nbsp;</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now click on the&nbsp;<strong>Plus</strong>&nbsp;icon. Choose a name for your function, as well as the language you’d like to use: JavaScript or TypeScript.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1807,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2023/10/image-11.png" alt="" class="wp-image-1807"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>You now can write functions using standard JavaScript or TypeScript. In this guide, we'll craft a straightforward logic to compute values from the two fields and display the outcome in a third 'Result' field.</p>
<!-- /wp:paragraph -->

<!-- wp:kevinbatdorf/code-block-pro {"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}","codeHTML":"\u003cpre class=\u0022shiki one-dark-pro\u0022 style=\u0022background-color: #282c34\u0022 tabindex=\u00220\u0022\u003e\u003ccode\u003e\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #C678DD\u0022\u003efunction\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #61AFEF\u0022\u003eCalculateFields\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e(\u003c/span\u003e\u003cspan style=\u0022color: #E06C75; font-style: italic\u0022\u003efive\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e, \u003c/span\u003e\u003cspan style=\u0022color: #E06C75; font-style: italic\u0022\u003econtext\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e, \u003c/span\u003e\u003cspan style=\u0022color: #E06C75; font-style: italic\u0022\u003eresult\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e) {\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e    \u003c/span\u003e\u003cspan style=\u0022color: #C678DD\u0022\u003econst\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #E5C07B\u0022\u003ea\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #56B6C2\u0022\u003e=\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #E5C07B\u0022\u003efive\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #E5C07B\u0022\u003efield\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #E06C75\u0022\u003eField1\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e;\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e    \u003c/span\u003e\u003cspan style=\u0022color: #C678DD\u0022\u003econst\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #E5C07B\u0022\u003eb\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #56B6C2\u0022\u003e=\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #E5C07B\u0022\u003efive\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #E5C07B\u0022\u003efield\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #E06C75\u0022\u003eField2\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e;\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e    \u003c/span\u003e\u003cspan style=\u0022color: #E5C07B\u0022\u003efive\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #E5C07B\u0022\u003efield\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #E06C75\u0022\u003eResult\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #56B6C2\u0022\u003e=\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #E06C75\u0022\u003ea\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #56B6C2\u0022\u003e+\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #E06C75\u0022\u003eb\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e;\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e    \u003c/span\u003e\u003cspan style=\u0022color: #C678DD\u0022\u003ereturn\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e \u003c/span\u003e\u003cspan style=\u0022color: #E5C07B\u0022\u003efive\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #61AFEF\u0022\u003esuccess\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e(\u003c/span\u003e\u003cspan style=\u0022color: #E06C75\u0022\u003eresult\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e);\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e}\u003c/span\u003e\u003c/span\u003e\u003c/code\u003e\u003c/pre\u003e","language":"javascript","theme":"one-dark-pro","bgColor":"#282c34","textColor":"#abb2bf","fontSize":".875rem","fontFamily":"Code-Pro-JetBrains-Mono","lineHeight":"1.25rem","headerType":"headlights","lineHighlightColor":"rgba(134, 167, 228, 0.2)","copyButton":true,"buttonTheme":"heroicons"} -->
<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"><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) {
    const a = five.field.Field1;
    const b = five.field.Field2;
    five.field.Result = a + b;
    return five.success(result);
}" 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>
<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>
<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>
<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>
<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>
<span class="line"><span style="color: #ABB2BF">}</span></span></code></pre></div>
<!-- /wp:kevinbatdorf/code-block-pro -->

<!-- wp:paragraph -->
<p>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 'Result' field to the sum of <code>a</code> and <code>b</code>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Next, let'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>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Start by navigating back to ‘Processes’ inside the ‘Task’ menu, select the process that we created earlier, and then click on the events tab which will show all the events that a process goes through.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Click on 'Screen Fields', choose 'Field1', then navigate to the events section and select 'CalculateFields' for the 'OnValidate' event.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1808,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/10/Frame-33-1024x548.png" alt="" class="wp-image-1808"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Next, repeat the process for 'Field2'. This ensures the function is triggered whenever the value of either field is modified.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Conclusion</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now let’s finally put our process into a menu so that we can access it in our end-user application.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Navigate to ‘<strong>Visual</strong>‘ and then click on ‘<strong>Menu</strong>‘, we will create a new menu item, and then in the ‘<strong>Action</strong>‘ field we will select our process</p>
<!-- /wp:paragraph -->

<!-- wp:gallery {"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":1809,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/10/Frame-34-1024x548.png" alt="" class="wp-image-1809"/></figure>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>Now, to test our work, launch the application by clicking the play ▶️ button located in the top right corner, as shown below.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1810,"width":840,"height":155,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full is-resized"><img src="https://five.co/wp-content/uploads/2023/10/image-12.png" alt="" class="wp-image-1810" width="840" height="155"/></figure>

<!-- wp:paragraph -->
<p>This will run our application in a separate window, which should look something similar to the app below:</p>
<!-- /wp:paragraph -->

<!-- wp:gallery {"linkTo":"none"} -->
<figure class="wp-block-gallery has-nested-images columns-default is-cropped"><!-- wp:image {"id":1811,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/10/Frame-35-1024x548.png" alt="" class="wp-image-1811"/></figure>
<!-- /wp:gallery -->

<!-- wp:paragraph -->
<p>After modifying the value in either 'Field 1' or 'Field 2', the calculation will instantly take place, and the result will be displayed in the 'Result' field.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Well done! You've successfully implemented the calculate fields feature.</p>
<!-- /wp:paragraph -->