Display database content using .NET Interface Assets

You have already read in this article how to use data templates to control the display of data coming from an external resource. In that data template example, data was coming from Excel, a resource further explained in this article.

Now imagine your data is more complex, possibly coming from a database, requiring some processing before being displayed onscreen. You will need to write a piece of code to get your data from where it is stored AND format that data in a visually appealing way for use in IntuiFace. To do this, you can build a .NET DLL Interface Asset, using either C# or VB. The generic process for creating a .NET DLL can be found in this article

For our database example, download the source code here (contains both C# and VB source) and the IntuiFace project here.

This sample will illustrate how to represent a person's basic information card (First Name, Last Name, Email, ID), using either C# or VB.


Database-XP2.jpg

Let's focus on the source code

The first thing to create is a class that will represent your data. In this example, we chose to manually create a MyData class representing a person's basic information. Alternatively, you could automatically create this class if you connect your code to a SQL database using, for example, the Entity Framework.


Database-1.jpg

Next, create the main class. Let's call it Mock_Database (it's really a mock-up sample).
Just in case we plan to add properties that could be modified at runtime, this class is configured to implement the INotifyPropertyChanged interface. We do not use it here but this is a good practice to follow when creating your own .NET Interface Assets.

Now for the biggest part: the ObservableCollection property, named MyDataList, that will contain your data. Using an ObservableCollection instead of a simple List makes life easier when it comes to adding/removing items to/from your collection at runtime. You will not need to reload your scene to see the changes.

The constructor of the class will only initialize this MyDataList property as an empty Collection.

For initialization, fill this ObservableCollection with the info stored in your database. This will become the Data Feed in IntuiFace.

In this sample, the method GenerateMockData is called from IntuiFace (using a button) and will create fake information for this ObservableCollection.


Database-2.jpg

The last part of this source code consists of two public methods. They are public so IntuiFace can call them:

  • AddData: used if you need to get information from your user and to store it in the database. The user will enter his info via a virtual keyboard. Scenarios include registering for a mailing list or requesting additional information
  • ClearList: used here for test purposes, but can be helpful if your data concerns a survey


Database-3.jpg

Code is ready, let's display this database in IntuiFace

Now that you have created your Interface Asset, you just have to import it in Composer, create a Data Template to visualize the content of your database and add some Text Input fields to create a form that will write to your database.

Here is a video showing the full process: