How to load the data from SQLite online database in SfListView?

2 mins read

SfListView allows you to bind the data from online database with the help of Azure App Service. To achieve this, you need to follow the below steps:

Step 1: Get URL to store the data online.

Step 2: Create table using AppServiceHelpers.

Step 3: Populate the data into the table using the ObservableCollection Items.

Step 4: Bind it to SfListView using SfListView.ItemSource property.

Step 5: Refer the following link to know more about working with Azure App Service.

https://blog.xamarin.com/add-a-backend-to-your-app-in-10-minutes/

Note:

Need to install the following nuget packages to successfully run the application

Microsoft.Azure.Mobile.Client(v.2.1.1)
Microsoft.Azure.Mobile.Client.SQLiteStore(v.2.1.1)
AppService.Helpers (Does not support UWP platform)
AppService.Helpers.Forms (Does not support UWP platform)

Refer the below code which illustrates, how to initialize the library with the URL of the Azure Mobile App and registering the Model with the client to create a table.

public App()
{
  InitializeComponent();
  IEasyMobileServiceClient client = new EasyMobileServiceClient();
  client.Initialize("http://xamarin-todo-sample.azurewebsites.net");
  client.RegisterTable<ToDo>();
  client.FinalizeSchema();
  MainPage = new NavigationPage(new Pages.ToDoListPage(client));
}

Refer the following code which illustrates, how to create a table using AppServiceHelpers and insert items in it.

using AppServiceHelpers.Abstractions;
using AppServiceHelpers.Models;
public class BaseAzureViewModel<T> : INotifyPropertyChanged where T : EntityData
{
   IEasyMobileServiceClient client;
   ITableDataStore<T> table; 
 
   public BaseAzureViewModel(IEasyMobileServiceClient client)
   {
     this.client = client;
     table = client.Table<T>();
   }
 
   // Returns an ObservableCollection of all the items in the table
   ObservableCollection<T> items = new ObservableCollection<T>();
   public ObservableCollection<T> Items
   {
     get { return items; }
     set
     {
       items = value;
       OnPropertyChanged("items");
     }
   }
 
   // Adds an item to the table.
   public async Task AddItemAsync(T item)
   {
     await table.AddAsync(item);
   }
 
   // Deletes an item from the table.
   public async Task DeleteItemAsync(T item)
   {
     await table.DeleteAsync(item);
   }
 
   // Updates an item in the table.
   public async Task UpdateItemAsync(T item)
   {
     await table.UpdateAsync(item);
   }
 
   // Refresh the table and sychronize data with Azure.
   Command refreshCommand;
   public Command RefreshCommand
   {
     get { return refreshCommand ?? (refreshCommand = new Command(async () => await ExecuteRefreshCommand())); }
   }
 
   async Task ExecuteRefreshCommand()
   {
     if (IsBusy)
       return;
 
     IsBusy = true;
 
     try
     {
       var _items = await table.GetItemsAsync();
       Items.Clear();
       foreach (var item in _items)
       {
       Items.Add(item);
       }
       IsBusy = false;
     }
     catch (Exception ex)
     {
       await Application.Current.MainPage.DisplayAlert("Error", ex.Message, "OK");
     }
   }
 
   public event PropertyChangedEventHandler PropertyChanged;
   public void OnPropertyChanged(string propertyName)
   {
     if (PropertyChanged == null)
        return;
 
     PropertyChanged(this, new PropertyChangedEventArgs(propertyName));
   }
}

Refer the following code to bind the table contents into the SfListView:

public partial class ToDoListPage : ContentPage
{
  public ToDoListPage(IEasyMobileServiceClient client)
  {
    InitializeComponent();
    var viewModel = new ViewModels.ToDosViewModel(client);
    BindingContext = viewModel;
    listView.ItemsSource = viewModel.Items;
  }
 
  private void Fetcbutton_Clicked(object sender, EventArgs e)
  {
    var vm = (ToDosViewModel)BindingContext;
    vm.RefreshCommand.Execute(null);
  }
}

XAML:

<ContentPage>
 <ContentPage.Content>
   <StackLayout>
     <syncfusion:SfListView x:Name="listView"
                      SelectedItem="{Binding SelectedToDoItem, Mode=TwoWay}"
                      ItemSize="50">
      <syncfusion:SfListView.ItemTemplate>
        <DataTemplate>
          <ViewCell>
            <StackLayout Orientation="Horizontal" HorizontalOptions="FillAndExpand" VerticalOptions="CenterAndExpand">
              <Label Text="{Binding Text}" />
              <Switch IsToggled="{Binding Completed}"/>
            </StackLayout>
          </ViewCell>
        </DataTemplate>
      </syncfusion:SfListView.ItemTemplate>
    </syncfusion:SfListView>
     <Button Text="Add New" Command="{Binding AddNewItemCommand}"/>
     <Button Text="Fetch" Command="{Binding FetchItemCommand}" />
   </StackLayout>
 </ContentPage.Content>
</ContentPage>

Click here to download the sample. In the sample, click the Fetch button to get the data from online and load into the SfListView.

Did you find this information helpful?

Yes

Comments (0)

How to load the data from SQLite online database in SfListView?

Access denied