Creating an application in excel

It only takes 3 steps to convert your Excel spreadsheet to an app! We´ll tell you how!

Microsoft Excel remains the go-to software solution for millions of businesses across the globe. It is favored for its versatility and flexibility and for the depth of data manipulation and analysis that it allows. And thanks to the Open as App platform that turns Excel spreadsheets into apps within minutes, some of the challenges in using Excel have been overcome.

Just enter your contact data, and we´ll send you our checklist. This list will help you take everything into account when choosing a platform to build your app. Check it out for free!

Excel to app: How to convert spreadsheets

Whether you need Excel to collect data, plan projects and analyze risks, report metrics, generate quotes, predict financial outcomes, or something as big as production planning or order management, you know it will be there for you.

But when it comes to using Excel collaboratively or protecting the data efficiently, that’s when things can get really messy. Suddenly, your Excel sheet is crashing, data is corrupt, and you have no idea whether you’re looking at the latest version or not. While this is quite characteristic of unmanaged Excel files, it can frequently occur with managed ones as well.

In this case, you may want to consider turning your Excel spreadsheet into a native or web application. This will allow you to reduce some of the common errors related to data management, distribution, and protection. Another benefit is that your Excel will look like an app – this offers greater usability and variety in terms of design.

Here are some reasons you should turn your Excel spreadsheet into an app and how to go about that.

Why should you turn your Excel into an app?

For all their usefulness, spreadsheets can quickly turn into what’s known as “Excel Hell” due to one or two simple mistakes. Such as when JP Morgan lost about $6.5 billion during the so-called “London Whale” incident because of several faulty equations and copy-pasted cells.

So, when do spreadsheets fail, and how can turning them into an app help you avoid their pitfalls?

Spreadsheet version control is hard

With spreadsheets constantly circulating around, chances are the latest version will get lost sooner or later. Moreover, updates by different people can end up damaging the core data and make the file unusable.

When you move your data to an app, you can limit user’s access to the “master version” of your spreadsheet and only allow admins to access it. Under this setup, users are only given access to specific data and fields, with everything else remaining hidden. This allows them to conduct the necessary operations without inadvertently corrupting the native spreadsheet.

Excel does not work like a database and is difficult to scale

While Excel is a good place to store and manipulate data, it does not offer the functionalities of a database or a data management system. Excel does not support complex data types, relations between files and records, or different data sets. This limits the types of operations you can perform.

Moreover, spreadsheets don’t allow for real-time multi-user input when used on a desktop and not online. Your spreadsheet then soon becomes a hindrance to scaling operations and improving efficiency. This is further compounded by the fact that as files grow in size, operations become slower and more cumbersome.

Reversely, by making an app out of your spreadsheet, you can offer your users the advantage of flexible and easy access to data and data collection from various sources, not just Excel. Plus, you can give multiple users access to your know-how without the risk of them overwriting your work or exposing your data.

Apps offer greater security

Even though a certain level of security, such as password protection, is available in Excel, this can fairly easily be bypassed. If you want to keep your data safe, then retaining it in a spreadsheet that is widely accessible is not a good idea.
By turning your Excel spreadsheet into an app, you are effectively removing user access to the source file, encrypting the data, and hosting it securely in your own environment. There, it will be accessible only to users at the admin level. This guarantees the safety and integrity of the data. It also allows you to specifically determine who can see your data and entirely limit third parties from gaining access. You can even set an expiry date for your app, after which it will simply stop being accessible to users.

For even greater security, you can initially create your app with dummy data and populate it with your original data later on.

Present your data more user-friendly

An Excel sheet is not the perfect asset to share with your customers or the management team or embed into your website. With an app, you provide an easy-to-use tool that shows you all relevant data in a user-friendly way, which can be used on mobile, desktop, and tablets.

How can no-code apps help to improve your business?

No-code app creation has benefits that go beyond spreadsheet trouble and will affect your business even more. That’s because with no-code apps, innovation and optimization are no longer only dedicated to the IT department or an external service provider – now, everyone who knows Excel can jump in and start creating, deploying, and managing an app.

