1. 11
    Add New Properties to an Existing Document in Firebase through a Ionic Action Sheet
    5m 32s

Add New Properties to an Existing Document in Firebase through a Ionic Action Sheet

Jorge Vergara
InstructorJorge Vergara
Share this video with your friends

Social Share Links

Send Tweet
Published a year ago
Updated a year ago

We'll go through the process of adding a new property to our task and how to update our task document in the database. Because we are using a BehaviorSubject we can utilize the .next function on the task$ to add the assignee.

We'll also explore the use of action sheets to use as selectors.

Instructor: [0:00] Now, let's work on adding more properties to our task so that we can all see how we update existing documents in the data. We are going to add a new property to our task interface called Assignee. Assignee is going to be either a string or it's going to be.

[0:18] We are getting an error here because we are missing the assignee variable and after fixing it, we want to show it right below the segment that shows the task status. For that, I'm going to go here. I have the segment and I'm going to take advantage of Ionic UI components and I'm going to use one called Ion Chip.

[0:47] This chip is going to have an icon and a label. When I save, you can see it here on the screen, assign this task. Now, I'm going to add a click handler on the chip so that when the user clicks it, it calls the assign task function. There are multiple ways we can show how to add this assignee in our UI.

[1:16] For this example, I want to use one of Ionic's components called the Action Sheet Controller. What this specific controller does is it triggers a button sheet. It will pop up here a menu in our application showing us the different functions.

[1:34] To show those different options, I'm going to create a variable here called Team and it's going to be an array of names. Now, I can go create my Assign Task function. First, I'm going to create my action sheet. This one takes a header, a subheader, and it takes an array of a button.

[2:09] The buttons have their own interface. They need to have the text and they need to have the data. Optionally, you can add a role to the button. For example, this one would be of role Cancel.

[2:28] We want to show the team members here as a list of buttons. What we're going to do is we are going to create a buttons array up here and we are going to map through the team variable. For each member in that variable, we are going to say both the text and the data are going to have the value of member.

[3:01] These buttons here, it's going to be an array of text and data. It's going to be like text Jorge Vergara, data Jorge Vergara and so on. Once we create it, we are going to display our action sheet.

[3:23] You see that when I click assign this task is going to display the action sheet. It's going to say pick a team member and we have the options -- Jorge Vergara, Andres Everett, John Doe, Jane Doe, and cancel. The action sheet has an onDismiss handler that gives us the result of the button that the user clicks.

[3:44] I can say here let's await for the action sheet to dismiss and when it does dismiss is going to save the value in this result variable. If there is no data meaning that the user clicked outside of the action sheet or they click Cancel, we are going to return the function, but if there is data, what we want to do is that we want to add that assignee to our task object.

[4:17] Since we are using a behavior subject, we can do that, assigning a next value, and we say we want to have the same value we have inside the task and we want to add this new property assignee that's going to be the data. Now when I click assign this task and I select for example Andres Everett, we have a new assignee selected but we don't really have a way for the user to see at the moment.

[4:41] Let's go back to our task page and look for the label assign this task and we are going to replace this with a variable. We are going to say here we are going to show task assignee and we are going to use optional training to say if there is no assignee then display assign this task.

[5:05] Now, when I click on Assign this Task and select Jorge Vergara, you'll see that it changes and it says that the task is selected to Jorge Vergara. If I click Save Task here, it updated the task and I can go to the database. First look for the task, is this one right here, the task here in progress, and you see that it added the assignee, Jorge Vergara.

egghead
egghead
~ 9 minutes ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today