Code-Along: How to Develop a REST API Dashboard
Tags: restapi, gui, dashboard, tutorial
Published: 2024-03-14 22:52:29

<!-- wp:paragraph -->
<p>Hi and welcome to our step-by-step guide on building your first web app with Five. </p>
<!-- /wp:paragraph -->

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

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

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

<!-- wp:paragraph -->
<p>Before we continue, make sure to <a href="https://five.co/free-trial">sign up for free access to the Five development environment</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:tadv/classic-paragraph -->
<div style="background-color: #001524;"><hr style="height: 5px;" />
<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>
<p style="text-align: center;"><a href="https://five.co/free-trial" 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>
<hr style="height: 5px;" /></div>
<!-- /wp:tadv/classic-paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:essential-blocks/table-of-contents {"blockId":"eb-toc-lzlmj1v","blockMeta":{"desktop":" .eb-toc-lzlmj1v.eb-toc-container{ max-width:610px; transition:all 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s ; }  .eb-toc-lzlmj1v.eb-toc-container .eb-toc-title{ text-align: center; cursor:default; color: rgba(255,255,255,1); background-color:rgba(69,136,216,1); padding-left: 10px; font-size: 22px; } .eb-toc-lzlmj1v.eb-toc-container .eb-toc-wrapper{ background-color:rgba(241,235,218,1); text-align: left; }  .eb-toc-lzlmj1v.eb-toc-container .eb-toc-wrapper li { color:rgba(0,21,36,1); font-size: 20px; } .eb-toc-lzlmj1v.eb-toc-container .eb-toc-wrapper li:hover{ color:undefined; } .eb-toc-lzlmj1v.eb-toc-container .eb-toc-wrapper li a{ color:inherit; } .eb-toc-lzlmj1v.eb-toc-container .eb-toc-wrapper li a, .eb-toc-lzlmj1v.eb-toc-container .eb-toc-wrapper li a:focus{ text-decoration:none; background:none; } .eb-toc-lzlmj1v.eb-toc-container .eb-toc-wrapper li { padding-top: 4px; } .eb-toc-lzlmj1v.eb-toc-container .eb-toc-wrapper .eb-toc__list li:not(:last-child) { padding-bottom: 4px; } ","tab":"      ","mobile":"      "},"headers":[{"level":3,"content":"Goals and Outcomes","text":"Goals and Outcomes","link":"goals-and-outcomes"},{"level":2,"content":"Get Your App Online From US$29.99 Per Month","text":"Get Your App Online From US$29.99 Per Month","link":"get-your-app-online-from-us2999-per-month"},{"level":2,"content":"Host Your App Online","text":"Host Your App Online","link":"host-your-app-online"},{"level":2,"content":"Free Training","text":"Free Training","link":"free-training"},{"level":2,"content":"Resources and Downloads","text":"Resources and Downloads","link":"resources-and-downloads"},{"level":3,"content":"Preview The Application Online","text":"Preview The Application Online","link":"preview-the-application-online"},{"level":3,"content":"Download the Finished Application","text":"Download the Finished Application","link":"download-the-finished-application"},{"level":2,"content":"Step 1: Creating a New Application","text":"Step 1: Creating a New Application","link":"step-1-creating-a-new-application"},{"level":2,"content":"Step 2: Running Your Application ▶️","text":"Step 2: Running Your Application ▶️","link":"step-2-running-your-application-▶️"},{"level":2,"content":"Step 3: Data \u003e Connection Wizard: Adding an API As a Data Source","text":"Step 3: Data \u003e Connection Wizard: Adding an API As a Data Source","link":"step-3-data-connection-wizard-adding-an-api-as-a-data-source"},{"level":2,"content":"Step 4: Visual \u003e Form Wizard: Creating a Form on the API","text":"Step 4: Visual \u003e Form Wizard: Creating a Form on the API","link":"step-4-visual-form-wizard-creating-a-form-on-the-api"},{"level":2,"content":"First Checkpoint: Run Your Application","text":"First Checkpoint: Run Your Application","link":"first-checkpoint-run-your-application"},{"level":2,"content":"Step 5: Visual \u003e Charts: Visualizing the Data From the API","text":"Step 5: Visual \u003e Charts: Visualizing the Data From the API","link":"step-5-visual-charts-visualizing-the-data-from-the-api"},{"level":2,"content":"Step 6: Visual \u003e Dashboard: Combining Multiple Charts In a Dashboard","text":"Step 6: Visual \u003e Dashboard: Combining Multiple Charts In a Dashboard","link":"step-6-visual-dashboard-combining-multiple-charts-in-a-dashboard"},{"level":2,"content":"Step 7: Visual \u003e Menus: Adding Menu Items to Your App","text":"Step 7: Visual \u003e Menus: Adding Menu Items to Your App","link":"step-7-visual-menus-adding-menu-items-to-your-app"},{"level":2,"content":"Second Checkpoint: Run Your Application","text":"Second Checkpoint: Run Your Application","link":"second-checkpoint-run-your-application"},{"level":2,"content":"Finding Help in Five","text":"Finding Help in Five","link":"finding-help-in-five"},{"level":3,"content":"Five's In-App Help","text":"Five's In-App Help","link":"fives-in-app-help"},{"level":2,"content":"Get Your App Online For US$29.99 Per Month","text":"Get Your App Online For US$29.99 Per Month","link":"get-your-app-online-for-us2999-per-month"}],"deleteHeaderList":[{"label":"Goals and Outcomes","value":"goals-and-outcomes","isDelete":true},{"label":"Get Your App Online From US$29.99 Per Month","value":"get-your-app-online-from-us2999-per-month","isDelete":true},{"label":"Host Your App Online","value":"host-your-app-online","isDelete":true},{"label":"Free Training","value":"free-training","isDelete":true},{"label":"Resources and Downloads","value":"resources-and-downloads","isDelete":false},{"label":"Preview The Application Online","value":"preview-the-application-online","isDelete":true},{"label":"Download the Finished Application","value":"download-the-finished-application","isDelete":true},{"label":"Step 1: Creating a New Application","value":"step-1-creating-a-new-application","isDelete":false},{"label":"Step 2: Running Your Application ▶️","value":"step-2-running-your-application-▶️","isDelete":false},{"label":"Step 3: Data \u003e Connection Wizard: Adding an API As a Data Source","value":"step-3-data-connection-wizard-adding-an-api-as-a-data-source","isDelete":false},{"label":"Step 4: Visual \u003e Form Wizard: Creating a Form on the API","value":"step-4-visual-form-wizard-creating-a-form-on-the-api","isDelete":false},{"label":"First Checkpoint: Run Your Application","value":"first-checkpoint-run-your-application","isDelete":false},{"label":"Step 5: Visual \u003e Charts: Visualizing the Data From the API","value":"step-5-visual-charts-visualizing-the-data-from-the-api","isDelete":false},{"label":"Step 6: Visual \u003e Dashboard: Combining Multiple Charts In a Dashboard","value":"step-6-visual-dashboard-combining-multiple-charts-in-a-dashboard","isDelete":false},{"label":"Step 7: Visual \u003e Menus: Adding Menu Items to Your App","value":"step-7-visual-menus-adding-menu-items-to-your-app","isDelete":false},{"label":"Second Checkpoint: Run Your Application","value":"second-checkpoint-run-your-application","isDelete":false},{"label":"Finding Help in Five","value":"finding-help-in-five","isDelete":false},{"label":"Five's In-App Help","value":"fives-in-app-help","isDelete":true},{"label":"Get Your App Online For US$29.99 Per Month","value":"get-your-app-online-for-us2999-per-month","isDelete":true}],"isMigrated":true,"titleBg":"rgba(69,136,216,1)","titleColor":"rgba(255,255,255,1)","contentBg":"rgba(241,235,218,1)","contentColor":"rgba(0,21,36,1)","contentGap":8,"titleAlign":"center","commonStyles":{"desktop":" .wp-admin .eb-parent-eb-toc-lzlmj1v { display: block; opacity: 1; } .eb-parent-eb-toc-lzlmj1v { display: block; } ","tab":" .editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-lzlmj1v { display: block; opacity: 1; } .eb-parent-eb-toc-lzlmj1v { display: block; } ","mobile":" .editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-toc-lzlmj1v { display: block; opacity: 1; } .eb-parent-eb-toc-lzlmj1v { display: block; } "}} /-->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading {"textAlign":"center"} -->
<h2 class="wp-block-heading has-text-align-center" id="get-your-app-online-for-us-29-99-per-month">Get Your App Online From US$29.99 Per Month</h2>
<!-- /wp:heading -->

