How can I implement the movie card creation feature by filling in fields?

I would like to create a feature similar to collections: I have a “personal diary” screen, which will contain a sheet with cards for specific films (poster, film title, card number, and the number of stars the user has given the film (only a number with a star next to it) (these personal cards will only be available to the user). Below there will be a “create card” button. It takes the user to a modal window for creating a card (I need the arrangement of components to be like on the second screen from the left (in the screenshot)). The modal window will be called “Card No. …” (the numbers should go from 1, like card 1, card 2, and so on). Below there will be a field with a “select film” button. Clicking the button takes you to the film search bar (linked to the TMDB database). There you select the desired film, click the plus sign next to it, and the title and poster of the film (from the TMDB database) are automatically inserted into the modal window for creating a card. The user fills in the remaining fields themselves (genre, year of release, director, short description) below The user rates the card (from 1 to 10 stars). Below, I’d like to offer a choice of impressions (the image shows a smiley face and a corresponding caption below it: delight, disappointment, thoughtfulness, etc.). The user can select several emotions (this is important). Below that is the final field where the user writes their notes/review. Once they’ve filled in all the fields they want, they click the save button. The “personal diary” screen displays the created card number, the poster, the title of the selected film, and the number of stars. Clicking on a specific card opens it in full: that is, all the fields the user filled in. It’s also important to include an edit button for the card so they can make changes and then save them. Please help me implement this. The biggest problem is how to create a modal window with a form to fill out. I can only use a list, but it keeps repeating the same thing below.

Hi @olga.solovyeva60,

Why you’re making the form/creation part a list? Would you be able to edit the screenshot with adding some texts of each component in the screen and what you want to do so we can identify your expectations?

I would cut the creation part into like few screens instead putting everything in one screen and especially since it’s a modal screen, it’s not good for UI and user might gets confused. See this video which I’ve just recorded. : https://drive.google.com/file/d/15k--79WGC5tyqaKfcU6w2S31OXQqG0_z/view?usp=sharing

Thank you and have a great day!

Okay! I’ll try to do it the way you showed me, thank you very much! I hope it works.

1 Like

Hello, I got it all working, except for one thing: the card number always stays at 1 and doesn’t increment. Could you please tell me how to fix this?

Hi @olga.solovyeva60, I’m glad it’s working!

Have you added an update logged in user action like this? Looks like I haven’t shown that part in the recording, apologies for that!


Thank you and have a great day!

Yes, now everything worked! Thank you! You are amazing!

1 Like

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.