Convert Excel to Web Apps

Summarized Video Transcript

Part 3 will teach you how to create login interfaces for the Excel web app you’re building.

When you see input fields for both username and password to access content on any given website, it means that user authentications are in place. Your goal in this tutorial is to custom build two user roles — Admins and Reps.

Choosing Your Authentication Setup

From the list of objects in the left-hand panel of Caspio’s app interface, click Authentications.

Screenshot of Caspio’s app builder. It shows the “Authentication” section with no entries. The message says “No Authentications exist. Create one now.”

You’ll find in the resulting screen that your app has no authentications created. To get started, click the New Authentication link on top.

You’ll need to select your Authentication data source next, or the table that has the username and password fields for a specific role. Click on the dropdown menu and select demo_tbl_admin to start creating your admin authentication.

Screenshot of Caspio’s app builder. It shows a part of the “Authentication” section under “New” containing three panels: “Configure Authentication”, “Authentication Fields” and a dropdown “Advanced Setting”.

For your Setup options, you have two choices:

  1. Express – Select if you need a quick login screen that pulls the email and password fields.
  2. Custom – Select if you need additional customization options.

Select Custom for now to learn how you can validate the person that’s logging into the application.

Screenshot of Caspio’s app builder. It shows a part of the “Authentication” setting under “New” containing two panels: “Configure Authentication” and “User Validation Method”.

There are four ways you can proceed:

  1. Caspio data source – This recommended option is essentially Express with more customizations. Information is pulled from your Authentication data source.
  2. ID Services – This option allows your users to log in using their Twitter, Google or OpenID accounts.
  3. Caspio & ID Services – This option allows user authentication through a combination of the Caspio Authentication data source, and the social media accounts mentioned above.
  4. SAML Single Sign-On – This option uses employee network credentials for logging in to their account. So instead of having separate authentications, employees can use their existing account simultaneously to log in to a Caspio app. Note that this option is only available on corporate level plans.

For this tutorial, validate with a Caspio data source by clicking the first radio button. This will unlock more configuration options for your authentication form.

Configuring Your Authentication Fields

Under the Elements panel of the resulting window, your default Authentication Fields should be listed.

Screenshot of Caspio’s app builder. It shows part of the “Authentication” section containing the “Configure Authentication” panel. It is opened on the “Standard” tab.

But the only change you’ll need to do here is rename the Label of your Email field from User name to Email. This is to intuitively signal users on what to input when logging in.

In case you wanted to add new Authentication Fields, follow the simple steps below:

  1. Click the “+” sign above Authentication Fields to select the type of element to insert.
  2. Click Authentication Field to open a new window with your Available Fields and Selected Fields.
  3. Click on Name under Available Fields, then click “>“.
  4. After the Name field has been transferred to the list of Selected Fields, click Add.

This way, before your users can log in, they must input their Name, Email and Password.

But this exercise doesn’t require users to input their Name, so go ahead and select the newly added field in your Elements panel and click “X” at the bottom. Then click Yes in the confirmation window to remove.

Exploring Advanced Settings

To view more options that can be enabled on your login screen, expand the Advanced Settings (Optional) link below the Configure Authentication section.

Screenshot of Caspio’s app builder. It shows part of the “Authentication” section containing the “Advanced Settings” panel.

Here are some of the features you can configure:

  • Logout destination – Click the Change link to redirect users to a new webpage or DataPage within your Caspio app after logging out.
  • Timeout and redirection – Click the Change link to adjust the time when users will be logged out due to inactivity. It is also possible to redirect them to a different URL.

When you’re done, click Create to save your changes.

A window will then prompt you to type in the Authentication Name. Go ahead and input Demo Admin Login, then click Finish. This authentication will now be used as the login screen for all Sales Administrators to access your app.

For the login screen of your Sales Representatives, simply follow the same steps shown above. But do remember to select demo_tbl_reps when choosing the Authentication data source, and type in Demo Reps Login as the Authentication Name after clicking Create.

Screenshot of Caspio’s app builder. It shows part of the “Authentication” section. There are two entries: “Demo Admin Login” and “Demo Reps Login”.

You’ve now completed the foundation of your app in Caspio by creating two login screens on top of the data you imported from Excel to web.

See You in the Next Video!

In the next video, you’ll learn how to build all the app functionalities. Expect to develop charts, forms, reports and pivot tables without writing a single line of code.

Next Steps

See why low-code developers are growing 3x faster than traditional developers.
Have a vision for an application? Talk to a Caspio product expert and we’ll help you achieve it.
Want to see if Caspio is a good fit for your needs? Choose a date and time for a personalized demo.