<!-- wp:essential-blocks/row {"blockId":"eb-row-ws61cvl","blockMeta":{"desktop":" .eb-row-ws61cvl.eb-row-root-container \u003e *{ position:relative; } .eb-row-ws61cvl.eb-row-root-container{ transition:all 0.5s, background 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s ; } .eb-row-ws61cvl.eb-row-root-container:before{ transition:all 0.5s, background 0.5s, opacity 0.5s, filter 0.5s; } .eb-row-ws61cvl.eb-row-root-container \u003e .eb-row-wrapper{ max-width:1170px; } .eb-row-ws61cvl.eb-row-root-container \u003e .eb-row-wrapper \u003e .eb-row-inner { gap:20px; flex-flow: row; }  .eb-row-ws61cvl.eb-row-root-container \u003e .eb-row-wrapper \u003e .eb-row-inner \u003e .eb-parent-wrapper \u003e * { } ","tab":"  .eb-row-ws61cvl.eb-row-root-container \u003e .eb-row-wrapper \u003e .eb-row-inner { gap: undefinedpx; flex-flow: row; flex-wrap: wrap !important; } .eb-row-ws61cvl.eb-row-root-container \u003e .eb-row-wrapper \u003e .eb-row-inner \u003e .eb-parent-wrapper{ gap: undefinedpx; } ","mobile":"  .eb-row-ws61cvl.eb-row-root-container \u003e .eb-row-wrapper \u003e .eb-row-inner { gap: 0px; flex-flow: row; flex-wrap: wrap !important; } .eb-row-ws61cvl.eb-row-root-container \u003e .eb-row-wrapper \u003e .eb-row-inner \u003e .eb-parent-wrapper{ gap: 0px; } "},"isLayoutSelected":true,"clGp_Range":20,"MOBclGp_Range":0,"clNum_Range":2,"colOrder_Option":"default","commonStyles":{"desktop":" .wp-admin .eb-parent-eb-row-ws61cvl { display: block; opacity: 1; } .eb-parent-eb-row-ws61cvl { display: block; } ","tab":" .editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-row-ws61cvl { display: block; opacity: 1; } .eb-parent-eb-row-ws61cvl { display: block; } ","mobile":" .editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-row-ws61cvl { display: block; opacity: 1; } .eb-parent-eb-row-ws61cvl { display: block; } "}} -->
<div class="wp-block-essential-blocks-row alignfull"><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"><!-- wp:essential-blocks/column {"blockId":"eb-column-e18biyl","blockMeta":{"desktop":" .eb-column-e18biyl.eb-column-wrapper \u003e .eb-column-inner \u003e *{ position:relative; } .eb-column-e18biyl.eb-column-wrapper \u003e .eb-column-inner:before{ transition: all .5s, background 0.5s, opacity 0.5s, filter 0.5s; } .eb-parent-eb-column-e18biyl{ width:65%; order: unset; transition: all .5s, background 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s ; }  ","tab":" .eb-parent-eb-column-e18biyl{ width: calc(50% - 10px); order: unset; }  ","mobile":" .eb-parent-eb-column-e18biyl{ width: calc(100% - 0px); order: unset; }  "},"cw_Range":65,"TABcw_Range":50,"MOBcw_Range":100,"commonStyles":{"desktop":" .wp-admin .eb-parent-eb-column-e18biyl { display: block; opacity: 1; } .eb-parent-eb-column-e18biyl { display: block; } ","tab":" .editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-column-e18biyl { display: block; opacity: 1; } .eb-parent-eb-column-e18biyl { display: block; } ","mobile":" .editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-column-e18biyl { display: block; opacity: 1; } .eb-parent-eb-column-e18biyl { display: block; } "}} -->
<div class="eb-parent-wrapper eb-parent-eb-column-e18biyl  wp-block-essential-blocks-column"><div class="eb-column-wrapper eb-column-e18biyl"><div class="eb-column-inner"><!-- wp:essential-blocks/infobox {"blockId":"eb-infobox-e53gio0","blockMeta":{"desktop":" .eb-infobox-wrapper.eb-infobox-e53gio0 { padding-top: 50px; padding-right: 30px; padding-left: 30px; padding-bottom: 50px; background-color: rgba(0,21,36,1); transition: background 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s ; }  .eb-infobox-wrapper.eb-infobox-e53gio0:before{ transition: background 0.5s, opacity 0.5s, filter 0.5s; }  .eb-infobox-wrapper.eb-infobox-e53gio0 .infobox-wrapper-inner { flex-direction: column; gap:20px; } .eb-infobox-wrapper.eb-infobox-e53gio0 .icon-img-wrapper { align-self: center; margin-top: 15px; margin-right: 15px; margin-left: 15px; margin-bottom: 15px; } .eb-infobox-wrapper.eb-infobox-e53gio0 .number-or-icon { padding: 20px; border-top-left-radius: 20px; border-bottom-right-radius: 20px; background-image: linear-gradient(45deg, rgba(69,136,216,1) 0% , rgba(69,136,216,1) 100%); } .eb-infobox-wrapper.eb-infobox-e53gio0 .number-or-icon \u003e span{ color: rgba(241,235,218,1); } .eb-infobox-wrapper.eb-infobox-e53gio0 .icon-img-wrapper .eb-infobox-icon-data-selector { font-size:50px; height:50px; width:50px; display:flex; justify-content:center; align-items:center; } .eb-infobox-wrapper.eb-infobox-e53gio0 .contents-wrapper { flex: 1; text-align: center; text-align: center; } .eb-infobox-wrapper.eb-infobox-e53gio0 .title { font-size: 26px; padding-top: 10px; padding-bottom: 10px; color: #fff; } .eb-infobox-wrapper.eb-infobox-e53gio0 .description { font-size: 20px; padding-top: 10px; padding-right: 10px; padding-left: 10px; padding-bottom: 30px; color: rgba(253,253,253,1); }  .eb-infobox-wrapper.eb-infobox-e53gio0 .contents-wrapper .infobox-btn{ font-family: \u0022Montserrat\u0022, sans-serif; font-size: 20px; font-weight: 600; padding-top: 12px; padding-right: 30px; padding-left: 30px; padding-bottom: 12px; background-color: rgba(248,185,43,1); position: relative; overflow: hidden; z-index:1; border-radius: 10px; border-width: 2px; border-color: rgba(248,185,43,1); border-style: solid; color: #30267A; transition: all 0.5s, background 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s ; }  .eb-infobox-wrapper.eb-infobox-e53gio0 .contents-wrapper .infobox-btn:before{ content: \u0022 \u0022; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; opacity: 0; transition: all 0.5s; } ","tab":"             ","mobile":"             "},"numIconColor":"rgba(241,235,218,1)","numIconBgGradient":"linear-gradient(45deg, rgba(69,136,216,1) 0% , rgba(69,136,216,1) 100%)","number":"01","buttonText":"Subscribe Now","btnEffect":"hvr-grow","infoboxLink":"https://five.co/order-payment/","linkNewTab":true,"title":"Host Your App Online","description":"Select one of our hosting packages.\u003cbr\u003eStarting from US$29.99 per app and month. \u003cbr\u003eUnlimited end-users.","descriptionColor":"rgba(253,253,253,1)","flexDirection":"column","mediaAlignSelf":"center","contentAlignment":"center","buttonTextFontFamily":"Montserrat","buttonTextFontSize":20,"buttonTextFontWeight":"600","mediaBgRadiusRight":"","mediaBgRadiusLeft":"","mediaBgMarginRight":"15","mediaBgMarginBottom":"15","mediaBgMarginLeft":"15","buttonPaddingTop":"12","buttonPaddingBottom":"12","contentPaddingRight":"10","contentPaddingBottom":"30","contentPaddingLeft":"10","wrapperPaddingBottom":"50","btbds_borderColor":"rgba(248,185,43,1)","btbds_borderStyle":"solid","btbds_Bdr_Top":"2","btbds_Bdr_Right":"2","btbds_Bdr_Bottom":"2","btbds_Bdr_Left":"2","wrp_backgroundType":"classic","wrp_backgroundColor":"rgba(0,21,36,1)","wrp_gradientColor":"linear-gradient(45deg, #7967ff 0% , #c277f2 100%)","btbg_backgroundColor":"rgba(248,185,43,1)","commonStyles":{"desktop":" .wp-admin .eb-parent-eb-infobox-e53gio0 { display: block; opacity: 1; } .eb-parent-eb-infobox-e53gio0 { display: block; } ","tab":" .editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-infobox-e53gio0 { display: block; opacity: 1; } .eb-parent-eb-infobox-e53gio0 { display: block; } ","mobile":" .editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-infobox-e53gio0 { display: block; opacity: 1; } .eb-parent-eb-infobox-e53gio0 { display: block; } "}} -->
<div class="wp-block-essential-blocks-infobox"><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"><span data-icon="fas fa-cloud-upload-alt" class="eb-infobox-icon-data-selector  fas fa-cloud-upload-alt"></span></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. <br>Unlimited end-users.</p><div class="eb-infobox-btn-wrapper"><a href="https://five.co/order-payment/" target="_blank" rel="noopener noreferrer" class="infobox-btn  hvr-grow">Subscribe Now</a></div></div></div></div></div></div>
</div></div></div>