Instead, creating these calculations in Excel and then converting them into an app is highly cost and time-efficient and allows you to mobilize your data without switching your already existing system or files stored online.

When the app is directly created based on the previously used Excel solution, creation, roll-out, and updating are amazingly fast. Once the business experts know what’s possible, they usually devise many innovative ideas that can be realized in almost no time.

If you’re curious about the kinds of apps you can create by turning a spreadsheet into an app, see the next section for a list and overview of various use cases!

What kind of apps can you create from a spreadsheet?

The possibilities for creating an app from a spreadsheet are mostly limited by what you can imagine creating in Excel. The range within which you can create apps varies from data-heavy industries like finance, insurance, healthcare, and real estate to simple directory and personal budget apps.

Some of the possible applications of native app and web app development platforms include:

Excel-based app examples

• Business apps that include checklists, calculators, manuals, an address book, or simple CRM
• Embedded web calculators for finance, mortgages, insurance, interest, personal finances, and more
• Medical practice apps for patient experience, operations and administration, and more
• Reporting apps with forecasts, break-even, profit and loss, and high-level economics
• Dashboards for sales and marketing, such as ROI for B2B sales or advertising campaigns
• Production and logistics dashboards and stock inventory lists
• …and many more

These are only some of the possible applications of app development platforms. So, what platforms and tools are available to turn a spreadsheet into an app, and how do they work? Here is Open as App in more detail.

How to prepare your Excel sheet before you turn it into an app?

Before you submit your spreadsheet to the Open as App platform, you have to make sure that it’s formatted right. This will ease the process of converting it into an app and eliminate possible errors. There are several simple rules to follow when doing this.

The 5 Basic rules:

1. Your lists must have headings at the top of the column. This guarantees that the list will be recognized as one by the app wizard and assigned the proper values.
2. Your data must be clear. Any highlights, crossed-out data, comments or anything else will not be considered when your spreadsheet is processed.
3. Any cells outside a list area will not be taken into account by the wizard. Neither can merged cells be analyzed properly. One cell should always have only one input and be within the space of the list it belongs to.
4. Format your cells accordingly to have their values displayed. The Open as App platform will consider any values you ascribed to your cells and add them to your app. Examples of values include the date, currency, phone number, drop-down menu, etc.
5. Avoid pivot tables (when using Google Sheets) and macros. Macros cannot be included, as that would make apps impossible to use on iOS.

Rules for more complex Excel sheets:

1. Use explicit cell references rather than structured references; i.e., do not use table or column names but simply direct cell number references.
2. References to external files cannot be accessed: Any references you make in your Excel file must be part of that file, even if not on the same sheet.
3. Ensure you’re using supported formulas: Over 90% of common formulas are supported by Open as App. However, if you find an error in your app, see if the formulas you have used are supported. Array formulas and certain formulas specific to Google Sheets are not currently supported by the platform.
4. Always specify all the arguments in a formula: Optional arguments with a default value given to them by Excel cannot be evaluated.

Keeping these rules in mind, you can create your own app within minutes without any difficulties.

How to design your app?

Once you have prepared your spreadsheet and uploaded it to the Open as App platform, you will get a recommendation for your app. Then, you can pick a design theme you like and manually design your app as you imagine it.

With the Open as App platform, you can customize the design of your app to your brand identity and, more specifically, configure how cells function. You can also add additional functionalities.

Once you are in the App Designer, you are given several options.

• Preview – this option allows you to preview how your app will look, but you can also edit or delete individual items, such as the app header and name.
• Add elements – these options permit you to add new types of content such as cells – if you have additional data to incorporate into your app, charts – if you’d like to make your app more interactive and engaging, or lists – if you want to add sub-lists to your calculations. You can also add headers, spacers, images, info buttons, image upload or signature fields, a map, or action buttons
• Rearrange elements – with this, you can rearrange the elements in your app, group them together as you wish, and even add new pages to fill with extra elements.
• Design – change theme – with this function, you can change the whole theme of your app using a predefined layout provided by Open as App.
• Add print functionality – allows you to generate a PDF file through your app and send it via email.

