{"id":2378,"date":"2024-02-28T07:21:01","date_gmt":"2024-02-27T23:21:01","guid":{"rendered":"https:\/\/five.co\/?p=2378"},"modified":"2026-04-30T14:01:52","modified_gmt":"2026-04-30T06:01:52","slug":"code-along-full-stack-web-app","status":"publish","type":"post","link":"https:\/\/preview-php85.dzine.org\/five\/code-along\/code-along-full-stack-web-app\/","title":{"rendered":"Code-Along: Build &#038; Deploy a Full-Stack Web App"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Hi and welcome to our step-by-step guide on building your first web app with Five. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Goals and Objectives<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">In this step-by-step tutorial, we are developing an entire web app in just 30 minutes. We are:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Developing a responsive web application with an <strong>online MySQL database<\/strong> that includes a <strong><a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/how-to-create-many-to-many-relationships-in-sql\/\" target=\"_blank\" data-type=\"link\" data-id=\"https:\/\/preview-php85.dzine.org\/five\/blog\/how-to-create-many-to-many-relationships-in-sql\/\" rel=\"noreferrer noopener\">many-to-many relationship<\/a><\/strong>, <\/li>\n\n\n\n<li>Creating a chart on top of an <strong>SQL query<\/strong>, <\/li>\n\n\n\n<li><strong>Validating data inputs<\/strong> through custom display types and regular expressions,<\/li>\n\n\n\n<li>Integrating the application with Slack&#8217;s webhook, and <\/li>\n\n\n\n<li>Adding a <strong>PDF report<\/strong> that shows data from our SQL database to our application! <\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\">Sounds like a lot? You&#8217;ll be surprised how quickly we can do this in Five! <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before we continue, make sure to&nbsp;<a href=\"https:\/\/preview-php85.dzine.org\/five\/get-started\/\" target=\"_blank\" rel=\"noreferrer noopener\">sign up for free access to the Five development environment<\/a>.<\/p>\n\n\n\n<div style=\"background-color: #001524;\"><hr style=\"height: 5px;\">\n<pre style=\"text-align: center; overflow: hidden; white-space: pre-line;\"><span style=\"color: #f1ebda; background-color: #4588d8; font-size: calc(18px + 0.390625vw);\"><strong>Get Free Access to Five's Development Environment<br><\/strong><span style=\"font-size: 14pt;\">Rapidly Build &amp; Deploy Custom Web Applications<\/span><\/span><\/pre>\n<p style=\"text-align: center;\"><a href=\"https:\/\/preview-php85.dzine.org\/five\/get-started\/\" target=\"_blank\" rel=\"noopener\"><button style=\"background-color: #f8b92b; border: none; color: black; padding: 20px; text-align: center; text-decoration: none; display: inline-block; font-size: 18px; cursor: pointer; margin: 4px 2px; border-radius: 5px;\"><strong>Free Sign Up<\/strong><\/button><br><\/a><\/p>\n<hr style=\"height: 5px;\"><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"root-eb-toc-sgbejbd wp-block-essential-blocks-table-of-contents\"><div class=\"eb-parent-wrapper eb-parent-eb-toc-sgbejbd \"><div class=\"eb-toc-container eb-toc-sgbejbd  eb-toc-is-not-sticky eb-toc-not-collapsible eb-toc-initially-not-collapsed eb-toc-scrollToTop style-1 list-style-none\" data-scroll-top=\"false\" data-scroll-top-icon=\"fas fa-angle-up\" data-collapsible=\"false\" data-sticky-hide-mobile=\"false\" data-sticky=\"false\" data-scroll-target=\"scroll_to_toc\" data-copy-link=\"false\" data-editor-type=\"\" data-hide-desktop=\"false\" data-hide-tab=\"false\" data-hide-mobile=\"false\" data-itemcollapsed=\"false\" data-highlight-scroll=\"false\"><div class=\"eb-toc-header\"><h2 class=\"eb-toc-title\">Table of Contents<\/h2><\/div><div class=\"eb-toc-wrapper \" data-headers=\"[{&quot;level&quot;:3,&quot;content&quot;:&quot;Goals and Objectives&quot;,&quot;text&quot;:&quot;Goals and Objectives&quot;,&quot;link&quot;:&quot;goals-and-objectives&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Host Your Application For Just US$27.49 Per Month&quot;,&quot;text&quot;:&quot;Host Your Application For Just US$27.49 Per Month&quot;,&quot;link&quot;:&quot;host-your-application-for-just-us2749-per-month&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Host Your App Online&quot;,&quot;text&quot;:&quot;Host Your App Online&quot;,&quot;link&quot;:&quot;host-your-app-online&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Free Training&quot;,&quot;text&quot;:&quot;Free Training&quot;,&quot;link&quot;:&quot;free-training&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Watch On Demand&quot;,&quot;text&quot;:&quot;Watch On Demand&quot;,&quot;link&quot;:&quot;watch-on-demand&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Resources and Downloads&quot;,&quot;text&quot;:&quot;Resources and Downloads&quot;,&quot;link&quot;:&quot;resources-and-downloads&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Preview the Application&quot;,&quot;text&quot;:&quot;Preview the Application&quot;,&quot;link&quot;:&quot;preview-the-application&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;CSV File&quot;,&quot;text&quot;:&quot;CSV File&quot;,&quot;link&quot;:&quot;csv-file&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;SQL Query&quot;,&quot;text&quot;:&quot;SQL Query&quot;,&quot;link&quot;:&quot;sql-query&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;JavaScript Function&quot;,&quot;text&quot;:&quot;JavaScript Function&quot;,&quot;link&quot;:&quot;javascript-function&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Theme&quot;,&quot;text&quot;:&quot;Theme&quot;,&quot;link&quot;:&quot;theme&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Report Template&quot;,&quot;text&quot;:&quot;Report Template&quot;,&quot;link&quot;:&quot;report-template&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 1: Creating a New Application&quot;,&quot;text&quot;:&quot;Step 1: Creating a New Application&quot;,&quot;link&quot;:&quot;step-1-creating-a-new-application&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 2: Running Your Application&quot;,&quot;text&quot;:&quot;Step 2: Running Your Application&quot;,&quot;link&quot;:&quot;step-2-running-your-application&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 3: Data &gt; Table Wizard: Creating Database Tables &quot;,&quot;text&quot;:&quot;Step 3: Data &gt; Table Wizard: Creating Database Tables &quot;,&quot;link&quot;:&quot;step-3-data-table-wizard-creating-database-tables&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;The Product Table&quot;,&quot;text&quot;:&quot;The Product Table&quot;,&quot;link&quot;:&quot;the-product-table&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;The Orders Table&quot;,&quot;text&quot;:&quot;The Orders Table&quot;,&quot;link&quot;:&quot;the-orders-table&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;The ProductOrders Table&quot;,&quot;text&quot;:&quot;The ProductOrders Table&quot;,&quot;link&quot;:&quot;the-productorders-table&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 4: Data &gt; The Database Modeler&quot;,&quot;text&quot;:&quot;Step 4: Data &gt; The Database Modeler&quot;,&quot;link&quot;:&quot;step-4-data-the-database-modeler&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;First Checkpoint: Is Your Database Setup Correctly? &quot;,&quot;text&quot;:&quot;First Checkpoint: Is Your Database Setup Correctly? &quot;,&quot;link&quot;:&quot;first-checkpoint-is-your-database-setup-correctly&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 5: Data &gt; Tables: Importing a CSV&quot;,&quot;text&quot;:&quot;Step 5: Data &gt; Tables: Importing a CSV&quot;,&quot;link&quot;:&quot;step-5-data-tables-importing-a-csv&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 6: Visual &gt; Form Wizard: Creating Forms&quot;,&quot;text&quot;:&quot;Step 6: Visual &gt; Form Wizard: Creating Forms&quot;,&quot;link&quot;:&quot;step-6-visual-form-wizard-creating-forms&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Create the Product and Orders Form&quot;,&quot;text&quot;:&quot;Create the Product and Orders Form&quot;,&quot;link&quot;:&quot;create-the-product-and-orders-form&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Create the ProductOrders Form&quot;,&quot;text&quot;:&quot;Create the ProductOrders Form&quot;,&quot;link&quot;:&quot;create-the-productorders-form&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 7: Visual &gt; Forms: Adding a Page to a Form&quot;,&quot;text&quot;:&quot;Step 7: Visual &gt; Forms: Adding a Page to a Form&quot;,&quot;link&quot;:&quot;step-7-visual-forms-adding-a-page-to-a-form&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Second Checkpoint: Run Your Application&quot;,&quot;text&quot;:&quot;Second Checkpoint: Run Your Application&quot;,&quot;link&quot;:&quot;second-checkpoint-run-your-application&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 8: Setup &gt; Display Types: Validating Data On a Form&quot;,&quot;text&quot;:&quot;Step 8: Setup &gt; Display Types: Validating Data On a Form&quot;,&quot;link&quot;:&quot;step-8-setup-display-types-validating-data-on-a-form&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 9: Using Five&apos;s End-User GUI&quot;,&quot;text&quot;:&quot;Step 9: Using Five&apos;s End-User GUI&quot;,&quot;link&quot;:&quot;step-9-using-fives-end-user-gui&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 10: Data &gt; Queries: Write SQL In Five&quot;,&quot;text&quot;:&quot;Step 10: Data &gt; Queries: Write SQL In Five&quot;,&quot;link&quot;:&quot;step-10-data-queries-write-sql-in-five&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 11: Visual &gt; Chart Wizard: Create Charts For Your Application&quot;,&quot;text&quot;:&quot;Step 11: Visual &gt; Chart Wizard: Create Charts For Your Application&quot;,&quot;link&quot;:&quot;step-11-visual-chart-wizard-create-charts-for-your-application&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 12: Visual &gt; Reports: Creating a PDF Report&quot;,&quot;text&quot;:&quot;Step 12: Visual &gt; Reports: Creating a PDF Report&quot;,&quot;link&quot;:&quot;step-12-visual-reports-creating-a-pdf-report&quot;},{&quot;level&quot;:1,&quot;content&quot;:&quot;Report&quot;,&quot;text&quot;:&quot;Report&quot;,&quot;link&quot;:&quot;report&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 13: Visual &gt; Menus: Adding Menu Items to Your App&quot;,&quot;text&quot;:&quot;Step 13: Visual &gt; Menus: Adding Menu Items to Your App&quot;,&quot;link&quot;:&quot;step-13-visual-menus-adding-menu-items-to-your-app&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Third Checkpoint: Here&apos;s What Your App Should Now Look Like&quot;,&quot;text&quot;:&quot;Third Checkpoint: Here&apos;s What Your App Should Now Look Like&quot;,&quot;link&quot;:&quot;third-checkpoint-heres-what-your-app-should-now-look-like&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 14: Logic &gt; Code Editor: Writing a JavaScript Function In Five&quot;,&quot;text&quot;:&quot;Step 14: Logic &gt; Code Editor: Writing a JavaScript Function In Five&quot;,&quot;link&quot;:&quot;step-14-logic-code-editor-writing-a-javascript-function-in-five&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 15: Visual &gt; Forms: Attaching A Function To An Event&quot;,&quot;text&quot;:&quot;Step 15: Visual &gt; Forms: Attaching A Function To An Event&quot;,&quot;link&quot;:&quot;step-15-visual-forms-attaching-a-function-to-an-event&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 16: Applications: Turning Your App Into a Multiuser App&quot;,&quot;text&quot;:&quot;Step 16: Applications: Turning Your App Into a Multiuser App&quot;,&quot;link&quot;:&quot;step-16-applications-turning-your-app-into-a-multiuser-app&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Fourth Checkpoint: Logging Into Your Application For The First Time&quot;,&quot;text&quot;:&quot;Fourth Checkpoint: Logging Into Your Application For The First Time&quot;,&quot;link&quot;:&quot;fourth-checkpoint-logging-into-your-application-for-the-first-time&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 17: Setup &gt; User Roles: Creating Roles And Permissions&quot;,&quot;text&quot;:&quot;Step 17: Setup &gt; User Roles: Creating Roles And Permissions&quot;,&quot;link&quot;:&quot;step-17-setup-user-roles-creating-roles-and-permissions&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 18: Setup &gt; Themes: Give Your Application a Unique Look&quot;,&quot;text&quot;:&quot;Step 18: Setup &gt; Themes: Give Your Application a Unique Look&quot;,&quot;link&quot;:&quot;step-18-setup-themes-give-your-application-a-unique-look&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 19: Setup &gt; Instances: Applying a Theme, Logos and Customizing the UI&quot;,&quot;text&quot;:&quot;Step 19: Setup &gt; Instances: Applying a Theme, Logos and Customizing the UI&quot;,&quot;link&quot;:&quot;step-19-setup-instances-applying-a-theme-logos-and-customizing-the-ui&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Congratulations: Your Full-Stack Web App&quot;,&quot;text&quot;:&quot;Congratulations: Your Full-Stack Web App&quot;,&quot;link&quot;:&quot;congratulations-your-full-stack-web-app&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Finding Help in Five&quot;,&quot;text&quot;:&quot;Finding Help in Five&quot;,&quot;link&quot;:&quot;finding-help-in-five&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Five&apos;s In-App Help&quot;,&quot;text&quot;:&quot;Five&apos;s In-App Help&quot;,&quot;link&quot;:&quot;fives-in-app-help&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Bring Your App To The Cloud For Just US$27.49 Per Month&quot;,&quot;text&quot;:&quot;Bring Your App To The Cloud For Just US$27.49 Per Month&quot;,&quot;link&quot;:&quot;bring-your-app-to-the-cloud-for-just-us2749-per-month&quot;}]\" data-visible=\"[true,true,true,true,true,true]\" data-delete-headers=\"[{&quot;label&quot;:&quot;Goals and Objectives&quot;,&quot;value&quot;:&quot;goals-and-objectives&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Host Your Application For Just US$27.49 Per Month&quot;,&quot;value&quot;:&quot;host-your-application-for-just-us2749-per-month&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Host Your App Online&quot;,&quot;value&quot;:&quot;host-your-app-online&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Free Training&quot;,&quot;value&quot;:&quot;free-training&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Watch On Demand&quot;,&quot;value&quot;:&quot;watch-on-demand&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Resources and Downloads&quot;,&quot;value&quot;:&quot;resources-and-downloads&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Preview the Application&quot;,&quot;value&quot;:&quot;preview-the-application&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;CSV File&quot;,&quot;value&quot;:&quot;csv-file&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;SQL Query&quot;,&quot;value&quot;:&quot;sql-query&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;JavaScript Function&quot;,&quot;value&quot;:&quot;javascript-function&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Theme&quot;,&quot;value&quot;:&quot;theme&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Report Template&quot;,&quot;value&quot;:&quot;report-template&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Step 1: Creating a New Application&quot;,&quot;value&quot;:&quot;step-1-creating-a-new-application&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 2: Running Your Application&quot;,&quot;value&quot;:&quot;step-2-running-your-application&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 3: Data &gt; Table Wizard: Creating Database Tables &quot;,&quot;value&quot;:&quot;step-3-data-table-wizard-creating-database-tables&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;The Product Table&quot;,&quot;value&quot;:&quot;the-product-table&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;The Orders Table&quot;,&quot;value&quot;:&quot;the-orders-table&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;The ProductOrders Table&quot;,&quot;value&quot;:&quot;the-productorders-table&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Step 4: Data &gt; The Database Modeler&quot;,&quot;value&quot;:&quot;step-4-data-the-database-modeler&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;First Checkpoint: Is Your Database Setup Correctly? &quot;,&quot;value&quot;:&quot;first-checkpoint-is-your-database-setup-correctly&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 5: Data &gt; Tables: Importing a CSV&quot;,&quot;value&quot;:&quot;step-5-data-tables-importing-a-csv&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 6: Visual &gt; Form Wizard: Creating Forms&quot;,&quot;value&quot;:&quot;step-6-visual-form-wizard-creating-forms&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Create the Product and Orders Form&quot;,&quot;value&quot;:&quot;create-the-product-and-orders-form&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Create the ProductOrders Form&quot;,&quot;value&quot;:&quot;create-the-productorders-form&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Step 7: Visual &gt; Forms: Adding a Page to a Form&quot;,&quot;value&quot;:&quot;step-7-visual-forms-adding-a-page-to-a-form&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Second Checkpoint: Run Your Application&quot;,&quot;value&quot;:&quot;second-checkpoint-run-your-application&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 8: Setup &gt; Display Types: Validating Data On a Form&quot;,&quot;value&quot;:&quot;step-8-setup-display-types-validating-data-on-a-form&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 9: Using Five&apos;s End-User GUI&quot;,&quot;value&quot;:&quot;step-9-using-fives-end-user-gui&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 10: Data &gt; Queries: Write SQL In Five&quot;,&quot;value&quot;:&quot;step-10-data-queries-write-sql-in-five&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 11: Visual &gt; Chart Wizard: Create Charts For Your Application&quot;,&quot;value&quot;:&quot;step-11-visual-chart-wizard-create-charts-for-your-application&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 12: Visual &gt; Reports: Creating a PDF Report&quot;,&quot;value&quot;:&quot;step-12-visual-reports-creating-a-pdf-report&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Report&quot;,&quot;value&quot;:&quot;report&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Step 13: Visual &gt; Menus: Adding Menu Items to Your App&quot;,&quot;value&quot;:&quot;step-13-visual-menus-adding-menu-items-to-your-app&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Third Checkpoint: Here&apos;s What Your App Should Now Look Like&quot;,&quot;value&quot;:&quot;third-checkpoint-heres-what-your-app-should-now-look-like&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 14: Logic &gt; Code Editor: Writing a JavaScript Function In Five&quot;,&quot;value&quot;:&quot;step-14-logic-code-editor-writing-a-javascript-function-in-five&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 15: Visual &gt; Forms: Attaching A Function To An Event&quot;,&quot;value&quot;:&quot;step-15-visual-forms-attaching-a-function-to-an-event&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 16: Applications: Turning Your App Into a Multiuser App&quot;,&quot;value&quot;:&quot;step-16-applications-turning-your-app-into-a-multiuser-app&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Fourth Checkpoint: Logging Into Your Application For The First Time&quot;,&quot;value&quot;:&quot;fourth-checkpoint-logging-into-your-application-for-the-first-time&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 17: Setup &gt; User Roles: Creating Roles And Permissions&quot;,&quot;value&quot;:&quot;step-17-setup-user-roles-creating-roles-and-permissions&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 18: Setup &gt; Themes: Give Your Application a Unique Look&quot;,&quot;value&quot;:&quot;step-18-setup-themes-give-your-application-a-unique-look&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 19: Setup &gt; Instances: Applying a Theme, Logos and Customizing the UI&quot;,&quot;value&quot;:&quot;step-19-setup-instances-applying-a-theme-logos-and-customizing-the-ui&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Congratulations: Your Full-Stack Web App&quot;,&quot;value&quot;:&quot;congratulations-your-full-stack-web-app&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Finding Help in Five&quot;,&quot;value&quot;:&quot;finding-help-in-five&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Five&apos;s In-App Help&quot;,&quot;value&quot;:&quot;fives-in-app-help&quot;,&quot;isDelete&quot;:true},{&quot;label&quot;:&quot;Bring Your App To The Cloud For Just US$27.49 Per Month&quot;,&quot;value&quot;:&quot;bring-your-app-to-the-cloud-for-just-us2749-per-month&quot;,&quot;isDelete&quot;:false}]\" data-smooth=\"true\" data-top-offset=\"\"><div class=\"eb-toc__list-wrap\"><ul class=\"eb-toc__list\"><li><a href=\"#host-your-application-for-just-us2749-per-month\">Host Your Application For Just US$27.49 Per Month<\/a><ul class=\"eb-toc__list\"><li><a href=\"#watch-on-demand\">Watch On Demand<\/a><\/li><\/ul><li><a href=\"#resources-and-downloads\">Resources and Downloads<\/a><ul class=\"eb-toc__list\"><li><a href=\"#preview-the-application\">Preview the Application<\/a><\/li><\/ul><li><a href=\"#step-1-creating-a-new-application\">Step 1: Creating a New Application<\/a><li><a href=\"#step-2-running-your-application\">Step 2: Running Your Application<\/a><li><a href=\"#step-3-data-table-wizard-creating-database-tables\">Step 3: Data &gt; Table Wizard: Creating Database Tables <\/a><li><a href=\"#step-4-data-the-database-modeler\">Step 4: Data &gt; The Database Modeler<\/a><li><a href=\"#first-checkpoint-is-your-database-setup-correctly\">First Checkpoint: Is Your Database Setup Correctly? <\/a><li><a href=\"#step-5-data-tables-importing-a-csv\">Step 5: Data &gt; Tables: Importing a CSV<\/a><li><a href=\"#step-6-visual-form-wizard-creating-forms\">Step 6: Visual &gt; Form Wizard: Creating Forms<\/a><li><a href=\"#step-7-visual-forms-adding-a-page-to-a-form\">Step 7: Visual &gt; Forms: Adding a Page to a Form<\/a><li><a href=\"#second-checkpoint-run-your-application\">Second Checkpoint: Run Your Application<\/a><li><a href=\"#step-8-setup-display-types-validating-data-on-a-form\">Step 8: Setup &gt; Display Types: Validating Data On a Form<\/a><li><a href=\"#step-9-using-fives-end-user-gui\">Step 9: Using Five&#8217;s End-User GUI<\/a><li><a href=\"#step-10-data-queries-write-sql-in-five\">Step 10: Data &gt; Queries: Write SQL In Five<\/a><li><a href=\"#step-11-visual-chart-wizard-create-charts-for-your-application\">Step 11: Visual &gt; Chart Wizard: Create Charts For Your Application<\/a><li><a href=\"#step-12-visual-reports-creating-a-pdf-report\">Step 12: Visual &gt; Reports: Creating a PDF Report<\/a><li><a href=\"#step-13-visual-menus-adding-menu-items-to-your-app\">Step 13: Visual &gt; Menus: Adding Menu Items to Your App<\/a><li><a href=\"#third-checkpoint-heres-what-your-app-should-now-look-like\">Third Checkpoint: Here&#8217;s What Your App Should Now Look Like<\/a><li><a href=\"#step-14-logic-code-editor-writing-a-javascript-function-in-five\">Step 14: Logic &gt; Code Editor: Writing a JavaScript Function In Five<\/a><li><a href=\"#step-15-visual-forms-attaching-a-function-to-an-event\">Step 15: Visual &gt; Forms: Attaching A Function To An Event<\/a><li><a href=\"#step-16-applications-turning-your-app-into-a-multiuser-app\">Step 16: Applications: Turning Your App Into a Multiuser App<\/a><li><a href=\"#fourth-checkpoint-logging-into-your-application-for-the-first-time\">Fourth Checkpoint: Logging Into Your Application For The First Time<\/a><li><a href=\"#step-17-setup-user-roles-creating-roles-and-permissions\">Step 17: Setup &gt; User Roles: Creating Roles And Permissions<\/a><li><a href=\"#step-18-setup-themes-give-your-application-a-unique-look\">Step 18: Setup &gt; Themes: Give Your Application a Unique Look<\/a><li><a href=\"#step-19-setup-instances-applying-a-theme-logos-and-customizing-the-ui\">Step 19: Setup &gt; Instances: Applying a Theme, Logos and Customizing the UI<\/a><li><a href=\"#congratulations-your-full-stack-web-app\">Congratulations: Your Full-Stack Web App<\/a><li><a href=\"#finding-help-in-five\">Finding Help in Five<\/a><li><a href=\"#bring-your-app-to-the-cloud-for-just-us2749-per-month\">Bring Your App To The Cloud For Just US$27.49 Per Month<\/a><\/ul><\/div><\/div><\/div><\/div><\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"get-your-app-online-for-us-29-99-per-month\">Host Your Application For Just US$27.49 Per Month<\/h2>\n\n\n\n<div class=\"wp-block-essential-blocks-row alignfull  root-eb-row-biaw09k\"><div class=\"eb-parent-wrapper eb-parent-eb-row-biaw09k \"><div class=\"eb-row-root-container eb-row-biaw09k\" data-id=\"eb-row-biaw09k\"><div class=\"eb-row-wrapper\"><div class=\"eb-row-inner\">\n<div class=\"wp-block-essential-blocks-column  root-eb-column-wx1wxil\"><div class=\"eb-parent-wrapper eb-parent-eb-column-wx1wxil \"><div class=\"eb-column-wrapper eb-column-wx1wxil\"><div class=\"eb-column-inner\">\n<div class=\"wp-block-essential-blocks-infobox  root-eb-infobox-8pjjq1i\"><div class=\"eb-parent-wrapper eb-parent-eb-infobox-8pjjq1i \"><div class=\"eb-infobox-8pjjq1i eb-infobox-wrapper\"><div class=\"infobox-wrapper-inner\"><div class=\"icon-img-wrapper\"><div class=\"eb-icon number-or-icon\"><i icon=\"fas fa-cloud\" class=\"fas fa-cloud eb-infobox-icon-data-selector\"><\/i><\/div><\/div><div class=\"contents-wrapper\"><h2 class=\"title\">Host Your App Online<\/h2><p class=\"description\">Select one of our hosting packages.<br>Starting from US$29.99 per app and month. <\/p><div class=\"eb-infobox-btn-wrapper\"><a href=\"https:\/\/preview-php85.dzine.org\/five\/order-payment\/\" target=\"_blank\" rel=\"noopener noreferrer\" class=\"infobox-btn  hvr-grow\">Subscribe Now<\/a><\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div>\n\n\n\n<div class=\"wp-block-essential-blocks-column  root-eb-column-qo3d78f\"><div class=\"eb-parent-wrapper eb-parent-eb-column-qo3d78f \"><div class=\"eb-column-wrapper eb-column-qo3d78f\"><div class=\"eb-column-inner\">\n<div class=\"wp-block-essential-blocks-infobox  root-eb-infobox-9qgrxmq\"><div class=\"eb-parent-wrapper eb-parent-eb-infobox-9qgrxmq \"><div class=\"eb-infobox-9qgrxmq eb-infobox-wrapper\"><div class=\"infobox-wrapper-inner\"><div class=\"icon-img-wrapper\"><div class=\"eb-icon number-or-icon\"><span class=\"dashicon dashicons dashicons-welcome-learn-more eb-infobox-icon-data-selector\"><\/span><\/div><\/div><div class=\"contents-wrapper\"><h2 class=\"title\">Free Training<\/h2><p class=\"description\">Sign Up for a FREE product training session.<\/p><div class=\"eb-infobox-btn-wrapper\"><a href=\"https:\/\/preview-php85.dzine.org\/five\/blog\/free-training\/\" target=\"_self\" rel=\"noopener noreferrer\" class=\"infobox-btn  hvr-grow\">Sign Up Now<\/a><\/div><\/div><\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div>\n<\/div><\/div><\/div><\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">To deploy your application, sign up for one of our paid plans, starting from US$27.49 per month and application.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Watch On Demand<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Check out our recording of the code-along session on demand, and follow along as we&#8217;re guiding you through the app development process.<\/p>\n\n\n\n<figure class=\"wp-block-embed is-type-video is-provider-youtube wp-block-embed-youtube wp-embed-aspect-16-9 wp-has-aspect-ratio\"><div class=\"wp-block-embed__wrapper\">\n<iframe title=\"Code-Along Training Session | Rapid Application Development | Five.Co\" width=\"500\" height=\"281\" src=\"https:\/\/www.youtube.com\/embed\/48T8DqA6ACw?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" referrerpolicy=\"strict-origin-when-cross-origin\" allowfullscreen><\/iframe>\n<\/div><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"resources-and-downloads\">Resources and Downloads<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Preview the Application<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">You can <a href=\"https:\/\/default-myfirstapp-tryfive.5au.co\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">preview the application that you&#8217;re building today here<\/a>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"csv-file\">CSV File<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Download the CSV file here.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-079b5d33-dcb9-48b8-8f41-1c0ca47bba8a\" href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/product_data-1.csv\" target=\"_blank\" rel=\"noreferrer noopener\">product_data-1<\/a><a href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/product_data-1.csv\" class=\"wp-block-file__button wp-element-button\" aria-describedby=\"wp-block-file--media-079b5d33-dcb9-48b8-8f41-1c0ca47bba8a\" download>Download<\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"sql-query\">SQL Query<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Download the SQL query here. <\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-f984382b-09df-4622-81ad-72307942bb19\" href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/ProductQuery.txt\" target=\"_blank\" rel=\"noreferrer noopener\">ProductQuery<\/a><a href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/ProductQuery.txt\" class=\"wp-block-file__button wp-element-button\" aria-describedby=\"wp-block-file--media-f984382b-09df-4622-81ad-72307942bb19\" download>Download<\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"java-script-function\">JavaScript Function<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Download the JavaScript function here.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-f3a116a7-4b94-4c84-a981-813b030fc81c\" href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Slack.txt\" target=\"_blank\" rel=\"noreferrer noopener\">Slack<\/a><a href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Slack.txt\" class=\"wp-block-file__button wp-element-button\" aria-describedby=\"wp-block-file--media-f3a116a7-4b94-4c84-a981-813b030fc81c\" download>Download<\/a><\/div>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"theme\">Theme<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Download the CSS theme here.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-d9efd2eb-45b1-45f3-9758-f2c68e3a7ee9\" href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/PurpleHazeTheme.txt\">PurpleHazeTheme<\/a><a href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/PurpleHazeTheme.txt\" class=\"wp-block-file__button wp-element-button\" aria-describedby=\"wp-block-file--media-d9efd2eb-45b1-45f3-9758-f2c68e3a7ee9\" download>Download<\/a><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h3 class=\"wp-block-heading\" id=\"report-template\">Report Template<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Download the report template or copy the HTML from here.<\/p>\n<\/div><\/div>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-a1eac728-16c7-40db-99ed-608c628b1f11\" href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/ProductReport.docx\" target=\"_blank\" rel=\"noreferrer noopener\">ProductReport<\/a><a href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/ProductReport.docx\" class=\"wp-block-file__button wp-element-button\" aria-describedby=\"wp-block-file--media-a1eac728-16c7-40db-99ed-608c628b1f11\" download>Download<\/a><\/div>\n<\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-1-creating-a-new-application\">Step 1: Creating a New Application<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">1.1. To create a new application in Five, click on <strong>Applications<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"694\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-7-1024x694.png\" alt=\"\" class=\"wp-image-2379\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-7-1024x694.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-7-300x203.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-7-768x520.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-7.png 1308w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 1.1: Creating a New Application<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">1.2. Next, click on the yellow <strong>Plus <\/strong>icon.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"649\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Yellow-Plus-Button-Create-a-New-Application-1024x649.png\" alt=\"\" class=\"wp-image-2439\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Yellow-Plus-Button-Create-a-New-Application-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Yellow-Plus-Button-Create-a-New-Application-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Yellow-Plus-Button-Create-a-New-Application-768x487.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Yellow-Plus-Button-Create-a-New-Application-1536x974.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Yellow-Plus-Button-Create-a-New-Application-2048x1298.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 1.2: Creating a New Application in Five<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">1.3. Type <strong>My First App<\/strong> in the <strong>Title <\/strong>field.<br>1.4. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"619\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-12-1024x619.png\" alt=\"\" class=\"wp-image-2386\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-12-1024x619.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-12-300x181.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-12-768x465.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-12-1536x929.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-12.png 1860w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 1.3: Saving a New Application<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-2-running-your-application-\u25b6\ufe0f\">Step 2: Running Your Application<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">You can run and preview your application at any time. To do so, click on the <strong>Deploy to Development button<\/strong> in the top navigation bar. The first deployment of your app can take some time, as Five&#8217;s is creating your app&#8217;s cloud resources.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"259\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-4-1024x259.png\" alt=\"\" class=\"wp-image-2561\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-4-1024x259.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-4-300x76.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-4-768x194.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-4-1536x388.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-4-2048x518.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 2.1.: To deploy your application to development, click on <strong>Deploy to Development<\/strong><\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Once your application is deployed, the <strong>Deploy to Development <\/strong>button turns into a <strong>Run<\/strong> \u25b6\ufe0f button in the top right corner. Every time you click on <strong>Run<\/strong> \u25b6\ufe0f, a new window opens up, showing the current state of your application.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img width=\"1280\" height=\"720\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Run-Your-Application.png\" alt=\"\" class=\"wp-image-2512\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Run-Your-Application.png 1280w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Run-Your-Application-300x169.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Run-Your-Application-1024x576.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Run-Your-Application-768x432.png 768w\" sizes=\"(max-width: 1280px) 100vw, 1280px\" \/><figcaption class=\"wp-element-caption\"><em>Image 2.2: Running Your Application<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-3-data-table-wizard-creating-database-tables\">Step 3: Data &gt; Table Wizard: Creating Database Tables <\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s start developing our application. Let&#8217;s go back to the development environment and continue from here.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3.1. Click on the blue <strong>Manage<\/strong> button.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-full\"><img width=\"1280\" height=\"720\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/01\/Five.Co-Manage-Your-Application.png\" alt=\"Five.Co - Manage Your Application\" class=\"wp-image-741\"\/><figcaption class=\"wp-element-caption\"><em>Image 3.1: Access Five&#8217;s development environment by clicking on the blue <strong>Manage<\/strong> button.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">3.2. To add tables to Five&#8217;s integrated MySQL database, click on <strong>Data &gt; Table Wizard<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"518\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-9-1024x518.png\" alt=\"\" class=\"wp-image-2381\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-9-1024x518.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-9-300x152.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-9-768x389.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-9.png 1308w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 3.2: Five&#8217;s Table Wizard can be accessed from Data &gt; Table Wizard<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">We are creating three separate tables: Products, Orders, and ProductOrders. <\/p>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-product-table\">The Product Table<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">3.3. Give your table a name inside the <strong>Name <\/strong>field: call it <strong>Product<\/strong>. To add fields to your table, click the <strong>Plus \u2795 <\/strong>icon on the right side of the screen.<br>3.4. Here is what your <strong>Product<\/strong> table should look like. Make sure to get the <strong>Data Type<\/strong> and <strong>Display Type <\/strong>for your fields right. <\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Name<\/strong><\/td><td><strong>Data Type<\/strong><\/td><td><strong>Req.<\/strong><\/td><td><strong>Size<\/strong><\/td><td><strong>Default Display Type<\/strong><\/td><\/tr><tr><td>Name<\/td><td>Text<\/td><td>\u2714\ufe0f<\/td><td>100<\/td><td>_Text<\/td><\/tr><tr><td>SKU<\/td><td>Text<\/td><td><\/td><td>100<\/td><td>_Text<\/td><\/tr><tr><td>Price<\/td><td>Float<\/td><td><\/td><td><\/td><td>_Currency<\/td><\/tr><tr><td>Rating<\/td><td>Float<\/td><td><\/td><td><\/td><td>_RatingFloat<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Once your table looks exactly like what&#8217;s shown in the image below, click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save. <br>For the <strong>Table Upgrade <\/strong>dialog, click on <strong>Save <\/strong>again.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"551\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-50-1024x551.png\" alt=\"\" class=\"wp-image-2435\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-50-1024x551.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-50-300x161.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-50-768x413.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-50-1536x826.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-50.png 1918w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 3.3: Creating the Product Table<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-orders-table\">The Orders Table<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">3.5. Repeat steps 3.3 and 3.4 for your <strong>Orders <\/strong>table. Shown below is what your <strong>Orders <\/strong>table should look like.<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Name<\/strong><\/td><td><strong>Data Type<\/strong><\/td><td><strong>Req.<\/strong><\/td><td><strong>Size<\/strong><\/td><td><strong>Default Display Type<\/strong><\/td><\/tr><tr><td>OrderStatus<\/td><td>Text<\/td><td>\u2714\ufe0f<\/td><td>100<\/td><td>_Text<\/td><\/tr><tr><td>OrderDate<\/td><td>Date<\/td><td><\/td><td>100<\/td><td>_Date<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">3.6. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"550\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-51-1024x550.png\" alt=\"\" class=\"wp-image-2436\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-51-1024x550.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-51-300x161.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-51-768x413.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-51-1536x825.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-51.png 1917w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 3.4: Creating the Orders Table<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"the-product-orders-table\">The ProductOrders Table<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">The <strong>ProductOrders <\/strong>table is a junction table between our Product and Orders table. It is used to establish a many-to-many relationship between Products and Orders and it does not contain any fields. It only contains the Foreign Keys of the Product and Orders table. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3.7. To create this table, open up the <strong>Table Wizard. <\/strong><br>3.8. Type <strong>ProductOrders <\/strong>into the <strong>Name<\/strong> field.<br>3.9. Click on the <strong>Right Arrow &gt;<\/strong> as shown in this image:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img width=\"1024\" height=\"627\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-13-1024x627.png\" alt=\"\" class=\"wp-image-2387\" style=\"width:840px;height:auto\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-13-1024x627.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-13-300x184.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-13-768x470.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-13-1536x940.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-13.png 1838w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 3.5: The ProductOrders Table<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">3.10. Click the <strong>Plus<\/strong> \u2795 icon in the <strong>Relationships <\/strong>area at the lower part of the screen.<br>3.11. Add a relationship to the <strong>Product <\/strong>and <strong>Orders<\/strong> table and tick the <strong>Required<\/strong> box for both. Here is what this should look like.<br>3.12. Once the relationships are defined as shown in Image 3.6, click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"651\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-14-1024x651.png\" alt=\"\" class=\"wp-image-2388\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-14-1024x651.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-14-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-14-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-14-1536x976.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-14.png 1770w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 3.6: Adding Relationships to the ProductOrders Table<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-4-data-the-database-modeler\">Step 4: Data &gt; The Database Modeler<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">4.1. To check whether your database is set up correctly, click on <strong>Data &gt; Database Modeler<\/strong><br>4.2. Here is what your database should look like. You have to drag and drop your tables around to get a visual Entity-Relationship-Diagram that looks exactly like Image 4.1. <br>Make sure the relationships are correct: the &#8220;crows&#8217; feet&#8221; on the lines are both pointing towards the <strong>ProductOrders <\/strong>table, indicating the many-to-many relationship that exists between products and orders.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"649\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-15-1024x649.png\" alt=\"\" class=\"wp-image-2389\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-15-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-15-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-15-768x486.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-15-1536x973.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-15.png 1776w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 4.1: The Database Modeler showing the Orders, ProductOrders and Product tables<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"first-checkpoint-is-your-database-setup-correctly\">First Checkpoint: Is Your Database Setup Correctly? <\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Make sure your database looks <em>exactly <\/em>like the one shown in the database modeler. Our query and PDF report, which we will develop later, refer to the field names shown above.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-5-data-tables-importing-a-csv\">Step 5: Data &gt; Tables: Importing a CSV<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">5.1. To import a CSV file into your database table, click on <strong>Data &gt; Tables.<\/strong><br>5.2. Now click on the <strong>Import CSV into Table<\/strong> \ud83d\udce5 button. <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Data-Import-1024x650.png\" alt=\"Five.Co - Data Import\" class=\"wp-image-2089\" style=\"width:840px;height:auto\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Data-Import-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Data-Import-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Data-Import-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Data-Import-1536x976.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Data-Import-2048x1301.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 5.1: Five&#8217;s Import CSV into Table Feature<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">5.3. From the dropdown, select the <strong>Product<\/strong> table. This is the table we are importing data into.<br>5.4. Click on <strong>Choose File<\/strong> and select the CSV file available for download at the top of this article.<br>5.5. For <strong>ProductKey<\/strong> select <strong>Generated.<\/strong> For all other fields, Five automatically maps the fields of your database to the columns of your CSV file.<br>5.6. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to confirm the data import. A pop-up message saying &#8220;Import of CSV completed successfully&#8221; appears. We have now successfully populated our SQL database with data and generated primary keys for each record! <\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"627\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-36-1024x627.png\" alt=\"\" class=\"wp-image-2415\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-36-1024x627.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-36-300x184.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-36-768x470.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-36-1536x940.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-36.png 1838w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 5.2: Mapping CSV Columns to Database Fields<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-6-visual-form-wizard-creating-forms\">Step 6: Visual &gt; Form Wizard: Creating Forms<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now, let&#8217;s build some forms for our front end. These forms refer back to our database tables and will give our application users an intuitive interface to create, read, update, or delete data stored in our database.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">6.1. To create forms, click on <strong>Visual &gt; Form Wizard<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-1024x650.png\" alt=\"Five.Co - Form Wizard\" class=\"wp-image-2091\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-1536x976.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2023\/08\/Five.Co-Form-Wizard-2048x1301.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 6.1: The Form Wizard can be accessed from Visual &gt; Form Wizard<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"create-the-product-and-orders-form\">Create the Product and Orders Form<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">6.2. In the <strong>Main Data Source<\/strong> field of the Form Wizard, select <strong>Product. <\/strong><br>6.3. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<br>6.4. After saving your Product form, repeat the same steps for <strong>Orders<\/strong>, i.e. select <strong>Orders <\/strong>in the <strong>Main Data Source <\/strong>field, and save again.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"628\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-16-1024x628.png\" alt=\"\" class=\"wp-image-2390\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-16-1024x628.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-16-300x184.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-16-768x471.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-16-1536x942.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-16.png 1834w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 6.2: Creating the Product form<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"create-the-product-orders-form\">Create the ProductOrders Form<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">6.5. In the <strong>Main Data Source<\/strong> field of the Form Wizard, select <strong>ProductOrders<\/strong>.<br>6.6. Toggle the <strong>Add Menu Item<\/strong> (the first item in the <strong>Menu<\/strong> section) to off. <br>6.7. Click on the <strong>Right Arrow &gt;<\/strong> as shown here:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"627\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-17-1024x627.png\" alt=\"\" class=\"wp-image-2391\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-17-1024x627.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-17-300x184.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-17-768x470.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-17-1536x941.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-17.png 1837w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 6.3: Click on the &gt; arrow to further define your ProductOrders form<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">6.8. <strong>Tick the Box<\/strong> \u2611\ufe0f for <strong>List<\/strong> for both fields: ProductKey and OrdersKey.<br>6.9. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"627\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-18-1024x627.png\" alt=\"\" class=\"wp-image-2392\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-18-1024x627.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-18-300x184.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-18-768x470.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-18-1536x940.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-18.png 1838w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 6.4: The settings for the ProductOrders form<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-7-visual-forms-adding-a-page-to-a-form\">Step 7: Visual &gt; Forms: Adding a Page to a Form<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Next up, let&#8217;s make our forms more advanced by adding a page to a form. If by now you are wondering what exactly we&#8217;re building, bear with us. We&#8217;re just a few steps away from previewing our application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">7.1. Click on <strong>Visual &gt; Forms<\/strong><br>7.2. Select the <strong>Orders<\/strong> form from the list on the left.<br>7.3. Click on <strong>Pages<\/strong> on the right.<br>7.4. Click on the <strong>Plus<\/strong> \u2795 icon.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img width=\"1024\" height=\"622\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-20-1024x622.png\" alt=\"\" class=\"wp-image-2394\" style=\"width:840px;height:auto\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-20-1024x622.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-20-300x182.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-20-768x466.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-20-1536x933.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-20.png 1853w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 7.1: To add a page to the Orders Form<\/em> <em>click on the Plus icon<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">7.5. Change the <strong>Page Type<\/strong>, i.e. the third field, to <strong>List.<\/strong><br>7.6. Type <strong>Products<\/strong> in the <strong>Caption <\/strong>field and select <strong>ProductOrders (Form) <\/strong>as <strong>Action*.<\/strong><br>7.7. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save. Here is what your screen should look like before saving. Save again to confirm the new page as part of your <strong>Orders<\/strong> form.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"621\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-22-1024x621.png\" alt=\"\" class=\"wp-image-2396\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-22-1024x621.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-22-300x182.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-22-768x466.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-22-1536x932.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-22.png 1854w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 7.2: Select List as page type, and fill in the fields as shown.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"second-checkpoint-run-your-application\">Second Checkpoint: Run Your Application<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s time to run your application to see what we have developed so far. As shown in Step 2 above, you can always preview your application by clicking on the <strong>Run \u25b6\ufe0f <\/strong>icon in the top right corner.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Here&#8217;s what your app should look like:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"651\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-54-1024x651.png\" alt=\"\" class=\"wp-image-2442\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-54-1024x651.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-54-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-54-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-54-1536x976.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-54.png 1770w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Go ahead and get familiar with Five&#8217;s auto-generated user interface (GUI). Check out the <strong>filter and search bar<\/strong> above your products or select a product, for example. The products that you can see inside your application are the data that was stored in our CSV. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Also, note how Five is converting the rating of each product into stars. This is because we defined &#8220;Rating&#8221; to be a &#8220;_RatingFloat&#8221; display type. Price, on the other hand, which is also a float, is shown as a currency, because we selected &#8220;_Currency&#8221; as its display type.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 8: Setup &gt; Display Types: Validating Data On a Form<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Oftentimes, as programmers, we need to validate the data that users submit in an application. Custom display types let us do so. By defining a custom display type, we can tell Five what an acceptable input in a form field is. If the input is different from what&#8217;s accepted, give an error message.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Let&#8217;s apply this to our SKU field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">8.1. Go to <strong>Setup &gt; Display Types.<\/strong><br>8.2. Click on the yellow <strong>Plus \u2795 <\/strong>button to create a new display type.<br>8.3. Fill in the following fields:<br>&#8211; For <strong>Name, <\/strong>type in <strong>SKU<\/strong>. <br>&#8211; For <strong>Display Type, <\/strong>select <strong>Text<\/strong>. <br>&#8211; Now go down to the bottom of the display type form, and toggle <strong>Regular Expression<\/strong>.<br>&#8211; For <strong>Mask,<\/strong> type or paste this regular expression: <code>^[A-Z]{3}-\\d+$<\/code><br>&#8211; Last, for <strong>Error Message, <\/strong>type in the error message that users will see if they fill in an invalid SKU, such as &#8220;Please enter a valid SKU.&#8221;<br>8.4. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your display type.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"525\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-8-1024x525.png\" alt=\"\" class=\"wp-image-2612\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-8-1024x525.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-8-300x154.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-8-768x393.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-8-1536x787.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-8-2048x1049.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 8.1: Creating a New Display Type<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">The display we have just created checks whether an SKU has the following format: ABC-1234, i.e. three letters, followed by a hyphen, followed by four numbers. If a user fills in an SKU different from this format, the error message will be displayed.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">There&#8217;s one more step we need to take. We need to apply the display type to the SKU field.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">8.5. Go to <strong>Visual &gt; Forms<\/strong><br>8.6. Select the <strong>Products <\/strong>form, and click on <strong>Pages &gt; General<\/strong>.<br>8.7. Now click on <strong>Fields<\/strong>, and select the <strong>SKU<\/strong> field.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"525\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-9-1024x525.png\" alt=\"\" class=\"wp-image-2613\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-9-1024x525.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-9-300x154.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-9-768x394.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-9-1536x787.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-9-2048x1049.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 8.2: To Apply the Display Type to a Field, Go To Forms &gt; Pages &gt; General &gt; Fields<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">8.8. Once you are inside the SKU field, change the <strong>Display Type <\/strong>to <strong>SKU. <\/strong>Here&#8217;s what this should look like:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"521\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-10-1024x521.png\" alt=\"\" class=\"wp-image-2614\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-10-1024x521.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-10-300x153.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-10-768x390.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-10-1536x781.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-10-2048x1041.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 8.3: Apply the SKU Display Type to the SKU Field<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">8.9. Save the changes you have made to the SKU field and Product form by clicking on the <strong>Tick \u2714\ufe0f <\/strong>icons two times.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You can now go ahead and test whether your custom display type works. To do so, run the application and add a new product to it. When filling out the SKU, first type in an invalid SKU, such as 12345678. This should produce an error. When you enter a valid SKU, such as SKU-1234, you should be able to save the new product.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-8-a-using-fives-end-user-gui\">Step 9: Using Five&#8217;s End-User GUI<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">For Step 9, we will keep working inside our <strong>end-user application<\/strong>, i.e. on the screen shown in the image above. We will add a few orders to our database to better understand Five&#8217;s end-user GUI.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">9.1. Click on <strong>Orders<\/strong> in the menu on the left.<br>9.2. Now click the <strong>Plus \u2795 <\/strong>icon and add some dummy data to your database.<br>9.3. Fill in some dummy data for your <strong>Order Status <\/strong>and <strong>Order Date.<\/strong><br>9.4. Click on <strong>Products<\/strong>. This is the page that we added to our Orders form earlier.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-56-1024x650.png\" alt=\"\" class=\"wp-image-2444\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-56-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-56-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-56-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-56-1536x975.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-56.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 9.1: Adding Dummy Data through Five&#8217;s End-User GUI<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">9.5. Add a few products to your order by using the <strong>Plus<\/strong> \u2795 on the far right. This is just dummy data, so feel free to select any product with your order.<br>9.6. Repeat these steps until you have several orders stored in your database. As shown in Image 9.1, your orders will appear in a list. In Image 9.1, this list contains a <strong>New, Pending, Pending <\/strong>and <strong>Shipped <\/strong>order.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-8-b-data-queries-write-sql-in-five\">Step 10: Data &gt; Queries: Write SQL In Five<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Now let&#8217;s create a SQL query in Five, so let&#8217;s go back into our development environment. We will write a query that returns some of the data you created in Step 8.A.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">10.1. To add a query, click on <strong>Data &gt; Queries<\/strong>.<br>10.2. Click on the yellow <strong>Plus <\/strong>icon.<br>10.3. Type <strong>ProductQuery<\/strong> into the <strong>Data Source ID<\/strong> field.<br>10.4. Click on <strong>Click to add <\/strong>in the <strong>Query<\/strong> field, as shown here:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"649\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-37-1024x649.png\" alt=\"\" class=\"wp-image-2417\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-37-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-37-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-37-768x486.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-37-1536x973.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-37.png 1776w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 8.1: Click on Click to edit to open up Five&#8217;s Query Editor<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">10.5. Click on <strong>SQL<\/strong>.<br>10.6. Paste the SQL into the SQL Editor. Make sure to have some orders in your Orders table. Otherwise, the query will not produce any results! To test your query, click on the <strong>Run <\/strong>\u25b6\ufe0f icon.<\/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=\"SELECT\n  `Product`.`Name`,\n  `Product`.`Price`,\n  `Orders`.`OrderDate`\nFROM\n  `Product`\n  INNER JOIN `ProductOrders` ON (\n    `ProductOrders`.`ProductKey` = `Product`.`ProductKey`\n  )\n  INNER JOIN `Orders` ON (\n    `ProductOrders`.`OrdersKey` = `Orders`.`OrdersKey`\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\">SELECT<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #98C379\">`Product`<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #98C379\">`Name`<\/span><span style=\"color: #ABB2BF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #98C379\">`Product`<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #98C379\">`Price`<\/span><span style=\"color: #ABB2BF\">,<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #98C379\">`Orders`<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #98C379\">`OrderDate`<\/span><\/span>\n<span class=\"line\"><span style=\"color: #C678DD\">FROM<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #98C379\">`Product`<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  <\/span><span style=\"color: #C678DD\">INNER JOIN<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #98C379\">`ProductOrders`<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #C678DD\">ON<\/span><span style=\"color: #ABB2BF\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #98C379\">`ProductOrders`<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #98C379\">`ProductKey`<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #98C379\">`Product`<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #98C379\">`ProductKey`<\/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\">INNER JOIN<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #98C379\">`Orders`<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #C678DD\">ON<\/span><span style=\"color: #ABB2BF\"> (<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #98C379\">`ProductOrders`<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #98C379\">`OrdersKey`<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #98C379\">`Orders`<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #98C379\">`OrdersKey`<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">  )<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-38-1024x650.png\" alt=\"\" class=\"wp-image-2418\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-38-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-38-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-38-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-38-1536x975.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-38.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 8.2: Click on SQL to paste raw SQL into Five&#8217;s Query Editor and then save.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">10.7. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your query.<br>10.8. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your query as a data source.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-9-visual-chart-wizard-create-charts-for-your-application\">Step 11: Visual &gt; Chart Wizard: Create Charts For Your Application<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">11.1. To create a chart, click on <strong>Visual &gt; Chart Wizard.<\/strong><br>11.2. Fill in all fields on the left of the screen that are marked with an asterisk *, and choose your <strong>X Value Column <\/strong>and <strong>Y Value Column<\/strong>, as shown in the image below.<br>11.3. Save by clicking the <strong>Tick <\/strong>\u2714\ufe0f icon in the top right corner.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"649\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-23-1024x649.png\" alt=\"\" class=\"wp-image-2397\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-23-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-23-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-23-768x487.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-23-1536x974.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-23.png 1774w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 11.1: Five&#8217;s Chart Wizard: Apply the settings shown to create a bar chart showing products and prices.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-10-visual-reports-creating-a-pdf-report\">Step 12: Visual &gt; Reports: Creating a PDF Report<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">12.1. To create a PDF report on our database, click on <strong>Visual &gt; Reports<\/strong><br>12.2. Click on the yellow <strong>Plus<\/strong> icon.<br>12.3. Type <strong>Product Report <\/strong>into the <strong>Title<\/strong> field.<br>12.4. Click on <strong>Data Sources.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"652\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-24-1024x652.png\" alt=\"\" class=\"wp-image-2398\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-24-1024x652.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-24-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-24-768x489.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-24-1536x978.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-24.png 1766w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 10.1: Before a report can be created, it needs to have a title and a data source.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">12.5. Click on the <strong>Plus<\/strong> \u2795 icon to add a data source.<br>12.6. Select <strong>Product (Table)<\/strong> as a <strong>Data Source<\/strong>.<br>12.7. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-25-1024x650.png\" alt=\"\" class=\"wp-image-2399\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-25-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-25-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-25-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-25-1536x975.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-25.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 10.2: Add Product (Table) as a data source to your report.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">12.8. Go back to <strong>General.<\/strong><br>12.9. Click on the <strong>Template<\/strong> field that says <strong>Click to add.<\/strong> This opens up Five&#8217;s report template editor, where you can create report templates just the way you would in any text editor.<br>12.10. Click on the <strong>&lt;\/&gt; icon.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-26-1024x650.png\" alt=\"\" class=\"wp-image-2400\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-26-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-26-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-26-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-26-1536x975.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-26.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 10.3: Click on &lt;\/&gt; to open up Five&#8217;s HTML report writer.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">12.11. Delete all code in the code editor and replace it with the HTML here:<\/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=\"&lt;style&gt;\n    .demo tr {\n      background-color: lightgrey\n    }\n        \n&lt;\/style&gt;\n\n&lt;div&gt;&lt;img src=&quot;data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKMAAAAtCAYAAADC1tsoAAAABmJLR0QA\/wD\/AP+gvaeTAAAHlklEQVR42u2cbWxTVRjHLxvv8hJQM1HRgdB2dLyE3rYMQizQtRs4hA8V1iIqiQu+EBK\/EAHZ5YOsiwtRfIkjSIIGWW9AhX2g3YAFPhiNiy8gbEMmuHUImYKArN0YOz6nux13d\/d2ve29t3M7\/+SfLO2559777JfnnOeck1LUABCiqLQWs7kgaKUrKCIiMeWX\/vak2hAGLSZXk4W+0GyhEfgnEnUiUTm89d\/keutrwZudu89PVqrf80bjyKCFXt9sMV3kIIz6NIk6kahySxvKAETEOZRbWs\/aSy7aKYSGJdpnk9X8SrOZbhFAyNlUSaJOJA5jSf1GHox8N8B3W5a9ey5Dbp8AXak4iNjmgyTqRKLCWVACxqg7Hd66agDTZWNqhscFI01bpGAMWsyfkKgTiSqvpC6zHxj5boFh3AsAT++naBkG4F2RyIxeEnUiUTEMSgPIwjKAxL6Ps6Xd27A+Z3fzGNF5o4XeLQYjfL6NRJ1Iet7ora+TCSPfN+2lDeVOb8Ncfp8tNL1IYqh+k0ScKMa8saEyCRj5rnWU1BXZmPPj8PqiWEWNl3tIxIkktbTswtMAkUkpL9tVp4sUMmb6o77DtGkViTiRbKGt2RnJXB+0mpb0zYzzl5LIEskD8R1DDtqhW51UHy5XOlTP1\/kw\/mGdbyLRJZKREbOmoGJ9I2JmTEi2Lxiqy3tlR6t1psKPi3eK1oK3aODHBPd+ClzEs5RywKNS+C\/FMVoS4\/s08ErBu6hlGSAymaMBxO9RsU6Rbbsmq8nBh\/F3qzVD4UDjF0QaWZjVCwTfi8kGDoFPgCekAMSR4APc870u0aZMwxjKgLFY\/xkYIUa\/QZEsa7MNBwhbe4DMyRmjcLDLBzCMc8C3eN+f5bKpVpoEPsW7\/32wS6TdDwMORsTo3uJA7ERvz3hUqYgEzfR+DsYOFQLOh\/EfcK2KzpIJ43jwcUGbP8G0BiBOA18Q3PsqeLZI21pemxvgRhUdF4h2APEeB+MpJaMC5xlXcDC2qgzjMY2HwHiGabyfv1fQ7l\/w8yo+lxl8TXDPWFmZDyOT2oKFMWQChK0RELF3GDYp2X+tyTQCquobAGPjEIQxWkDgf3IXr20nVxQpLbyOe1fwXFX9zFcHBoyIMY4DAM89AFHfhbY9M1Xp+zRb6S9UOuX9f4AxqpfA7YJryrnsqYQ2c\/NCfv\/7wCP6yxcphxGfroEhme0BMTJEG75T415450XqlHeH3zhXIRjPcEWGWh6bJIxYeNH\/puA6f5KVdjp4j6DPLhlg8WH8ADxdRUtVzoadvUDszoxqDB3UZZtttPBgLao2TQwFjIfCAWNXyG98dRBW01Iygq8Irv0FnMiI9BD4qKCvMLhQzkwqpdU0FCyrIkOyEMbter1ambhpAb0y+ndbddYCgLARjDh3tvuN7iECI8UtoAuXVFrA85Ps4y\/wYrnT+pTBiLbPzALwbvUBkdGfVXVaAGuOiHWlA3RbAL4OHogPgAxkrxkiMEaz2jFBH3fAzyWYXS+BdYnUmCmBEQqWyQDdpT4gRmzYqSaMbYHsqeFA9mkRCPnGkBYkCONJlec7oxSGMTrf+1DQD66034hxzTKReee34ETXhrWaM2Y+ANFFpQN0x8VBxJlx5rwVB92TsJUGsb0qezXMD\/\/uB8So28OBWfmDsJqWWwljMNIE7V7GNZ+gHQtOZmdL+2oaMuL7kiAW6y9H2+X5PHuch9YtVuSelaaxANfeOCHku7nt5NwnhhCMWPiUVJugz6+4Kj66VoniAHZgwwjHwV6MASL2e9G2ziPrpjh97tY8n5txwRwv4Wzon2UEqM7GCd89cG24yugN+7PsqMY2fIhlxqgWglsF\/eLlti8Fn+HsuEGhe2oHI2KyFkBWDMeEkTEs5F\/j9Hk2ApDIyRbW5B\/xyPoJFISoYQBWEfhuDPju94Yvc\/QQWPSOV3h+VRejCLgNzlfwfnwYr1Jq7u\/DMs6OyLEwRt8mDqL+KmIEqR6Agsx4MgKkz30zr8LtiuetbtfoHgHIjkkAiJdyyturZrlunzA8rFAgByOMWPinZk6LgBgEz1P4XtpX05EChtFNh73nAsiEDD6zCDBeB38s9oTLK9boAMQQByRyVrg\/L6gsGiv1RlCgLAXYgj3w+Y2tUD2zOEuGAnOmqQTEYIWR4qr3g7z+fwar8UNdB6iBcoQMbZoheQoZINzaA2M3kL8uZz29jiHh+V0okM0AdHcAvmq8jtgRmG3qk23VEV77c3FepDGMGRyQUashXLjg3ZSNVN\/tSKU0nqvmvSp7V1JPaQPQnKz7Rz6QDp+7DT7b3D0fpdLwumCoavaziDWOpIiI1FQu654HEN7rlSG7fViNNUkiophy+grLRGDEw\/aVXJ9nEYkQkXYzdShcAL5LokBC1sRrkqA0EikijbKjewm4SwJIhJeCcg+tfZxEikgrIPdLwcj52sqjG8aTSBGpLjvrmgjAtUjD6PGRKBFpWcy8IAFjp+NwoYFEiEjr4fprIYwOn+dTEhkizYULFbxnzV8Il3uggohIMTlY92s9lXSFp4REhChlwuuKcMTsTCRDsq7JJCJEKVUeu04f3acmIupP\/wHYJhviTK\/+pwAAAABJRU5ErkJggg==&quot; style=&quot;&quot;&gt;&lt;\/div&gt;\n&lt;div&gt;&lt;br&gt;&lt;\/div&gt;\n&lt;h1&gt;Report&lt;\/h1&gt;\n&lt;table style=&quot;letter-spacing: 0.00938em; width: 100%; font-size: 1rem;&quot; class=&quot;demo&quot;&gt;\n    &lt;tbody&gt;\n        &lt;tr style=&quot;border-bottom: 2px solid black;&quot; class=&quot;fiveReportHeaderRepeat-Level1&quot;&gt;\n            &lt;td style=&quot;width: 28.1305%; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255); text-align: left;&quot;&gt;Name&lt;\/td&gt;\n\n            &lt;td style=&quot;width: 50.97%; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255); text-align: left;&quot;&gt;SKU&lt;\/td&gt;\n\n            &lt;td style=&quot;width: 18.254%; text-align: left; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255);&quot;&gt;Price&lt;\/td&gt;\n        &lt;\/tr&gt;\n\n        &lt;tr class=&quot;fiveReportHelper&quot; contenteditable=&quot;false&quot;&gt;\n            &lt;td class=&quot;fiveReportHelper&quot;&gt;{{#each @root.[Product].[Records] as | Product |}}&lt;\/td&gt;\n            &lt;td&gt;&lt;br&gt;&lt;\/td&gt;\n            &lt;td&gt;&lt;br&gt;&lt;\/td&gt;\n        &lt;\/tr&gt;\n        &lt;tr class=&quot;&quot; contenteditable=&quot;false&quot;&gt;\n\n            &lt;td style=&quot;text-align: left;&quot;&gt;{{Product.[Name]}}&lt;\/td&gt;\n\n            &lt;td style=&quot;text-align: left;&quot;&gt;{{Product.[SKU]}}&lt;\/td&gt;\n\n            &lt;td style=&quot;text-align: left;&quot;&gt;{{Product.[Price]}}&lt;\/td&gt;\n        &lt;\/tr&gt;\n        &lt;tr class=&quot;fiveReportHelper&quot; contenteditable=&quot;false&quot;&gt;\n            &lt;td class=&quot;fiveReportHelper&quot;&gt;{{\/each}}&lt;\/td&gt;\n            &lt;td&gt;&lt;br&gt;&lt;\/td&gt;\n            &lt;td&gt;&lt;br&gt;&lt;\/td&gt;\n        &lt;\/tr&gt;\n\n    &lt;\/tbody&gt;\n&lt;\/table&gt;\n&lt;div&gt;&lt;br&gt;&lt;\/div&gt;\n\n&lt;div style=&quot;text-align: center;  display: flex; justify-content: center; align-items: center;&quot;&gt;\n    &lt;div style=&quot;width: 150mm; height: 125mm; border: 1px dashed black; display: flex; justify-content: center; align-items: center;&quot;&gt;&nbsp; &nbsp;{{{_Chart 'ProductChart'}}}&lt;\/div&gt;\n&lt;\/div&gt;\n&lt;div&gt;&lt;br&gt;&lt;\/div&gt;\n&lt;div&gt;&lt;br&gt;&lt;\/div&gt;\n&lt;div&gt;&lt;br&gt;&lt;\/div&gt;\n&lt;div&gt;&lt;br&gt;&lt;\/div&gt;\n\n&lt;table class=&quot;fiveReportFooter-everyPage&quot; style=&quot;width: 100%; height: 10mm;&quot;&gt;\n    &lt;tbody&gt;\n        &lt;tr&gt;\n            &lt;td style=&quot;text-align: right;&quot;&gt;&lt;span style=&quot;font-size: 12px;&quot;&gt;&lt;em&gt;Page&nbsp;&lt;five.pageNumber.current.arabic&gt; of&nbsp;&lt;five.pageNumber.total.arabic&gt;&lt;\/em&gt;&lt;\/span&gt;&lt;\/td&gt;\n\n        &lt;\/tr&gt;\n    &lt;\/tbody&gt;\n\n\n&lt;\/table&gt;\" 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: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">style<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #D19A66\">.demo<\/span><span style=\"color: #C678DD\"> <\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">      background-color: lightgrey<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    }<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        <\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;\/<\/span><span style=\"color: #E06C75\">style<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">img<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">src<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;data:image\/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKMAAAAtCAYAAADC1tsoAAAABmJLR0QA\/wD\/AP+gvaeTAAAHlklEQVR42u2cbWxTVRjHLxvv8hJQM1HRgdB2dLyE3rYMQizQtRs4hA8V1iIqiQu+EBK\/EAHZ5YOsiwtRfIkjSIIGWW9AhX2g3YAFPhiNiy8gbEMmuHUImYKArN0YOz6nux13d\/d2ve29t3M7\/+SfLO2559777JfnnOeck1LUABCiqLQWs7kgaKUrKCIiMeWX\/vak2hAGLSZXk4W+0GyhEfgnEnUiUTm89d\/keutrwZudu89PVqrf80bjyKCFXt9sMV3kIIz6NIk6kahySxvKAETEOZRbWs\/aSy7aKYSGJdpnk9X8SrOZbhFAyNlUSaJOJA5jSf1GHox8N8B3W5a9ey5Dbp8AXak4iNjmgyTqRKLCWVACxqg7Hd66agDTZWNqhscFI01bpGAMWsyfkKgTiSqvpC6zHxj5boFh3AsAT++naBkG4F2RyIxeEnUiUTEMSgPIwjKAxL6Ps6Xd27A+Z3fzGNF5o4XeLQYjfL6NRJ1Iet7ora+TCSPfN+2lDeVOb8Ncfp8tNL1IYqh+k0ScKMa8saEyCRj5rnWU1BXZmPPj8PqiWEWNl3tIxIkktbTswtMAkUkpL9tVp4sUMmb6o77DtGkViTiRbKGt2RnJXB+0mpb0zYzzl5LIEskD8R1DDtqhW51UHy5XOlTP1\/kw\/mGdbyLRJZKREbOmoGJ9I2JmTEi2Lxiqy3tlR6t1psKPi3eK1oK3aODHBPd+ClzEs5RywKNS+C\/FMVoS4\/s08ErBu6hlGSAymaMBxO9RsU6Rbbsmq8nBh\/F3qzVD4UDjF0QaWZjVCwTfi8kGDoFPgCekAMSR4APc870u0aZMwxjKgLFY\/xkYIUa\/QZEsa7MNBwhbe4DMyRmjcLDLBzCMc8C3eN+f5bKpVpoEPsW7\/32wS6TdDwMORsTo3uJA7ERvz3hUqYgEzfR+DsYOFQLOh\/EfcK2KzpIJ43jwcUGbP8G0BiBOA18Q3PsqeLZI21pemxvgRhUdF4h2APEeB+MpJaMC5xlXcDC2qgzjMY2HwHiGabyfv1fQ7l\/w8yo+lxl8TXDPWFmZDyOT2oKFMWQChK0RELF3GDYp2X+tyTQCquobAGPjEIQxWkDgf3IXr20nVxQpLbyOe1fwXFX9zFcHBoyIMY4DAM89AFHfhbY9M1Xp+zRb6S9UOuX9f4AxqpfA7YJryrnsqYQ2c\/NCfv\/7wCP6yxcphxGfroEhme0BMTJEG75T415450XqlHeH3zhXIRjPcEWGWh6bJIxYeNH\/puA6f5KVdjp4j6DPLhlg8WH8ADxdRUtVzoadvUDszoxqDB3UZZtttPBgLao2TQwFjIfCAWNXyG98dRBW01Iygq8Irv0FnMiI9BD4qKCvMLhQzkwqpdU0FCyrIkOyEMbter1ambhpAb0y+ndbddYCgLARjDh3tvuN7iECI8UtoAuXVFrA85Ps4y\/wYrnT+pTBiLbPzALwbvUBkdGfVXVaAGuOiHWlA3RbAL4OHogPgAxkrxkiMEaz2jFBH3fAzyWYXS+BdYnUmCmBEQqWyQDdpT4gRmzYqSaMbYHsqeFA9mkRCPnGkBYkCONJlec7oxSGMTrf+1DQD66034hxzTKReee34ETXhrWaM2Y+ANFFpQN0x8VBxJlx5rwVB92TsJUGsb0qezXMD\/\/uB8So28OBWfmDsJqWWwljMNIE7V7GNZ+gHQtOZmdL+2oaMuL7kiAW6y9H2+X5PHuch9YtVuSelaaxANfeOCHku7nt5NwnhhCMWPiUVJugz6+4Kj66VoniAHZgwwjHwV6MASL2e9G2ziPrpjh97tY8n5txwRwv4Wzon2UEqM7GCd89cG24yugN+7PsqMY2fIhlxqgWglsF\/eLlti8Fn+HsuEGhe2oHI2KyFkBWDMeEkTEs5F\/j9Hk2ApDIyRbW5B\/xyPoJFISoYQBWEfhuDPju94Yvc\/QQWPSOV3h+VRejCLgNzlfwfnwYr1Jq7u\/DMs6OyLEwRt8mDqL+KmIEqR6Agsx4MgKkz30zr8LtiuetbtfoHgHIjkkAiJdyyturZrlunzA8rFAgByOMWPinZk6LgBgEz1P4XtpX05EChtFNh73nAsiEDD6zCDBeB38s9oTLK9boAMQQByRyVrg\/L6gsGiv1RlCgLAXYgj3w+Y2tUD2zOEuGAnOmqQTEYIWR4qr3g7z+fwar8UNdB6iBcoQMbZoheQoZINzaA2M3kL8uZz29jiHh+V0okM0AdHcAvmq8jtgRmG3qk23VEV77c3FepDGMGRyQUashXLjg3ZSNVN\/tSKU0nqvmvSp7V1JPaQPQnKz7Rz6QDp+7DT7b3D0fpdLwumCoavaziDWOpIiI1FQu654HEN7rlSG7fViNNUkiophy+grLRGDEw\/aVXJ9nEYkQkXYzdShcAL5LokBC1sRrkqA0EikijbKjewm4SwJIhJeCcg+tfZxEikgrIPdLwcj52sqjG8aTSBGpLjvrmgjAtUjD6PGRKBFpWcy8IAFjp+NwoYFEiEjr4fprIYwOn+dTEhkizYULFbxnzV8Il3uggohIMTlY92s9lXSFp4REhChlwuuKcMTsTCRDsq7JJCJEKVUeu04f3acmIupP\/wHYJhviTK\/+pwAAAABJRU5ErkJggg==&quot;<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">h1<\/span><span style=\"color: #ABB2BF\">&gt;Report&lt;\/<\/span><span style=\"color: #E06C75\">h1<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">table<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;letter-spacing: 0.00938em; width: 100%; font-size: 1rem;&quot;<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">class<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;demo&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">tbody<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;border-bottom: 2px solid black;&quot;<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">class<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;fiveReportHeaderRepeat-Level1&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;width: 28.1305%; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255); text-align: left;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;Name&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;width: 50.97%; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255); text-align: left;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;SKU&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;width: 18.254%; text-align: left; background-color: rgb(153, 153, 153); color: rgb(255, 255, 255);&quot;<\/span><span style=\"color: #ABB2BF\">&gt;Price&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;\/<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">class<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;fiveReportHelper&quot;<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">contenteditable<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;false&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">class<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;fiveReportHelper&quot;<\/span><span style=\"color: #ABB2BF\">&gt;{{#each @root.[Product].[Records] as | Product |}}&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;\/<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">class<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;&quot;<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">contenteditable<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;false&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;text-align: left;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;{{Product.[Name]}}&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;text-align: left;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;{{Product.[SKU]}}&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;text-align: left;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;{{Product.[Price]}}&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;\/<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">class<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;fiveReportHelper&quot;<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">contenteditable<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;false&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">class<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;fiveReportHelper&quot;<\/span><span style=\"color: #ABB2BF\">&gt;{{\/each}}&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;\/<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;\/<\/span><span style=\"color: #E06C75\">tbody<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;\/<\/span><span style=\"color: #E06C75\">table<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;text-align: center;  display: flex; justify-content: center; align-items: center;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;width: 150mm; height: 125mm; border: 1px dashed black; display: flex; justify-content: center; align-items: center;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;\u00a0 \u00a0{{{_Chart &#39;ProductChart&#39;}}}&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">br<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">div<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;<\/span><span style=\"color: #E06C75\">table<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">class<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;fiveReportFooter-everyPage&quot;<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;width: 100%; height: 10mm;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;<\/span><span style=\"color: #E06C75\">tbody<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">            &lt;<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;text-align: right;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">span<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #D19A66\">style<\/span><span style=\"color: #ABB2BF\">=<\/span><span style=\"color: #98C379\">&quot;font-size: 12px;&quot;<\/span><span style=\"color: #ABB2BF\">&gt;&lt;<\/span><span style=\"color: #E06C75\">em<\/span><span style=\"color: #ABB2BF\">&gt;Page\u00a0&lt;<\/span><span style=\"color: #E06C75\">five.pageNumber.current.arabic<\/span><span style=\"color: #ABB2BF\">&gt; of\u00a0&lt;<\/span><span style=\"color: #E06C75\">five.pageNumber.total.arabic<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">em<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">span<\/span><span style=\"color: #ABB2BF\">&gt;&lt;\/<\/span><span style=\"color: #E06C75\">td<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">        &lt;\/<\/span><span style=\"color: #E06C75\">tr<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    &lt;\/<\/span><span style=\"color: #E06C75\">tbody<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">&lt;\/<\/span><span style=\"color: #E06C75\">table<\/span><span style=\"color: #ABB2BF\">&gt;<\/span><\/span><\/code><\/pre><\/div>\n\n\n\n<p class=\"wp-block-paragraph\">12.12. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your HTML.<br>12.13. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your report.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-11-visual-menus-adding-menu-items-to-your-app\">Step 13: Visual &gt; Menus: Adding Menu Items to Your App<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">13.1. Go to<strong> Visual &gt; Menus<\/strong>.<br>13.2. Click on the yellow <strong>Plus <\/strong>icon<strong>.<\/strong><br>13.3. We will first create a parent menu called <strong>Charts &amp; Reports<\/strong>. <br>13.4. Type <strong>Charts &amp; Reports<\/strong> into Caption.<br>13.5. Type <strong>3 <\/strong>into <strong>Menu Order.<\/strong><br>13.6. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your menu.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-40-1024x650.png\" alt=\"\" class=\"wp-image-2422\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-40-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-40-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-40-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-40-1536x975.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-40.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 13.1: Creating the Charts &amp; Reports Menu Item<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Next, we create new menu items for our chart and report each.<br>13.7. Click on the yellow <strong>Plus <\/strong>icon<strong>.<\/strong><br>13.8. Here are the settings for your <strong>Chart<\/strong> menu. Make sure to fill in <strong>Caption, Action<\/strong>, and <strong>Parent Menu<\/strong> as shown in Image 11.2.<br>13.9. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your menu.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-30-1024x650.png\" alt=\"\" class=\"wp-image-2404\" style=\"width:840px;height:auto\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-30-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-30-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-30-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-30-1536x975.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-30.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 13.2: Creating the Chart Menu Item Holding Our ProductChart as an Action<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">13.10. Here are the menu settings for your <strong>Report<\/strong> menu. Make sure to fill in <strong>Caption, Action, <\/strong>and <strong>Parent Menu<\/strong> as shown in Image 11.3.<br>13.11. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your menu.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-31-1024x650.png\" alt=\"\" class=\"wp-image-2405\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-31-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-31-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-31-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-31-1536x975.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-31.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 11.3: Creating the Report Menu Item<\/em> <em>Holding Our ProductReport as an Action<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"third-checkpoint-heres-what-your-app-should-now-look-like\">Third Checkpoint: Here&#8217;s What Your App Should Now Look Like<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Run your app to make sure that your forms, charts, and reports are working. Here&#8217;s what your app should look like when clicking on <strong>Chart <\/strong>in the menu on the left. Also, test your report &#8211; you should be able to see a PDF document in your application.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"652\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-33-1024x652.png\" alt=\"\" class=\"wp-image-2407\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-33-1024x652.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-33-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-33-768x489.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-33-1536x977.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-33.png 1768w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-12-logic-code-editor-writing-a-java-script-function-in-five\">Step 14: Logic &gt; Code Editor: Writing a JavaScript Function In Five<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Next, up let&#8217;s integrate our app with the Slack webhook. We want to build a feature where a message gets sent to a Slack channel every time someone submits a new order on our app.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">14.1. Click on <strong>Logic &gt; Code Editor<\/strong>.<br>14.2. Click on the <strong>Plus<\/strong> \u2795 icon.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"654\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-41-1024x654.png\" alt=\"\" class=\"wp-image-2423\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-41-1024x654.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-41-300x192.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-41-768x490.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-41-1536x981.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-41.png 1762w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 12.1: To add a function to Five, click on the Plus button in the Code Editor<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">14.3. Type <strong>Slack<\/strong> into the <strong>Function ID<\/strong> field.<br>14.4. Leave <strong>JavaScript <\/strong>selected as <strong>Language<\/strong>.<br>14.5. Click on <strong>Okay.<\/strong><br>14.6. Delete all code in the code editor and paste the JavaScript function below into the code editor.<\/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 Slack(five, context, result) {\n  const client = five.httpClient();\n  const form = context.Transactions[0].Values;\n  five.log(JSON.stringify(form));\n  client.setContentType(&quot;application\/json&quot;);\n  client.setContent(`{\n        &quot;text&quot;: &quot;A Customer has made an order, \\n Date: ${form.OrderDate} \\n Status ${form.OrderStatus}&quot;\n    }`);\n\n  try {\n    \/\/ Slack Webhook\u2b07\ufe0f\n    const httpResult = client.post(\n      &quot;https:\/\/hooks.slack.com\/services\/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&quot;\n    );\n    five.log(JSON.stringify(httpResult))\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\">Slack<\/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: #C678DD\">const<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">form<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #56B6C2\">=<\/span><span style=\"color: #ABB2BF\"> <\/span><span style=\"color: #E5C07B\">context<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">Transactions<\/span><span style=\"color: #ABB2BF\">[<\/span><span style=\"color: #D19A66\">0<\/span><span style=\"color: #ABB2BF\">].<\/span><span style=\"color: #E06C75\">Values<\/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: #E5C07B\">JSON<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">stringify<\/span><span style=\"color: #ABB2BF\">(<\/span><span style=\"color: #E06C75\">form<\/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;A Customer has made an order, <\/span><span style=\"color: #56B6C2\">\\n<\/span><span style=\"color: #98C379\"> Date: <\/span><span style=\"color: #C678DD\">${<\/span><span style=\"color: #E5C07B\">form<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">OrderDate<\/span><span style=\"color: #C678DD\">}<\/span><span style=\"color: #98C379\"> <\/span><span style=\"color: #56B6C2\">\\n<\/span><span style=\"color: #98C379\"> Status <\/span><span style=\"color: #C678DD\">${<\/span><span style=\"color: #E5C07B\">form<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #E06C75\">OrderStatus<\/span><span style=\"color: #C678DD\">}<\/span><span style=\"color: #98C379\">&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 style=\"color: #C678DD\">try<\/span><span style=\"color: #ABB2BF\"> {<\/span><\/span>\n<span class=\"line\"><span style=\"color: #ABB2BF\">    <\/span><span style=\"color: #7F848E; font-style: italic\">\/\/ Slack Webhook\u2b07\ufe0f<\/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>\n<span class=\"line\"><span style=\"color: #ABB2BF\">      <\/span><span style=\"color: #98C379\">&quot;https:\/\/hooks.slack.com\/services\/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&quot;<\/span><\/span>\n<span class=\"line\"><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: #E5C07B\">JSON<\/span><span style=\"color: #ABB2BF\">.<\/span><span style=\"color: #61AFEF\">stringify<\/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 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<p class=\"wp-block-paragraph\">14.7. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your function.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-13-visual-forms-attaching-a-function-to-an-event\">Step 15: Visual &gt; Forms: Attaching A Function To An Event<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">15.1. Click on <strong>Visual &gt; Forms.<\/strong><br>15.2. Select your <strong>Orders<\/strong> form.<br>15.3. Click on <strong>Events<\/strong>.<br>15.4. Select the <strong>Slack<\/strong> function for your <strong>DoComplete<\/strong> event.<br>15.5. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"649\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-42-1024x649.png\" alt=\"\" class=\"wp-image-2424\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-42-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-42-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-42-768x487.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-42-1536x974.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-42.png 1774w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 15.1. To attach our Slack function to an event, we go to Events and select the function in the DoComplete event.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">Now, anytime someone submits a new order, our Slack channel will receive a notification. Make sure to replace the webhook ID contained in our JavaScript function with your own to test this with your Slack channel.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-14-applications-turning-your-app-into-a-multiuser-app\">Step 16: Applications: Turning Your App Into a Multiuser App<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We&#8217;d like to add user management, authentication, and logins to our app. Let&#8217;s find out how to do this in Five.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">16.1. Click on <strong>Applications<\/strong> <strong>(My First App)<\/strong> in the top navigation bar of Five.<br>16.2. Stop your application deployment. To do so, click the <strong>Remove from Deployment <\/strong>button in the top right corner \u23f9\ufe0f. The button is located just to the right to the <strong>Run <\/strong>button used to preview your application. <br>16.3. Toggle the <strong>Multiuser<\/strong> switch to on. This will add a login screen and user management to your application.<br>16.4. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<br>16.5. Redeploy your application by clicking <strong>Deploy to Development.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-44-1024x650.png\" alt=\"\" class=\"wp-image-2426\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-44-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-44-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-44-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-44-1536x975.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-44.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 16.1: Activate Multiuser to add a login screen to your application.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"fourth-checkpoint-logging-into-your-application-for-the-first-time\">Fourth Checkpoint: Logging Into Your Application For The First Time<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Run your application again. You will be greeted by a login screen.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Use user name <strong>admin <\/strong>and password <strong>admin <\/strong>to log in to your application!<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img width=\"1024\" height=\"720\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-45-1024x720.png\" alt=\"\" class=\"wp-image-2427\" style=\"width:565px;height:auto\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-45-1024x720.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-45-300x211.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-45-768x540.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-45.png 1264w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-15-setup-user-roles-creating-roles-and-permissions\">Step 17: Setup &gt; User Roles: Creating Roles And Permissions<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">17.1. To create user roles and assign permissions, click on <strong>Setup &gt; Roles.<\/strong><br>17.2. Click on the yellow <strong>Plus <\/strong>icon.<br>17.3. Type <strong>Manager <\/strong>into the <strong>Name<\/strong> field, select <strong>ChartsReports (Charts &amp; Reports)<\/strong> as the <strong>Menu<\/strong>, and give full <strong>Create, Read, Update and Delete<\/strong> permissions for the <strong>Default Query Permissions <\/strong>as shown below.<br>17.4. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"649\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-46-1024x649.png\" alt=\"\" class=\"wp-image-2428\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-46-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-46-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-46-768x487.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-46-1536x974.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-46.png 1774w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 17.1: Setting up the Manager user role.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-16-setup-themes-give-your-application-a-unique-look\">Step 18: Setup &gt; Themes: Give Your Application a Unique Look<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">18.1. To create a theme, go to <strong>Setup &gt; Themes.<\/strong><br>18.2. Click on the yellow <strong>Plus <\/strong>icon.<br>18.3. Type <strong>MyTheme<\/strong> into the <strong>Name<\/strong> field.<br>18.4. Click on <strong>Click to edit theme<\/strong> to open up Five&#8217;s theme editor.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"648\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-47-1024x648.png\" alt=\"\" class=\"wp-image-2429\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-47-1024x648.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-47-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-47-768x486.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-47-1536x972.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-47.png 1778w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 18.1: Five&#8217;s Theme Editor lets you define a theme in point-and-click.<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">18.5. Click on <strong>Advanced<\/strong> at the top of theme editor.<br>18.6. Go to <a href=\"https:\/\/preview-php85.dzine.org\/five\/themes\" target=\"_blank\" rel=\"noreferrer noopener\">https:\/\/preview-php85.dzine.org\/five\/themes<\/a> and download your favourite theme: copy the code and paste it into the <strong>Advanced<\/strong> theme editor, replacing all existing code.<br>18.7. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your code.<br>18.8. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon again to also save your theme.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"step-17-setup-instances-applying-a-theme-logos-and-customizing-the-ui\">Step 19: Setup &gt; Instances: Applying a Theme, Logos and Customizing the UI<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">19.1 To apply a theme to your application, go to <strong>Setup &gt; Instances<\/strong><br>19.2 Select the <strong>default<\/strong> instance<br>19.3 Click on <strong>Theme<\/strong> and select <strong>MyTheme<\/strong> from the dropdown. Note: if you are working in Five&#8217;s cloud version, you first have to stop the deployment of your app. To do so, click the <strong>Stop <\/strong>\u23f9\ufe0f (Remove from deployment) button in the top right. Now you can change your theme and save it.<br>19.4 Click on The \u270f\ufe0fIcon on <strong>Logo<\/strong> and Select an image\/SVG as your logo.<br>19.5 Click on <strong>User Interface<\/strong> and Select between <strong>Boston <\/strong>or <strong>New York<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"531\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-49-1024x531.png\" alt=\"\" class=\"wp-image-2434\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-49-1024x531.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-49-300x156.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-49-768x399.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-49-1536x797.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-49.png 1898w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 17.1: Setting up Themes, Logos and UI<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Congratulations: Your Full-Stack Web App<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Congratulations on making it this far: you have developed your first app in Five. As a quick recap: we have created a database, written a query, added a form, chart, and PDF report to our app, integrated it with Slack, added logins and authentication, and customized its front end. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Try out the <strong>Manager<\/strong> role that you created in Step 15, for example. Run your application, log in and click on <strong>Users. <\/strong>Add a new user with role <strong>Manager<\/strong> and log in with this user account. Note how managers can only see the chart and PDF report, but not the forms. Five lets us develop multi-user apps with very granular permissions.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"finding-help-in-five\">Finding Help in Five<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">In case you get stuck during the development process, we&#8217;re here to help! Continue developing your application by accessing these resources:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Five&#8217;s User Community:<\/strong> Visit <a href=\"https:\/\/five.org\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">https:\/\/five.org<\/a> to ask questions or get inspiration from other users.<\/li>\n\n\n\n<li><strong>Five&#8217;s Documentation:<\/strong> Visit <a href=\"http:\/\/help.five.org\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">help.five.org<\/a> to access Five&#8217;s comprehensive documentation.<\/li>\n<\/ol>\n\n\n\n<h3 class=\"wp-block-heading\" id=\"fives-in-app-help\">Five&#8217;s In-App Help<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Last, find useful tips for your application development by clicking on Five&#8217;s <strong>in-app help <\/strong>available in the top right corner or on almost any field.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"649\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-1024x649.png\" alt=\"\" class=\"wp-image-2490\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-768x486.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-1536x973.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Finding-Help-2048x1297.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"get-your-app-online-for-us-29-99-per-month-1\">Bring Your App To The Cloud For Just US$27.49 Per Month<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Five lets you deploy applications starting from as little as US$27.49 per application and month.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<div class=\"wp-block-buttons has-custom-font-size has-small-font-size is-content-justification-center is-layout-flex wp-container-core-buttons-is-layout-fe48e5de wp-block-buttons-is-layout-flex\">\n<div class=\"wp-block-button has-custom-font-size has-medium-font-size\"><a class=\"wp-block-button__link has-white-color has-vivid-cyan-blue-background-color has-text-color has-background has-link-color has-text-align-center wp-element-button\" href=\"https:\/\/preview-php85.dzine.org\/five\/order-payment\/\"><strong>Subscribe Now<\/strong><\/a><\/div>\n<\/div>\n<\/div><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hi and welcome to our step-by-step guide on building your first web app with Five. Goals and Objectives In this step-by-step tutorial, we are developing an entire web app in just 30 minutes. We are: Sounds like a lot? You&#8217;ll be surprised how quickly we can do this in Five! Before we continue, make sure [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":2432,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_eb_attr":"","_uag_custom_page_level_css":"","footnotes":""},"categories":[41],"tags":[],"class_list":["post-2378","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-code-along"],"acf":[],"uagb_featured_image_src":{"full":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-How-to-Develop-a-Web-App-in-Five.png",960,540,false],"thumbnail":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-How-to-Develop-a-Web-App-in-Five-150x150.png",150,150,true],"medium":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-How-to-Develop-a-Web-App-in-Five-300x169.png",300,169,true],"medium_large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-How-to-Develop-a-Web-App-in-Five-768x432.png",768,432,true],"large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-How-to-Develop-a-Web-App-in-Five.png",960,540,false],"1536x1536":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-How-to-Develop-a-Web-App-in-Five.png",960,540,false],"2048x2048":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-How-to-Develop-a-Web-App-in-Five.png",960,540,false]},"uagb_author_info":{"display_name":"Dominik Keller","author_link":"https:\/\/preview-php85.dzine.org\/five\/author\/f1v5_ed3_my\/"},"uagb_comment_info":0,"uagb_excerpt":"Hi and welcome to our step-by-step guide on building your first web app with Five. Goals and Objectives In this step-by-step tutorial, we are developing an entire web app in just 30 minutes. We are: Sounds like a lot? You&#8217;ll be surprised how quickly we can do this in Five! Before we continue, make sure&hellip;","_links":{"self":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2378","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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/comments?post=2378"}],"version-history":[{"count":1,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2378\/revisions"}],"predecessor-version":[{"id":17499,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2378\/revisions\/17499"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media\/2432"}],"wp:attachment":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media?parent=2378"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/categories?post=2378"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/tags?post=2378"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}