<!-- wp:essential-blocks/column {"blockId":"eb-column-g92ozld","blockMeta":{"desktop":" .eb-column-g92ozld.eb-column-wrapper \u003e .eb-column-inner \u003e *{ position:relative; } .eb-column-g92ozld.eb-column-wrapper \u003e .eb-column-inner:before{ transition: all .5s, background 0.5s, opacity 0.5s, filter 0.5s; } .eb-parent-eb-column-g92ozld{ width:35%; order: unset; transition: all .5s, background 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s ; }  ","tab":" .eb-parent-eb-column-g92ozld{ width: calc(50% - 10px); order: unset; }  ","mobile":" .eb-parent-eb-column-g92ozld{ width: calc(100% - 0px); order: unset; }  "},"cw_Range":35,"TABcw_Range":50,"MOBcw_Range":100,"commonStyles":{"desktop":" .wp-admin .eb-parent-eb-column-g92ozld { display: block; opacity: 1; } .eb-parent-eb-column-g92ozld { display: block; } ","tab":" .editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-column-g92ozld { display: block; opacity: 1; } .eb-parent-eb-column-g92ozld { display: block; } ","mobile":" .editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-column-g92ozld { display: block; opacity: 1; } .eb-parent-eb-column-g92ozld { display: block; } "}} -->
<div class="eb-parent-wrapper eb-parent-eb-column-g92ozld  wp-block-essential-blocks-column"><div class="eb-column-wrapper eb-column-g92ozld"><div class="eb-column-inner"><!-- wp:essential-blocks/infobox {"blockId":"eb-infobox-rzqcs3y","blockMeta":{"desktop":" .eb-infobox-wrapper.eb-infobox-rzqcs3y { padding-top: 50px; padding-right: 30px; padding-left: 30px; padding-bottom: 50px; background-color: rgba(241,246,255,1); transition: background 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s ; }  .eb-infobox-wrapper.eb-infobox-rzqcs3y:before{ transition: background 0.5s, opacity 0.5s, filter 0.5s; }  .eb-infobox-wrapper.eb-infobox-rzqcs3y .infobox-wrapper-inner { flex-direction: column; gap:20px; } .eb-infobox-wrapper.eb-infobox-rzqcs3y .icon-img-wrapper { align-self: center; margin: 15px; } .eb-infobox-wrapper.eb-infobox-rzqcs3y .number-or-icon { padding: 20px; border-radius: 20px; background-image: linear-gradient(45deg, rgba(69,136,216,1) 0% , rgba(69,136,216,1) 100%); } .eb-infobox-wrapper.eb-infobox-rzqcs3y .number-or-icon \u003e span{ color: rgba(241,235,218,1); } .eb-infobox-wrapper.eb-infobox-rzqcs3y .icon-img-wrapper .eb-infobox-icon-data-selector { font-size:50px; height:50px; width:50px; display:flex; justify-content:center; align-items:center; } .eb-infobox-wrapper.eb-infobox-rzqcs3y .contents-wrapper { flex: 1; text-align: center; text-align: center; } .eb-infobox-wrapper.eb-infobox-rzqcs3y .title { font-size: 26px; padding-top: 10px; padding-bottom: 10px; color: rgba(0,21,36,1); } .eb-infobox-wrapper.eb-infobox-rzqcs3y .description { font-family: \u0022Default\u0022, ; font-size: 20px; padding-top: 10px; padding-right: 10px; padding-left: 10px; padding-bottom: 30px; color: rgba(0,21,36,1); }  .eb-infobox-wrapper.eb-infobox-rzqcs3y .contents-wrapper .infobox-btn{ font-family: \u0022Montserrat\u0022, sans-serif; font-size: 20px; font-weight: 600; padding-top: 12px; padding-right: 30px; padding-left: 30px; padding-bottom: 12px; background-color: rgba(226,217,255,0); position: relative; overflow: hidden; z-index:1; border-radius: 10px; border-width: 2px; border-color: rgba(0,21,36,1); border-style: solid; color: rgba(0,21,36,1); transition: all 0.5s, background 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s ; }  .eb-infobox-wrapper.eb-infobox-rzqcs3y .contents-wrapper .infobox-btn:before{ content: \u0022 \u0022; position: absolute; left: 0; top: 0; right: 0; bottom: 0; z-index: -1; opacity: 0; transition: all 0.5s; } ","tab":"             ","mobile":"             "},"numIconColor":"rgba(241,235,218,1)","numIconBgGradient":"linear-gradient(45deg, rgba(69,136,216,1) 0% , rgba(69,136,216,1) 100%)","number":"","buttonText":"Sign Up Now","buttonTextColor":"rgba(0,21,36,1)","btnEffect":"hvr-grow","infoboxLink":"https://five.co/blog/free-training/","title":"Free Training","titleColor":"rgba(0,21,36,1)","description":"Sign Up for a FREE product training session","descriptionColor":"rgba(0,21,36,1)","flexDirection":"column","mediaAlignSelf":"center","contentAlignment":"center","buttonTextFontFamily":"Montserrat","buttonTextFontSize":20,"buttonTextFontWeight":"600","contentFontFamily":"Default","mediaBgRadiusisLinked":true,"mediaBgRadiusRight":"20","mediaBgRadiusLeft":"20","mediaBgMarginisLinked":true,"mediaBgMarginRight":"15","mediaBgMarginBottom":"15","mediaBgMarginLeft":"15","buttonPaddingTop":"12","buttonPaddingBottom":"12","titlePaddingRight":"","titlePaddingLeft":"","subTitlePaddingisLinked":true,"contentPaddingRight":"10","contentPaddingBottom":"30","contentPaddingLeft":"10","wrapperPaddingBottom":"50","btbds_borderColor":"rgba(0,21,36,1)","btbds_borderStyle":"solid","btbds_Bdr_Top":"2","btbds_Bdr_Right":"2","btbds_Bdr_Bottom":"2","btbds_Bdr_Left":"2","wrp_backgroundType":"classic","wrp_backgroundColor":"rgba(241,246,255,1)","wrp_gradientColor":"linear-gradient(45deg, #7967ff 0% , #c277f2 100%)","btbg_backgroundColor":"rgba(226,217,255,0)","commonStyles":{"desktop":" .wp-admin .eb-parent-eb-infobox-rzqcs3y { display: block; opacity: 1; } .eb-parent-eb-infobox-rzqcs3y { display: block; } ","tab":" .editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-infobox-rzqcs3y { display: block; opacity: 1; } .eb-parent-eb-infobox-rzqcs3y { display: block; } ","mobile":" .editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-infobox-rzqcs3y { display: block; opacity: 1; } .eb-parent-eb-infobox-rzqcs3y { display: block; } "}} -->
<div class="wp-block-essential-blocks-infobox"><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 data-icon="far fa-calendar-minus" class="eb-infobox-icon-data-selector  far fa-calendar-minus"></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://five.co/blog/free-training/" target="_self" rel="noopener noreferrer" class="infobox-btn  hvr-grow">Sign Up Now</a></div></div></div></div></div></div>
</div></div></div>
</div></div></div></div></div>
<!-- /wp:essential-blocks/row -->

