items visibility in shell

Question

Hello I have different items in my shell, that are visible based on the role. When I log in, I register save the user uid on the secure storage

  async Task Login() {

      IsBusy = true;

      //var user = await authenticationService.LoginWithEmailAndPassword(User.Email, User.Password);
      var user = await authenticationService.LoginWithEmailAndPassword("******@outlook.com", "111111");

      if(user != null) {
          await SecureStorage.SetAsync("CurrentUser", user.Uid);
          await appService.NavigateTo($"//{nameof(WelcomePage)}", true);
          RoleVisibility.ManageFlyoutItemsVisibility(appShellViewModel, dataService, user.Uid);
      }

      IsBusy = false;
  }

I have a little helper method, to manage my items based on visibility.

  public static async void ManageFlyoutItemsVisibility(AppShellViewModel appShellViewModel,
      IDataService<User> dataService, string userUID) {

      var currentUser = await dataService.GetByUidAsync<User>("Users", userUID);

      if(currentUser != null) {
          switch(currentUser.Role) {
              case nameof(Roles.Coordinator):
                  appShellViewModel.IsCoordinator = true;
                  break;
              case nameof(Roles.Teacher):
                  appShellViewModel.IsTeacher = true;
                  break;
              case nameof(Roles.Student):
                  appShellViewModel.IsStudent = true;
                  break;
          }

          appShellViewModel.User = currentUser;

my appshell takes care of everything, and I bind it to isVisible in XAML

<Shell.FlyoutFooterTemplate>
    <DataTemplate>
        <Button
            Margin="20"
            Command="{Binding SignOutCommand}"
            CornerRadius="8"
            Text="Log out" />
    </DataTemplate>
</Shell.FlyoutFooterTemplate>


<FlyoutItem
    Title="Notifications"
    IsVisible="{Binding IsTeacher}">
    <ShellContent
        ContentTemplate="{DataTemplate view:NotificationsPage}"
        Route="NotificationsPage" />
</FlyoutItem>

<ShellContent
    ContentTemplate="{DataTemplate view:LoginPage}"
    Route="LoginPage"
    Shell.FlyoutBehavior="Disabled"
    Shell.FlyoutItemIsVisible="False" />


<ShellContent
    ContentTemplate="{DataTemplate view:WelcomePage}"
    Route="WelcomePage"
    Shell.FlyoutItemIsVisible="False" />

<FlyoutItem
    Title="My courses"
    IsVisible="{Binding IsStudent}">
    <ShellContent
        ContentTemplate="{DataTemplate view:CoursesPage}"
        Route="CoursesPage" />
</FlyoutItem>

<FlyoutItem Title="Join Meeting">
    <ShellContent
        ContentTemplate="{DataTemplate view:JoinMeetingPage}"
        Route="JoinMeetingPage" />
</FlyoutItem>


<FlyoutItem
    Title="New lecture"
    IsVisible="{Binding IsTeacher}">
    <ShellContent
        ContentTemplate="{DataTemplate view:NewLecturePage}"
        Route="NewLecturePage" />
</FlyoutItem>

<FlyoutItem
    Title="New test"
    IsVisible="{Binding IsTeacher}">
    <ShellContent
        ContentTemplate="{DataTemplate view:NewTestPage}"
        Route="NewTestPage" />
</FlyoutItem>


<FlyoutItem
    Title="Schedule lecture"
    IsVisible="{Binding IsTeacher}">
    <ShellContent
        ContentTemplate="{DataTemplate view:ScheduleLecturePage}"
        Route="ScheduleLecturePage" />
</FlyoutItem>

<FlyoutItem
    Title="Schedule test"
    IsVisible="{Binding IsTeacher}">
    <ShellContent
        ContentTemplate="{DataTemplate view:ScheduleTestPage}"
        Route="ScheduleLecturePage" />
</FlyoutItem>

<FlyoutItem
    Title="Manage courses"
    IsVisible="{Binding IsCoordinator}">
    <ShellContent
        ContentTemplate="{DataTemplate view:ManageCoursePage}"
        Route="ManageCoursePage" />
</FlyoutItem>

for some reason, when I log in, I can only see "Join meeting". However, I can still tap on all the option I have access to. Moreover, if I login again, I can see everything. look: https://reccloud.com/u/ooflyc3

Answer 1

Hello,

Thanks for your feedback.

According to the FlyoutItem visibility, when IsVisible is False, the corresponding FlyoutItem should be removed from the Shell.

IsVisible, of type bool, indicates if the item should be removed from the visual tree and therefore not appear in the flyout. Its default value is true.

For this unexpected behavior, Q&A is not a bug reporting or tracking system. If you think you've found a bug in Maui please report it in the Maui github repository at https://github.com/dotnet/maui . We will clear details to be able to reproduce and troubleshoot the problem. When you post it, please include version numbers, exact repro steps, and the difference between the expected behaviour and actual behaviour.

Best Regards,

Alec Liu.

---

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.