{"id":2597,"date":"2024-03-13T14:27:21","date_gmt":"2024-03-13T06:27:21","guid":{"rendered":"https:\/\/five.co\/?p=2597"},"modified":"2026-04-03T16:18:12","modified_gmt":"2026-04-03T08:18:12","slug":"how-to-develop-a-rest-api-dashboard","status":"publish","type":"post","link":"https:\/\/preview-php85.dzine.org\/five\/code-along\/how-to-develop-a-rest-api-dashboard\/","title":{"rendered":"Code-Along: How to Develop a REST API Dashboard"},"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<p class=\"wp-block-paragraph\"><strong>Follow the steps below to build a responsive web app with a dashboard that visualizes data coming from a REST API in Five.<\/strong> <\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Goals and Outcomes: How to Develop a REST API Dashboard<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">By the end of this step-by-step guide, we have developed a responsive web app connected to the DummyJSON API. The payload of the API (in our case, product data received in JSON format) is converted into relational data, and shown in our front end on a form and in a dashboard so that users can interact with the data through the application.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Before we continue, make sure to <a href=\"https:\/\/preview-php85.dzine.org\/five\/get-started\/\">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 an API Dashboard<\/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-lzlmj1v wp-block-essential-blocks-table-of-contents\"><div class=\"eb-parent-wrapper eb-parent-eb-toc-lzlmj1v \"><div class=\"eb-toc-container eb-toc-lzlmj1v  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 Outcomes: How to Develop a REST API Dashboard&quot;,&quot;text&quot;:&quot;Goals and Outcomes: How to Develop a REST API Dashboard&quot;,&quot;link&quot;:&quot;goals-and-outcomes-how-to-develop-a-rest-api-dashboard&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Get Your REST API Dashboard Online From US$29.99 Per Month&quot;,&quot;text&quot;:&quot;Get Your REST API Dashboard Online From US$29.99 Per Month&quot;,&quot;link&quot;:&quot;get-your-rest-api-dashboard-online-from-us2999-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;:2,&quot;content&quot;:&quot;Resources and Downloads: Build a REST API Dashboard&quot;,&quot;text&quot;:&quot;Resources and Downloads: Build a REST API Dashboard&quot;,&quot;link&quot;:&quot;resources-and-downloads-build-a-rest-api-dashboard&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Download the Finished Application&quot;,&quot;text&quot;:&quot;Download the Finished Application&quot;,&quot;link&quot;:&quot;download-the-finished-application&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; Connection Wizard: Adding an API As a Data Source&quot;,&quot;text&quot;:&quot;Step 3: Data &gt; Connection Wizard: Adding an API As a Data Source&quot;,&quot;link&quot;:&quot;step-3-data-connection-wizard-adding-an-api-as-a-data-source&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 4: Visual &gt; Form Wizard: Creating a Form on the API&quot;,&quot;text&quot;:&quot;Step 4: Visual &gt; Form Wizard: Creating a Form on the API&quot;,&quot;link&quot;:&quot;step-4-visual-form-wizard-creating-a-form-on-the-api&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;First Checkpoint: Run Your Application&quot;,&quot;text&quot;:&quot;First Checkpoint: Run Your Application&quot;,&quot;link&quot;:&quot;first-checkpoint-run-your-application&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 5: Visual &gt; Charts: Visualizing the Data From the API&quot;,&quot;text&quot;:&quot;Step 5: Visual &gt; Charts: Visualizing the Data From the API&quot;,&quot;link&quot;:&quot;step-5-visual-charts-visualizing-the-data-from-the-api&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 6: Visual &gt; Dashboard: Combining Multiple Charts In a Dashboard&quot;,&quot;text&quot;:&quot;Step 6: Visual &gt; Dashboard: Combining Multiple Charts In a Dashboard&quot;,&quot;link&quot;:&quot;step-6-visual-dashboard-combining-multiple-charts-in-a-dashboard&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 7: Visual &gt; Menus: Adding Menu Items to Your App&quot;,&quot;text&quot;:&quot;Step 7: Visual &gt; Menus: Adding Menu Items to Your App&quot;,&quot;link&quot;:&quot;step-7-visual-menus-adding-menu-items-to-your-app&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;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;Get Your App Online For US$29.99 Per Month&quot;,&quot;text&quot;:&quot;Get Your App Online For US$29.99 Per Month&quot;,&quot;link&quot;:&quot;get-your-app-online-for-us2999-per-month&quot;}]\" data-visible=\"[true,true,true,true,true,true]\" data-delete-headers=\"[{&quot;label&quot;:&quot;Goals and Outcomes: How to Develop a REST API Dashboard&quot;,&quot;value&quot;:&quot;goals-and-outcomes-how-to-develop-a-rest-api-dashboard&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Get Your REST API Dashboard Online From US$29.99 Per Month&quot;,&quot;value&quot;:&quot;get-your-rest-api-dashboard-online-from-us2999-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;Resources and Downloads: Build a REST API Dashboard&quot;,&quot;value&quot;:&quot;resources-and-downloads-build-a-rest-api-dashboard&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Download the Finished Application&quot;,&quot;value&quot;:&quot;download-the-finished-application&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; Connection Wizard: Adding an API As a Data Source&quot;,&quot;value&quot;:&quot;step-3-data-connection-wizard-adding-an-api-as-a-data-source&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 4: Visual &gt; Form Wizard: Creating a Form on the API&quot;,&quot;value&quot;:&quot;step-4-visual-form-wizard-creating-a-form-on-the-api&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;First Checkpoint: Run Your Application&quot;,&quot;value&quot;:&quot;first-checkpoint-run-your-application&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 5: Visual &gt; Charts: Visualizing the Data From the API&quot;,&quot;value&quot;:&quot;step-5-visual-charts-visualizing-the-data-from-the-api&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 6: Visual &gt; Dashboard: Combining Multiple Charts In a Dashboard&quot;,&quot;value&quot;:&quot;step-6-visual-dashboard-combining-multiple-charts-in-a-dashboard&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 7: Visual &gt; Menus: Adding Menu Items to Your App&quot;,&quot;value&quot;:&quot;step-7-visual-menus-adding-menu-items-to-your-app&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;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;Get Your App Online For US$29.99 Per Month&quot;,&quot;value&quot;:&quot;get-your-app-online-for-us2999-per-month&quot;,&quot;isDelete&quot;:true}]\" data-smooth=\"true\" data-top-offset=\"\"><div class=\"eb-toc__list-wrap\"><ul class=\"eb-toc__list\"><li><a href=\"#goals-and-outcomes-how-to-develop-a-rest-api-dashboard\">Goals and Outcomes: How to Develop a REST API Dashboard<\/a><li><a href=\"#get-your-rest-api-dashboard-online-from-us2999-per-month\">Get Your REST API Dashboard Online From US$29.99 Per Month<\/a><li><a href=\"#resources-and-downloads-build-a-rest-api-dashboard\">Resources and Downloads: Build a REST API Dashboard<\/a><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-connection-wizard-adding-an-api-as-a-data-source\">Step 3: Data &gt; Connection Wizard: Adding an API As a Data Source<\/a><li><a href=\"#step-4-visual-form-wizard-creating-a-form-on-the-api\">Step 4: Visual &gt; Form Wizard: Creating a Form on the API<\/a><li><a href=\"#first-checkpoint-run-your-application\">First Checkpoint: Run Your Application<\/a><li><a href=\"#step-5-visual-charts-visualizing-the-data-from-the-api\">Step 5: Visual &gt; Charts: Visualizing the Data From the API<\/a><li><a href=\"#step-6-visual-dashboard-combining-multiple-charts-in-a-dashboard\">Step 6: Visual &gt; Dashboard: Combining Multiple Charts In a Dashboard<\/a><li><a href=\"#step-7-visual-menus-adding-menu-items-to-your-app\">Step 7: Visual &gt; Menus: Adding Menu Items to Your App<\/a><li><a href=\"#second-checkpoint-run-your-application\">Second Checkpoint: Run Your Application<\/a><li><a href=\"#finding-help-in-five\">Finding Help in Five<\/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 has-text-align-center\" id=\"get-your-app-online-for-us-29-99-per-month\">Get Your REST API Dashboard Online From US$29.99 Per Month<\/h2>\n\n\n\n<div class=\"wp-block-essential-blocks-row alignfull  root-eb-row-ws61cvl\"><div class=\"eb-parent-wrapper eb-parent-eb-row-ws61cvl \"><div class=\"eb-row-root-container eb-row-ws61cvl\" data-id=\"eb-row-ws61cvl\"><div class=\"eb-row-wrapper\"><div class=\"eb-row-inner\">\n<div class=\"wp-block-essential-blocks-column  root-eb-column-e18biyl\"><div class=\"eb-parent-wrapper eb-parent-eb-column-e18biyl \"><div class=\"eb-column-wrapper eb-column-e18biyl\"><div class=\"eb-column-inner\">\n<div class=\"wp-block-essential-blocks-infobox  root-eb-infobox-e53gio0\"><div class=\"eb-parent-wrapper eb-parent-eb-infobox-e53gio0 \"><div class=\"eb-infobox-e53gio0 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-g92ozld\"><div class=\"eb-parent-wrapper eb-parent-eb-column-g92ozld \"><div class=\"eb-column-wrapper eb-column-g92ozld\"><div class=\"eb-column-inner\">\n<div class=\"wp-block-essential-blocks-infobox  root-eb-infobox-rzqcs3y\"><div class=\"eb-parent-wrapper eb-parent-eb-infobox-rzqcs3y \"><div class=\"eb-infobox-rzqcs3y 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<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\"><\/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 to the web, sign up for one of our paid plans, starting from US$29.99 per month and per application. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Resources and Downloads: Build a REST API Dashboard<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Download the Finished Application<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Download the finished application as a Five Definition File (FDF) and <a href=\"https:\/\/www.youtube.com\/watch?v=tq7ULfWFfu0\" rel=\"nofollow noopener\" target=\"_blank\">import it into Five<\/a>. Once imported, run the application by clicking the &#8220;Deploy to Development&#8221; button, located in the top-right corner of Five.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a id=\"wp-block-file--media-85dee8d3-0eb1-44af-88e5-289338a70c71\" href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/RESTAPIDashboard.fdf\">RESTAPIDashboard<\/a><a href=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/RESTAPIDashboard.fdf\" class=\"wp-block-file__button wp-element-button\" aria-describedby=\"wp-block-file--media-85dee8d3-0eb1-44af-88e5-289338a70c71\" download>Download<\/a><\/div>\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-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 is creating a cloud-hosted instance, including a database server and unique URL, for your app.<\/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. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">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<h2 class=\"wp-block-heading\">Step 3: Data &gt; Connection Wizard: Adding an API As a Data Source<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><strong><em>Note: The &#8216;Connection Wizard&#8217; menu is not available in the basic version. <a href=\"https:\/\/preview-php85.dzine.org\/five\/upgrade-payment\/\" target=\"_blank\" rel=\"noreferrer noopener\">Upgrade your Five account here.<\/a><\/em><\/strong><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We will now use Five&#8217;s <strong>Connection Wizard <\/strong>to connect Five to an external API. Once the API is connected to Five, it can be used as a data source inside of Five.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3.1. Click on <strong>Data &gt; Connection Wizard<\/strong>.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"190\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-65-1024x190.png\" alt=\"\" class=\"wp-image-2495\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-65-1024x190.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-65-300x56.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-65-768x143.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-65-1536x285.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-65.png 1600w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 3.1: The Connection 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\">3.2. Next, click on <strong>Read List Mapping<\/strong> inside the <strong>Connection Wizard.<\/strong><br>3.3. We will use the DummyJSON API available here: <a href=\"https:\/\/dummyjson.com\/\" rel=\"nofollow noopener\" target=\"_blank\">https:\/\/dummyjson.com\/<\/a><br>3.4. Inside <strong>Read List Mapping, <\/strong>paste the URL for the get all products request: <code>https:\/\/dummyjson.com\/products<\/code><br>3.5. Click on <strong>Send.<\/strong> Five now shows you the API&#8217;s response: a list of products in JSON format.<\/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-66-1024x651.png\" alt=\"\" class=\"wp-image-2496\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-66-1024x651.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-66-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-66-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-66-1536x976.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-66.png 1770w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 3.2: Once the API URL has been filled in, click on Send to get a response<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">3.6. Click on <strong>Field Mapping<\/strong> to understand how Five treats the API response: Five maps the fields from the API response into fields, and tries to identify the primary key of the data. <br>3.7. Inside the <strong>Field Mapping,<\/strong> change the <strong>Default Display Type<\/strong> of the <strong>&#8220;products&#8221;[].&#8221;description&#8221;<\/strong> field to <strong>_Memo<\/strong>.<br>3.8. Make sure that the <strong>id <\/strong>field is selected as the <strong>Primary Key.<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"646\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Connection-Wizard-Field-Mapping-1024x646.png\" alt=\"\" class=\"wp-image-2497\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Connection-Wizard-Field-Mapping-1024x646.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Connection-Wizard-Field-Mapping-300x189.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Connection-Wizard-Field-Mapping-768x485.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Connection-Wizard-Field-Mapping-1536x969.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Connection-Wizard-Field-Mapping-2048x1292.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 3.3: Field Mapping Inside the Connection 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\">3.9. Next, click on <strong>Read Single Mapping.<\/strong><br>3.10. Inside <strong>Read Single Mapping, <\/strong>paste the URL for the get single product request: <code>https:\/\/dummyjson.com\/products<\/code>\/:id <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3.10.1 &#8211; In the PATH VARIABLES, add 1 to the field Value, this will make the &#8220;:id&#8221; in the URL to be replaced by the value 1.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3.10.2 &#8211; Click on the Send button.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">3.11. Click on <strong>General<\/strong>.<br>3.12. In the <strong>WebService <\/strong>dropdown, select <strong>New.<\/strong><br>3.13. Fill in the required fields. Write <strong>DummyJSON<\/strong> into the <strong>WebService ID<\/strong> field, and <strong>ProductAPI<\/strong> into the <strong>Name<\/strong> field.<br>3.14. Here&#8217;s what your API connection should look like. 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-67-1024x649.png\" alt=\"\" class=\"wp-image-2498\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-67-1024x649.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-67-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-67-768x487.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-67-1536x974.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-67.png 1774w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 3.4: The General Settings of the API Connection<\/em><\/figcaption><\/figure>\n<\/div>\n\n\n<p class=\"wp-block-paragraph\">To confirm that your API has been set up as a data source in Five correctly, click on <strong>Data <\/strong>in the top navigation, and then on <strong>Connections. <\/strong>Your API connection should now appear in the list of connections.<\/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 4: Visual &gt; Form Wizard: Creating a Form on the API<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">4.1. Go to <strong>Visual <\/strong>and select the <strong>Form Wizard,<\/strong> as shown in Image<strong> 4.1<\/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 4.1: Five&#8217;s Form Wizard is used to create forms in end-user applications<\/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\">4.2. Select <strong>ProductsAPI <\/strong>as the <strong>Main Data Source<\/strong>.<br>4.3. Write <strong>Product Form <\/strong>in the <strong>Caption <\/strong>field.<br>4.4. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save the form.<\/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=\"second-checkpoint-run-your-application\">First Checkpoint: Run Your Application<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s time to run your application again. 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. On the left, you should now see a new menu item called <strong>Product Form<\/strong> (your app will have different colors, because we haven&#8217;t themed it yet). <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"650\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-5-1024x650.png\" alt=\"\" class=\"wp-image-2598\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-5-1024x650.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-5-300x190.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-5-768x487.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-5-1536x975.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-5.png 1773w\" 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\">By clicking on <strong>Product Form<\/strong>, users can see all of the API&#8217;s data in a form created by Five. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Currently, the API returns a total of 30 rows of data. When you click on any of the products sent by the API, you can see its details. Because the API doesn&#8217;t let us update or delete products, the forms is read-only. If we had an API endpoint for each HTML method (GET, PATCH\/PUT, POST, DELETE), our form could be configured with full create, read, update, and delete permissions.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<p class=\"wp-block-paragraph\">Next up, we want to build a feature that extracts product data from the API and stores the data in the <strong>Product <\/strong>database table.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 5: Visual &gt; Charts: Visualizing the Data From the API<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">We will now add two charts to our application: a bar chart and a line chart that visualize data received from the API.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">5.1. Click on <strong>Visual &gt; Chart Wizard.<\/strong><\/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\/Five.Co-Excel-to-Web-App-Chart-Wizard-1024x651.png\" alt=\"Five.Co - Chart Wizard\" class=\"wp-image-2363\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Chart-Wizard-1024x651.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Chart-Wizard-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Chart-Wizard-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Chart-Wizard-1536x977.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/Five.Co-Excel-to-Web-App-Chart-Wizard-2048x1303.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 5.1: Five&#8217;s Chart Wizard can be used to create charts on an API<\/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.2. Fill in all required fields as follows:<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Chart Title: Stock On Hand<\/li>\n\n\n\n<li>Data Source: ProductAPI<\/li>\n\n\n\n<li>X Value Column: title<\/li>\n\n\n\n<li>Y Value Column: stock<\/li>\n\n\n\n<li>Chart Area ID: StockChart<\/li>\n\n\n\n<li>Chart Area Title: Stock Chart<\/li>\n\n\n\n<li>Chart Type: Bar<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">5.3. Click on the <strong>Tick <\/strong>\u2714\ufe0f icon in the top-right corner to save your Stock Chart.<br>5.4. Repeat the same steps for your Product Chart, which will be a line chart.<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li>Chart Title: Product Prices<\/li>\n\n\n\n<li>Data Source: ProductAPI<\/li>\n\n\n\n<li>X Value Column: title<\/li>\n\n\n\n<li>Y Value Column: prices<\/li>\n\n\n\n<li>Chart Area ID: Price Chart<\/li>\n\n\n\n<li>Chart Area Title: Price Chart<\/li>\n\n\n\n<li>Chart Type: Line<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\">5.5 . Click on the <strong>Tick <\/strong>\u2714\ufe0f icon in the top-right corner to save your Price Chart.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">You are done with your charts. Now let&#8217;s combine them into a dashboard.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Step 6: Visual &gt; Dashboard: Combining Multiple Charts In a Dashboard<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">6.1. Click on <strong>Visual &gt; Dashboard<\/strong>s.<br>6.2. Click on the yellow <strong>Plus<\/strong> \u2795 icon to add a new dashboard.<br>6.3. Fill in the following fields:<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table><tbody><tr><td><strong>Title<\/strong><\/td><td>API Dashboard<\/td><\/tr><tr><td><strong>Columns<\/strong><\/td><td>2<\/td><\/tr><tr><td><strong>Rows<\/strong><\/td><td>2<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"has-text-align-left wp-block-paragraph\">This creates a 2&#215;2 grid for us to position our charts in our dashboard.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">6.4. Click on <strong>Actions<\/strong> <\/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\/03\/Five.Co-Dashboard-API-Dashboard-1024x651.png\" alt=\"\" class=\"wp-image-2600\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Dashboard-API-Dashboard-1024x651.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Dashboard-API-Dashboard-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Dashboard-API-Dashboard-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Dashboard-API-Dashboard-1536x976.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Dashboard-API-Dashboard-2048x1302.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 6.1: Creating a Dashboard 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\">6.5. In <strong>Actions, <\/strong>click on the <strong>Plus \u2795<\/strong>icon to add new actions to our dashboard.<br>6.6. Select <strong>Page Position A1<\/strong> and choose <strong>StockChart (Chart) <\/strong>as an <strong>Action.<\/strong> Click on the 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\/03\/Five.Co-Dashboard-Adding-Actions-1024x651.png\" alt=\"Five.Co - Dashboard - Adding Actions\" class=\"wp-image-2601\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Dashboard-Adding-Actions-1024x651.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Dashboard-Adding-Actions-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Dashboard-Adding-Actions-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Dashboard-Adding-Actions-1536x976.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-Dashboard-Adding-Actions-2048x1301.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 6.2: Adding Actions to a Dashboard<\/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.7. Repeat step 6.6 for <strong>PriceChart<\/strong> by selecting <strong>Page Position B1<\/strong> and <strong>PriceChart (Chart) <\/strong>as the <strong>Action.<\/strong> Last, put <strong>ProductAPI (Form) <\/strong>into <strong>Page Position A2.<\/strong> Here&#8217;s what your <strong>Actions <\/strong>should look like for your dashboard:<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"315\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-6-1024x315.png\" alt=\"\" class=\"wp-image-2602\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-6-1024x315.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-6-300x92.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-6-768x236.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-6-1536x472.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-6.png 2000w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 6.3: Configure your dashboard actions as shown in the image<\/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. Last, save your dashboard by clicking the <strong>Tick \u2714\ufe0f <\/strong>icon.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">We have now successfully created a dashboard by utilizing Five&#8217;s grid layout and populating the grid with actions. Let&#8217;s move on and add the dashboard to our application.<\/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-11-visual-menus-adding-menu-items-to-your-app\">Step 7: Visual &gt; Menus: Adding Menu Items to Your App<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">7.1. Go to<strong> Visual &gt; Menus<\/strong>.<br>7.2. Click on the yellow <strong>Plus <\/strong>icon<strong>.<\/strong><br>7.3. Type <strong>Dashboard<\/strong> into Caption.<br>7.4. Type <strong>2 <\/strong>into <strong>Menu Order.<\/strong><br>7.5. In the <strong>Action<\/strong> drop-down select <strong>API Dashboard (Dashboard)<\/strong> as the action.<br>7.6. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your new menu item.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Second Checkpoint: Run Your Application<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">It&#8217;s time to run the application again. Here&#8217;s what it should look like (as before, your app will have different colors, because it doesn&#8217;t have a theme). <\/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\/03\/image-7-1024x651.png\" alt=\"\" class=\"wp-image-2603\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-7-1024x651.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-7-300x191.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-7-768x488.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-7-1536x976.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/image-7.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\">Let&#8217;s check out what we have developed:<\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>We have a responsive web app that visualizes data from our REST API. The REST API serves as a data source for our end-user GUI.<\/li>\n\n\n\n<li>We have a Product Form, which can be used to see the details of each product that the REST API sends to us. We can&#8217;t update these products, because the API doesn&#8217;t give us permissions, but this could easily be changed using Five&#8217;s Connection Wizard.<\/li>\n\n\n\n<li>We could extend this application by adding user logins, creating a theme, a PDF report, email notifications, or workflows. Five lets us write SQL, JavaScript and TypeScript, making it an extremely flexible coding environment.<\/li>\n\n\n\n<li>We could even extract data from the API and push it into a purpose-built MySQL database. It&#8217;s very easy and fast to create a database in Five is. <br>By storing data from the API in a database, it would enable us to query data from the API in SQL. <a href=\"https:\/\/preview-php85.dzine.org\/five\/code-along\/code-along-rest-api-gui\/\" data-type=\"post\" data-id=\"2492\">Learn how to do this in our step-by-step guide here<\/a>, where we add a button to each product page that pushes data into a database, as shown here:<\/li>\n<\/ol>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"659\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-70-1024x659.png\" alt=\"\" class=\"wp-image-2506\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-70-1024x659.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-70-300x193.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-70-768x495.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-70-1536x989.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/02\/image-70.png 1772w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>By adding a <strong>Push Into DB <\/strong>button we can extract data from the API and push it into a custom SQL database<\/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=\"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<h2 class=\"wp-block-heading\" id=\"get-your-app-online-for-us-29-99-per-month-1\">Get Your App Online For US$29.99 Per Month<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Five lets you develop and deploy applications from right inside your browser. <a href=\"https:\/\/preview-php85.dzine.org\/five\/get-started\/\">Get started for free<\/a> and develop your first app today. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">To deploy your application, sign up for one of our paid plans, starting from US$29.99 per month and application. <\/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\/\">Subscribe Now<\/a><\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>Hi and welcome to our step-by-step guide on building your first web app with Five. Follow the steps below to build a responsive web app with a dashboard that visualizes data coming from a REST API in Five. Goals and Outcomes: How to Develop a REST API Dashboard By the end of this step-by-step guide, [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":2604,"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-2597","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\/03\/Five.Co-How-to-build-a-REST-API-Dashboard.png",1280,720,false],"thumbnail":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-How-to-build-a-REST-API-Dashboard-150x150.png",150,150,true],"medium":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-How-to-build-a-REST-API-Dashboard-300x169.png",300,169,true],"medium_large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-How-to-build-a-REST-API-Dashboard-768x432.png",768,432,true],"large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-How-to-build-a-REST-API-Dashboard-1024x576.png",1024,576,true],"1536x1536":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-How-to-build-a-REST-API-Dashboard.png",1280,720,false],"2048x2048":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/03\/Five.Co-How-to-build-a-REST-API-Dashboard.png",1280,720,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. Follow the steps below to build a responsive web app with a dashboard that visualizes data coming from a REST API in Five. Goals and Outcomes: How to Develop a REST API Dashboard By the end of this step-by-step guide,&hellip;","_links":{"self":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2597","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=2597"}],"version-history":[{"count":1,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2597\/revisions"}],"predecessor-version":[{"id":17493,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/2597\/revisions\/17493"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media\/2604"}],"wp:attachment":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media?parent=2597"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/categories?post=2597"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/tags?post=2597"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}