<!-- wp:essential-blocks/row {"blockId":"eb-row-biaw09k","blockMeta":{"desktop":" .eb-row-biaw09k.eb-row-root-container \u003e *{ position:relative; } .eb-row-biaw09k.eb-row-root-container{ transition:all 0.5s, background 0.5s, border 0.5s, border-radius 0.5s, box-shadow 0.5s ; } .eb-row-biaw09k.eb-row-root-container:before{ transition:all 0.5s, background 0.5s, opacity 0.5s, filter 0.5s; } .eb-row-biaw09k.eb-row-root-container \u003e .eb-row-wrapper{ max-width:1170px; } .eb-row-biaw09k.eb-row-root-container \u003e .eb-row-wrapper \u003e .eb-row-inner { gap:20px; flex-flow: row; }  .eb-row-biaw09k.eb-row-root-container \u003e .eb-row-wrapper \u003e .eb-row-inner \u003e .eb-parent-wrapper \u003e * { } ","tab":"  .eb-row-biaw09k.eb-row-root-container \u003e .eb-row-wrapper \u003e .eb-row-inner { gap: undefinedpx; flex-flow: row; flex-wrap: wrap !important; } .eb-row-biaw09k.eb-row-root-container \u003e .eb-row-wrapper \u003e .eb-row-inner \u003e .eb-parent-wrapper{ gap: undefinedpx; } ","mobile":"  .eb-row-biaw09k.eb-row-root-container \u003e .eb-row-wrapper \u003e .eb-row-inner { gap: 0px; flex-flow: row; flex-wrap: wrap !important; } .eb-row-biaw09k.eb-row-root-container \u003e .eb-row-wrapper \u003e .eb-row-inner \u003e .eb-parent-wrapper{ gap: 0px; } "},"isLayoutSelected":true,"clGp_Range":20,"MOBclGp_Range":0,"clNum_Range":0,"colOrder_Option":"default","commonStyles":{"desktop":" .wp-admin .eb-parent-eb-row-biaw09k { display: block; opacity: 1; } .eb-parent-eb-row-biaw09k { display: block; } ","tab":" .editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-row-biaw09k { display: block; opacity: 1; } .eb-parent-eb-row-biaw09k { display: block; } ","mobile":" .editor-styles-wrapper.wp-embed-responsive .eb-parent-eb-row-biaw09k { display: block; opacity: 1; } .eb-parent-eb-row-biaw09k { display: block; } "}} -->
<div class="wp-block-essential-blocks-row alignfull"><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>
<!-- /wp:essential-blocks/row -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>To deploy your application to the web, sign up for one of our paid plans, starting from US$29.99 per month and application. Your plan includes unlimited end-users and provides you with a custom URL to access the application online.</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Resources and Downloads</h2>
<!-- /wp:heading -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Preview The Application Online</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To preview the application we are developing online, <a href="https://default-tryfive.5au.co/">click here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading">Download the Finished Application</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Download the finished application as a Five Definition File (FDF) and <a href="https://www.youtube.com/watch?v=tq7ULfWFfu0">import it into Five</a>. Once imported, run the application by clicking the "Deploy to Development" button, located in the top-right corner of Five.</p>
<!-- /wp:paragraph -->

