Excel to Web App [Quick, Easy & Free 3-Step Tutorial]
Tags: excel, webapp, application, tutorial
Published: 2023-09-13 22:00:00

<!-- wp:paragraph -->
<p>Are you planning to go from Excel to web app? </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here's a quick and easy tutorial to explain how you can convert an Excel spreadsheet into a web application. We will be using Five's free download to build our prototype application - so before we get started make sure to <a href="https://five.co/sign-up" data-type="URL" data-id="https://five.co/sign-up">sign up</a> and install Five for free.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>This beginner's guide does not require a background in coding. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's go!</p>
<!-- /wp:paragraph -->



<!-- wp:rank-math/toc-block {"headings":[{"key":"c2bc50c3-350a-472b-a7d4-1e6db5ef5dae","content":"Convert Your Excel Spreadsheet into a Web Application","level":2,"link":"#convert-your-excel-spreadsheet-into-a-web-application","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"89bdb3df-07e6-43dc-9270-393682a79101","content":"Step 1: Clean Up Your Spreadsheet","level":3,"link":"#step-1-clean-up-your-spreadsheet","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"43201f0e-6d88-4ee2-8d88-bb6e6705ea8e","content":"Expert Tip: Useful Excel Commands For Cleaning Up Your Spreadsheet","level":4,"link":"#expert-tip-useful-excel-commands-for-cleaning-up-your-spreadsheet","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"a6031118-baa4-462f-b344-96b373c855b6","content":"Step 2: Setting Up Your Database and Importing Data","level":3,"link":"#step-2-setting-up-your-database-and-importing-data","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"e68593a0-9131-446b-88df-fb19579898fd","content":"1. Create a New Application in Five","level":4,"link":"#1-create-a-new-application-in-five","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"a487ece0-d76a-4f81-80f2-9612769d3bea","content":"2. Create Your Database and Import Data","level":4,"link":"#2-create-your-database-and-import-data","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"c6af5a8e-5204-41c8-a639-77e0a2eac936","content":"Step 3: Adding a Form and Previewing Your Application","level":3,"link":"#step-3-adding-a-form-and-previewing-your-application","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"fa68f443-f554-4c7f-8901-a8cf145317c7","content":"1. Adding a Form","level":4,"link":"#1-adding-a-form","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"e0b96863-e093-4884-8e74-3c251337f8bc","content":"2. Preview Your Application","level":4,"link":"#2-preview-your-application","disable":false,"isUpdated":false,"isGeneratedLink":true},{"key":"368c5520-131e-4dab-a7b0-a448d6064d8b","content":"Excel to Web App: Next Steps","level":3,"link":"#excel-to-web-app-next-steps","disable":false,"isUpdated":false,"isGeneratedLink":true}],"listStyle":"ul"} -->
<div class="wp-block-rank-math-toc-block" id="rank-math-toc"><nav><ul><li class=""><a href="#convert-your-excel-spreadsheet-into-a-web-application">Convert Your Excel Spreadsheet into a Web Application</a><ul><li class=""><a href="#step-1-clean-up-your-spreadsheet">Step 1: Clean Up Your Spreadsheet</a><ul><li class=""><a href="#expert-tip-useful-excel-commands-for-cleaning-up-your-spreadsheet">Expert Tip: Useful Excel Commands For Cleaning Up Your Spreadsheet</a></li></ul></li><li class=""><a href="#step-2-setting-up-your-database-and-importing-data">Step 2: Setting Up Your Database and Importing Data</a><ul><li class=""><a href="#1-create-a-new-application-in-five">1. Create a New Application in Five</a></li><li class=""><a href="#2-create-your-database-and-import-data">2. Create Your Database and Import Data</a></li></ul></li><li class=""><a href="#step-3-adding-a-form-and-previewing-your-application">Step 3: Adding a Form and Previewing Your Application</a><ul><li class=""><a href="#1-adding-a-form">1. Adding a Form</a></li><li class=""><a href="#2-preview-your-application">2. Preview Your Application</a></li></ul></li><li class=""><a href="#excel-to-web-app-next-steps">Excel to Web App: Next Steps</a></li></ul></li></ul></nav></div>
<!-- /wp:rank-math/toc-block -->

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

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center"><strong><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color"><span style="color: #f1ebda; background-color: #4588d8; font-size: calc(12px + 0.390625vw);"><strong>Don't Feel Like Reading?</strong></span></mark>&nbsp;</strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph {"align":"center"} -->
<p class="has-text-align-center">Watch the YouTube Video and Learn How to Use Five’s Free Download to Convert Your Excel Spreadsheet Into a Web App.</p>
<!-- /wp:paragraph -->

{% embed https://youtu.be/wjkRv1Hi_qs

 %}

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

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="step-1-clean-up-your-spreadsheet">Step 1: Clean Up Your Spreadsheet</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Before we start building our web app, it is important that our Excel spreadsheet stores data in the correct format. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To do so, make sure that your spreadsheet's first row contains descriptive names of the data stored in each column.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>For example, let's say your spreadsheet contains information on <strong>Products, Prices, and Quantities.</strong> Here's what your Excel spreadsheet should look like:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:table -->
<figure class="wp-block-table"><table><tbody><tr><td class="has-text-align-center" data-align="center"><strong>Product</strong></td><td class="has-text-align-center" data-align="center"><strong>Price</strong></td><td class="has-text-align-center" data-align="center"><strong>Quantity</strong></td></tr><tr><td class="has-text-align-center" data-align="center">Product 1</td><td class="has-text-align-center" data-align="center">4.99</td><td class="has-text-align-center" data-align="center">100</td></tr><tr><td class="has-text-align-center" data-align="center">Product 2</td><td class="has-text-align-center" data-align="center">5.99</td><td class="has-text-align-center" data-align="center">4</td></tr><tr><td class="has-text-align-center" data-align="center">Product 3</td><td class="has-text-align-center" data-align="center">100.99</td><td class="has-text-align-center" data-align="center">58</td></tr></tbody></table></figure>
<!-- /wp:table -->

<!-- wp:paragraph -->
<p>Unfortunately, the real world is rarely as well-structured as this spreadsheet. So here are a few points to note:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>1. Make sure that your header row (row 1) only contains descriptive names for what is stored in each column. In our case, our header row contains <strong>Product</strong>, <strong>Price</strong>, and <strong>Quantity</strong>. Pick descriptive names for your columns and avoid adding unnecessary additional content to them. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>2. Do not repeat information in multiple columns. For example, it is not advisable to have one column for "<strong>Products (non-perishable)</strong>" and another column for "<strong>Products (perishable)</strong>". Instead, have one column for "<strong>Product</strong>", and another column that classifies them as "<strong>Perishable" </strong>or <strong>"Non-Perishable". </strong></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>3. Make sure that <strong>each cell only contains one piece of data</strong>. For example, in our case, it might be tempting to add discount information to our pricing, such as "<strong>5.99 (discounted to 4.99)</strong>". Don't. <br>If you do so, this data point is no longer usable in a calculation. Always make sure that every column only has one <em>type of data </em>such as text, numbers, options, or currencies.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>4. Even if you have multiple values of the same item, do not put all of them into the same cell. For example, sometimes we might have more than one email address for a customer. How should we deal with this scenario in our spreadsheet?<br>The correct way to set this up is to have multiple "<strong>Email"</strong> columns, such as "<strong>Primary Email</strong>", "<strong>Secondary Email</strong>", or "<strong>Work Email</strong>" and <strong>"Personal Email"</strong>. Do not store multiple emails in one cell.</p>
<!-- /wp:paragraph -->

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

<!-- wp:heading {"textAlign":"center","level":4} -->
<h4 class="wp-block-heading has-text-align-center" id="expert-tip-useful-excel-commands-for-cleaning-up-your-spreadsheet"><mark style="background-color:rgba(0, 0, 0, 0)" class="has-inline-color has-vivid-cyan-blue-color">Expert Tip: Useful Excel Commands For Cleaning Up Your Spreadsheet</mark></h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>To go from Excel to web app without too much trouble, it is advisable to spend some time looking at your existing data and make sure it's clean. As the saying goes: a stitch in time saves nine! </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Here are our three favorite Excel functions for clean data:</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>TRIM</strong>: Excel's TRIM function deletes all leading, trailing, and in-between spaces&nbsp;<strong>except for a single space</strong>&nbsp;character between words. This works great for misspelled names.<br>Say some of your customers have misspelled their names when signing up on your website, such as "JohnDoe", or "Jane Doe <strong>□□□</strong>". The trim function will convert these two entries to "John Doe" and "Jane Doe".</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>CLEAN</strong>: The CLEAN function removes all nonprintable characters from text. This is useful if your database contains names with special characters that didn't get pasted correctly into your Excel, or if you have line breaks in your cell. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p><strong>PROPER: </strong>The PROPER function&nbsp;converts the first character to upper case and all other characters into lower case. <br>For example, the function will convert "JOHn DoE" into "John Doe".</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Later in this article, we will introduce you to a few helpful features that will make it easier for you to collect clean data in your web app. </p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p>Does your Excel spreadsheet fulfill the criteria above?</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Your header row (row 1) only contains descriptive column names.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Every column contains unique information related to the column header.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Every cell in the same column contains only one piece of data of the same data type, such as a piece of text, numbers, etc.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Multiple data points of the same category are split across multiple columns.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Your data has been cleaned up using some of Excel's built-in functions.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>If so, it's time to move to Step 2 to convert your Excel to a web app: setting up your database.</p>
<!-- /wp:paragraph -->

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

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="step-2-setting-up-your-database-and-importing-data">Step 2: Setting Up Your Database and Importing Data</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Thanks to the work we just did in Step 1, going from Excel to a web app will be a lot easier now that we're starting with Step 2: setting up your database. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Having a database as your <em>application backend </em>is a critical step in converting Excel spreadsheets to web apps. We recommend <a href="https://five.co/blog/what-is-mysql/" data-type="post" data-id="774">MySQL, the world's most popular open-source database</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To create our database, we will use Five, which has a handy and easy-to-use visual database designer. Using Five's database designer, we can create a database table entirely in point-and-click. Make sure to have Five installed and running on your computer to follow along.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="1-create-a-new-application-in-five">1. Create a New Application in Five</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>After installing Five, launch it on your computer. You'll be greeted by a screen that looks like this: </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1454,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/08/image-14-1024x650.png" alt="" class="wp-image-1454" /></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Click on <strong>Applications</strong> near the top left corner of the screen, and right below the hamburger menu icon.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Now, click on the yellow <strong>Plus </strong>icon. A new window "New Applications Record" will appear.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Give your application a <strong>Title</strong>, such as "<strong>My First App".</strong></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Save by clicking the <strong>Tick Mark</strong> in the top right corner.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Here's what your screen should now look like. If "<strong>My First App"</strong> is your first application, you will not see any other applications in the list on left:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1456,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/08/image-16-1024x648.png" alt="" class="wp-image-1456"/></figure>
<!-- /wp:image -->

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

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="2-create-your-database-and-import-data">2. Create Your Database and Import Data</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>It's time to build your database and import your data. To start click the blue <strong>Manage </strong>button on the top right of the screen near the Five logo.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now click on <strong>Data</strong> and then <strong>Tables</strong> to land on the screen shown below. Looks pretty empty doesn't it? </p>
<!-- /wp:paragraph -->

<!-- wp:image {"align":"center","id":1458,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/08/image-18-1024x650.png" alt="" class="wp-image-1458" /></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Let's go ahead and create a database table. Click on the <strong>Lightning</strong> icon (do <em>not </em>click the yellow plus icon) to launch Five's <strong>Table Wizard</strong> which looks like this: </p>
<!-- /wp:paragraph -->

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

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Give your table a <strong>Name</strong>. Let's go with <strong>Inventory.</strong></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Now click on the <strong>Plus </strong>icon on the right side of the screen. Click three times to create three database fields for <strong>Product </strong>(data type: text), <strong>Price</strong> (data type: float; display type: float.2), and Quantity (data and display type: integer). Below is what your table should look like. Save by clicking the <strong>Tick</strong> mark.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:image {"id":1460,"sizeSlug":"large","linkDestination":"none","className":"is-resized"} -->
<figure class="wp-block-image size-large is-resized"><img src="https://five.co/wp-content/uploads/2023/08/image-20-1024x647.png" alt="" class="wp-image-1460"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Now let's import our data from our Excel spreadsheet. Find and click the <strong>Import CSV into Table </strong>icon to get started:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1461,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/08/image-21-1024x652.png" alt="Five.Co - Import a CSV into a Database" class="wp-image-1461"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p></p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>To import your data make sure it is stored in a CSV file. If you'd like to use the data provided above, <a href="https://five.co/download/source/Inventory.csv">download our CSV file here</a>.</p>
<!-- /wp:paragraph -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Five's <strong>Import</strong> <strong>Data</strong> lets you select the database table you'd like to import data into. In our case, there is only one table: our <b>inventory</b> table. So go ahead and select it from the dropdown box.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Next, click on <strong>Choose File</strong> and find the Inventory.csv file. Upload it.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Five will automatically map the fields of your CSV file to your database fields, provided you have been following this tutorial and your database fields have the same name as the top row of your CSV file.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>For <strong>InventoryKey</strong> select <strong>Generated.</strong></li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Click on the <strong>Tick</strong> mark to upload your data.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>Congratulations! You have created a database table in a MySQL database and have populated it with data! In the third and last step, we will add a form to our application and launch and preview it.</p>
<!-- /wp:paragraph -->

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

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="step-3-adding-a-form-and-previewing-your-application">Step 3: Adding a Form and Previewing Your Application</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>We have already created our application backend: a relational database with a single table that stores information about our products, prices, and quantities. But a database is not a web app. So let's move on to step 3 of converting our Excel to a web app.</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="1-adding-a-form">1. Adding a Form</h4>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Five makes it really easy to build a form for your end-users. To get started, click on <strong>Visual</strong> and then on <strong>Forms</strong>. </p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1462,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/08/image-22-1024x650.png" alt="Five.Co - Visual - Forms" class="wp-image-1462"/></figure>
<!-- /wp:image -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Click on the <strong>Lightning</strong> icon (do <em>not </em>click the yellow plus icon) to launch Five's <strong>Form Wizard</strong>.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>There's only one thing you need to do in the form wizard. Select <strong>Inventory</strong> as your Main Table. </li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Save by clicking the <strong>Tick</strong> mark.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:image {"id":1463,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/08/image-23-1024x650.png" alt="Five.Co - Excel to Web App - Creating a Form" class="wp-image-1463"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>It is time to preview our application! </p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":4} -->
<h4 class="wp-block-heading" id="2-preview-your-application">2. Preview Your Application</h4>
<!-- /wp:heading -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>Click on the <strong>Run</strong> icon at the top right corner. This will launch your application in a new window.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:image {"id":1464,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/08/image-24-1024x652.png" alt="Five.Co - Excel to Web App - Launching the Application" class="wp-image-1464"/></figure>
<!-- /wp:image -->

<!-- wp:paragraph -->
<p>Here's what your application will look like:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":1465,"sizeSlug":"large","linkDestination":"none"} -->
<figure class="wp-block-image size-large"><img src="https://five.co/wp-content/uploads/2023/08/image-25-1024x650.png" alt="Five.Co - Excel to Web App - The Finished Application" class="wp-image-1465"/></figure>
<!-- /wp:image -->

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

<!-- wp:heading {"level":3} -->
<h3 class="wp-block-heading" id="excel-to-web-app-next-steps">Excel to Web App: Next Steps</h3>
<!-- /wp:heading -->

<!-- wp:paragraph -->
<p>Well done! You have successfully built and deployed your first web application in Five. Instead of managing your data in an Excel spreadsheet, you can now use a modern web application to store, retrieve, and process your data. And it took only three steps to go from Excel to web app!</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Five's prebuilt user interface has automatically created an <strong>Inventories </strong>menu item for you. You can also see your <strong>Products</strong> in the list to the left of the screen. Last, by selecting one of the products, you can see its details, and make changes to them as necessary. Five also comes with a pre-built <strong>search and filtering</strong> feature.</p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>What else can you develop in Five? Plenty of things! Check out this screenshot of a finished application to get a sense of what's possible:</p>
<!-- /wp:paragraph -->

<!-- wp:image {"id":959,"sizeSlug":"full","linkDestination":"none"} -->
<figure class="wp-block-image size-full"><img src="https://five.co/wp-content/uploads/2023/05/Five.Co-SQL-Dashboard.png" alt="Five.Co - Five Uses the Admin Panel Web App Template" class="wp-image-959"/></figure>
<!-- /wp:image -->

<!-- wp:list {"ordered":true} -->
<ol><!-- wp:list-item -->
<li>You can theme it to make it look more professional. Here's our <a href="https://help.five.org/2.1/docs/getting-started/quick-start-guide/design-and-attach-a-theme/">guide to creating and attaching a theme to your application</a>.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>You can add <a href="https://five.co/blog/sql-data-visualization/" data-type="post" data-id="956">charts or dashboards</a> to your application.</li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>You can show your data in an <a href="https://five.co/blog/free-microsoft-access-alternative/" data-type="post" data-id="976">editable grid by following our Northwinds tutorial.</a> </li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>Remember how at the top we spoke about capturing clean data? Why not add a few <a href="https://five.co/blog/powerful-sql-data-validation-techniques/" data-type="post" data-id="689">data validation rules</a> to your application? </li>
<!-- /wp:list-item -->

<!-- wp:list-item -->
<li>You can add a login and terms &amp; conditions consent screen to your application, and give users different roles and permissions.</li>
<!-- /wp:list-item --></ol>
<!-- /wp:list -->

<!-- wp:paragraph -->
<p>In short, we have barely scratched the surface of what's possible in Five! For further inspiration on what can be built in Five, <a href="https://five.co/use-cases/" data-type="page" data-id="1070">visit our Use Cases</a>. </p>
<!-- /wp:paragraph -->

<!-- wp:paragraph -->
<p>Happy coding!</p>
<!-- /wp:paragraph -->