Connecting Slack To Five Using Webhooks
Tags: slack, webhooks, applicationdevelopment, database
Published: 2023-10-03 22:47:38

<!-- wp:heading -->
<h2 class="wp-block-heading" id="five-lab-connecting-slack-to-your-web-developed-in-five">Five Lab: Connecting Slack To Your Web Developed in Five</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Welcome to Five Labs, a step-by-step guide to building applications using Five. You will develop and test this integration locally using <a href="https://five.co/download/">Five’s free download</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This lab guides you through integrating an application built using Five with Slack using Webhooks. The objective of the tutorial is to:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Create a web app with Five that stores information in a database table, accessible through a form on the front end, and</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Sending a notification into a Slack channel every time the form mentioned in (1) gets submitted.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Typical scenarios where this integration may come in handy are:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Your sales team has put up a form online to generate leads. They want to be notified in their Slack channel whenever a new lead submits their information via the form. </li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Your support center relies on an online form to open up new tickets. Whenever a customer creates a new ticket, there's a new auto-generated message inside the Slack channel used by the support team.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:rank-math/toc-block {"headings":[{"key":"ecfc344a-6c19-4f99-bd54-bfb1a3a768f6","content":"Five Lab: Connecting Slack To Your Web Developed in Five","level":2,"link":"#five-lab-connecting-slack-to-your-web-developed-in-five","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"a246d73b-8379-4b84-9bcb-24a99e3ec0d1","content":"Lab Objectives","level":3,"link":"#lab-objectives","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"f3a7eb15-dc35-43f2-bb76-3eab2a3cb2be","content":"Step 1: Creating an Application inside Five","level":3,"link":"#step-1-creating-an-application-inside-five","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"95f24df1-e775-4aef-8834-7e26487dae8c","content":"Step 2: Adding a Database Table and a Form","level":3,"link":"#step-2-adding-a-database-table-and-a-form","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"82bf7046-f398-4cc6-a167-55277bf53f0a","content":"Step 3: Defining Javascript Functions","level":3,"link":"#step-3-defining-java-script-functions","disable":false,"isUpdated":true,"isGeneratedLink":true},{"key":"da3b929e-a4d5-4521-872e-b6022ce68a94","content":"Step 4: Attaching Functions and Forms","level":3,"link":"#step-4-attaching-functions-and-forms","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"6eada96f-6f1a-40f7-877c-19944ac02646","content":"Conclusion","level":3,"link":"#conclusion","disable":false,"isUpdated":false,"isGeneratedLink":true}],"listStyle":"ul"} -->
<div class="wp-block-rank-math-toc-block" id="rank-math-toc"><nav><ul><li class=""><a href="#five-lab-connecting-slack-to-your-web-developed-in-five">Five Lab: Connecting Slack To Your Web Developed in Five</a><ul><li class=""><a href="#lab-objectives">Lab Objectives</a></li><li class=""><a href="#step-1-creating-an-application-inside-five">Step 1: Creating an Application inside Five</a></li><li class=""><a href="#step-2-adding-a-database-table-and-a-form">Step 2: Adding a Database Table and a Form</a></li><li class=""><a href="#step-3-defining-java-script-functions">Step 3: Defining Javascript Functions</a></li><li class=""><a href="#step-4-attaching-functions-and-forms">Step 4: Attaching Functions and Forms</a></li><li class=""><a href="#conclusion">Conclusion</a></li></ul></li></ul></nav></div>
<!-- /wp:rank-math/toc-block -->

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