<!-- wp:file {"id":2609,"href":"https://five.co/wp-content/uploads/2024/03/RESTAPIDashboard.fdf"} -->
<div class="wp-block-file"><a id="wp-block-file--media-85dee8d3-0eb1-44af-88e5-289338a70c71" href="https://five.co/wp-content/uploads/2024/03/RESTAPIDashboard.fdf">RESTAPIDashboard</a><a href="https://five.co/wp-content/uploads/2024/03/RESTAPIDashboard.fdf" class="wp-block-file__button wp-element-button" download aria-describedby="wp-block-file--media-85dee8d3-0eb1-44af-88e5-289338a70c71">Download</a></div>
<!-- /wp:file -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="step-1-creating-a-new-application">Step 1: Creating a New Application</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>1.1. To create a new application in Five, click on <strong>Applications</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":2379,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2024/02/image-7-1024x694.png" alt="" class="wp-image-2379"/><figcaption class="wp-element-caption"><em>Image 1.1: Creating a New Application</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>1.2. Next, click on the yellow <strong>Plus </strong>icon.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":2439,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2024/02/Five.Co-Yellow-Plus-Button-Create-a-New-Application-1024x649.png" alt="" class="wp-image-2439"/><figcaption class="wp-element-caption"><em>Image 1.2: Creating a New Application in Five</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>1.3. Type <strong>My First App</strong> in the <strong>Title </strong>field.<br>1.4. Click on the <strong>Tick ✔️ </strong>icon to save.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":2386,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2024/02/image-12-1024x619.png" alt="" class="wp-image-2386"/><figcaption class="wp-element-caption"><em>Image 1.3: Saving a New Application</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="step-2-running-your-application-▶️">Step 2: Running Your Application ▶️</h2>
<!-- /wp:heading -->

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

