Welcome to our ultimate video guide on turning spreadsheets into apps. This video series will cover everything you need to learn to create web applications using your Excel files, from importing the file online to deploying dynamic forms and reports to your website.
This tutorial will complete the development of your application by deploying it to a website.
While the sample template used in this video was created using HTML, you don’t need any background in front-end web development to implement your apps. Caspio is also compatible with many website builders out on the market today. Services like WordPress, Weebly, Yola and Squarespace all have drag-and-drop user interfaces that eliminate the need to code.
The only thing left to do now is embed your Caspio DataPages.
Assuming you already have your HTML pages ready, go to your list of DataPages inside the Caspio Application Platform. Focus first on the three interfaces you’ve built inside the Reps table.
DEPLOYMENT 1: mysales.html
Simply hover your cursor on the DataPage container of My Sales and click Deploy, then click Enabled in the resulting window to update the Deployment Status. A list of five deployment methods will be available with their respective deploy codes:
URL – This is the quickest way to share a DataPage. The auto-generated URL link can be bookmarked on any web browser and sent to other users without needing to build a website.
Frame – This is an alternative option to the Embed method. Note that a DataPage deployed in a Frame or iFrame does not interact with its container page, so this wouldn’t be the best approach when passing parameters between DataPages.
.NET – This is the preferred method when deploying into Sharepoint, ASPX, C# and VB.Net pages.
Use the Embed method for now and copy the deploy code. Then go to your HTML files, find the web page you’ll be deploying on (mysales.html for this tutorial), paste the code in the appropriate section, then save and publish your website.
Test your deployed DataPage by going to your website and hitting refresh. You should see your authentication form prompting you to log in as a rep. Use your sample account for Max to gain access (Username: firstname.lastname@example.org, Password: maxw) and see the fully functional interface fitted nicely on the template screen.
DEPLOYMENT 2: new_sale.html
To deploy your next DataPage, go back to your list of DataPages in the Caspio App and follow the same procedure. Only this time, embed your deploy code on the HTML file (new_sale.html) that should contain the Add New Sale web form.
Again, upon refreshing the webpage, you’ll see how the form is seamlessly embedded.
DEPLOYMENT 3: Company Sales
The last DataPage you’ll be deploying as part of your sales rep web portal is Company Sales. You should already be familiar with the pattern at this point so go ahead and embed the deploy code onto your third HTML file (company_sales.html).
Your webpage should appear upon hitting refresh.
With all the DataPages you’ve built for your sales reps live for everyone to access, your authorized users can start adding new sales, viewing company sales and reviewing their own sales performance.
The next three DataPages you’ll deploy will be from your Admin folder. You’ll still be following the same procedure so there shouldn’t be any difficulty when you implement the following:
DEPLOYMENT 4: new_rep.html
Copy the Embed deploy code for Add New Rep and paste it on your designated HTML page (new_rep.html). Then test your webpage after saving and publishing to see if the form interfaced well with your html template. Use your sample admin account (Username: email@example.com, Password: test) to gain access.
DEPLOYMENT 5: manage_reps.html
Next, copy the deploy code for View/Manage Reps and paste it on your designated HTML page (manage_reps.html). Then once again, test your webpage after saving and publishing. Hit the Search button when the search form appears to check if all the reps from your database are displayed on screen. Feel free to explore the Edit and View Details links as well.
DEPLOYMENT 6: manage_sales.html
Finally, for this section, copy the deploy code for View/Manage Sales and paste it on your designated HTML page (manage_sales.html). Upon hitting refresh on your website after publishing your html, you should see a search form appear. Clicking the Search button will fetch all the sales data grouped by reps and broken down by product.
The last three DataPages you’ll be deploying will all be embedded on one webpage to create your administrator dashboard. The layout will be two charts on top and a pivot table at the bottom.
DEPLOYMENT 7: dashboard.html
After setting up your dashboard html page (dashboard.html) to display the final DataPages correctly on screen, copy and paste all three deploy codes for Total Sales by Month (left-hand side), Top Performers (right-hand side) and Sales Pivot (bottom).
Upon publishing your dashboard webpage and hitting refresh, notice that the width of your pivot table exceeds the html template of this tutorial. Fixing this phenomenon boils down to adjusting the DataPage from Caspio and limiting the information being displayed or expanding your html template to fit your current DataPage inside.
This concludes the deployment of all your admin tabs. Your administrators can access them anytime in the navigation menu, similar to your reps portal in the first section.
Now that you’ve learned how to deploy your Excel-based application to a website, you’re ready to build other custom applications for your business.
Try building patient portals, document repositories, help desk systems and many more. Going from Excel to web is just the tip of the iceberg.
You can also explore other ultimate video guides that teach you how to build a custom CRM, knowledge base, dashboard and more. Feel free to refer to these guides during your project development.
Thank you for watching!