MAUI Tutorial

Add the Priority Property

1. In the RealmTodo project, expand the Models folder and open the Item class file.

2. Add the following public property:

   [MapTo("priority")]
   public int? Priority { get; set; }

   Note that we have set this property as nullable, which will ensure that existing Items in our database (which do not have a Priority property) will continue to be available.

Set the Priority when Creating or Modifying an Item

1. The EditItemViewModel ViewModel is used to both create new items and to modify existing items. When creating or modifying an item, the user needs the UI (and code) to set the Priority of an item.

2. Add an ObservableProperty to hold the priority:

   [ObservableProperty]
   private int? priority;

   Note

   [ObservableProperty] Attribute

   The [ObservableProperty] attribute is a feature provided by the MVVM Toolkit to simplify data binding.

3. The ApplyQueryAttributes method acts as a bit of a "constructor" for this view model, checking to see if an existing item is being passed to this view for editing. In here, we capture any existing values to display in the view.

   If we are editing an existing item, we want to set the Priority of the existing item: Priority = InitialItem.Priority;.

   Likewise, if we're creating a new item, set the default priority to "Medium": Priority = 2;.

   When complete this method should now look like the following:

   public void ApplyQueryAttributes(IDictionary<string, object> query)
   {
         if (query.Count > 0 && query["item"] != null) // we're editing an Item
         {
            InitialItem = query["item"] as Item;
            Summary = InitialItem.Summary;
            Priority = InitialItem.Priority;
            PageHeader = $"Modify Item {InitialItem.Id}";
         }
         else // we're creating a new item
         {
            Summary = "";
            Priority = 2;
            PageHeader = "Create a New Item";
         }
   }

4. Finally, in the SaveItem() method, we want to persist the Priority value. Since we are creating or modifying a managed object, the changes are wrapped in a realm.WriteAsync call.

   For the existing item, set the InitialItem.Priority on the existing object, and for a new item, set the property in the Add() call. Your completed WriteAsync block should look like this:

   await realm.WriteAsync(() =>
   {
      if (InitialItem != null) // editing an item
      {
         InitialItem.Summary = Summary;
         InitialItem.Priority = Priority;
      }
      else // creating a new item
      {
         realm.Add(new Item()
         {
               OwnerId = RealmService.CurrentUser.Id,
               Summary = summary,
               Priority = Priority
         });
      }
   });

Update the UI Elements

1. The final task is to add the UI elements needed to set and show the priority.

   First, in the ItemsPage.xaml, we'll add a label to the ListView that shows the priority. Within the ViewCell, add a Label to display the item's priority:

   <Label Text="{Binding Priority}"
      HorizontalOptions="Center"
      VerticalOptions="Center"/>

2. In the EditItemsPage.xaml, we will add two UI elements: a Picker that enables the user to choose which priority level to set on the new Item and a label for the picker. Find the Entry element for setting the Summary and add the following elements below it:

   <Label Text="Priority:"/>
   <Picker x:Name="newItemPriority" SelectedIndex="{Binding Priority}">
      <Picker.Items>
            <x:String>Severe</x:String>
            <x:String>High</x:String>
            <x:String>Medium</x:String>
            <x:String>Low</x:String>
      </Picker.Items>
   </Picker>

Run and Test

At this point, you can run the application again. Log in using the account you created earlier in this tutorial. You will see the one Item you previously created. Add a new Item, and you will see that you can now set the priority. Choose High for the priority and save the Item.

Now switch back to the Atlas data page in your browser, and refresh the Item collection. You should now see the new Item with the priority field added and set to 1. You will also notice that the existing Item now also has a priority field, and it is set to null, as shown in the following screenshot:

Update the subscription

In the RealmService.cs file, we define two Flexible Sync subscriptions. One shows only the items created by the current user, while the other shows all items from all users.

We're going to add a new subscription that shows the current user's items that have a priority of 0 or 1.

1. At the bottom of the RealmService class, add an entry to the SubscriptionType enum called "MyHighPriority":

   public enum SubscriptionType
   {
      Mine,
      MyHighPriority,
      All,
   }

2. Scroll up to find the GetQueryForSubscriptionType method. It is here that we define the subscriptions.

   1. Copy the first one, where subType == SubscriptionType.Mine, and paste it in an else if block immediately below.

   2. Set the new conditional to subType == SubscriptionType.MyHighPriority.

   3. Modify this new subscription query to insert a LINQ query that still filters by OwnerId and also by Priority values less than 2.

   4. Change the name of the new query to "myHighPri". Your code will look like the following:

   if (subType == SubscriptionType.Mine)
   {
         query = realm.All<Item>()
            .Where(i => i.OwnerId == CurrentUser.Id)
            .Where(i => i.Priority < 2);
         queryName = "mine";
   }
   else if (subType == SubscriptionType.MyHighPriority)
   {
         query = realm.All<Item>()
           .Where(i => i.OwnerId == CurrentUser.Id &&
                  i.Priority < 2);
         queryName = "myHighPri";
   }
   else if (subType == SubscriptionType.All)
   {
         query = realm.All<Item>();
         queryName = "all";
   }

3. In the GetCurrentSubscriptionType method immediately above, add the new subscription name to the switch statement, so it looks like this:

   return activeSubscription.Name switch
   {
       "all" => SubscriptionType.All,
       "mine" => SubscriptionType.Mine,
       "myHighPri" => SubscriptionType.MyHighPriority,
       _ => throw new InvalidOperationException("Unknown subscription type")
   };

4. Finally, open the ItemsViewModel class and find the OnIsShowAllTasksChanged method. Rather than change the UI to enable 3 subscriptions, we'll just replace the existing "mine" subscription with the new one. Change the SetSubscription method so it looks like the following:

   await RealmService.SetSubscription(realm, value
      ? SubscriptionType.All
      : SubscriptionType.MyHighPriority);

Run and Test

Run the application again. If prompted to do so, log in in using the account you created earlier in this tutorial.

You should expect to see any Items you have created that have a priority of "High" (1) or "Severe" (0). If you toggle the "Show all tasks" switch, all tasks by all users should appear.