Convert Excel to Web Apps

PLAY NEXT

Summarized Video Transcript

Part 5 will teach you how to deploy your Excel web app in just a few clicks, completing the development of your application.

While the sample template used in this video was created using HTML, you don’t need any background in front-end web development to launch your apps. Caspio is also compatible with many website builders like WordPress, Weebly, Yola and Squarespace that have drag-and-drop interfaces, eliminating the need to code.

Deploying Your Reps Portal

Go to your list of DataPages and begin by deploying all the interfaces for your Reps.

Screenshot of Caspio’s app builder. It shows the “DataPages” section. There are two entries titled “Admin”, shown with six sub-entries, and “Reps”, shown with three sub-entries.

DEPLOYMENT 1: mysales.html

Hover your cursor on the My Sales DataPage and follow the steps below:

Click Deploy.
On the resulting pop-up window, click Enabled to change Deployment Status.
Make sure that the deployment method selected is Embed.
Copy the Caspio generated deploy code.
Paste the code on your designated HTML file (mysales.html for this DataPage).
Save your HTML file.
Refresh the page on your website.

Screenshot of a preview of a sample sales app, showing a graph and table reflecting Monthly Sales data by a given product.

Use your sample account for Max (Username: max@rep.com, Password: maxw) to view 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 that should contain the Add New Sale web form (new_sale.html).

Screenshot of a preview of a sample sales app form for adding new sales. Two field are populated.

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 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).

Screenshot of a preview of a sample sales app, showing a graph and table reflecting Company Sales made by a given representative.

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 to add new sales, view company sales and review their own sales performance.

Deploying Your Admin Portal

The next three DataPages you’ll deploy will be from your Admin folder. The same procedure still applies so it should be easy:

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 refresh your webpage after saving to see if the form interfaced well with your html template. Use your sample admin account (Username: john@admin.com, Password: test) to gain access.

Screenshot of a preview of a sample sales app form for adding new sales representatives.

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. Hit the Search button when the form appears to check if all the reps in your database are displayed on screen.

Screenshot of a preview of a sample sales app database called “View/Manage Reps”, showing a table of sample names and corresponding information.

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, you should see a search form appear. Clicking Search will fetch all the sales data grouped by reps and broken down by product.

Screenshot of a preview of a sample sales app, showing a graph and table reflecting Total Sales made by a given representative.

Deploying Your Admin Dashboard

The last three DataPages 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).

Screenshot of a preview of a sample sales app showing the main dashboard. It displays several graphs and tables reflecting data on Total Sales by a given month, Top Performers and information about individual sales.

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.