<!-- wp:paragraph -->
<p>By the end of this lab, you will have learned how to connect Five with an external<a href="https://five.co/blog/webhooks-explained/" data-type="URL" data-id="https://five.co/blog/webhooks-explained/"> API / Webhooks</a> and build an application that communicates with Slack.</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>A Slack account with at least one channel and its incoming webhook URL setup. We will talk more about this later in the blog</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Have Five installed in your system or a cloud subscription that allows us to build custom online database applications. </li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="step-1-creating-an-application-inside-five">Step 1: Creating an Application inside 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 <strong>Manage </strong>to begin developing your application.</p>
<!-- /wp:paragraph -->

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

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="step-2-adding-a-database-table-and-a-form">Step 2: Adding a Database Table and a Form</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>The next step is adding some functionality to our app. We are going to quickly define our MySQL database tables and attach that to a form on the front end</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li><strong>Creating a Table</strong>: Five features an intuitive table wizard that simplifies the process of setting up database tables. Just refer to our&nbsp;<a href="https://help.five.org/docs/tables/table-wizard/graphical-user-interface" target="_blank" rel="noreferrer noopener">Table Wizard documentation</a>. As our main emphasis isn't on the database, you're welcome to design a table with any name and fields you prefer.<br><br><img class="wp-image-1516" style="width: 750px;" src="https://five.co/wp-content/uploads/2023/08/Five_Table_Bold.png" alt=""><br></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Attaching The Table To a Form</strong>: Now that our database has a table, our next step is to link it to a form. Setting up forms in Five is much like setting up our database tables with the wizard. For guidance, <a href="https://help.five.org/docs/forms/form-wizard/create-form-with-wizard/" data-type="URL" data-id="https://help.five.org/docs/forms/form-wizard/create-form-with-wizard/">you can simply check out our documentation here</a>. <br></li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>After you are done building your form, let's run our application and see our progress so far, If you are working on Five’s free download, click the play ▶️ button in the top right corner, shown below.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1518,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/08/Frame-16-1-1024x190.png" alt="" class="wp-image-1518"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>This action will launch a separate window, displaying your application, which should look something similar to the app below: </p>
<!-- /wp:paragraph -->

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

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="step-3-defining-java-script-functions">Step 3: Defining JavaScript Functions</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now that we have built a working form for our application, the next step is to set up our functions. which will connect the form to Slack using webhook such that every time a new record is added to the form, a corresponding notification is sent to a Slack channel of our preference.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>First, </strong>let's set up our Webhook.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We can learn how to do that by following this documentation by Slack titled <a href="https://api.slack.com/messaging/webhooks">Sending messages using Incoming Webhooks | Slack</a>. Once you've followed the steps in Slack's documentation, you should be equipped with a Webhook URL specific to your chosen Slack channel.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>Next</strong>, let's finally write some code. Inside Five, navigate to the 'Code Editor'. Click on the '+' icon to initiate a new function. Assign it a meaningful name and choose your preferred language, either TypeScript or JavaScript</p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>We'll begin by configuring an <a href="https://help.five.org/2.1/docs/api/http-client/interface" data-type="URL" data-id="https://help.five.org/2.1/docs/api/http-client/interface">httpClient </a>through&nbsp;<a href="https://help.five.org/2.1/docs/api/introduction" data-type="URL" data-id="https://help.five.org/2.1/docs/api/introduction">Five's API</a>, saving it in a 'client' variable. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>As per Slack's guidelines, we'll set its ContentType to 'application/json' and its content to a straightforward 'Hello, world.', We do this by accessing the client variable that we just initialized in step 1 and by asking it to set the content, using the&nbsp;<code>client.setContentType()</code>&nbsp;function and passing&nbsp;<code>application/JSON</code>&nbsp;inside it and we use&nbsp;<code>client.setContent()</code>&nbsp;to define the content of the message that we will be sending to Slack.</p>
<!-- /wp:paragraph -->

<!-- wp:kevinbatdorf/code-block-pro {"code":"function SendToSlack(five, context, result) {\n  const client = five.httpClient();\n  client.setContentType(\u0022application/json\u0022);\n  client.setContent(`{\n       \u0022text\u0022: \u0022Hello, world.\u0022\n    }`);\n\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\u003eSendToSlack\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\u003eclient\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: #61AFEF\u0022\u003ehttpClient\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\u003eclient\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #61AFEF\u0022\u003esetContentType\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e(\u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e\u0026quot;application/json\u0026quot;\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\u003eclient\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #61AFEF\u0022\u003esetContent\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e(\u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`{\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e       \u0026quot;text\u0026quot;: \u0026quot;Hello, world.\u0026quot;\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e    }`\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e);\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\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","seeMoreString":"","seeMoreAfterLine":"","seeMoreTransition":false,"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 SendToSlack(five, context, result) {
  const client = five.httpClient();
  client.setContentType(&quot;application/json&quot;);
  client.setContent(`{
       &quot;text&quot;: &quot;Hello, world.&quot;
    }`);

}" 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">SendToSlack</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">client</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: #61AFEF">httpClient</span><span style="color: #ABB2BF">();</span></span>
<span class="line"><span style="color: #ABB2BF">  </span><span style="color: #E5C07B">client</span><span style="color: #ABB2BF">.</span><span style="color: #61AFEF">setContentType</span><span style="color: #ABB2BF">(</span><span style="color: #98C379">&quot;application/json&quot;</span><span style="color: #ABB2BF">);</span></span>
<span class="line"><span style="color: #ABB2BF">  </span><span style="color: #E5C07B">client</span><span style="color: #ABB2BF">.</span><span style="color: #61AFEF">setContent</span><span style="color: #ABB2BF">(</span><span style="color: #98C379">`{</span></span>
<span class="line"><span style="color: #98C379">       &quot;text&quot;: &quot;Hello, world.&quot;</span></span>
<span class="line"><span style="color: #98C379">    }`</span><span style="color: #ABB2BF">);</span></span>
<span class="line"></span>
<span class="line"><span style="color: #ABB2BF">}</span></span></code></pre></div>
<!-- /wp:kevinbatdorf/code-block-pro -->