Using the App Designer, you can stylize your app visually and functionally to match your desired result. You can fine-tune to what extent users can interact with the different contents and enrich the presentation of data thanks to different visual elements such as charts and graphs. All of this takes a minimal amount of time, and the simplicity or complexity of your final app depends entirely on what you want.

So what happens once you design and publish your app? Thanks to the way Open as App functions, there is a two-way connection between the sheet and the app. This means that both the sheet and the app are always updated in both ways. At the same time, access to your app and its functionalities is easy for all users while all the data remains protected to the extent you want it to.

Don’t forget to download your checklist

Just enter your contact data, and we´ll send you our checklist. This list will help you take everything into account when choosing a platform to build your app. Check it out for free!

Ready to turn your Excel sheet into an app?

Are you ready to give it a try? Simply open our App Creation Wizard, watch a short tutorial video (2 minutes), and follow the instructions to create your first app!

Data Entry Application is one of the highest utilized application in any of the organization. Data Entry Software allows you to enter the details with the form and transfer input data from User Form to Database.

You can go for several paid Data Entry Application but the real pain is Trust, Data Privacy and Info-Sec approval. Most of the time, we can’t download and install the commercial Data Entry Application in our organization. Considering all the issue, cost and data privacy, it’s always a good decision to design your own Multi-User Data Entry form in Microsoft Excel and MS Access. In this tool, you don’t seek any approval from IT or invest extra budget on application.

If you are comfortable with VBA and MS Access then it will be easy for you. But what if you are familiar with Visual Basic For Application and MS Access. In this case, it will be very difficult for you to design the application even though VBA is very simple language.

In this tutorial, we will learn How to Create a Data Entry Application in Excel and MS Access? You just need to be familiar with the Excel sheet and you can follow the steps to create fully dynamic data entry form in Excel and Access.

In this application, we will be using MS Excel as front end of this application and MS Access as Database. With the help of both application, we will design application for shareable environment where multiple users can use the Data Entry Form to transfer the data simultaneously. So without further delay, let’s begin!

First of all, you need to create a Folder where you can save Excel and MS Access file. Let’s create a folder named ‘Data Entry Application’

Now, open the MS Access application and create a Blank Database. In MS Access window, create a table named ‘tblEmployee’ and open the table in Design Mode.

Create the required Fields Name with required Data Type. Please see the below image.

Now Save the Table and go to File and Save the Database. To save the Database, please select ‘Access 2002 -2003 Database (*.mdb) and then Click on Save As. Please see the below image.

Given the database name as ‘Database’ and click on Save. Make sure you selected the same folder which we created for Data Entry Application.

Now, close the current open database and go to File then click on Open. Browse the database file which we created for application and then click on drop-down available beside the Open button and then select ‘Open Exclusive’. Please see the below snapshot.

This will open the ‘Database.mdb’ in Exclusive mode so that we can apply the protection on Database file. It will secure our database and users will not be able to open it and make any changes if they will not enter the correct password.

Now, go to File menu and select the Info. Under Info, click on the third option e.i. Set Database Password. Please see the below image.

Now, enter the Password ‘thedatalabs’ in both the Password and Verify text boxes and then click on Okay.

Close the database from the Exclusive mode and open it in normal mode (while opening just click on Open. Don’t select any other option from drop-down available beside the Open button). When you will open the database, it will ask Password. Please enter ‘thedatalabs’ as password to open the database.

Here, we have done with Database designing. Let’s move ahead and create Data Entry form in Excel.

Open MS Excel Application and create a New Workbook. Save the file with the name ‘Data Entry Application in Excel and MS Access’ and select the File Type ‘xlsm’. Macro enabled file is required to retain all the codes which we will write for this Data Entry Form.

Change the Sheet1 name to Home, remove the gridlines, and create labels and rounded rectangle for Launch button. Please see the below pic.

Let’s move to Visual Basic For Application (VBA) window to design the Form and write the required VBA codes.

To open the VBA window, go to Developer Tab in Excel and then click on Visual Basic under Code group. Alternatively, you can also use Shortcut key ALT + F11 to open the VBA window.

