{"id":1513,"date":"2023-08-25T14:31:52","date_gmt":"2023-08-25T06:31:52","guid":{"rendered":"https:\/\/five.co\/?p=1513"},"modified":"2026-04-02T10:09:46","modified_gmt":"2026-04-02T02:09:46","slug":"connecting-slack-to-five-using-webhooks","status":"publish","type":"post","link":"https:\/\/preview-php85.dzine.org\/five\/blog\/connecting-slack-to-five-using-webhooks\/","title":{"rendered":"Connecting Slack To Five Using Webhooks"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"576\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Connecting-Slack-To-Five-Using-Webhooks-1024x576.png\" alt=\"Connecting Slack To Five Using Webhooks\" class=\"wp-image-1570\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Connecting-Slack-To-Five-Using-Webhooks-1024x576.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Connecting-Slack-To-Five-Using-Webhooks-300x169.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Connecting-Slack-To-Five-Using-Webhooks-768x432.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Connecting-Slack-To-Five-Using-Webhooks.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<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>\n\n\n\n<p class=\"wp-block-paragraph\">Welcome to Five Labs, a step-by-step guide to building applications using Five. <a href=\"https:\/\/preview-php85.dzine.org\/five\/get-started\/\">Sign up<\/a>\u00a0now\u00a0and start building on\u00a0our low-code development environment.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">This lab guides you through integrating an application built using Five with Slack using Webhooks. The objective of the tutorial is to:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Create a web app with Five that stores information in a database table, accessible through a form on the front end, and<\/li>\n\n\n\n<li>Sending a notification into a Slack channel every time the form mentioned in (1) gets submitted.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Typical scenarios where this integration may come in handy are:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<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>\n\n\n\n<li>Your support center relies on an online form to open up new tickets. Whenever a customer creates a new ticket, there&#8217;s a new auto-generated message inside the Slack channel used by the support team.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-rank-math-toc-block\" id=\"rank-math-toc\"><h2>Table of Contents<\/h2><nav><ul><li><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><a href=\"#lab-objectives\">Lab Objectives<\/a><\/li><li><a href=\"#step-1-creating-an-application-inside-five\">Step 1: Creating an Application inside Five<\/a><\/li><li><a href=\"#step-2-adding-a-database-table-and-a-form\">Step 2: Adding a Database Table and a Form<\/a><\/li><li><a href=\"#step-3-defining-java-script-functions\">Step 3: Defining Javascript Functions<\/a><\/li><li><a href=\"#step-4-attaching-functions-and-forms\">Step 4: Attaching Functions and Forms<\/a><\/li><li><a href=\"#conclusion\">Conclusion<\/a><\/li><\/ul><\/li><\/ul><\/nav><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"lab-objectives\">Lab Objectives<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">By the end of this lab, you will have learned how to connect Five with an external<a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/webhooks-explained\/\" data-type=\"URL\" data-id=\"https:\/\/preview-php85.dzine.org\/five\/blog\/webhooks-explained\/\"> API \/ Webhooks<\/a> and build an application that communicates with Slack.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To get started, here\u2019s what we need:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<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>\n\n\n\n<li>Have Five installed in your system or a cloud subscription that allows us to build custom online database applications. <\/li>\n<\/ol>\n\n\n\n<div style=\"background-color: #001524;\"><hr style=\"height: 5px;\" \/>\n<blockquote>\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 Free | Five Low-Code IDE<\/strong>\n<span style=\"font-size: 14pt;\">Use AI When Building Your Next Application<\/span><\/span><\/pre>\n<\/blockquote>\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>Sign Up<\/strong><\/button><br \/><\/a><\/p>\n<hr style=\"height: 5px;\" \/><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-1-creating-an-application-inside-five\">Step 1: Creating an Application inside Five<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">First, let&#8217;s launch Five and&nbsp;<a href=\"https:\/\/help.five.org\/docs\/applications\/create-an-application\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">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>\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\/08\/image-27-1024x576.png\" alt=\"\" class=\"wp-image-1514\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-27-1024x576.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-27-300x169.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-27-768x432.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/image-27.png 1280w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<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>\n\n\n\n<p class=\"wp-block-paragraph\">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>\n\n\n\n<ol class=\"wp-block-list\">\n<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 nofollow\">Table Wizard documentation<\/a>. As our main emphasis isn&#8217;t on the database, you&#8217;re welcome to design a table with any name and fields you prefer.<br><br><img width=\"750\" height=\"401\" class=\"wp-image-1516\" style=\"width: 750px;\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five_Table_Bold.png\" alt=\"\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five_Table_Bold.png 2549w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five_Table_Bold-300x160.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five_Table_Bold-1024x548.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five_Table_Bold-768x411.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five_Table_Bold-1536x821.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five_Table_Bold-2048x1095.png 2048w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><br><\/li>\n\n\n\n<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\/\" rel=\"nofollow noopener\" target=\"_blank\">you can simply check out our documentation here<\/a>. <br><\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">After you are done building your form, let&#8217;s run our application and see our progress so far, If you are working on Five\u2019s free download, click the play \u25b6\ufe0f button in the top right corner, shown below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"190\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-16-1-1024x190.png\" alt=\"\" class=\"wp-image-1518\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-16-1-1024x190.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-16-1-300x56.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-16-1-768x142.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-16-1-1536x285.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-16-1-2048x380.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">This action will launch a separate window, displaying your application, which should look something similar to the app below: <\/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\/08\/Frame-17-1024x548.png\" alt=\"\" class=\"wp-image-1535\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-17-1024x548.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-17-300x160.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-17-768x411.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-17-1536x821.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-17-2048x1095.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"step-3-defining-java-script-functions\">Step 3: Defining JavaScript Functions<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">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>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>First, <\/strong>let&#8217;s set up our Webhook.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We can learn how to do that by following this documentation by Slack titled <a href=\"https:\/\/api.slack.com\/messaging\/webhooks\" rel=\"nofollow noopener\" target=\"_blank\">Sending messages using Incoming Webhooks | Slack<\/a>. Once you&#8217;ve followed the steps in Slack&#8217;s documentation, you should be equipped with a Webhook URL specific to your chosen Slack channel.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Next<\/strong>, let&#8217;s finally write some code. Inside Five, navigate to the &#8216;Code Editor&#8217;. Click on the &#8216;+&#8217; icon to initiate a new function. Assign it a meaningful name and choose your preferred language, either TypeScript or JavaScript<\/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\/08\/Frame-18-1024x548.png\" alt=\"\" class=\"wp-image-1536\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-18-1024x548.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-18-300x160.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-18-768x411.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-18-1536x821.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-18-2048x1095.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">We&#8217;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\" rel=\"nofollow noopener\" target=\"_blank\">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\" rel=\"nofollow noopener\" target=\"_blank\">Five&#8217;s API<\/a>, saving it in a &#8216;client&#8217; variable. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">As per Slack&#8217;s guidelines, we&#8217;ll set its ContentType to &#8216;application\/json&#8217; and its content to a straightforward &#8216;Hello, world.&#8217;, 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>\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 SendToSlack(five, context, result) {\n  const client = five.httpClient();\n  client.setContentType(&quot;application\/json&quot;);\n  client.setContent(`{\n       &quot;text&quot;: &quot;Hello, world.&quot;\n    }`);\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\">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>\n<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>\n<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>\n<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>\n<span class=\"line\"><span style=\"color: #98C379\">       &quot;text&quot;: &quot;Hello, world.&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #98C379\">    }`<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">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\" rel=\"nofollow noopener\" target=\"_blank\">found in our documentation<\/a><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Having defined our message, it&#8217;s time to send it out. We&#8217;ll dispatch a POST request to our webhook, using<code> client.post()<\/code> and passing our URL in it.<\/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 SendToSlack(five, context, result) {\n  const client = five.httpClient();\n  client.setContentType(&quot;application\/json&quot;);\n  client.setContent(`{\n       &quot;text&quot;: &quot;Hello, world.&quot;\n  }`);\n    \n  const httpResult = client.post(&quot;YOUR_WEBHOOK_URL_HERE&quot;);\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\">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>\n<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>\n<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>\n<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>\n<span class=\"line\"><span style=\"color: #98C379\">       &quot;text&quot;: &quot;Hello, world.&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #98C379\">  }`<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><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\">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>\n<span class=\"line\"><span style=\"color: #ABB2BF\">}<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">After sending our message, it&#8217;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\" rel=\"nofollow noopener\" target=\"_blank\"> the isOk() method<\/a> available in Five&#8217;s API. It returns a boolean value reflecting the outcome of the response. Lastly, we&#8217;ll encapsulate our post request within a <code>try-catch<\/code> block. Now our function should look something similar to the snippet below.<\/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 SendToSlack(five, context, result) {\n  const client = five.httpClient();\n  client.setContentType(&quot;application\/json&quot;);\n  client.setContent(`{\n       &quot;text&quot;: &quot;Hello, world.&quot;\n  }`);\n  \n  try {\n    const httpResult = client.post(&quot;YOUR_WEBHOOK_URL_HERE&quot;);\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}\" 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>\n<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>\n<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>\n<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>\n<span class=\"line\"><span style=\"color: #98C379\">       &quot;text&quot;: &quot;Hello, world.&quot;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #98C379\">  }`<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #C678DD\">try<\/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\">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>\n<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>\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\">createError<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75\">httpResult<\/span><span style=\"color: #ABB2BF\">);<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    }<\/span><\/span>\n<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>\n<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>\n<span class=\"line\"><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<h3 class=\"wp-block-heading\" id=\"step-4-attaching-functions-and-forms\">Step 4: Attaching Functions and Forms<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now that our function is ready, let&#8217;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>\n\n\n\n<p class=\"wp-block-paragraph\"><br>We can start by navigating back to the form that we built in <strong>Step 2<\/strong> and then clicking on the &#8216;events&#8217; 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\" rel=\"nofollow noopener\" target=\"_blank\">Five supports event-driven programming<\/a> it will show you a list of events that the form goes through.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Since we want our function to be invoked whenever someone submits a form, we will attach our function to the &#8216;Do Complete&#8217; event. If you&#8217;ve observed, Five offers two completion events:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Do Complete <\/li>\n\n\n\n<li>On Complete<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">This distinction exists because Five differentiates between server-side and client-side events. Events that start with &#8216;Do&#8217; are server-side, and have direct database access. Conversely, events prefixed with &#8216;On&#8217; are client-side, running directly in the browser.<\/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\/08\/Frame-19-1-1024x548.png\" alt=\"\" class=\"wp-image-1538\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-19-1-1024x548.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-19-1-300x160.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-19-1-768x411.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-19-1-1536x821.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Frame-19-1-2048x1095.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"conclusion\">Conclusion<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Now it&#8217;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>\n\n\n\n<figure class=\"wp-block-image size-full\"><img width=\"1920\" height=\"1080\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/2023-08-25-10-15-26-2.gif\" alt=\"\" class=\"wp-image-1542\"\/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">And there you have it! You&#8217;ve successfully built an application that integrates with Slack, sending notifications directly to your chosen channel. Throughout this tutorial, you&#8217;ve harnessed a variety of Five&#8217;s powerful features:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Database Management: <\/strong>We&#8217;ve learned how to create tables and forms inside Five through the wizard<\/li>\n\n\n\n<li><strong>Function Creation:<\/strong> You&#8217;ve written a JavaScript function tailored to send messages to Slack. This involved setting up, defining content types, etc<\/li>\n\n\n\n<li><strong>API Integration:<\/strong> Using POST requests, you&#8217;ve communicated with Slack&#8217;s API, sending data directly to a webhook. This showcases how Five can seamlessly interact with external platforms.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">You can <a href=\"https:\/\/preview-php85.dzine.org\/five\/download\/source\/blog\/MyFirstApp-20230825-0810356444635.fdf\" data-type=\"URL\" data-id=\"https:\/\/preview-php85.dzine.org\/five\/download\/source\/blog\/MyFirstApp-20230825-0810356444635.fdf\">download the FDF here<\/a> and test the application yourself before building it. Just remember to replace &#8216;YOUR_WEBHOOK_URL_HERE&#8217; with your actual webhook. <\/p>\n","protected":false},"excerpt":{"rendered":"<p>Five Lab: Connecting Slack To Your Web Developed in Five Welcome to Five Labs, a step-by-step guide to building applications using Five. Sign up\u00a0now\u00a0and start building on\u00a0our low-code development environment. This lab guides you through integrating an application built using Five with Slack using Webhooks. The objective of the tutorial is to: Typical scenarios where [&hellip;]<\/p>\n","protected":false},"author":10,"featured_media":1570,"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],"tags":[],"class_list":["post-1513","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Connecting-Slack-To-Five-Using-Webhooks.png",1280,720,false],"thumbnail":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Connecting-Slack-To-Five-Using-Webhooks-150x150.png",150,150,true],"medium":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Connecting-Slack-To-Five-Using-Webhooks-300x169.png",300,169,true],"medium_large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Connecting-Slack-To-Five-Using-Webhooks-768x432.png",768,432,true],"large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Connecting-Slack-To-Five-Using-Webhooks-1024x576.png",1024,576,true],"1536x1536":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Connecting-Slack-To-Five-Using-Webhooks.png",1280,720,false],"2048x2048":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Connecting-Slack-To-Five-Using-Webhooks.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":"Five Lab: Connecting Slack To Your Web Developed in Five Welcome to Five Labs, a step-by-step guide to building applications using Five. Sign up\u00a0now\u00a0and start building on\u00a0our low-code development environment. This lab guides you through integrating an application built using Five with Slack using Webhooks. The objective of the tutorial is to: Typical scenarios where&hellip;","_links":{"self":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/1513","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=1513"}],"version-history":[{"count":2,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/1513\/revisions"}],"predecessor-version":[{"id":17435,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/1513\/revisions\/17435"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media\/1570"}],"wp:attachment":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media?parent=1513"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/categories?post=1513"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/tags?post=1513"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}