<!-- wp:paragraph -->
<p>Details on the <em>httpClient</em> and the functions used in the above sample can be <a href="https://help.five.org/2.1/docs/api/http-client/interface" data-type="URL" data-id="https://help.five.org/2.1/docs/api/http-client/interface">found in our documentation</a></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Having defined our message, it's time to send it out. We'll dispatch a POST request to our webhook, using<code> client.post()</code> and passing our URL in it.</p>
<!-- /wp:paragraph -->

<!-- wp:kevinbatdorf/code-block-pro {"code":"function SendToSlack(five, context, result) {\n  const client = five.httpClient();\n  client.setContentType(\u0022application/json\u0022);\n  client.setContent(`{\n       \u0022text\u0022: \u0022Hello, world.\u0022\n  }`);\n    \n  const httpResult = client.post(\u0022YOUR_WEBHOOK_URL_HERE\u0022);\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\u003eSendToSlack\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\u003eclient\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: #61AFEF\u0022\u003ehttpClient\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\u003eclient\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #61AFEF\u0022\u003esetContentType\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e(\u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e\u0026quot;application/json\u0026quot;\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\u003eclient\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #61AFEF\u0022\u003esetContent\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e(\u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`{\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e       \u0026quot;text\u0026quot;: \u0026quot;Hello, world.\u0026quot;\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e  }`\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\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\u003ehttpResult\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\u003eclient\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #61AFEF\u0022\u003epost\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e(\u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e\u0026quot;YOUR_WEBHOOK_URL_HERE\u0026quot;\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","seeMoreString":"","seeMoreAfterLine":"","seeMoreTransition":false,"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 SendToSlack(five, context, result) {
  const client = five.httpClient();
  client.setContentType(&quot;application/json&quot;);
  client.setContent(`{
       &quot;text&quot;: &quot;Hello, world.&quot;
  }`);
    
  const httpResult = client.post(&quot;YOUR_WEBHOOK_URL_HERE&quot;);
}" 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">SendToSlack</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">client</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: #61AFEF">httpClient</span><span style="color: #ABB2BF">();</span></span>
<span class="line"><span style="color: #ABB2BF">  </span><span style="color: #E5C07B">client</span><span style="color: #ABB2BF">.</span><span style="color: #61AFEF">setContentType</span><span style="color: #ABB2BF">(</span><span style="color: #98C379">&quot;application/json&quot;</span><span style="color: #ABB2BF">);</span></span>
<span class="line"><span style="color: #ABB2BF">  </span><span style="color: #E5C07B">client</span><span style="color: #ABB2BF">.</span><span style="color: #61AFEF">setContent</span><span style="color: #ABB2BF">(</span><span style="color: #98C379">`{</span></span>
<span class="line"><span style="color: #98C379">       &quot;text&quot;: &quot;Hello, world.&quot;</span></span>
<span class="line"><span style="color: #98C379">  }`</span><span style="color: #ABB2BF">);</span></span>
<span class="line"><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">httpResult</span><span style="color: #ABB2BF"> </span><span style="color: #56B6C2">=</span><span style="color: #ABB2BF"> </span><span style="color: #E5C07B">client</span><span style="color: #ABB2BF">.</span><span style="color: #61AFEF">post</span><span style="color: #ABB2BF">(</span><span style="color: #98C379">&quot;YOUR_WEBHOOK_URL_HERE&quot;</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>After sending our message, it's good practice to handle potential responses, especially if there might be errors. This ensures our function behaves predictably. We will do this by using<a href="https://help.five.org/2.1/docs/api/five-error" data-type="URL" data-id="https://help.five.org/2.1/docs/api/five-error"> the isOk() method</a> available in Five's API. It returns a boolean value reflecting the outcome of the response. Lastly, we'll encapsulate our post request within a <code>try-catch</code> block. Now our function should look something similar to the snippet below.</p>
<!-- /wp:paragraph -->