In VB window, let’s insert a UserForm. To insert the form, go to Insert menu and click on UserForm.

Let’s set the properties of Form.

Name: frmDataEntry; Caption: Data Entry Application;Height: 428.25; Width: 420

Let’s add other controls and set the properties of each and every controls. Follow the same format which is used in below image.

Set the properties for input controls. Name would be txtEmpID, txtName, txtDOB, imgCalendar, optFemale, optMale, cmbQualification, txtMobile, txtEmail, txtAddrss, cmdSubmit, cmdReset

Caption for optFemale would be Female, optMale would be Male, cmdSubmit would be Submit and cmdReset would be Reset.

Set the tab order for all input controls.

Let’s import the Custom Calendar from the Support File. Please see the below image.

Let’s add coding on Double click on txtDOB and imgCalendar. Make sure you have locked the txtDOB so that user will not be able to enter data directly.

Double click on txtDOB and add the below code on double click events.

Private Sub txtDOB_DblClick(ByVal Cancel As MSForms.ReturnBoolean)

Application.ScreenUpdating = False

Dim sDate As String

On Error Resume Next

sDate = MyCalendar.DatePicker(Me.txtDOB)

Me.txtDOB.Value = Format(sDate, "dd-mmm-yyyy")

On Error GoTo 0

Application.ScreenUpdating = True
End Sub

Now, double click on imgCalendar and add the below code on click events.

Private Sub imgCalendar_Click()

Application.ScreenUpdating = False

Dim sDate As String

On Error Resume Next

sDate = MyCalendar.DatePicker(Me.txtDOB)

Me.txtDOB.Value = Format(sDate, "dd-mmm-yyyy")

On Error GoTo 0

Application.ScreenUpdating = True
End Sub

Let’s insert a module in our project. To insert a module go to Insert menu and click on Module. Rename the Module1 to mdDataEntry.

Now double click on mdDataEntry to view the code window.

Add the below code in mdDataEntry to Reset and Initialize the form.

Sub Reset_Form()

With frmDataEntry

    .txtEmpID.Text = ""
    .txtEmpID.BackColor = vbWhite

    .txtName.Text = ""
    .txtName.BackColor = vbWhite

    .txtDOB.Text = ""
    .txtDOB.BackColor = vbWhite

    .optFemale.Value = False
    .optMale.Value = False

    .txtMobile.Value = ""
    .txtMobile.BackColor = vbWhite

    .txtEmail.Value = ""
    .txtEmail.BackColor = vbWhite

    .txtAddress.Value = ""
    .txtAddress.BackColor = vbWhite

    .cmbQualification.Clear
    .cmbQualification.BackColor = vbWhite

    .cmbQualification.AddItem "10+2"
    .cmbQualification.AddItem "Bachelor Degree"
    .cmbQualification.AddItem "Master Degree"
    .cmbQualification.AddItem "PHD"

    .cmbQualification.Value = ""

End With

End Sub

Add the below function in mdlDataEntry to validate the Email Id entered by User.

Function ValidEmail(email As String) As Boolean 
Dim oRegEx As Object
 Set oRegEx = CreateObject("VBScript.RegExp")
 With oRegEx
    .Pattern = "^[w-.]{1,}@([da-zA-Z-]{1,}.){1,}[da-zA-Z-]{2,3}$"
    ValidEmail = .Test(email)
 End With
 Set oRegEx = Nothing
End Function

Let’s add one more function to validate all the entries made by user in Data Entry Form. You just need to copy the below code and paste it below the email validation function.

Function ValidEntry() As Boolean

ValidEntry = True

