Retrieving Lists and Single Documents from Custom Actions in @FlutterFlow

hello everyone Thanks for tuning in uh in today video we'll talk about getting the document and getting a list of documents from unload action uh so this is actually the first section that is executed when you load the page uh why you need that because sometimes uh uh when you load a page uh you will actually need an access to this page in order to check something for example you can have a condition so in your action flow you can actually have a condition which will check uh what is going on and if the user is admin for example redirected to some other page if it's a normal user and then stick it to the same page or for example for identification purposes or some other purpose whatever the purpose you you would like to have so in this case over here I'm heading I'm having the for example having the I'm having the class uh the collection sorry which are the name of the collection is cars and then I have three Simple cars uh over here so you have the brand and the name who actually owns uh on this car and then uh over here uh where is the fluid flow uh action where the actions of the unload page actions uh you can actually get the document and then right as I said when you get a document you you can have you can do something with it so in my case I'm getting for example here I'm getting the brand so I'm putting this brand inside local storage and then here I can just say if the brand is equal to Tesla for example or BMW it doesn't matter so I can go over here there I can say if the brand which I stored in the local name code name and then I can say eco2 and I can see uh space specific value and I can say equal to Tesla for example and then if it's a Tesla then do something if it's not Tesla then don't do anything for example or do something else you get idea and then this actually if you load the document from over here so if you say query uh query collection cars and get the single document or get all the documents doesn't matter um there is no actually there is no way uh you can actually uh after that use this data so let me show you what I mean if I uh query this collection uh cars and single single document if I get that single document and if I go to onload action because the most important part here is that what is actually executing first so the first the first thing that is executed is onload action and then is this executed and query on the scaffold so the scaffold is the first um widget on your page so when you go over here let me delete this one and let's say that we want to use this information so if I go over here uh how do I shoot uh how should I use this uh there is no as you can see there is no a back-end query you can do it from here so in order to do this the only thing you you can do this the only way you can do it sorry where it is with a custom action that is what we're going to do now and what I'm going to show you because there is no uh there's no way you can access the widget state from over here so the only as I said the only way you can do it is with a custom action so let me see if this is loading it is probably loaded and then so what is the idea the idea is that let me delete this first because we don't need it uh then let me show you what is the workflow and what we currently have so if I know the application and this is the application and here we have two buttons the first one is get single document and the second one is get multiple documents so if I click over here I should able to get a single document which in my case here is Tesla and the brand uh name uh this is the brand name sorry and this is the owner of the car so if I go back and go get documents it I will get all the documents over here if I for example add a new document let's say that I want name will be equal to sum random name and the brand will be brand and this will be I don't know a lot of brands Mercedes for example I can spell it but okay let's imagine okay and then if I go back this is not updating in real time so I need to go back because I'm fetching the data I'm querying the data on load so it's already cleared I cannot it will not update so let's click over here and now we see the new brand over here so let me show you how I did it now first thing first uh those are the two buttons that I have and I'm querying uh the buttons so I have a backend query on the buttons so if I go over here the first button is I'm getting only a single document and the second button is that I'm getting on I'm getting a list of documents so I'm getting all the documents over here why I'm doing this because I need to pass the reference because I'm used I will use this reference in order to query uh after that the document uh unload in the custom action so if I go over here to the action I have I have to pass the parameter and the parameter that I'm passing is the document reference the document reference is passed by when I go over here when I go to cars so this is you can see it because this on the left side over here this is highlighted so you can see it because this is highlighted and if I click over here I will pass the reference so I'm passing the reference click confirm and this is okay this is good to go and then for the second button it's uh almost the same thing as I show you as I show you I'm querying all the list of documents in this case cars and then I'm passing the list of documents and the list of documents I'm passing it with map list items and then I'm referring to the reference so I don't have anything else to refer because the only uh thing I'm I'm expecting to get a reference so the only thing that they can choose from here is actually the reference so I close this and no further action no further changes sorry it's a value options I don't need any available options so for example you you can filter the list over here and you can say that okay filter uh the cars that are only with the brands of BMW or Tesla or wherever or that are owned by who whoever uh is owned but this is not what the video is about so let's close this one so this is the part over here so this is the first part and the second part is that for single documents let me show you the first setup and then I'll show you the code so the so you need to pass here you need to get the page parameter so the page parameter will be talk ref and this is a document reference to cars it's a single parameter because the first page will only need the single parameter and then if I go to actions so let's go to unload action on page loads or reaction and the one action that we have is a custom action get document is the name of the custom action and this custom actions need one argument the one argument that the custom action needs is a document reference so if we click if we click over here and the only thing that we're passing is actually the document reference that we're getting from the page so if I click over here confirm is the same thing it's very important to name your action output variable name so in my case and this should be event a so let's say event a because this is not events this is actually event uh so let's fix this over here so this one uh I'm putting it I'm putting it over here so this is the brand that we're getting I didn't I don't think I change it it's strange because I change it but here it's not changed so that's strange should be changed yeah now it's event and I'm getting the brand yeah so I'm getting the brand if you're wondering let me update that if you're wondering why uh why we cannot use this when we get the document because this is the actual document and you can see it from over here if I click over here and click on the brand and click on the action outputs and click on this document you can see all the fields that I'm able to use and currently I can only use two Fields the name and the brand because there are strings and this is reference I cannot put I I'm expecting I expecting a string and I cannot put a reference that's why this referencing is in red so why we're doing this why we're putting in local state and then and then getting the data from the actual local state because over here we're actually getting this data from the local state called name and the reason for that is that for some reason if you don't do it this way you get a new a no error or I'm calling it uh the red screen of that so let me show you what I mean if I change this right now to the way that I tried and this it's actually the way that people are expecting this work uh so let me go over here and the only thing that we need to actually change is uh uh so getting this not from the local state but getting this from action outputs and this is the same action you can see it it's highlighted uh it's the first one click it over here and get the brand so if I do this in reality this should work the same way so if I refresh now if I instant reload this page uh you should see that it's actually not this is not the case because I would get to know error so the only way that I managed to do it is it put it in the local state and then get this value from the local state and not from uh and that from um you know from the action itself directly and here I'm just putting the brand because you can you can do this so I'm just getting the brand from the backend query I'm querying the cars I'm getting the reference from the page parameter so I'm getting one car and when I get this car so I get in the document and when I get this document I can say give me the name for example so this is like this is the one way you can do it and this is the normal way people are doing it and I already explained why what is the reason why you need to put it in a unload action and why you need to put it in actions in general and not using it with the query so I hope this is loads already so let's see and now you can see if I click and get to try to get the first document I'll get as I said the red screen of that okay it's loaded let's click it and bomb you see you saw the red screen of that let's click it one more time let's click over here Boom the red screen so to in order to avoid okay now it's loaded and let me click over here and now you don't see any errors okay so let me explain you how to get a list of documents so a list of documents is almost the same thing here the only difference is that here you get the document reference and this document reference of cars and this is a list so this should be this should be checked because this is a list of documents and if we go over here if we go over here so the actions that we have the first action is that I fix this at the beginning of the video is that we need to clear uh the so we're doing actually the same thing we're putting it into a local state and this is a brand names list of strings and the list of strings will will contain brand names so first we're cleaning clearing uh the list of strings because every time if we don't do this they will they will answer that or not without which I think it's not the case if you if you if you if you prefer this way just delete this section over here and then the custom action uh it's called get the docs the other one was named uh get talk and this is get talks and uh document reference we're actually getting it from uh document reference which we can get it from the dock reference of the page and when we have the doc reference of the page sometimes this is actually not working for whatever reason uh uh sometimes I'm not able to manage to do it uh first time I I Was Made I was not able to do it and then the second time I did it and now as you can see right now it's also not working because when you click over here you should get the map parameter and I'm not getting the map parameter right now so maybe just play with it try to add custom actions over here or just add action sorry over it on the top or the bottom and let's see and see if we you can actually get uh get the uh the map drop down if you get the map drop down and the other thing is that you need to press on the on the reference so you're mapping this uh with the reference sorry this is uh of course we're getting this and only as the reference I said uh the things that I said were was not not this the case it was for this action over here so only here we get the reference so we get the reference no for directions we get this like this so this is the idea and then over here we do the same thing because we'll get this the red screen of that you know if we use this if we use this straight from the action so that's why we're putting it on the local state so the local state that we have is a list of strings and this those will be brand names so when we uh when we go over here we should take it from a custom output and the custom output will be cars and then we have the map list items and we're mapping it with the field brand so that's how we're getting all the brands over here and it's important as I said to name your action action output variable name needs to be named because when you go over here you should be able to actually see the name that you put so if you go over here to Output actions you should be able to see cars over here so that's that's about it uh here there's this is a new Option uh rebuild all pages rebuild current page and no build I recommend you to stick with the default one so if the default one is rebuilt all pages just stick with it and don't change it if you don't know uh what is this for but essentially it is actually if you want to uh if you want your changes to be reflected in all pages or just the current page or no reflect at all so this is basically it and after that after you're done you have to go for example in my case I have a cone and just go to generate Dynamic children and from here you can select the local state brand names which is as I said a list of strings and here and the text underneath you can actually select the brand name which will actually give you this brand name over here will actually give you the the name of the brand and then this was everything for the setup and now sorry it was it took like a long uh this is actually a long video but I want to explain everything in details so if you go if you click over here if I click over here actually and that's you but I click over here you can actually see just before that Let me refresh that so here is the code for uh get a document so now what is important about it my name for the custom action is get talk you can only do this in a custom action you cannot do this with a custom function or custom widget the only way you can do it is a custom action and then get you can actually do it with a custom widget of course but in our case we're using this in an action so we need an action right so the name will be get talk in my case and the most important part is that you need to exclude it from compilation so excluded for compilation click this and then here you get your document and then get the document type will be the collection in my case it's cars but in your case you should click or whatever collection your uh you want to get or you want to sorry you want to return because this is the return time this you can leave it and this you can leave it unchecked so and after that we need one argument and this one argument will be talk ref and this is this would be a document reference and then here where it should be the same document reference right right because we when we're getting a document reference of the of a document and we should return the same document so both those both those two have to be the same and then the actual code is only one line of code but it's very important to know that the only thing that you need to change is actually this part over here so this is cars cars record if for example I want to check posts uh posts uh uh record so if I go to boilerplate so this is the boilerplate if I click over here you can actually see that uh this is changed now to posts uh record and I can cancel this and then I can actually copy and paste this over here like that so now and I need to change this to post as well and now I will get the post save it and now you get the post you don't need to compile it because you check this button exclude from compilation uh compilation sorry so you don't need to do it so let's go back to the way it is the way it was uh and then this is the code as I said for uh to get a document as I said those are the only two things that you need to change from the code and those are the only two things that you need to change from the settings and then let's go to get documents get documents is slightly uh slightly bigger code so it's slightly uh uh slightly more code but we can change this to talks because uh maybe in your case you will not get cars you get something else so let's change this to Docs and then you can actually you can actually get the code underneath this video I will link a post I'll link it to my GitHub repository so you can get the code from so the only things that you need to change here as you probably guessed it the first thing there are two things actually you have to change or maybe okay maybe uh more than two things so let me comment this one so the only thing here uh the the only thing here right for right now is that you need to actually change cars record as before change this to wherever you want to change it if you want to be a post you want to be orders user or whatever events or whatever is your collection name just make sure that the first letter is capital and make sure that this is written correctly if you don't know how to write it correctly just click on any collection click on boilerplate Border plate and then copy it from over here and then you know it that this is the right way to write it so this is actually the only thing that you need to change as the first get talk and the second get talks is the only thing that you need to change you can also put it in a local state uh from over here so from the custom code and not from uh the an ad from the action so this three lines over here are basically the same thing as over here so let me show you so basically it's the same thing because this action over here so update local state this is doing the same thing and then if I click over here uh so yeah if you want to put it if you want to I don't know why you you want to do it this way but if you want to still do it this way you can do it with FF App State update and then here inside and this will be the name of your uh of your local state name in my case is brand names and you need to have at and then this is the document to add that what you want which field you want to add in my case it's brand and this is the no safety check if there is no brand added if this if this return no then just add an empty string so but I will not use this now I'm just showing it how you can do it so hope sorry it was uh so sorry that turned out to be a longer video than I was expected but I hope you actually learned something from it and yeah take care stay take care and every Mondays I will try to do live sessions so you can actually join them and Q a so ask questions which I should be answering I will try to answer thanks goodbye take care

Channel: Dimitar Klaturov

Views: 7,245

Keywords:

Id: HtvtwLmaI0w

Length: 26min 10sec (1570 seconds)

Published: Fri Dec 30 2022