<!-- wp:image {"align":"center","id":2561,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2024/03/image-4-1024x259.png" alt="" class="wp-image-2561"/><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>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Once your application is deployed, the <strong>Deploy to Development </strong>button turns into a <strong>Run</strong> ▶️ button in the top right corner. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Every time you click on <strong>Run</strong> ▶️, a new window opens up, showing the current state of your application.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":2512,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-full"><img src="https://five.co/wp-content/uploads/2024/02/Five.Co-Run-Your-Application.png" alt="" class="wp-image-2512"/><figcaption class="wp-element-caption"><em>Image 2.2: Running Your Application</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Step 3: Data &gt; Connection Wizard: Adding an API As a Data Source</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We will now use Five'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>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>3.1. Click on <strong>Data &gt; Connection Wizard</strong>.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":2495,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2024/02/image-65-1024x190.png" alt="" class="wp-image-2495"/><figcaption class="wp-element-caption"><em>Image 3.1: The Connection Wizard</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>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/">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's response: a list of products in JSON format.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":2496,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2024/02/image-66-1024x651.png" alt="" class="wp-image-2496"/><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>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>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>"products"[]."description"</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>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":2497,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2024/02/Five.Co-Connection-Wizard-Field-Mapping-1024x646.png" alt="" class="wp-image-2497"/><figcaption class="wp-element-caption"><em>Image 3.3: Field Mapping Inside the Connection Wizard</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>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<br>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's what your API connection should look like. Click on the <strong>Tick ✔️ </strong>icon to save.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":2498,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2024/02/image-67-1024x649.png" alt="" class="wp-image-2498"/><figcaption class="wp-element-caption"><em>Image 3.4: The General Settings of the API Connection</em></figcaption></figure>
<!-- /wp:image -->

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

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Step 4: Visual &gt; Form Wizard: Creating a Form on the API</h2>
<!-- /wp:heading -->

<!-- wp:image {"align":"center","id":2091,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2023/08/Five.Co-Form-Wizard-1024x650.png" alt="Five.Co - Form Wizard" class="wp-image-2091"/><figcaption class="wp-element-caption"><em>Image 4.1: Five's Form Wizard is used to create forms in end-user applications</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>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 ✔️ </strong>icon to save the form.</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="second-checkpoint-run-your-application">First Checkpoint: Run Your Application</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>It'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 ▶️ </strong>icon in the top right corner.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here'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't themed it yet). </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2598,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2024/03/image-5-1024x650.png" alt="" class="wp-image-2598"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>By clicking on <strong>Product Form</strong>, users can see all of the API's data in a form created by Five. </p>
<!-- /wp:paragraph -->

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

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

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

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Step 5: Visual &gt; Charts: Visualizing the Data From the API</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We will now add two charts to our application: a bar chart and a line chart that visualize data received from the API.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>5.1. Click on <strong>Visual &gt; Chart Wizard.</strong></p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":2363,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2024/02/Five.Co-Excel-to-Web-App-Chart-Wizard-1024x651.png" alt="Five.Co - Chart Wizard" class="wp-image-2363"/><figcaption class="wp-element-caption"><em>Image 5.1: Five's Chart Wizard can be used to create charts on an API</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>5.2. Fill in all required fields as follows:</p>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Chart Title: Stock On Hand</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Data Source: ProductAPI</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>X Value Column: title</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Y Value Column: stock</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Chart Area ID: StockChart</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Chart Area Title: Stock Chart</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Chart Type: Bar</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>5.3. Click on the <strong>Tick </strong>✔️ 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>
<!-- /wp:paragraph -->

<!-- wp:list -->
<ul><!-- wp:list-item -->
<li>Chart Title: Product Prices</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Data Source: ProductAPI</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>X Value Column: title</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Y Value Column: prices</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Chart Area ID: Price Chart</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Chart Area Title: Price Chart</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Chart Type: Line</li>
<!-- /wp:list-item --></ul>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>5.5 . Click on the <strong>Tick </strong>✔️ icon in the top-right corner to save your Price Chart.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>You are done with your charts. Now let's combine them into a dashboard.</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Step 6: Visual &gt; Dashboard: Combining Multiple Charts In a Dashboard</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>6.1. Click on <strong>Visual &gt; Dashboard</strong>s.<br>6.2. Click on the yellow <strong>Plus</strong> ➕ icon to add a new dashboard.<br>6.3. Fill in the following fields:</p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph {"align":"left"} -->
<p class="has-text-align-left">This creates a 2x2 grid for us to position our charts in our dashboard.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>6.4. Click on <strong>Actions</strong> </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":2600,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2024/03/Five.Co-Dashboard-API-Dashboard-1024x651.png" alt="" class="wp-image-2600"/><figcaption class="wp-element-caption"><em>Image 6.1: Creating a Dashboard in Five</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>6.5. In <strong>Actions, </strong>click on the <strong>Plus ➕</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 ✔️ </strong>icon to save.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":2601,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2024/03/Five.Co-Dashboard-Adding-Actions-1024x651.png" alt="Five.Co - Dashboard - Adding Actions" class="wp-image-2601"/><figcaption class="wp-element-caption"><em>Image 6.2: Adding Actions to a Dashboard</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>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's what your <strong>Actions </strong>should look like for your dashboard:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":2602,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2024/03/image-6-1024x315.png" alt="" class="wp-image-2602"/><figcaption class="wp-element-caption"><em>Image 6.3: Configure your dashboard actions as shown in the image</em></figcaption></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>6.8. Last, save your dashboard by clicking the <strong>Tick ✔️ </strong>icon.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>We have now successfully created a dashboard by utilizing Five's grid layout and populating the grid with actions. Let's move on and add the dashboard to our application.</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

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

<!-- wp:paragraph -->
<p>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.5. Type <strong>2 </strong>into <strong>Menu Order.</strong><br>7.6. In the <strong>Action</strong> drop-down select <strong>API Dashboard (Dashboard)</strong> as the action.<br>7.7. Click on the <strong>Tick ✔️ </strong>icon to save your new menu item.</p>
<!-- /wp:paragraph -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading">Second Checkpoint: Run Your Application</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>It's time to run the application again. Here's what it should look like (again, your app will have different colors, because it doesn't have a theme). </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2603,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2024/03/image-7-1024x651.png" alt="" class="wp-image-2603"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:paragraph -->
<p>Let's check out what we have developed:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<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>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<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't update these products, because the API doesn't give us permissions, but this could easily be changed using Five's Connection Wizard.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<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>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>We could even extract data from the API and push it into a purpose-built MySQL database. It'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://five.co/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>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:image {"align":"center","id":2506,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image aligncenter size-large"><img src="https://five.co/wp-content/uploads/2024/02/image-70-1024x659.png" alt="" class="wp-image-2506"/><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>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

<!-- wp:heading -->
<h2 class="wp-block-heading" id="finding-help-in-five">Finding Help in Five</h2>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>In case you get stuck during the development process, we're here to help! Continue developing your application by accessing these resources:</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li><strong>Five's User Community:</strong> Visit <a href="https://five.org" target="_blank" rel="noreferrer noopener">https://five.org</a> to ask questions or get inspiration from other users.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li><strong>Five's Documentation:</strong> Visit <a href="http://help.five.org" target="_blank" rel="noreferrer noopener">help.five.org</a> to access Five's comprehensive documentation.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="fives-in-app-help">Five's In-App Help</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Last, find useful tips for your application development by clicking on Five's <strong>in-app help </strong>available in the top right corner or on almost any field.</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":2490,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2024/02/Five.Co-Finding-Help-1024x649.png" alt="" class="wp-image-2490"/></figure>
<!-- /wp:image -->

<!-- wp:separator -->
<hr class="wp-block-separator has-alpha-channel-opacity"/>
<!-- /wp:separator -->

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

<!-- wp:paragraph -->
<p>Five lets you develop your application locally free of charge. Use our free download and build your application until it's ready for its end-users. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To deploy your application, sign up for one of our paid plans, starting from US$29.99 per month and application. Your plan includes unlimited end-users and provides you with a custom URL to access the application online.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"layout":{"type":"flex","justifyContent":"center"},"fontSize":"small"} -->
<div class="wp-block-buttons has-custom-font-size has-small-font-size"><!-- wp:button {"textAlign":"center","backgroundColor":"vivid-cyan-blue","textColor":"white","style":{"elements":{"link":{"color":{"text":"var:preset|color|white"}}}},"fontSize":"medium"} -->
<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://five.co/order-payment/">Subscribe Now</a></div>
</div>
<!-- /wp:buttons -->