SalesBuilder on AIR: Local Database, Data Sync, and Native Drag-and-Drop

NOTE: This version of the application is now obsolete. I posted a new and significantly improved version here.

SalesBuilder is a sample Sales Force Automation application that allows you to work offline (using the SQLite database embedded in the AIR runtime), and synchronize data with the server when you are back online.

In addition to using a local database, SalesBuilder also demonstrates other interesting features such as native drag-and-drop between an AIR application and the desktop, as well as native drag-and-drop between an AIR application and other desktop applications such as Word and Excel.

This is the AIR version of the browser-based application I recently posted here. The database-related instructions below are therefore very similar.

In this hosted version, I removed the server component (to avoid having to watch all the bad things that can happen to a shared demo database). An XML document plays the role of server data. You work offline and the changes you make are saved to your local SQLite database. A simple data synchronization mechanism allows you to initially populate your local database, and informs you of the changes that would be sent to the server.

Click here to install the application.

Guided Tour

Working with the local database

1. Start the application.
2. Click the Search button in the left drawer. Notice that there is no data (you haven’t populated your local database yet).
3. Optionally start the AIR SQLite Admin tool.
   • Click “Open Database”
   • Navigate to your “Application Data\salesbuilder\Local Store” directory, select salesbuilder.db and click Open.
   • Click “New Query” in the menu bar.
   • Type “select * from account” or “select * from contact”: no data.
4. In the SalesBuilder app, click the “Sync” button in the menu bar.
5. When the synchronization process completes, click the “Search” button again: You now have data.
6. If you started the SQLite Admin tool, click the “Execute” button again and notice that your local database has been populated.
7. In the SalesBuilder app, double-Click “Acme” in the search results.
8. Note that this is an MDI type of user interface. The list of open windows (panels) is available under “Open Items” in the drawer. You can click an item to restore it.
9. Make some changes to the Acme data (for example, change the phone number), and click “Save”.
10. Click the Sync button again and notice that the change you just made is picked up by the synchronization process.
11. On the Contacts tab, you can grab an org chart item with the mouse and move it around.
12. To open the details view for a contact, either double-click an org chart item or click “Show Grid” and double-click a contact in the datagrid.
13. On the Market History tab, you can grab the chart with the mouse and move it left and right, adjust the time selection using the dividers in the bottom chart, etc.
14. Continue to add and modify accounts and contacts, and click the Sync button to see the changes being picked up by the synchronization process.

Native drag-and-drop

1. Click “Dashboard” in the menu.
2. Drag any of the three charts and drop it on the desktop: the chart is saved as a JPG on the desktop.
3. Open a Word document, drag a chart from the application again, and, this time, drop it directly in the Word document.
4. Click the grid view icon for any of the three charts.
5. Select some rows in the datagrid, and, without releasing the mouse button, drag the selected rows and drop them on the desktop. The rows are saved as an Excel document on the desktop.
6. Double-click the Excel document to open the spreadsheet.
7. Drag some rows from the Datagrid again, and, this time, drop them directly somewhere in the Excel spreadsheet.

Source Code and Disclaimer

Click here to download the source code of the application.

This sample is a proof of concept and not a full featured application. Some modules of the application (like opportunities and activities) are not implemented in this version.

Credits to Mark Shepherd for the Springgraph component used for the org chart.