With frmDataEntry

    'Default Color

    .txtEmpID.BackColor = vbWhite
    .txtName.BackColor = vbWhite
    .txtDOB.BackColor = vbWhite
    .txtMobile.BackColor = vbWhite
    .txtEmail.BackColor = vbWhite
    .txtAddress.BackColor = vbWhite
    .cmbQualification.BackColor = vbWhite

    'Validating Name

    If Trim(.txtEmpID.Value) = "" Then
        MsgBox "Employee ID is blank. Please enter a valid ID.", vbOKOnly + vbInformation, "Emp ID"
        .txtEmpID.BackColor = vbRed
        ValidEntry = False
        Exit Function
    End If



    'Validating Name

    If Trim(.txtName.Value) = "" Then
        MsgBox "Employee Name is blank. Please enter a valid name.", vbOKOnly + vbInformation, "Employee Name"
        .txtName.BackColor = vbRed
        ValidEntry = False
        Exit Function
    End If

    'Validating DOB

    If Trim(.txtDOB.Value) = "" Then
        MsgBox "DOB is blank. Please enter DOB.", vbOKOnly + vbInformation, "Invalid Entry"
        .txtDOB.BackColor = vbRed
        ValidEntry = False
        Exit Function
    End If


    'Validating DOB

    If .optFemale.Value = False And .optMale.Value = False Then
        MsgBox "Please select gender.", vbOKOnly + vbInformation, "Invalid Entry"
        ValidEntry = False
        Exit Function
    End If

    'Validating Qualification

    If Trim(.cmbQualification.Value) = "" Then
        MsgBox "Please select the Qualification from drop-down.", vbOKOnly + vbInformation, "Invalid Entry"
        .cmbQualification.BackColor = vbRed
        ValidEntry = False
        Exit Function
    End If

    'Validating Mobile Number

    If Trim(.txtMobile.Value) = "" Or Len(.txtMobile.Value) < 10 Or Not IsNumeric(.txtMobile.Value) Then
        MsgBox "Please enter a valid mobile number.", vbOKOnly + vbInformation, "Invalid Entry"
        .txtMobile.BackColor = vbRed
        ValidEntry = False
        Exit Function
    End If

    'Validating Email

    If ValidEmail(Trim(.txtEmail.Value)) = False Then
        MsgBox "Please enter a valid email address.", vbOKOnly + vbInformation, "Invalid Entry"
        .txtEmail.BackColor = vbRed
        ValidEntry = False
        Exit Function
    End If

    'Validating Address

    If Trim(.txtAddress.Value) = "" Then
        MsgBox "Address is blank. Please enter a valid address.", vbOKOnly + vbInformation, "Invalid Entry"
        .txtAddress.BackColor = vbRed
        ValidEntry = False
        Exit Function
    End If


End With

End Function

Let’s add sub procedure to transfer the data from User Form to Database. Before writing the code, we need to add the reference of ADO library in our project. To do that, just go to Tool menu and select the References… In references window, please select ‘Microsoft ActiveX Data Objects 6.1 Library’ and then click on Okay. Please see the below snapshot.

Now, we have added the reference for ADO. Let’s start coding for Submitting Data. You just need to copy the below code and paste it below the ValidEntry Function. Here, we have utilized dynamic connection string to connect the database. You can check the support folders and use the fixed path link to replace the dynamic code. The same has been explained in our YouTube tutorial. Support file link has been provided at the bottom of this post.

Sub Submit_Data()

Application.EnableCancelKey = xlDisabled
Application.DisplayAlerts = False
Application.ScreenUpdating = False

On Error GoTo ErrorHandler
Dim nConnection As New ADODB.Connection
Dim nRecordset As New ADODB.Recordset

Dim sqlQuery As String

#If Win64 Then
    nConnection.Open "Provider=Microsoft.ACE.OLEDB.12.0;Data Source=" & ThisWorkbook.Path & "Database.mdb" & ";Jet OLEDB:Database Password=thedatalabs"
#Else
    nConnection.Open "Provider=Microsoft.Jet.OLEDB.4.0;Data Source=" & ThisWorkbook.Path & "Database.mdb" & ";Jet OLEDB:Database Password=thedatalabs"
#End If

sqlQuery = "Select * from tblEmployee"

nRecordset.Open Source:=sqlQuery, ActiveConnection:=nConnection, CursorType:=adOpenKeyset, LockType:=adLockOptimistic

