Adding Functionality to the Student Roster

If you were a teacher and this were a real class of students, there are a number of things you would want to be able to do with your app. A few of those things are:

• Mark absent or present.

• Navigate to a detail page to see or edit information that isn’t present on the list.

• Remove a student from the class, with the appropriate warnings, of course.

In this chapter, we will enhance the UI of the Roster page to do all of these things.

The first thing you will want to do is add a menu to each student in the IonList. We can either create the menu first or the button to launch the menu first. Let’s create the menu first. For that, we are going to use an IonActionSheet.

IonActionSheet

An action sheet is a menu that displays like a dialog. It often contains at least two, but usually more, action buttons that are contextually related in some way. In our case, the context is that of the currently selected student.

An IonActionSheet is Ionic’s specific implementation, rendering an action sheet that automatically looks at home on an iPhone or Android.