<!-- wp:kevinbatdorf/code-block-pro {"code":"function SendToSlack(five, context, result) {\n  const client = five.httpClient();\n  client.setContentType(\u0022application/json\u0022);\n  client.setContent(`{\n       \u0022text\u0022: \u0022Hello, world.\u0022\n  }`);\n  \n  try {\n    const httpResult = client.post(\u0022YOUR_WEBHOOK_URL_HERE\u0022);\n    if (httpResult.isOk() === false) {\n      return five.createError(httpResult);\n    }\n  } catch (err) {\n    five.log(err);\n  }\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\u003eSendToSlack\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\u003eclient\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: #61AFEF\u0022\u003ehttpClient\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\u003eclient\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #61AFEF\u0022\u003esetContentType\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e(\u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e\u0026quot;application/json\u0026quot;\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\u003eclient\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #61AFEF\u0022\u003esetContent\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e(\u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e`{\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e       \u0026quot;text\u0026quot;: \u0026quot;Hello, world.\u0026quot;\u003c/span\u003e\u003c/span\u003e\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e  }`\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\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e  \u003c/span\u003e\u003cspan style=\u0022color: #C678DD\u0022\u003etry\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\u003ehttpResult\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\u003eclient\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #61AFEF\u0022\u003epost\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e(\u003c/span\u003e\u003cspan style=\u0022color: #98C379\u0022\u003e\u0026quot;YOUR_WEBHOOK_URL_HERE\u0026quot;\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\u003eif\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e (\u003c/span\u003e\u003cspan style=\u0022color: #E5C07B\u0022\u003ehttpResult\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e.\u003c/span\u003e\u003cspan style=\u0022color: #61AFEF\u0022\u003eisOk\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: #D19A66\u0022\u003efalse\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\u003ecreateError\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e(\u003c/span\u003e\u003cspan style=\u0022color: #E06C75\u0022\u003ehttpResult\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\n\u003cspan class=\u0022line\u0022\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e  } \u003c/span\u003e\u003cspan style=\u0022color: #C678DD\u0022\u003ecatch\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e (\u003c/span\u003e\u003cspan style=\u0022color: #E06C75\u0022\u003eerr\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: #61AFEF\u0022\u003elog\u003c/span\u003e\u003cspan style=\u0022color: #ABB2BF\u0022\u003e(\u003c/span\u003e\u003cspan style=\u0022color: #E06C75\u0022\u003eerr\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\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","seeMoreString":"","seeMoreAfterLine":"","seeMoreTransition":false,"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 SendToSlack(five, context, result) {
  const client = five.httpClient();
  client.setContentType(&quot;application/json&quot;);
  client.setContent(`{
       &quot;text&quot;: &quot;Hello, world.&quot;
  }`);
  
  try {
    const httpResult = client.post(&quot;YOUR_WEBHOOK_URL_HERE&quot;);
    if (httpResult.isOk() === false) {
      return five.createError(httpResult);
    }
  } catch (err) {
    five.log(err);
  }
  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">SendToSlack</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">client</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: #61AFEF">httpClient</span><span style="color: #ABB2BF">();</span></span>
<span class="line"><span style="color: #ABB2BF">  </span><span style="color: #E5C07B">client</span><span style="color: #ABB2BF">.</span><span style="color: #61AFEF">setContentType</span><span style="color: #ABB2BF">(</span><span style="color: #98C379">&quot;application/json&quot;</span><span style="color: #ABB2BF">);</span></span>
<span class="line"><span style="color: #ABB2BF">  </span><span style="color: #E5C07B">client</span><span style="color: #ABB2BF">.</span><span style="color: #61AFEF">setContent</span><span style="color: #ABB2BF">(</span><span style="color: #98C379">`{</span></span>
<span class="line"><span style="color: #98C379">       &quot;text&quot;: &quot;Hello, world.&quot;</span></span>
<span class="line"><span style="color: #98C379">  }`</span><span style="color: #ABB2BF">);</span></span>
<span class="line"><span style="color: #ABB2BF">  </span></span>
<span class="line"><span style="color: #ABB2BF">  </span><span style="color: #C678DD">try</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">httpResult</span><span style="color: #ABB2BF"> </span><span style="color: #56B6C2">=</span><span style="color: #ABB2BF"> </span><span style="color: #E5C07B">client</span><span style="color: #ABB2BF">.</span><span style="color: #61AFEF">post</span><span style="color: #ABB2BF">(</span><span style="color: #98C379">&quot;YOUR_WEBHOOK_URL_HERE&quot;</span><span style="color: #ABB2BF">);</span></span>
<span class="line"><span style="color: #ABB2BF">    </span><span style="color: #C678DD">if</span><span style="color: #ABB2BF"> (</span><span style="color: #E5C07B">httpResult</span><span style="color: #ABB2BF">.</span><span style="color: #61AFEF">isOk</span><span style="color: #ABB2BF">() </span><span style="color: #56B6C2">===</span><span style="color: #ABB2BF"> </span><span style="color: #D19A66">false</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">createError</span><span style="color: #ABB2BF">(</span><span style="color: #E06C75">httpResult</span><span style="color: #ABB2BF">);</span></span>
<span class="line"><span style="color: #ABB2BF">    }</span></span>
<span class="line"><span style="color: #ABB2BF">  } </span><span style="color: #C678DD">catch</span><span style="color: #ABB2BF"> (</span><span style="color: #E06C75">err</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: #61AFEF">log</span><span style="color: #ABB2BF">(</span><span style="color: #E06C75">err</span><span style="color: #ABB2BF">);</span></span>
<span class="line"><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:heading {"level":3} -->
<h3 class="wp-block-heading" id="step-4-attaching-functions-and-forms">Step 4: Attaching Functions and Forms</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Now that our function is ready, let's move on to the concluding step: linking the function to our form, in a way that it is invoked every time someone submits a form inside of Five.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><br>We can start by navigating back to the form that we built in <strong>Step 2</strong> and then clicking on the 'events' tab, since <a href="https://help.five.org/2.1/docs/api/Events/introduction-to-fives-events" data-type="URL" data-id="https://help.five.org/2.1/docs/api/Events/introduction-to-fives-events">Five supports event-driven programming</a> it will show you a list of events that the form goes through.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Since we want our function to be invoked whenever someone submits a form, we will attach our function to the 'Do Complete' event. If you've observed, Five offers two completion events:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Do Complete </li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>On Complete</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>This distinction exists because Five differentiates between server-side and client-side events. Events that start with 'Do' are server-side, and have direct database access. Conversely, events prefixed with 'On' are client-side, running directly in the browser.</p>
<!-- /wp:paragraph -->

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

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

<!-- wp:paragraph -->
<p>Now it's finally time to run our application and see our prototype in action,  Simply click on the play button to launch your application. Once you add a record to the form, it will prompt a message in the designated Slack channel. You can see it in working below: </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1542,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2023/08/2023-08-25-10-15-26-2.gif" alt="" class="wp-image-1542"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>And there you have it! You've successfully built an application that integrates with Slack, sending notifications directly to your chosen channel. Throughout this tutorial, you've harnessed a variety of Five's powerful features:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li><strong>Database Management: </strong>We've learned how to create tables and forms inside Five through the wizard</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Function Creation:</strong> You've written a JavaScript function tailored to send messages to Slack. This involved setting up, defining content types, etc</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>API Integration:</strong> Using POST requests, you've communicated with Slack's API, sending data directly to a webhook. This showcases how Five can seamlessly interact with external platforms.</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>You can <a href="https://five.co/download/source/blog/MyFirstApp-20230825-0810356444635.fdf" data-type="URL" data-id="https://five.co/download/source/blog/MyFirstApp-20230825-0810356444635.fdf">download the FDF here</a> and test the application yourself before building it. Just remember to replace 'YOUR_WEBHOOK_URL_HERE' with your actual webhook. </p>
<!-- /wp:paragraph -->