Creating a web application from an Excel workbook using SpreadsheetWeb can be done mainly in two ways – conversion or custom UI development. Both methods retrieve the calculations and workbook data from the underlying Excel model.

convcust1

In SpreadsheetWEB, a web application comprises of web interface and calculations at a minimum. Calculations logic and workbook data come directly from the Excel spreadsheet.

The second component, the web interface, can be created either using the SpreadsheetWEB conversion wizard or by coding it in web languages – HTML, CSS and JavaScript. In the conversion method, the wizard embeds the web interface into the workbook itself, so the spreadsheet is all that is uploaded to the web. With the custom UI, spreadsheet only brings the formulas and data into play. It is then joined by the custom web interface elements.

In this article, we will be focusing on these two methods. We will also be referring to examples of a converted and a custom UI application to identify key differences between two types of UI creation. Let us demonstrate the differences between two approaches with an example.

convcust2

This Excel model calculates insurance premium based on user input. It has various inputs and a section presenting results. There are several other worksheets for calculations and are not supposed to be exposed to the end users.

There are several differences between converted and custom applications. Depending on project requirements, one can be more advantageous than the other. Let’s take a look at key factors.

 

Development Process

Application development takes different forms in conversion and custom UI.

Conversion wizard that comes with the Excel add-in walks the user through a few steps to define the interface, inputs, and worksheet controls. The conversion approach requires no knowledge in coding and users can modify applications simply by making changes in the wizard, running the process again and replacing the workbook on the web.

Typically, conversion of a workbook can be done by anyone and a development team is not necessary. However, applications with complex user interfaces (i.e. too many inputs or pages) may prove challenging and take longer to convert.

In custom UI approach, the user is expected to code the entire web interface using HTML, CSS and JavaScript. All worksheet data and formulas remain in the Excel workbook. The web UI is connected to the spreadsheet using SpreadsheetWEB’s API methods. While allowing for much more freedom in design, this type of applications inevitably take longer to develop and require programming expertise.

Regardless of the UI structure, both converted and custom UI applications use the SpreadsheetWEB Control Panel for authentication, security, and data management.

 

Look-and-Feel

Here is a side-by-side comparison of conversion and custom UI versions of our rater tool.

Conversion

Custom UI

conversion  custom

The look-and-feel of converted applications is very similar to the grid layout of Excel. Formatting and input controls come from the workbook. While making it easier to design the layout, this also limits the web interface to what can be done in Excel. For example, all input boxes have to be a rectangle shape, buttons and tabs will always have the default SpreadsheetWEB texture, page layout will not be fully customizable.

Custom UI applications can be created using various JavaScript control libraries and page properties can be changed freely. There are technically no limitations for design and pages typically get a more elegant look than converted applications. A custom interface usually takes longer to design and implement. Even small changes, like editing formatting, means modifying the code. The custom UI version on the right clearly looks like a standard web page, whereas conversion applications will look pretty similar to the example on the left.

 

Responsive Design

Computer and mobile device displays come in various size and resolutions. Responsive design allows web pages to scale based on the screen size of the end user viewing them. This prevents page contents from getting clipped and offers a better user experience.

A web page created with the conversion wizard is static and doesn’t resize based on screen properties. Pages with a fixed width and length may not display properly on mobile devices. Mobile browsers tend to zoom out to display whole pages and this causes page controls to look extremely small, often rendering them unusable. Data entry will also become a challenge as users will need to zoom into the page to be able to identify and select the input fields. Sideways scrolling – something that’s not desired on web pages – will become a necessity.

Custom UI applications, on the other hand, can be designed to adjust the page layout with screen resolution. For example, our custom UI application was designed using Bootstrap framework. This allows its layout to change with screen size. The images below demonstrate the results on a traditional desktop screen (left) versus a smart phone screen (right).

 

PC

Mobile

 custom  mobile

See how control locations shift and change automatically when it is viewed on a smart phone. All inputs and options are placed vertically for easier access.

 

Integration Capabilities

Connecting individual information silos allows businesses to fully automate all their data tasks. Because of this, business platforms such as CRMs or BI tools often come with API support and web applications can pull data from these sources.

Converted applications have limited integration capabilities with other services. SpreadsheetWEB natively supports connection to standard web services and database with the help of proprietary formulas.

Custom UI applications, on the other hand, can be linked with a large variety of systems through API connections and are not limited by anything other than performance requirements. For instance, the custom UI version of our rating application also features integration with Google Map API. The address entered by the user is shown on a map. There are various free or paid APIs and services that can be used with custom UI apps.

CRM products such as SalesForce is the lifeblood of most businesses. A web application, created with SpreadsheetWEB and given a custom UI, can be integrated with SalesForce to insert data into the SalesForce database. Likewise, the web application can pull data from the SalesForce database to run calculations. Applications can even create sales proposal directly from SalesForce interface.

 

Support for VBA and Macros

Excel macros cannot be executed on a server and because of this limitation, SpreadsheetWEB doesn’t natively support VBA macros or macro-enabled workbooks. Converted files will not use any of the macros from the original workbook.

Macro logic can be translated into JavaScript code and embedded into a custom UI application. For instance, iterative calculations are widely used for solving problems with several variables. The only way to do this in Excel is using VBA macros. Same type of logic can be applied to a custom UI application in SpreadsheetWEB by coding it in JavaScript.

Custom UI applications also support User Defined Formulas (UDF). UDFs are custom functions that can be written in C# and uploaded to the server to use with custom UI applications. UDFs are ideal for intensive and repeated calculations in an Excel workbook. Furthermore, a UDF code in C# typically runs more efficiently than its VBA counterpart. Significant performance improvements can be achieved using UDFs in a custom UI application.

 

Summary

Each project is different. Requirements and timelines will determine which approach is best for the specific case. Applications that require macros, responsive design, non-Excel layout or advanced integration capabilities will have to have a custom UI. Below are two tables for the pros and cons of conversion and custom UI applications.

Custom UI Applications

Pros Cons
More professional look-and-feel Requires HTML, CSS, JavaScript expertise
Responsive design Takes time to develop
Ability to handle macros and VBA Can only be deployed on a server (No public cloud)
Integration capabilities

 

Converted Applications

Pros Cons
No programming experience Limited look-and-feel
Fast and easy development No mobile support
Can be deployed on the public cloud or server No support for macros and VBA

 

Both methods will incur different development cycles, while allowing for different levels of integration and design features. Creating an application with SpreadsheetWEB can take anywhere between a few minutes and a few weeks. Regardless of UI creation method, the more complicated workbook logic is, the more money and time can be saved through development with SpreadsheetWEB instead of creating a web page from scratch.