With nRecordset

    .AddNew ' If new records

    .Fields("Employee ID").Value = frmDataEntry.txtEmpID.Value   'Employee ID
    .Fields("Employee Name").Value = frmDataEntry.txtName.Value   'Employee Name
    .Fields("DOB").Value = frmDataEntry.txtDOB  'DOB
    .Fields("Gender").Value = IIf(frmDataEntry.optFemale.Value = True, "Female", "Male") 'Gender
    .Fields("Qualification").Value = frmDataEntry.cmbQualification.Value   'Qualification
    .Fields("Mobile Number").Value = frmDataEntry.txtMobile.Value   'Mobile Number
    .Fields("Email ID").Value = frmDataEntry.txtEmail.Value   'Email
    .Fields("Address").Value = frmDataEntry.txtAddress.Value   'Address

    .Fields("SUBMITTED BY").Value = Environ("username")
    .Fields("SUBMITTED ON").Value = [Now()]

   .Update

   .Close

End With

nConnection.Close

'Reset the form

Call Reset_Form

Application.DisplayAlerts = True
Application.ScreenUpdating = True

MsgBox "Data submitted successfully!"

Exit Sub
ErrorHandler:
MsgBox Err.Description & " " & Err.Number, vbOKOnly + vbCritical, "Database Error"
Application.DisplayAlerts = True
Application.ScreenUpdating = True
nConnection.Close

End Sub

Add the below code at the bottom of Submit_Data procedure to launch the form. We will utilize this sub procedure to assign it on ‘Launch Form’ button available on Home sheet.

Sub Show_Form()
  frmDataEntry.Show
End Sub

Let’s move to frmDataEntry and add the required code in Form Intilization, Click events of Submit and Reset.

Double click on Form and add the below sub procedure on initialize event.

Private Sub UserForm_Initialize()
Call Reset_Form
End Sub

Code for Click event on Submit Button

Private Sub cmdSubmit_Click()
Dim i As VbMsgBoxResult

i = MsgBox("Do you want to submit the data?", vbYesNo + vbQuestion, "Submit Data")

If i = vbNo Then Exit Sub

If ValidEntry Then

    Call Submit_Data

End If
End Sub

Code for click event on Reset button

Private Sub cmdReset_Click()
Dim i As VbMsgBoxResult

i = MsgBox("Do you want to reset the form?", vbYesNo + vbQuestion, "Reset")

If i = vbNo Then Exit Sub

Call Reset_Form
End Sub

Now coding for this project is done. Let’s move to Excel window and assign the macro on ‘Launch Form’ button available on Home sheet. Right Click on ‘Launch Form’ button and select Assign Macro and then choose the macro named ‘Show_Form’ from the available options.

All done. Let’s launch the form with the help of ‘Launch Form’ button available on Home sheet.

Please watch our step by step tutorial for this form on YouTube.

Please click on below button to download the Excel, Database and other support files.

How to develop an Excel Task Pane App

Posted on Thursday, November 22nd, 2012 at 10:35 am by .

Instead of an article, this is more like a memoir…
“Ty Anderson: An Apps for Office developer memoir”.

Apps for Office – Not your typical Office Object Model

The new Apps for Office development model provides plenty of new possibilities for Microsoft Office developers. Although new, they give the appearance of familiarity. Do you think I’m crazy? Well maybe, but consider the following:

• The content apps are akin to dropping an ActiveX control (for example, a calendar control) onto an Excel spreadsheet.
• Mail apps are not too different from Outlook form regions.
• Task pane apps are just like… well… task pane apps.

Or are they? Certainly they are similar…

• They have the same name as the VSTO and COM-based counterparts.
• They are vertical UI elements.
• They provide access to the Office host’s object model.
• Etc.

Despite these obvious similarities, the Task Pane app is familiar but is very different from anything Office developers have built previously. The main difference is the Office Javascript library (Office.js). This library servers as the gateway to the Office object model and is severely limited. So limited that you find yourself not believing the depths of its limits and attempting unreasonable workarounds.

When I say ‘you’… I mean ‘me’.

A good idea but impossible

Originally conceived, the Excel Table Templates app was meant to be something I dubbed “Easy Rows”. The idea of the app was to:

