{"id":3516,"date":"2024-08-13T11:42:36","date_gmt":"2024-08-13T03:42:36","guid":{"rendered":"https:\/\/five.co\/?p=3516"},"modified":"2025-04-15T12:21:33","modified_gmt":"2025-04-15T04:21:33","slug":"how-to-develop-an-odata-data-view","status":"publish","type":"post","link":"https:\/\/preview-php85.dzine.org\/five\/code-along\/how-to-develop-an-odata-data-view\/","title":{"rendered":"Code-Along: How to Develop an OData Data View"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">Hi, and welcome to our step-by-step guide on building your first web application with Five. This application leverages the power of OData, a universal data access technology.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Follow the steps below to build a responsive web app with a data view that connects to an OData service as a data view.<\/strong> <\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h3 class=\"wp-block-heading\">Goals and Outcomes: How to Develop an OData Data View<\/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 OData reference service, which is available on <a href=\"https:\/\/www.odata.org\/odata-services\/\" rel=\"nofollow noopener\" target=\"_blank\">OData&#8217;s official website here<\/a>. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Our application will not store data locally. It solely requests and queries data from the OData endpoint. This step-by-step guide is ideal for all those who plan to build custom apps on an OData data source. <\/p>\n\n\n\n<p class=\"wp-block-paragraph\">OData is a data access technology promoted as the &#8220;easiest way to REST&#8221;. OData&#8217;s standard protocol for REST APIs lets us query data from external systems with an SQL-like syntax. <\/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\/\" target=\"_blank\" rel=\"noreferrer noopener\">sign up for free access to the Five development environment<\/a>. <\/p>\n\n\n\n<div style=\"background-color: #001524;\"><hr style=\"height: 5px;\" \/>\n<pre style=\"text-align: center; overflow: hidden; white-space: pre-line;\"><span style=\"color: #f1ebda; background-color: #4588d8; font-size: calc(18px + 0.390625vw);\"><strong>Get Free Access to Five's Development Environment<br \/><\/strong><span style=\"font-size: 14pt;\">Rapidly Build &amp; Deploy an OData Data View<\/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 an OData Data View&quot;,&quot;text&quot;:&quot;Goals and Outcomes: How to Develop an OData Data View&quot;,&quot;link&quot;:&quot;goals-and-outcomes-how-to-develop-an-odata-data-view&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Resources and Downloads: Build an OData Data View&quot;,&quot;text&quot;:&quot;Resources and Downloads: Build an OData Data View&quot;,&quot;link&quot;:&quot;resources-and-downloads-build-an-odata-data-view&quot;},{&quot;level&quot;:3,&quot;content&quot;:&quot;Preview The Application Online&quot;,&quot;text&quot;:&quot;Preview The Application Online&quot;,&quot;link&quot;:&quot;preview-the-application-online&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 OData Service As a Data Source&quot;,&quot;text&quot;:&quot;Step 3: Data &gt; Connection Wizard: Adding an OData Service As a Data Source&quot;,&quot;link&quot;:&quot;step-3-data-connection-wizard-adding-an-odata-service-as-a-data-source&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 4: Visual &gt; Data Views: Creating an OData Data View&quot;,&quot;text&quot;:&quot;Step 4: Visual &gt; Data Views: Creating an OData Data View&quot;,&quot;link&quot;:&quot;step-4-visual-data-views-creating-an-odata-data-view&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Step 5: Visual &gt; Menus: Adding Menu Items to Your App&quot;,&quot;text&quot;:&quot;Step 5: Visual &gt; Menus: Adding Menu Items to Your App&quot;,&quot;link&quot;:&quot;step-5-visual-menus-adding-menu-items-to-your-app&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Checkpoint: Run Your Application&quot;,&quot;text&quot;:&quot;Checkpoint: Run Your Application&quot;,&quot;link&quot;:&quot;checkpoint-run-your-application&quot;},{&quot;level&quot;:2,&quot;content&quot;:&quot;Extensions: Adding More Features&quot;,&quot;text&quot;:&quot;Extensions: Adding More Features&quot;,&quot;link&quot;:&quot;extensions-adding-more-features&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 an OData Data View&quot;,&quot;value&quot;:&quot;goals-and-outcomes-how-to-develop-an-odata-data-view&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Resources and Downloads: Build an OData Data View&quot;,&quot;value&quot;:&quot;resources-and-downloads-build-an-odata-data-view&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Preview The Application Online&quot;,&quot;value&quot;:&quot;preview-the-application-online&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 OData Service As a Data Source&quot;,&quot;value&quot;:&quot;step-3-data-connection-wizard-adding-an-odata-service-as-a-data-source&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 4: Visual &gt; Data Views: Creating an OData Data View&quot;,&quot;value&quot;:&quot;step-4-visual-data-views-creating-an-odata-data-view&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Step 5: Visual &gt; Menus: Adding Menu Items to Your App&quot;,&quot;value&quot;:&quot;step-5-visual-menus-adding-menu-items-to-your-app&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Checkpoint: Run Your Application&quot;,&quot;value&quot;:&quot;checkpoint-run-your-application&quot;,&quot;isDelete&quot;:false},{&quot;label&quot;:&quot;Extensions: Adding More Features&quot;,&quot;value&quot;:&quot;extensions-adding-more-features&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-an-odata-data-view\">Goals and Outcomes: How to Develop an OData Data View<\/a><li><a href=\"#resources-and-downloads-build-an-odata-data-view\">Resources and Downloads: Build an OData Data View<\/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-odata-service-as-a-data-source\">Step 3: Data &gt; Connection Wizard: Adding an OData Service As a Data Source<\/a><li><a href=\"#step-4-visual-data-views-creating-an-odata-data-view\">Step 4: Visual &gt; Data Views: Creating an OData Data View<\/a><li><a href=\"#step-5-visual-menus-adding-menu-items-to-your-app\">Step 5: Visual &gt; Menus: Adding Menu Items to Your App<\/a><li><a href=\"#checkpoint-run-your-application\">Checkpoint: Run Your Application<\/a><li><a href=\"#extensions-adding-more-features\">Extensions: Adding More Features<\/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\">Resources and Downloads: Build an OData Data View<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">Preview The Application Online<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">To preview the application we are developing, <a href=\"https:\/\/learning-odataapp-tryfive.5au.co\/\" target=\"_blank\" rel=\"noreferrer noopener nofollow\">click here<\/a>. Click <strong>Data View <\/strong>from the main menu to view the data coming in from the OData data source inside your application. <\/p>\n\n\n\n<div class=\"wp-block-essential-blocks-button  root-eb-button-5g3ua\"><div class=\"eb-parent-wrapper eb-parent-eb-button-5g3ua \"><div class=\"eb-button-wrapper eb-button-alignment eb-button-5g3ua\"><div class=\"eb-button\"><a class=\"eb-button-anchor\" href=\"https:\/\/learning-odataapp-tryfive.5au.co\/\" target=\"_blank\" rel=\"noopener nofollow\">Preview the OData Application<\/a><\/div><\/div><\/div><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Note: <\/em>This application is just a prototype. Beyond creating a read-only data view on OData, you can use Five to:<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">\u2705 Add forms, charts, dashboards, and PDF reports directly on an OData data source<br>\u2705 Define who has access to what data through Role-Based Access Control (RBAC) and CRUD permissions<br>\u2705 Deploy your application to development, testing or production environments<br>\u2705 Leverage OData filters to control what data you are requesting for display in Five<\/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-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 provisions the cloud resources required by 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 OData Service 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 OData service. Once the connection is set up, the OData service 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. Copy and paste this URL into the box next to &#8220;GET&#8221;. <br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;services.odata.org\/TripPinRESTierService\/People<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">This URL is available from the <a href=\"https:\/\/www.odata.org\/odata-services\/\" rel=\"nofollow noopener\" target=\"_blank\">OData reference service and is available here.<\/a><br>3.5. Click on <strong>Send.<\/strong> Five now shows you the API&#8217;s response: a list of people in JSON format.<\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large\"><img width=\"1024\" height=\"643\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-1-1024x643.png\" alt=\"\" class=\"wp-image-3517\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-1-1024x643.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-1-300x188.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-1-768x482.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-1-1536x965.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-1-2048x1286.png 2048w\" sizes=\"(max-width: 1024px) 100vw, 1024px\" \/><figcaption class=\"wp-element-caption\"><em>Image 3.2: Creating the OData Connection<\/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.6. Click on <strong>Field Mapping<\/strong> to understand how Five treats the API response: Five maps the fields from the OData service onto fields, and lets you select the primary key of the data. <br>3.7. Inside <strong>Field Mapping,<\/strong> tick the <strong>Primary Key<\/strong> box for <strong>UserName<\/strong>.<br>3.8. Next, click on <strong>Read Single Mapping.<\/strong><br>3.9. Inside <strong>Read Single Mapping, <\/strong>paste the URL for getting a single person from the API: <\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>https:&#47;&#47;services.odata.org\/TripPinRESTierService\/People('russellwhyte')<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\">3.10. Click on <strong>General<\/strong>.<br>3.11. In the <strong>WebService <\/strong>dropdown, select <strong>New.<\/strong><br>3.12. Fill in the required fields. Write <strong>OData <\/strong>into the <strong>WebService ID<\/strong> and <strong>Name<\/strong> field. <br>3.13. Change the<strong> REST protocol<\/strong> dropdown to <strong>OData.<\/strong><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\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"346\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-3-1024x346.png\" alt=\"\" class=\"wp-image-3520\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-3-1024x346.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-3-300x101.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-3-768x259.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-3-1536x518.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-3-2048x691.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<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 OData API connection should now appear in the list of connections.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Note:<\/em> if you are working with a non-public OData service, such as your ERP&#8217;s data, make sure to set up authorization in the connection wizard first. Five supports both bearer tokens or basic auth for authorization.<\/p>\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; Data Views: Creating an OData Data View<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">4.1. Go to <strong>Visual <\/strong>and select <strong>Data Views,<\/strong> as shown in Image<strong> 4.1<\/strong><\/p>\n\n\n<div class=\"wp-block-image\">\n<figure class=\"aligncenter size-large is-resized\"><img width=\"948\" height=\"1024\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-4-948x1024.png\" alt=\"\" class=\"wp-image-3522\" style=\"width:526px;height:auto\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-4-948x1024.png 948w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-4-278x300.png 278w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-4-768x829.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-4.png 978w\" sizes=\"(max-width: 948px) 100vw, 948px\" \/><figcaption class=\"wp-element-caption\"><em>Image 4.1: Select Data Views to Create an OData Data View<\/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. Click the <strong>Yellow plus icon<\/strong> to create a new data view.<br>4.3. Fill in the <strong>Title <\/strong>by typing OData Data View. Note how the other required fields are automatically populated. Both <strong>ActionID <\/strong>and <strong>Data Source <\/strong>have their relevant values filled in. <strong>Data Source<\/strong> refers back to our OData connection which we created in the previous step.<br>4.4. <em>Optionally<\/em>, click on <strong>Data Fields<\/strong> to view the fields that will be included in the data view. By default, Five selects all fields that are provided by the OData endpoint.<br>4.5. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save the data view.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<div class=\"wp-block-group\"><div class=\"wp-block-group__inner-container is-layout-constrained wp-block-group-is-layout-constrained\">\n<h2 class=\"wp-block-heading\" id=\"step-11-visual-menus-adding-menu-items-to-your-app\">Step 5: Visual &gt; Menus: Adding Menu Items to Your App<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">5.1. Go to<strong> Visual > Menus<\/strong>.<br>5.2. Click on the yellow <strong>Plus <\/strong>icon<strong>.<\/strong><br>5.3. Type <strong>Data View <\/strong>into Caption.<br>5.4. Type <strong>1 <\/strong>into <strong>Menu Order.<\/strong><br>5.5. In the <strong>Action<\/strong> drop-down select <strong>ODataDataView (Data View)<\/strong> as the action.<br>5.6. Click on the <strong>Tick \u2714\ufe0f <\/strong>icon to save your new menu item.<\/p>\n<\/div><\/div>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\" id=\"second-checkpoint-run-your-application\">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>Data View<\/strong>. Occupying the largest part of the screen is our actual data view that contains all of the fields from our OData API (scroll to the right to see additional columns).<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img width=\"1024\" height=\"580\" src=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-5-1024x580.png\" alt=\"\" class=\"wp-image-3523\" srcset=\"https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-5-1024x580.png 1024w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-5-300x170.png 300w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-5-768x435.png 768w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-5-1536x870.png 1536w, https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/image-5-2048x1160.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<p class=\"wp-block-paragraph\">Because we have not set up our API for the PATCH\/PUT, POST, or DELETE methods our data view is read-only. <\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">Extensions: Adding More Features<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Beyond this simple data view (which took us just a few minutes to develop and launch), we can use Five to build more complex applications that use OData as a data source.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\">For example, Five lets developers<br><strong>1. Add complex forms to their applications,<\/strong><br><strong>2. Create charts and dashboards that visualize data from an OData service,<\/strong><br><strong>3. Generate PDF reports<\/strong>, or<br><strong>4. Add logins, multi-factor authentication or Single Sign-On<\/strong> <strong>to their applications.<\/strong><\/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 recap 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 OData REST API. The OData API serves as a data source for our end-user GUI.<\/li>\n\n\n\n<li>We have developed a simple data view, which end-users can use to view the data that our OData endpoint returns. We can&#8217;t update this data in our app, 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.<br><\/li>\n<\/ol>\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\/\" target=\"_blank\" rel=\"noreferrer noopener\">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 application with Five. This application leverages the power of OData, a universal data access technology. Follow the steps below to build a responsive web app with a data view that connects to an OData service as a data view. Goals and Outcomes: How [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":3524,"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-3516","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\/08\/Five.Co-Code-Along-How-to-Develop-an-OData-Data-View.jpg",1280,720,false],"thumbnail":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/Five.Co-Code-Along-How-to-Develop-an-OData-Data-View-150x150.jpg",150,150,true],"medium":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/Five.Co-Code-Along-How-to-Develop-an-OData-Data-View-300x169.jpg",300,169,true],"medium_large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/Five.Co-Code-Along-How-to-Develop-an-OData-Data-View-768x432.jpg",768,432,true],"large":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/Five.Co-Code-Along-How-to-Develop-an-OData-Data-View-1024x576.jpg",1024,576,true],"1536x1536":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/Five.Co-Code-Along-How-to-Develop-an-OData-Data-View.jpg",1280,720,false],"2048x2048":["https:\/\/preview-php85.dzine.org\/five\/wp-content\/uploads\/2024\/08\/Five.Co-Code-Along-How-to-Develop-an-OData-Data-View.jpg",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 application with Five. This application leverages the power of OData, a universal data access technology. Follow the steps below to build a responsive web app with a data view that connects to an OData service as a data view. Goals and Outcomes: How&hellip;","_links":{"self":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/3516","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=3516"}],"version-history":[{"count":0,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/posts\/3516\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media\/3524"}],"wp:attachment":[{"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/media?parent=3516"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/categories?post=3516"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/preview-php85.dzine.org\/five\/wp-json\/wp\/v2\/tags?post=3516"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}