1. Recognize anytime the user selected a cell that comprised part of an Excel table.
2. Auto-populate an Excel task pane with a label and text box for each cell in the current table row.
3. Allow the user to edit the row by editing the data in the task pane.

The idea was to create an Excel app that would make it easier to work with really, really, really long rows of data in a spreadsheet. The trouble began instantly. The details are boring so I’ll summarize. Using the Office.js library…

• You can recognize when the user has selected a cell within a table. BUT…
• You cannot navigate within the table.
• You cannot read any data outside the selected range of cells.
• You can determine if the table has a header row.
• You cannot actually read the header row’s column titles.

I refused to believe the “cannots” and spent too many hours reading and re-reading the Office.js documentation on MSDN. I finally conceded and moved on to what became today’s article.

The Table Templates Excel task pane app

Despite all the frustration, I discovered it is really easy to insert data into an Excel file. And, given the API’s limitations, I decided one of the best applications of this new development model is to use for inserting content into a file. So, why not build an app that makes it possible to quickly select and insert a table from a library of templates? What’s the worst that could happen?

Here’s the design:

To build this app, you need the following tools:

• Visual Studio 2012
• With Apps for Office project templates
• Excel 2013

Let’s build this thing.

Creating the Table Templates App for Excel 2013

The Table Templates app uses the Apps for Office 2013 Visual Studio 2012 template. If you don’t see this template in the New Project dialog box, be sure you installed all the pre-requisites listed above. To create Table Templates, just follow these steps:

1. With Visual Studio 2012 open, select File > New Project from the main menu.
2. In the New Project dialog box, select the Templates > Office/SharePoint > Apps node.
3. Click the App for Office 2013 project template and name the project TableTemplates. Click the OK button.
4. The Create App for Office dialog box will display. Select the Task pane app in option and only enable Excel as a host Office application. Click Finish to create the project.

Visual Studio will create the project and display the TaskTemplates.html file in the code window. This file is the HTML that defines the task pane display. We want this file to contain a couple of tables:

• Table 1: This table contains the app icon and title.
• Table 2: This table contains the images along with their labels. The images will act as buttons. When the user clicks them, we will call a custom JavaScript method.

Both tables reside within the <Body> tag. Listing 1 contains the HTML and is ready for you to copy and paste into your TableTemplates.html file. Go ahead and paste it over the existing content in the <Body> tag.

Listing 1.

<div id="Content">
       <table class="maintable">
        <tr style="background-color: #0072C6;height: 30px;">
            <td style="height: 60px;width: 55px;text-align: center;vertical-align: middle;">
                <img src="../Images/TableTemplateIcon.png" alt="logo" width="50" height="50" style="float: right;padding-right: 5px;padding-top: 3px; padding-left: 5px" />
            </td>
            <td style="background-color: #0072C6;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;font-size: 18px;font-weight: bold;color: #FDFDFD;text-align: left;vertical-align: middle;padding: 0;margin: 0;height: 30px;">TABLE TEMPLATES</td>
        </tr>
 
    </table>
 
    <table style="height:100%;" id="tableContent">
		<tr><td height="35" colspan="2" >Select a template to insert into your spreadsheet.</td></tr>
        <tr>
            <td width="17%" height="52" > <img src="../Images/TableTemplateIcon-Tasks.png" width="50" height="50" style="cursor: pointer;" onclick="setData('task');"></td>
          <td width="83%" >Tasks Template</td>
        </tr>
 
 
        <tr>
            <td height="52"><img src="../Images/TableTemplateIcon-Contacts.png" width="50" height="50"  style="cursor: pointer;" onclick="setData('contact');"></td>
          <td >Contacts Template</td>
        </tr>
 
 
        <tr>
            <td height="52" ><img src="../Images/TableTemplateIcon-Expenses.png" width="50" height="50" style="cursor: pointer;" onclick="setData('expense');"></td>
          <td >Expenses Template</td>
        </tr>
 
        <tr>
            <td height="52" ><img src="../Images/TableTemplateIcon-Issues.png" width="50" height="50" style="cursor: pointer;" onclick="setData('issue');"></td>
          <td >Issues Template</td>
        </tr>
 
      <tr><td colspan="2">&nbsp;</td></tr>
  </table>
 </div>

The key component is the content in the <IMG> tags:

<img src="../Images/TableTemplateIcon-Tasks.png" width="50" 
    height="50" style="cursor: pointer;" onclick="setData('task');">

Each image tag has a method defined in its onclick attribute. When the user clicks the image, the app will execute the setData method. Listing 2 contains the code for setData.

By the way, feel free to use your own images (or for that matter buttons). At the same time, you are more than welcome to use the images I created. They are part of the sample code for this article.

Listing 2.

// Writes data to current selection.
function setData(tableType) {
    Office.context.document.setSelectedDataAsync(createTablefromTemplate(tableType));
}

I cheated and used this method as it 1) was included in the app by default and 2) did almost exactly what I needed it to do. The only changes I made from the original version included by Visual Studio is to change the method’s parameter name to tableType and then call the createTablefromTemplate method. By calling createTablefromTemplate, we can create the table template we want and then insert it into the spreadsheet.

So how does createTablefromTemplate work? Magic. Listing 3 reveals its secrets. Open the TableTemplates.js file and insert its code.

Listing 3.

function createTablefromTemplate(tableType) {
    var tableData = new Office.TableData();
    switch (tableType) {
        case "task":
            tableData.headers = [
                ['Task Title', 'Start Date', 'Due Date',
                'Status', 'Category', 'Assigned To']];
            tableData.rows = [
                ['Sample Task #1', '=Today()', '=Today()+1', 'Not Started', 'Work', 'Me'],
                ['Sample Task #2', '=Today()', '=Today()', 'Not Started', 'Work', 'Me'],
                ['Sample Task #3', '=Today()', '=Today()', 'Not Started', 'Work', 'Me']];
            return tableData;
            break;
 
        case "contact":
            tableData.headers = [
                ['First Name', 'Last Name', 'Title', 'Phone Number', 'Email',
                    'Street', 'City', 'State', 'Zip']];
            tableData.rows = [
                ['John', 'Doe', 'Generic Person', '212-555-1212', 'john@doe.com',
                    '1234 Main', 'Oakland', 'CA', '94601']];
            return tableData;
            break;
 
        case "expense":
            tableData.headers = [['Expense Date', 'Category', 'Client/Project', 'Amount']];
            tableData.rows = [['=Today()', 'Meals', 'Custom App for Office', '$55.00']];
            return tableData;
            break;
 
        case "issue":
            tableData.headers = [
                ['Issue', 'Status', 'Priority', 'Area', 'Due Date',
                    'Date Resoled', 'Notes']];
            tableData.rows = [
                ['Severely limited Office.js API', 'In-Progress', 'Normal',
                    'Development', '=today()+7', '', 'I wish the API was more extensive.']];
            return tableData;
            break;
    }
}

This is a simple method that branches based on the value of the tableType parameter. We have four template choices (task, contact, expense, & issue tables). And it doesn’t matter what template we specify, the steps are the same. First, the method creates an array that will serve as the table’s header row. Second, the method creates a sample data row so the user gets a little more bang for the buck and can see how they should use the table. Third, and last, the method returns the table as the function value.

Demo Time!

That’s all the code we need. Let’s demo it!

Close your eyes…
Cross your fingers…
Stand on one toe (this is the tricky part)…
—AND—
CLICK F5!

If all goes well, Excel will open and your task pane app will look like this:

***

The Apps for Office developer model has plenty to offer. The trick is to take the APIs at face value. They do what they do. Nothing more… nothing less. Don’t try to trick them out or convince yourself a scenario should be possible because it’s possible with VBA, COM add-ins, and VSTO. The Office JavaScript library is a new animal. We haven’t seen it before. So read about it. Observe it. And see how it acts in the wild.

You may also be interested in:

• Excel 2013 development – 7 questions developers should ask
• Office UX guidelines for Excel 2013 content apps and Word 2013 task pane apps

Available Downloads:

Table Template app for Excel 2013 (C#)