Build API Powered Dashboards - MongoDB, Discord and Mail API

Key Takeaways

hello everyone here on the freecodecamp channel today today i'm going to be showing you how to build every tool that a startup needs thanks to this amazing low code approach we are going to be using this low code approach to build a marketing dashboard in which you can view all your users on a certain page and then on another page you can choose which users which are associated with different marketing lists should be emailed or sent messages to on discord we will also have the option of adding new customers directly from this dashboard editing them as well as deleting them as well as adding new marketing lists too okay so a lot to cover in this tutorial we will be using mongodb we will also be using the smtp api as well as the discord web hook so a lot to cover for those of you who don't know me my name is anukuba and i'm a software developer as well as content creator online you can find me on my channel or just here on freecodecamp now before we get going low code solutions are not to be confused with no code solutions in which no coding is required we will be using this platform right here smith in order to drag and drop ui components have been pre-made for us and all we're going to be doing is hooking up the back end okay so as you can see here a basic understanding of http requests such as get post put delete are required as well as some basic javascript too this course has been possible thanks to a grant from appsmith the low code solution platform okay so first things first i'm just going to head over to the appsmith platform which we will be using to build our low code app so if you sign in this is what your dashboard should look like as you can see here i already have some previous projects that i have built using this platform we of course are just going to create a new one so i'm just going to go ahead and click the new button like so and this will generate this new landing page for me now i'm just going to rename this so that we can keep track of this on our dashboard i'm going to call this communications dashboard just like so and click off it so that is saved and once we have finished that we will have the option to build with drag and drop or generate from a data table so i'm going to choose to build from drag and drop so just go ahead and select that option so that we can start completely from scratch on a blank canvas just like so once we are here the first thing we do is just get the ui for our dashboard down so our dashboard is actually going to have two pages let's start off with creating our first page this is going to be called customer data and it's going to you guessed it hold our customer data because we're going to want to have our customer data on one page and then options to send messages to our customers based on the mailing list they are on on the second page so let's go ahead and call this customer data so our page is now called customer data and like i said let's get to building the ui first so to build the ui we have some widgets to our disposal that are pre-built and pre-made styled up ready for our use so if we click on the widgets here and all i'm going to do is just simply search for a container widget and just drag and drop it you can use the outline on this widget to essentially resize it just like so and if we click on it we can drag it around so there we go there's our first widget that we have used we can also customize it thanks to the tab on the right so here are the options for personalization on this particular widget and i'm simply going to choose to change the color on this so i'm going to change the background color to this lovely green like so and we can do other things such as change the border radius as well okay so there we go that is now a customized container we can actually also rename these widgets so i can choose to name this header if i wish this is useful especially when it comes to picking them out later when we add functionality to some of these widgets okay so that is what you can do it is optional you don't have to so once that is done i'm just going to show you how to add text to this header so we're simply going to search for text in the widgets and drag and drop some text so once again if we now click on this you will see all the options for customization on this particular widget so let's change the text in this to be customer communications portal so all i've done is just change the text in here okay and then once that is done we can also of course resize it by grabbing the border like so the other things we can do are change the color of the tags so i'm simply going to select from the options here and then we can also change the text size so we have some standard words here i'm going to choose to use the heading one for this particular text okay so great this is looking good and of course i can just center it by using the dragging functionality on the widget like so wonderful so that is done and the last thing i'm going to do is just put an image so once again let's go to our widgets and i'm just going to drag in a image widget like so this is a little bit too big so once again we can resize it using the borders and let's just drag it to where we need so that it clicks in place now once here we can simply just use an image that is hosted on the internet so this is a great library that i use or i'm going to use for this project there's loads of free icons for us to use this particular one is just going to be a folder like so so there we go that is the url that i'm going to need you can of course use any url you wish and wonderful so our header is looking good i'm just going to resize this a tiny bit and move on the next i'm going to do is actually use another container because in this container i'm going to store our table of all our customers so once again let's just drag in a container i'm just going to drag it over here and give it the border radius again of 30. so there we go that translates to 30 pixels and once that is done i'm going to now put some text in here so that our user knows what this container is for and this is of course going to be for our customer data like i said so let's go ahead and change that text to customer data and select this to be a heading 2 so that it's a little bit smaller than our main heading so that was super easy the next thing i want to do is just add in two inputs that will let us order the table that we're going to input in later by whatever column we wish and then by ascending or descending order and to do this i'm going to use the text so i'm going to put in some text to say order by like so so just drag in the text and just change this to be ordered by and the next thing i'm going to do is use the select widget so let's go back to our widgets and find the select widget and once again just drop it where we need just like so so the select widget simply looks like this if you click on it it will show you all the options we have all the options are represented by the options on the right with a label and a value okay as well as a little search bar so that's what it looks like we will come back to this later when we get to putting in the values that we essentially want because we don't want blue green red we want to order by the table columns okay so this is looking good let's just stretch this out so we can add a few more things and i'm just going to move this around like so so that we can put in essentially another select and another text widget while we are here however i'm just going to rename this as this is something that i will probably want to pick out later so i'm going to rename this to key select just like so and wonderful now in out smith an easy way to essentially duplicate what we have just done is to literally copy and paste the widget so that's what i've done here and now i can just use the same widget with the same sizing the same inputs and everything and just move it along to here and of course we need to rename this because as default this has been renamed to whatever the previous widget was with the word copy i want this to be the border select okay so there we go we've got the two selects let's now carry on before we get to changing these inputs later now finally for our table so to do this i'm just going to actually go to our widgets search for a table drag it in here just like what we've been doing and a table will be generated for us with some dummy data however we don't want this dummy data we want data from an actual database and this is going to be a mongodb database so this is definitely something i'm going to want to pick out later when we get to writing queries and writing some javascript so let's rename this let's rename this to data table again we don't have to do this you can of course pick it out by the existing name this is just for readability more than anything for this tutorial so just keep that in mind okay so i've just renamed this to data table and this means that instead of having all of this generic data that has been added for us by appsmith i want to get some real data from my database so to do this let's connect to mongodb so all i'm gonna do is head over to our data sources and then once here well we actually need to make our database first so let's head over to mongodb and just sign up for free let's go to mongodb atlas and i'm just simply going to sign up now i've already done the sign up process for this if you haven't please pause here and do the sign up process as if you you know have never used this before if that is the case or just sign in if you have already used mongodb i'm going to choose to log in with my account that i use for mongodb tutorials and amazing so this is what my dashboard looks like as you can see there are a few projects that i've previously done but we are gonna have to create a new project so what should we call this project i'm just gonna call it communications as that is the app that we are working on it's a communications dashboard and once we have named this whatever we wish i'm just going to go ahead and click here and this will take me to the next step in which we add members and set permissions well this is easy i'm just gonna add myself really so let's go ahead and create our project okay and wonderful now let's build a database we are of course going to use the free option for this of course you don't have to this is just for the secret to tutorial so i'm going to click on the shared option right here and now let's go ahead and select some of these options so the shared option well this means that we can only use some of these i'm going to go ahead and stick with the one they are suggested for me and create a cluster once this cluster has started to make let's just fill out these security quick start questions let's give our database a username and password i'm just going to go ahead and make my username annakubo and the password i'm going to use is one two three and i'm just going to create my user of course please choose something more secure again this is just for tutorial purposes so i'm fine with that and wonderful let's also add my current ip address this just means that i will only be able to access this from my current ip address okay so that will be the same for you if you try to access your database from another ip address it won't work thanks to this and let's finish this out and wonderful so now our cluster is being created once that has done you should see something that looks like this okay and now we are ready to start our first collection so let's just click on cluster 0 right here and on the collections let's create our first collection let's add my own data and call our database something i'm just going to call it data for now and our collection name where we're going to have a few things in here we're going to have a customers collection in which we're going to store all our customer data okay so let's just go ahead and call this customers and click create so now you will see that we have data and then a collection called customers and if we want to add another collection just go ahead and click the plus sign right here and checking that you're under the database name data just go ahead and add a collection name of mailing list in which we're gonna store all our mailing lists for our app and just click confirm again and once again a third collection we're gonna have three collections for this project it's to be a marketing list so once that is done just go ahead and click create and wonderful so there we have our three collections in the database called data now i'm gonna just add some customers in here manually to get started okay we are going to be able to add customers from the dashboard itself but just to get going we're going to create some and add them in manually just so we have something to work with so to do this i'm going to insert this first customer into the customer collection as you can see an id has already been generated for me thanks to mongodb and i'm just going to choose this json option just because i prefer working this way you can choose the other option but for me this is slightly easier as it allows to copy and paste and just really kind of you know create these customers quickly as we are going to create 10. so don't forget the comma and what is our customer object going to look like well we are going to have a user do not disturb and this just means that the user has chosen to not be to start okay so that is an option that we're going to have for our app the next thing we're going to have is a customer email id which is simply just going to be an email address for that customer so let's go ahead and do that now and just fill it out again this is all just random data of course these emails you know i don't know if they exist maybe they do but they are just dummy data the next thing i'm going to do is just have a customer id that is separate to the document id above this is a customer id that i have chosen for the customer let's start off with z1001 and then we're also going to have a customer name and this is what the name of the customer is that the customer has chosen to be represented by okay so there we go this is our essential customer object now i'm going to copy this so that we can use it to create way more customers and i'm just going to insert this into the collection just like so there we go there we have our fast customer let's create some more so i'm simply just going to insert a new document click on the json option put in the comma paste away and then i'm just going to format this a little bit change the customer id change the email id so i'm just going to make something up once again just like so change the customer name so once again i am just making this up and click insert so there is a few of these to go i'm just going to do one more and then i'm just going to fast forward them for you because you know you should probably get the gist by now and there should be 10 so once again i'm just going to insert into the collection choose the json option format this a little bit better and then i'm just going to change the customer id and of course the customer name to once again something that i am making up and click insert okay so there we go like i said i'm not going to put you through all of this so i'm just going to fast forward and cut this bit out until we have 10 customers in our database and wonderful so there we have 10 customers in our database right now there are 10 in here so there we go and now we can use this in order to populate the table in our app so great so first off we're going to have to get the url that we're going to need to connect to our database so to do this i'm actually going to go to the overview of this cluster 0 and just click on the connect once here we are going to choose the connect our application option and let's go ahead and just get this whole connection string right here so just go ahead and copy all of this take it and we're gonna go back into our appsmith portal and then under the data sources i'm going to create a new data source and we already have mongodb configured in here to make our lives a lot easier so select the mongodb database option and then right under here let's go ahead and choose the connection string option and then paste our connection string in here making sure to remove my first database and change it to data and then also change the password to 123 or whatever you chose to save as your password okay great now we also have to whitelist these ip addresses so just where we added our own ip address we can add these two right here so let's go back to mongodb now and just close this and under network access i'm going to add an ip address so all i'm going to do is just paste in one of the ip addresses from the app smith page and click confirm and let's now go back to appsmith grab the other one and then once again go back into monkeytv and add that ip address and i'm simply going to paste it once again and click confirm so super easy that is currently pending but once that is done we can go back to appsmith and we can of course test the connection so let's go back in there now and then of the three buttons just select the third button and great this data source is valid let's go ahead and rename that once again just for readability i'm going to choose to call this communications data just so that we know what we need to find and it's just a lot more easier for us to work with so great so once that is saved let's carry on so now let's go back to our customer data page and click on the table just like so and get rid of all this dummy data and instead we are going to write a query so let's go ahead and click on the queries js right here on the left and create new or we're going to select the communications data option that we just made as a data source so let's scroll down and find that one right here and then you should see this page pop up so now we are writing our first query okay so to recap what we first did is created a data source and now we're writing a query okay that will use that data source so our query let's go ahead and call this something i'm going to choose to call this find query because we're going to find all the customers okay and just return them so making sure that is connected to the communications data i am now going to choose the command find documents and look in the collection customers okay because that is what collection we want from our database quote data and you're just going to click run and there we go you will see all the customers that we created in the previous step when we manually added them on mongodb easy right okay great so this is looking good now let's go back to our custom accumulations portal and once again just get rid of all the dummy data once we've selected the table data widget and then i'm going to use these two kylie braces so these two curly braces are an app smith thing it will just allow us to use the queries and not confuse the app by thinking it's text you can use javascript inside any widget to control things like its data source behavior and formatting just wrap the javascript in double brackets to separate it from regular text similar to mustache or handlebar syntax this allows you to link widgets to apis queries and javascript functions and is known as binding the widget so i'm just going to use find query dot data and ta-da that has brought back all our customers it has arranged it in columns for us it's got all the data it's very intuitive this is wonderful okay so this is looking good the next thing we're going to do is just customize this table a little bit more so what i can do is make some of these columns not visible as we don't need some of this information visible to the user using the app one of these things is not making the id visible and the other thing is just making a new column called a delete column so to make a new column i'm just going to go ahead and add a new column and let's just change this to say delete just like so and instead of having text in this delete column i actually would have an icon okay so i'm going to show you how to do that now so to do this just go ahead and click on the little cog and it will show you all the options that we can have for this column so the column type well we don't want plain text we want an icon so let's just go ahead and select icon from this drop down right here and great an icon button has been generated for us now we can customize this further for example i want the icon to be a trash can so let's go ahead and select trash and great now because this is more severe i also want to change the color so let's go ahead and change the color of this trash can so i'm simply going to change the button color to be this red like so and great and then just just round it off a little bit too so of course this has no function analogy at the moment but i really want to show you what it's like to not have text in the columns you can have icons you can have buttons you can have whatever you wish we will be hooking this up later so just bear with me for now so now that we have that i'm just going to actually add a modal that will pop up when the delete button is clicked so again we are just doing the ui for now we will do the delete query a little bit later so to do this i'm just going to go back into the widgets and just search for the modal widget and just simply drag it over and place it under here like so so once we have the model here i'm just going to change the text i'm going to change the text to say delete row as that is what the model is going to be for we're going to confirm that we definitely want to delete this line so once that has been changed we can also do some other personalization let's also rename this to delete modal okay so for example i'm going to add some more text in here so let's go back to the widget and search for the text widget and just paste it in here like so and then we're going to have a warning message that says are you sure that you want to delete this item because i want to make sure that people are definitely sure that they want to delete it and we're just not deleting the line if someone clicks on it by mistake so great the next thing i want to do is just change the text of these buttons so let's go ahead and change this from close to cancel because you can change the text of these buttons quite simply like this and by default this already has an event the event is to close the module that we have renamed delete modal okay so that is in there by default and next i'm just going to change this to be a primary button and i'm just going to change the color of the second button to be this red just like so and on this click when we confirm we want to delete the row we're actually going to execute a query okay we're going to execute so this is where we get to writing the delete query we want to execute the delete query so let's on the on click event select well this time i'm actually not going to choose to just execute a query i'm going to change some queries together which is why i'm going to just choose the javascript option so i can write my own javascript in here so to do this just click on the js button until it's turned blank and we are going to run the query delete query which as i said we are yet to write so we would do delete query run and then this function so we're essentially chaining functions in here so once with the delete query runs we're going to run the find query the find query is the one that will bring back all the customers again once the customer has been deleted so essentially refreshing our data to truly represent what is in there okay and then we are also going to close the modal so we're going to write close modal and the modal we want to close is the delete model that we have just created so that is how you would do that chaining all of these things together so that they happen in the right order okay great so of course delete query does have some little red squigglies under it because we don't have that query yet so appsmith is telling us that this is the case and this will be an error so why don't we get to writing that query okay now we're going to actually hook up the button to open the module so that we can open it so i'm just gonna do that now quickly just on click event and change that while i'm here i'm also gonna delete this icon we've done it this is looking so so good so all i'm going to do is just under here go to add query create new making sure to select the communications data and this query is going to be a delete query so let's just name this delete query for readability and the collection we want to work with is the customer collection and the command we want to do is delete document and how we're going to delete the document where we're going to search for it by the id okay the object id so let's go ahead and choose the object id that we are deleting so this is the syntax for working with mongodb we're going to have the id and then we are going to get the object id of the table data of the data table so essentially the table we called data table on our dashboard and then we're going to get the triggered row id okay so that is how we know that we're going to delete the correct row we're going to select it from the table of the triggered row and then pass it through into here so that it gets sent off to mongodb and deletes the correct one by the object id okay so hopefully that makes sense just to make sure this is working let's click run that and now let's check if it works so let's go ahead and choose one of these i'm going to choose the first one and click on the delete icon click confirm and then ta-da that has now been deleted from our database so that has worked okay the delete functionality of this app is now working so let's move on so this is all great and of course this table does actually come with some cool stuff that will allow us to search for things with the search bar it will also allow us to filter so for example we can filter by any one of these columns okay like this and we can do you know users do not disturb is exactly zero for example which of course will bring back all of them because i believe they are all zero at the moment but it just goes to show all the options that you have available to you just by using this table widget like this okay wonderful so now that we have that done i actually also want to do my own custom ordering so let's go ahead and use these inputs the select drop downs that i have made the first thing we're going to do is just delete all of these actually we can just use this as a template and let's change out the labels and the values so i want to be able to sort by three things i believe i want to be able to sort by the users do not disturb so let's just make the value the same like so and then let's also set and then let's also order by the customer name in fact there is one more thing we can choose to order by and that is the customer id so let's just go ahead and put the label as customer id and the value as customer id 2. great and let's also have a default value and i'm going to choose for this to be customer id okay so this is looking good uh as the visible here i'm just going to actually put in some js and that is just going to say that only make this visible if the find query data length is bigger than zero okay otherwise i don't want this to be visible wonderful now do we need any actions well yes on change so on change i actually want to run the find query query again because i want to essentially just bring back certain values in a correct order in this table so we're actually going to have to go back to our find query and add some stuff in there for this to work but just for now on the unchanged event or action we're gonna run the find query uh query again okay so at the moment this won't do much uh but we will be fixing that a little bit later for now let's do the ascending or descending option two so let's go ahead and select the second drop down and once again let's change the label to be asc for ascending and i'm going to get this value of one and the label to be d e s c for descending and change the value of this to minus one and delete the other options because i only want two options here and just like before visible is only going to be visible if the find query data length is bigger than zero so essentially saying there's you know more data in there than zero now we run the find query and then i'm also going to change the default value to be one so we're getting the value to be one but the label for that is ascending great so this is looking wonderful and on this we're also going to have to change the on change action and that is just going to be to run the query find query again okay great so like i said this won't do anything now because we have still a bunch of stuff to do and that is be able to run a query based on the two selects that i have written which is why we actually chose to rename these selects as key selects and order select so let's go back into our find query and as the query up here i just want to be able to sort the data so under the sort once again the syntax for mongodb used to have these two curly braces and then i'm going to use the appsmith two curly braces so that the platform essentially recognizes that this is not text and get the key select selected option value okay and then also the order select selected option value so that things are sorted by the option and whether it's ascended or descending thanks to the order select drop down okay great so this is looking good and of course if we run this it will bring back the data in the correct order and now if we go back into our app let's test it out okay so let's go back in here i'm just going to select the table and actually on page change i'm also going to execute the find query uh query okay and also on the search text change i'm also going to run it just as a backup i just want to make sure that this query is being run if we change anything in here so that we're always going to get the correct data coming back i'm just going to refresh this page to make sure amazing so this is now working this is looking good let's go ahead and switch some of these out again so great this is all being sorted by ascending and descending order okay wonderful so another part done we have now finished making this table sort by our customized sort functions let's carry on now the next thing i want to do so we've deleted stuff from the table we've got all the data from the table the next thing we're going to do is actually add customers directly from the platform to this table so to do this i am going to choose another widget it's going to be a button so let's go to the widgets right here and just search for the button widget i'm just going to drag over so that we can essentially connect it to a another modal so for now i'm just going to rename whatever the label is for this button to be new customer and we can actually add icons as well to these buttons so if we scroll down to all the options for a button you will see the option to add an icon i'm just going to put in a plus sign like so and you can align it to the left or right but i'm going to keep it here i quite like that now that we have that done let's go ahead and find another modal in our widgets so once again let's search for the modal and then let's just drag it down here wherever it doesn't really matter and there we have our roso so this model well i'm going to rename this like we did before i'm going to call this insert modal as that's what it's for we're going to use it to insert a new customer to our database okay so there we go and now let's go ahead and connect this button so that if we click on the button so let's get the on click event i'm going to use it to open a modal so just select the open modal option and then the modal we want to open is the insert modal great so now if i click on the button it opens up the insert modal this is looking wonderful it's exactly what i wanted so first things off let's just change the text of this just like we did before to insert row and now that we have that i'm actually going to put in some inputs here as to create a customer we're going to have to have a lot of inputs right so let's go ahead back to the widgets and search for the input widget and let's change the name of this to insert call input 1 again just for readability so that we know what we need to pick out when a time comes to it so in here let's get this some default text at the moment i'm just going to put in this uh hard coded customer number but we actually want to generate this randomly i'm going to show you how to do that in a bit and the label for this is going to be customer id so this is looking good and now let's just space that out a little bit too and great so there we have our first input that's what it looks like and we've hard coded a number in here this is not a placeholder it is a hard coded number and i'm just going to make this a little bit longer just so that it looks like this now while we are here i'm also going to make this feel required we don't need this visible toggle on and great this is looking good one last thing i'm going to do is just make this bolt now with the same technique we used before i'm actually going to copy and paste this input again so let's just copy and paste it and then just drag it underneath like so and i'm actually going to do this a third time too so that we have three inputs just stacked over each other and just move some things around so that it looks a little bit neater and better so i'm just going to move these buttons i'm going to move them down here and space them out equally at the bottom of our module great okay so now that that has been copied i'm just going to rename some of these so we don't need this copy here let's go ahead and change this to insert column input 2 and i'm simply going to change the label as well to customer email id okay and the default text for this well we did default text we don't actually want any default text we just want a placeholder this time so i'm just going to put in a placeholder email email.com okay and same for the third one i'm just going to rename this to insert column input 3 and the placeholder text is just going to be j and we're of course going to change the label to to be customer name okay and let's just re-jiggle this a little bit better so that it looks nicer and wonderful now as promised the default text well i want to randomly generate a customer id so let's keep it the same format that we have been giving so with a little c and then a number which i'm going to generate randomly okay so we're going to use the javascript object math floor to round down a random number okay from essentially anywhere up to ten thousand so math random multiplied by ten thousand will do that for us so if you use this and again using the kylie braces so that appsmith knows not to treat it like text we will get a random number in this case it is 1720. amazing now of course this isn't foolproof there is a chance that someone gonna have the same customer id but this is just for tutorial purposes so i'm gonna say that it's fine for now now let's move on i am going to now use a switch so that we can switch if the user wants to be disturbed or not so let's go back into the widgets and i'm just going to search for the switch widget and just pop it in right here and then change the label to be do not disturb okay so there we go that we have the do not disturb label and okay so now what do we want to happen well on the close nothing that needs to change on this we're just going to close the modal and on the confirm button let's go ahead and change this to insert button because we might want to pick this out later and i just want to make sure that we are picking out the correct button which is why i've called this insert button and now on the confirm button well what do i want to happen well i want a few things to happen i actually want to run a query that will insert this user which way you have to write but let's go ahead and do that because we want a few things and again we want to change them so on the on click just choose the javascript option so we can write our own javascript and let's get up our two curly braces and i'm just going to write insert query run again we have not written this yet and inside i am going to put a callback function that will run the find query after we've inserted our new user so after the insert query runs we then want to run the find query so we'll find all our customers again and then we want to close the modal so once again we're going to use close modal and we are going to close the insert modal okay so while i'm here i'm just going to rename this button to reset button and let's carry on so now let's get to writing our insert query once again i'm just going to click on the add query js create new new communications data and call this insert query now what does our insert query look like well we are going to want to of course the command we're going to use for this is not going to be find documents it's going to be insert documents the collection we're going to work with is our customers collection and the syntax we're going to use well this is mongodb syntax we're going to insert the object essentially into our customer collection so for this we're going to get our curly braces out to create an object and we're going to get the customer id now as the value we are gonna go into okay we're gonna go into the input which we called insert column input one and we're gonna get the text whatever's in there okay so that's what we have done and then the next thing we're going to do is get the costs let's call this customer email id just like we did in mongodb and once again as the value we're going to get our two curly braces up so it knows not to treat this as text i'm gonna go into the insert column input two and get the text okay just make sure that this is all spelt correctly just like we did in the collection okay so maybe it's safer just to copy this and just paste it like so to prevent any spelling mistakes and then again let's get our kylie braces up and get the insert column input three text okay so there we go and now we also need the users do not disturb so let's go ahead and get that one and wonderful and of course we need the curly braces and this time we're gonna get the switch one and then we're gonna get the is switch on and if it is we're gonna return a one and if it's not we're gonna return a zero cool so that is how we are going to control if a label is switched on or not okay so if it is it will assign the values uh one and if it's not it's going to assign the value of zero great so i believe that is it let's just have a quick check to see if this is working so let's go back of course don't forget to run this first and let's go back to here let's click on the new customer okay and then a random id has been generated for us let's put in a customer email i'm just going to put tests at test.com the customer name of course let's again just put in something in here i'm going to put in test user and do not disturb i'm just going to keep that as it is and click submit and now if we search in here amazing our test user has been added this is looking so good everything is working our insert query is working and we have successfully added a new user to our database from the dashboard itself great so now let's carry on the last thing i want to do so once again we've got all the data we've learned how to delete a customer from our database we've learned to add a new customer from our database and i want to edit a new customer in our database so i'm just going to do this to the right of what we have built so far so i'm going to get a container so once again let's search for container let's make this a little bit smaller so that it fits and then i'm just going to drag that in here once again i'm just going to customize this a little bit thanks to the options that we have and i'm just going to give this a border radius of 30. okay so that's what it will look like and now i'm just going to drag in some text so under the widgets i'm going to find the text widget and i'm simply just going to drag it in here like so and call this update selected row okay so i'm just changing the text just so that it represents what we want to say and then of course i can you know customize this further i can give this a heading 2 just to make it a little bit bigger and great now once we have that the next thing i'm going to do is just put in some inputs because we are going to want to change some of the inputs that we have so to do that we're going to populate the input with the selected row that we have chosen and then we also have the option to change it so again under the widgets let's just go ahead and find well actually i'm just going to put in some yeah let's put in the input so let's just drag in the input like so this input i'm gonna name this update column one and the default text well it's gonna be the data table selected row customer id okay so i'm just going to use whatever row is selected on the left to essentially populate this uh this input right here valid i'm going to keep as true and the label for this is going to be the customer id okay and i can choose to make the customer id bold the label bold if we just click this button right here and wonderful so there we have it of course i need more of these so let's use the same technique before and copy and paste this widget to create some more widgets so once again let's rename this to update column two this time make the default text the selected row customer email id and of course this means we need to change the label to customer email id as well okay and once again i'm just gonna copy the third one change this to update column three change the default text to be the customer name and then just change the label to be the customer name as well great so now let's check if this works let's selects a different row and amazing so that is changing everything is looking good now of course we also need the switch so let's search in the widgets and i'm just going to search for the switch widget i'm going to paste it in here and then of course change the label of this i'm going to change it to users do not disturb and then we can change the alignment but i'm going to keep it as it is okay so this is looking good and as the default selected well once again we're going to get up off two curly braces go into the data table get the selected row and get the users do not disturb and if it equals one this is going to be true okay so as none of these really apart from i think one equal one that should be false the switch should not be clicked and actually let's just go ahead and change the alignment why not and great so amazing this is looking good i am liking this so far now of course we need a button to confirm that these are the changes we want to make to the selected row so let's go ahead and go back to the widgets search for a button widget and just drag it in here i'm just going to rename this to update button so that we know what we are working with the label of this uh i'm going to change it from submit to update so that it makes more sense and then on click we're going to execute a query this is going to be a new query one that we haven't written yet called update query so let's go ahead and rename this to the update query and this time we're going to update a document we're going to do this in the customer collection so let's just change that to say customer and we're going to just kind of like we did before so the query we need for this well we're going to go and look for the object id so id and that's going to be the object id of our data table selected row id so just to make sure that we are actually updating the correct document and then what are we going to update well we're actually just going to have to write the same object again with the new values so we're going to update we're going to get up our curly braces we're going to get the customer id and then of course we are going to well in fact we can actually copy this from the insert query as it's just the same so let's go back to our insert query and i'm just going to copy all of this and on the update query just paste it however we are going to change the widget that this is reading from right so instead of insert column i'm going to change this to update column 1 just like this and of course update column 2 as that is the column that we want to read from or that is the input sorry that we want to read from and update column 3 as well as well as switch to okay so just make sure to change those up as well or change them up to whatever you called your own widgets great so let's click run and let's test this out so if i go ahead and just make sure you're selected on one of the rows if i go ahead and just change some of this so first off let's just make sure that the button is actually going to run the query so on click update query run and then on success once again i'm going to find run the query find query okay and also on error i'm just going to show the alert so that we know that an errors has happened and the alert is going to say error while updating resource okay so this essentially is going to show up if there is an error in our uh update query running okay great so cool shall we check this out first off actually let's just make sure that we can read this so to make sure that the label appears on top all you have to do is just stretch out this widget just like so i'm just reformatting it so that we can see things a little bit better and just in general making sure that it looks a little bit nicer for us okay so we are now officially done with this page everything's working we have essentially we have essentially learned how to get data from our database delete data from our portal add a new customer from our portal and update an existing customer from our portal too now the next thing we want to do is be able to send messages to these customers based on their options and what mailing lists they are associated with so to do this let's just go ahead and create a new page so to do this let's just go over here to the left and all i'm going to do is just press on the plus button next to pages and a new page will be created for me once again we have the two options i'm going to choose to build with drag and drop and let's rename the page while we are here i'm going to choose to call this the send messages page so that we know what is happening on this page and now let's get to selecting our first widget in fact we can actually copy how the customer data page looks like i'm just going to select the header and just paste it in here like so which makes our life a lot easier and let's rename this to be the marketing portal okay just like so just so that it's very clear that this is separate to the other page and let's go ahead and change this image too so once again this is one i found on the internet before so you can use it as well or you can use your own it is completely up to you okay so it's a loud speaker here as i feel that kind of symbolizes what this page is going to be about so next up i'm just going to start you know creating what the layout of this page should look like so i'm going to go into my widget i'm going to search for the container okay and then i am simply going to drag in a container just like this and then i want to put some text into this container this text is going to be here and it's just going to show us essentially how many customers we have to work with so let's change the label of this to total customers so go ahead and change the text widget like so and we can also change the text color now if i don't like any of these colors i can choose my own so i'm simply going to change the hex value of this just like that so that it's a lighter gray once that is done i'm just going to drag in another text this time the text of this is going to i'm just going to hard code it to be 0 0 for now we are going to change this later this will be dynamic based on our database and the amount of customers we have in there but for now just leave it as this okay and i'm just going to change this to be a heading one actually let's make it a heading one wonderful so once we are happy with what this looks like i'm just gonna shift these things around a little bit okay just like so i'm just going to put in an icon so i'm going to search for the widgets once again and i'm going to put in a icon button to just paste that in here like this and this is going to symbolize visually what this section is all about so i'm going to search for people so there we have our people icon and i can also change this to be a secondary button just like this and we can also make it more of a rounded square if we want i'm not going to give this any functionality i just wanted to kind of show what this section is all about okay great and let's also give a border radius to the container itself so make sure you're actually on the container when you do this wonderful now again we want to show a lot of other statistics too not just how many customers we have so i'm going to copy this whole container and everything in it using the copy face functionality and i'm just going to drag in wherever i want these other containers so there we go i do want four this is going to store our major analytics if you will so let's change the name of this the first one i want to say reachable customers as this is going to hold the statistics for our reachable customers which is essentially all the ones with do not disturb not on and let's also change the icon for this so i'm going to make this an icon that symbolizes reachable customers just like so so i'm going to choose this one right here now let's move on to the third analytic provider this is going to say do not disturb customers okay so essentially we want to show how many customers which have the do not disturb on and let's change the icon of this to symbolize that to with the blocked person icon and finally on the third one we're just gonna have mailing list count and this will just be how many mailing lists we have on our dashboard and of course let's change this to be some kind of list too great so this is looking good now let's get to displaying the mailing list we have and adding the option to add a new mailing list if we wish as well as show exactly who's on these mailing lists and then add the option to message these people as well so let's do it so once again let's go into our widgets and i'm going to choose the container just drag it in here like so and then i'm also going to choose a second one too so once again let's give the container the border radius this time of 15 and just do the same for the other one as well okay so on the left we're going to have our marketing list and on the right we're going to have all the people that are associated with that marketing list so to do this well let's actually just put in some text to visually show what these two sections are about so let's just drag in some text and i'm just going to rename this to marketing lists okay just like so and make sure this is a heading too just so that it's a little bit bigger and we can read it great and once again for the other side just drag in some text and this time let's give it the text of please select a marketing list to view the users okay and once again let's make this a heading to just make sure that it kind of fits in a nice way now we are going to use a cool widget and this is going to be a list widget which allows to map on different things from our database directly onto a list so if i search for lists and then i just drag it in here like so okay there we go at the moment it just has some default values from the default values on the right we want to replace this with our data from our database okay but to do this of course we're gonna have to put in that data so we will do this in a bit i'm just going to finish off starting this section first because we want to also add a button to actually create a new marketing list as well so in the widgets let's search for button and let's just drag in the button and on the label i'm just going to select new because we want to be able to add a new marketing list and of course we also want an icon to you know symbolize that we're adding a new list as well great so now i think i'm ready to start using our data source which is the communications data to write a another query so first off however let's go back to tv because we need to add some dummy data for us to start working with so back in mongodb under the marketing lists i am going to insert our first markers in list so go ahead and just make sure magazine list is selected as a collection and insert document and once again i prefer to work with the json so just go ahead and select that json option so once again don't forget that comma and what is going to make up our marketing list well each marketing list is going to have a discord web hook because we are going to want to direct anyone from this marketing list to a channel on our discord so as an option you can have so let's go ahead and put discord web hook right here and now i'm going to leave this blank because i will be showing you how to do this later when we start working with the discord web hooks so just leave that blank for now i will come back to it in a bit the next thing we want to do is also add a creation date so the creation date uh well i'm just gonna put in a creation date that i have pre-written for you in the iso format okay so this is the format that we are to use for the creation date okay so there we go and the next thing i'm going to do is put a mailing list and this mailing list is essentially just going to be the name of the mailing list itself so on this occasion it's going to be bugs because we have a mailing list about people who want to know about bugs okay the next thing i'm going to do is just have the mailing list id which once again is different from the document id so let's go ahead and put in a random mailing list id like so and finally we're also going to have an icon okay so once again this is just an icon that i have taken off the internet of a lock you feel free to use this for tutorial purposes or please feel free to use your own and finally we're gonna have the users associated with this marketing list okay so here we are here is the users associated with this marketing list this is going to be an array of users based on their user id that we have written so i'm just going to put in some users in here again this is like kind of random it doesn't really matter which ones you want to use please feel free to use whichever ones you wish okay so i believe we only have up to 10 so i think this is fine for now let's just have these three wonderful so there is our first marketing list i'm just going to copy all of this to make our lives easier when it comes to making the next one and insert this one into our marketing list collection great so this is now done let's go ahead and create a new one once again don't forget the comma and i'm just going to paste this in here right so and reformat it a little bit and i'm just going to change the a few things let's just change the creation date let's change the mailing list name this time it's going to be products let's change the id as well let's change the icon to so once again this is one i found on the internet earlier this is uh one of a loudspeaker which we used before as well so i'm just going to use this same one for this and the users associated with it well i'm just going to add a few in here in fact perhaps maybe let's add all of them let's just pretend that everyone wants to know about the product updates everyone wants to be on the product mailing list great so there we have it i'm just going to do a few more so let's go ahead and insert another document don't forget the comma format change the creation date name change this mailing list name to be something else so this time it's gonna be feedback change the id as well and i'm also going to change that icon this time it's going to just be a hot so let's just go ahead and change that once again you don't have to use this one please feel free to use whatever you wish and sure let's just change some of these users around and insert okay so just one final one now to insert i'm just gonna again use the comma reformat change the creation date change the mailing list to be all about the welcome mailing list change the id and i'm going to change this again so once again just change the icon to changing these few digits around and just adding a cake okay so again i'm not making this up this is one that exists and it's hosted on the internet and the users well we should probably have all the users as you know everyone should be on the welcome list mailing list so i'm just going to add all my users in here like so and just click insert great so wonderful now that we have our mailing list what we can do is of course go back to writing our query so i'm going to use the communications data once again and the query we're going to write is get marketing lists okay and we're going to find documents and then of course the collection this time is not going to be the customer collection it's going to be the marketing list collection that we just added some documents too so if we click run you will see exactly that you'll see all the objects that we made that will represent our mailing list wonderful so there we have it so now if i click on the lists i'm going to just get rid of this data and we're going to use our query that we have just written so the get marketing list query and get the data from it okay so it really is that easy and now we're going to use that data to essentially map out things onto our widgets in here so if i click on the image and get the current items icon it will replace it with an icon from the object that we wrote okay so the current item is a list item thing that will use the data that is coming back to us and then it will just use whatever we call this uh we call the icon with a capital i so that's what we need to get and we can also just edit this text right here so if i select this text and at this time let's get the mailing list itself so i'm just going to copy that and change this to be current item mailing list it will change it to the title of the mailing list how good and how easy is that so now i'm just going to delete this second text i'm just going to reshuffle some things just to make this a little bit nicer and just so that we can perhaps see more of these on the marketing list first page and there we go that is immediately looking better i can see three at least and this is looking wonderful it's doing its job we are seeing all the marketing lists to our disposal wonderful so now that we've done that let's actually get to adding a mailing list from the platform itself similar like we did on the customer data page so to do this we're of course going to need a you guessed a modal so let's go back to our widgets and i'm just going to search for a modal so once the modal has been added again you can just drop it anywhere we're of course going to just change the text in here i'm going to change this to create new mailing list and i'm actually just going to make this a whole lot bigger as we're going to need a few things in here so what do we need in here well the first thing we're going to need is a input we're going to need a few inputs because we're going to have to essentially replicate the objects that we just made from the dashboard so let's drag in our first input and this input uh well let's change the name of this to list id as that is what it's going to show and the default text for this again we're going to randomly generate a list id for this using an m to start with and then the curly braces so that it knows not to treat these javascript as text we're going to use math floor to round down the random number that is generated thanks to the math javascript object and random method when it's multiplied by 10 000. okay and valid well we're going to only make this valid if the list id text length is larger than zero great so that is how we do that and then the label itself is going to just say list id so that it's very clear to the user that the list id goes here and let's just make that bold as well okay so once that is done i'm simply going to copy this okay copy that whole widget let's change this i don't want any default text and i'm going to change the label to be icon url so that people can put that icon in here from the internet to and let's just rename this to icon okay so there we go and i'm just going to put that up here and then just maybe make it a little bit longer as well because urls tend to be quite long great so now let's go ahead and copy this once more and drag it up here and this time i'm going to name this list's name and the default text i'm going to delete as well and the label is just going to say well list name because this is where we're going to store the name of our new mailing list great so this is looking good of course we are not yet done there's still a lot of things to do now once again we need another input this time for the web hook so let's just go ahead and i'm just going to remove this valid and change the label of this to say discord webhook url just like so and of course rename this to say webhook okay so there we go now i'm just going to move these buttons down we can actually select both of them at the same time so that's what i'm going to do and i'm just going to move them down here okay so there we go i've moved them down to the bottom and now i'm just going to use a divider just to space things out a little bit so that is another widget that you can use and of course just make sure that it looks exactly how you want thanks to the drag and drop functionality that appsmith gives us great now i am also going to add an image so that we can essentially preview the image url that we want to use so for this i'm just using the image widget that i am resizing and that will essentially show the image url that we put in the icon url input great so we can do this by simply selecting the image and on the image i'm going to get the icon as that is what we call the icon input text okay so that should now work and the last thing we want to do is just select which customers from our customer database we want to put into this new mailing list we are creating so to do this i'm going to select the table widget i'm just going to grab the table widget and just paste it in like so by dragging it down and of course we are going to get rid of all the generic data that we have here and we are going to essentially use a query in order to get all of our customers again so i'm going to call this something different i'm going to call it get all mailing list customers okay and this just means that we need to write a new query based on the communications data so i'm just going to paste that in here like so i'm going to find the documents and what i'm going to do is look in the customers collection let's just click run to essentially get all our customers back okay so again it's the same query wrote in the first page we've just written again and called it something else so now let's just get the modal up again i'm just going to do so this time by just selecting the modal so just here okay so there's our model again and just click on the table and i'm just gonna make sure to get the data from this query and i'm also going to filter out each customer by the customer user do not disturb equals zero okay so that is what i have done right here and i am also now wanting to add a way to select multiple customers right so before we do this i'm actually going to make the user do not disturb not visible as well as the id and down here on the options i'm going to enable multi-row selection so there we have it now we can select multiple rows essentially i'm also going to just make sure that sortable is not true and enable client-side search is also not true as we don't need this great so this is looking good i'm selecting loads of different rows and on the close button i'm just making sure that the event to close does actually close the modal modal one so this is looking good and on the second button let's actually name this to form button one i'm actually going to add a label and the label is actually going to show us how many customers we want to add to our mailing list so i'm going to use the word add and then i'm going to use our kylie braces to go into table 1 selected row length okay so if we selected three from table one it will show me the number the number three and then i'm going to use the words user to list and i'm just going to show the list name that we have chosen to call this mailing list at the moment of course it's just nothing because we haven't chose a list name to put in the list name input great so this is looking wonderful and now on click we of course want to execute a query and this is going to be a new query and this query is essentially going to let us add a new list to our mailing list so add a new list we want to insert a document the collection of this is going to be the marketing list and the document well we can actually go ahead and copy all of this because that is what we want our object to look like so just go ahead and make sure to format this correctly so i'm just getting rid of all the spaces and of course the web hook we're going to leave this as blank for now and we need to add the double quotes in all the right places too so i'm just formatting this all a little bit just like so for now i'm just going to keep all of this hard-coded until we finish formatting because i'm going to have to replace some of these a little bit so now that we have all of that formatted well the discord web hook we want to get the value from the webhook input or the input that we called webhook and we want to get the text so making sure that's in kylie braces so that the platform knows that this is not text okay and again we're going to do so for the creation date this time we're actually just going to use today's date and we're going to use moment for this moment is a dependency an npm dependency that we can use that has been already put into appsmith for us and to get the correct date we are just going to format it correctly like so so saying that you want the year the month the day and the format that we used in when we were adding the documents manually in mongodb okay so there we go and the mailing list name well this is just going to be the list name text again we are grabbing the input which we have called list name and getting the text that we put in that input and same for the mailing list id once again we get the list id and its text just like we did before and finally we're going to get the icon and this is simply going to be from the input that we called icon and we're going to grab its text and great so now let's check if this works let's go ahead and just select the modal so up here because we haven't actually connected the button to the model yet and we also need to add the users and the users is essentially going to be an array of the users from the table that we have selected so let's go ahead and do that i'm going to call this users and i'm going to go into table 1 i'm going to get the selected row i'm going to map for each element the customer id so we're just going to return back the customer id from each of the objects okay so great so now let's test it out i'm gonna go and find my modal because we haven't hooked up the modal quite yet we're gonna have to find it to get it up and let's put in a list name at the moment i'm just going to put test let's find a test icon that we can use and just whack it in here like so so the preview is working that is good and let's just select some of these so add three items to the list test list and just click the button now on click what do we want to happen well on click we want to essentially run the query add new list run and on success we're just going to close the modal and the modal is called modal one perhaps we can change that later but for now i'm happy with that being modal one so let's run this and check if that has worked and great so there we have it we can now see our new list our new marketing list this is all looking great okay so now that we have managed to get our marketing list and add a new marketing list from the platform itself let's get to actually displaying the users associated with that marketing list when we click on it so to do this this is relatively simple we're just going to grab the table widget so let's go into our widgets and find the table widget and drop it in here like so and we know what to do now we of course need to get the correct data shown up here so to do this i'm going to write a new query so just go ahead and click on the queries on the left and we're going to use our communications data so let's just click on that and let's call this get customer list okay so the get customer list well we're going to find documents we're going to look in the customers collection and the query we're going to write for this well we're going to have to look if the customer id is essentially in the marketing list we have chosen so we can do so with this mongodb syntax let's get up our curly braces let's get the customer id and using the dollar sign in we're going to look and check if the list we selected so the list widget selected item uses okay and if that exists then we're going to return back the customer associated with that id first of all of course we do have to select one so select one from the list one and click run now we aren't getting anything back however let's just try sort by customer id so just put in this right here and just try click run again and that has not worked so we've encountered our first issue we need to debug so a quick way that i would do this is just simply look in mongodb and check why the customer id is not matching the marketing list id and you will quickly see it's because we used a capital c on the customer id and we used a small c on the marketing list so let's go ahead and quickly change that i'm just going to change these to small c's right here as that would be the easier option so i'm just changing all of these to small cs just like so so there is 10 to update i'm just going to quickly go ahead and do that but that is how it would quickly debug if some data issues are happening i'd always go to the source i'd always go to mongodb to check what that data is looking at perhaps it's a string or and you've said that it should be a number it could be a variety of different things on this occasion it's quite a simple fix so i'm just making sure that the id is exactly the same as what we wrote in our marketing list great so now if you run this tada we will get the data coming back to us okay so these are all the users associated with the marketing list i selected on the dashboard itself so that was the bugs and if i now connect this so instead of using this data for the table i'm going to get rid of this i'm going to get up our curly braces i'm going to use the get customers list data and ta-da so now if i click on a marketing list it will show me all the users associated with that marketing list this is looking so good how easy was that now another cool thing we can do is actually change the text in here to show exactly what list we are looking at so if i select this text i'm going to say that i want it to say i'm just going to cut all that because we're going to use that later get up our two curly braces i'm going to get the list one selected row i'm just going to get the mailing list so that shows the name of the mailing list we have selected and if the length is bigger than zero i wanted to show the list one selected row mailing list name essentially so just what we saw otherwise i just wanted to show please select a marketing list to view users and we can actually get rid of this word users here because this users can be used for either one of these so i'm just going to get rid of here and put it there so now if you select on any marketing list it should show the right title in the container on the right great so this is looking wonderful let's carry on okay so now back on the table just here i'm going to hide some of these columns so i'm just going to hide the users do not disturb and the id as we do not need these things and i'm also going to choose to have the primary key column as the customer id i'm also going to choose to write some javascript to where this is visible or not and this is going to be visible based on if the list one selected item id is essentially larger than zero okay so essentially if it exists great and one last thing i'm going to do is actually add a enable multiple rows selection so that we can choose who we want to email from this list as well you can choose to email everyone but also we have the option to not email them if we wish wonderful so now that we have that done we actually need an option to email the users so for this i'm going to use another button so let's go ahead and select a button widget so that this brings up a modal for us so this button right here and let's just go ahead and change the text to say connect with and then we're gonna have the table two selected rows length so make sure that rows multiple length uses so it'll show us exactly how many users we have selected at the moment is one so it will say connect with one users and if we select more that will update to show us how many users we have selected okay so great and i'm just going to change this visible and put in some javascript to only make this visible if list one selected item id length is larger than zero so essentially if it exists and we're also going to make this disabled so again let's enable the javascript if table two selected rows length equals zero so if there is zero selected this button will be disabled okay great so as you will see if i don't select any that button is now disabled wonderful and there we go we have now enabled it again so great and now of course we need some events to add to this button so on click what do we want to happen we're on click we actually just want to open a model this model we are yet to create so let's go ahead and create that modal now so i'm going to go in here and i'm just going to create a new module and let's call this the message modal as that is what this will be it will be a message model that will essentially send a email or a discord message or both to the users we have selected first things first let's go ahead and change the text of this i'm going to change the text of this to say send message just like we were doing previously and the message we want to send well perhaps let's actually make some options so i can do this with a tabs widget so if you search for tab widgets and just place it in here this is what it should look like i'm also just going to move these buttons around so once again i'm going to select both buttons and move them to the bottom of my module and this is to make the tabs stretch all the way out and i'm just going to move some things around in here just to make things look a little bit better once we are happy with the layout i'm going to select the tabs and i'm just going to change the tabs name the first one is going to be the base text that's going to apply text to both the email and the discord and then i'm going to have a separate tab for the email as well in case we want to alter that text and of course again for the discord in case we want that text to be different as well so there we have our three tabs the next thing i want to do is just actually put in a rich text editor into all of these so i'm just going to search for that and i'm going to drop it in here and first off actually let's just put in some normal text so this text is to show what exactly we want to happen here and i'm going to say i'm going to use actually some html to make this bold enter your base text and then just a normal text i'm just going to put you can edit this message for your email and discord from those separate tabs okay so that's just a little bit of an explainer and the next thing we're going to do is actually grab that rich text editor and just put it at the bottom like this okay and of course we can have some default text but i don't want to i'm just going to leave it blank and i'm actually going to grab all of this and copy it and paste it in the email section too and just change the text of this a little bit so that it better represents what is happening here and that is just going to say write your email and this is really all i want in this section i'm also going to have an input perhaps for the subject too so let's go ahead and put in an input and let's put the label as subject and this is of course going to be for the subject of the email and also the one thing i want to do before we move on is actually change this to say email text so that we can pick out whatever's in the text editor and that we know this is coming from the email tab so let's change this to email text and back on the base text let's also change this to base text okay and finally on the disk or tab once again i'm just going to paste everything i did before and just change this text around just so it better represents what is happening here and of course we also need to change this to say discord text so that people know where this has come from when it comes to picking it out later in this tutorial now one other cool thing we can do i'm just going to move this up to show you you can put this on all the tabs or you can just have it here it's actually just show a count of the characters so i'm just going to do this simply by grabbing the text component or widget and dropping it in here and instead of having some text i'm going to use the kylie braces so that this is not text and get the discord text text length okay and then i'm just going to put characters so now we will know how many characters are used in this discord text widget okay great so now i did say that i would want whoever is using this to choose if we want a message on discord or email or both so i think the perfect example for a switch is this use case let's go ahead and grab these switches and i'm just going to drag one in below the tabs okay i want this to be applied to the modal and not the tabs and let's change the label of this to say discord switch and just put in another one that will say email switch and we're going to link this up later and while we are here i'm just going to make the buttons a bit bigger just so they look a little bit nicer and just make sure that they are looking good and on the confirm button we're going to execute a query that will essentially send messages so what we're going to do is actually write a javascript object for this so this is going to be a javascript object as we're not simply just going to run one query we're going to want to do a lot of things in here which is why we're writing a javascript object so let's create a new javascript object and i'm just going to call this object utils just to make it more clear what this is and let's just go ahead and delete all of this code right here as it is not really needed so now the function that we want to write and essentially the javascript we want to call when clicking that button is something called send messages or as we are going to choose to call send messages and what we want to happen is so if the discord switch or the widget that we call discord switch is switched on we want to essentially get the discord api to run so we are yet to write to the discord api so for now we will come back to that and we also want to show a success message so let's define our success message i'm going to call this success message one as we will have two and the message we're going to have is discord message sent to and i'm just going to concatenate the list ones selected items mailing list so whatever item we have selected from the list i'm going to get the entire mailing list and i'm going to concat server so it's going to show us all the uh mailing lists that we have sent messages to discord messages too and we're just going to put this in alert so show alert and i'm going to put the success message one in here just like so okay so this is great but also what happens if the uh email switch is on right so i'm just gonna copy all of this and change this out so if email switch is switched on well we also want the send email query to run which again we are yet to write and let's just change the success message i'm just going to name it two just to differentiate from the other one and i'm going to say email sent to and to users on and i'm just going to again concatenate it and just use the word list at the end and show the alert okay and then i'm going to reset the widget and the widget i want to reset it's the message model and i want to close the modal of message modal so resetting it so we're emptying out all the fields and we're closing that modal okay so that will run after both of those if statements have been checked great so this is looking good let's carry on so now i think we've come to the point where we should write our discord api so let's go ahead and add a new query i'm going to create a blank api and i'm going to call this discord api and we're going to have to grab a web hook of course we don't have any web hooks yet but we can actually just get the value of the web hook so i can do so easily by getting into the list and getting the select rows discord web hook at the moment they're all blank but that is fine as soon as we populate them this will work and as the key and value here i'm just going to put the content type and i'm going to fill this out with application json so make sure to do this like so and of course let's also not forget to get the body because the body is going to be that of the discord uh the one discord text that we have associated with the rich text editor on the discord tab so make sure all that is done and make sure that this is a post request and just click run okay so now that is done let's carry on the next thing we need to do is be able to send emails so again let's write our send email query so to do this i'm actually going to have to create a new resource and just click on the smtp resource right here and let's call this send email so just go ahead and do that and now let's do some configuration for your gmail account so if you have a gmail account i would suggest if you don't have a gmail account i would suggest you get one because this is going to work with the gmail smtp so the host address for this well the host address for this is going to be smtp.gmail.com and the port there is a few so i'm just going to put in two to be sure so the port that we are going to use is the port 5 5 8 7 and i'm going to put in the other one too because you never know the second port is going to be 465 making sure to of course put the host address as the same and we are going to use authentication so authentication is just simply the credentials you use to log into your gmail account because we're going to essentially be using your gmail account to send out these emails so i'm just going to put any free codecamp.org and the password associated with that account so that i can log in to gmail now you would think this would be it but we are not yet done gmail uses some extra security that we're gonna have to configure so i would suggest clicking run and you will get an error message this is good as it will show up in your email address that some funky activity has gone on so usc's sign in attempt was blocked which is great but it also means we need to unblock this attempt so let's secure up blocks let's just go ahead and click and get more information on this and then i'm simply going to scroll down in here click on this button right here i'm just going to verify that this is me and i'm going to allow less secure apps off be on okay so this will allow me to give access to essentially all less secure apps including this one so this means that if i now click test that should now work so don't forget to do that if you have any issues that could be y and let's carry on so now that we have added our resource sent email i'm actually gonna also have to write a query so we've got the data source let's write the query now i have named this to be sent email so let's just name the query send email again so let's write a new query using the send email data source and i'm just going to call this send email again now the command we want to do is send an email that is correct and from the email address well that is just going to be from my email address so i'm just going to put in that in here just like so and the two emails well we're going to have to get the emails from the mailing list that have been selected so once again let's get our curly braces and i'm going to go into the utils and we're going to actually write our own javascript for this okay instead of writing everything in here i'm just going to put in the retails as that is easier so let's call this get emails and let's have the subject of this be communication sent via communications dashboard and that is what this dashboard is called and the body of our email is just going to be whatever the email text is text okay so whatever we have in the email text rich text editor text is going to be body of our email and the subject will never really change unless we want it to okay so if you want you can connect the input that we have chosen for the subject here but that is optional too and oops this should say get emails so let's just change that to get emails and let's write this in our utors file so once again let's actually describe this let's actually write this out here so i'm just going to use get emails and what do we want to happen well what we want to happen is we want to first define the name array and that is going to be the table to selected row and for each row we're going to get the customer email id so each customer email id or essentially each email will be mapped or essentially each email will be stored to this name array and we're just going to return the name array to string okay so now we have essentially got all the customer emails associated with the selected row of the table and this means that we can now use get emails so get emails and just call it okay so let's check if that has worked so i'm just gonna go ahead and try send a message so let's get up on modal click on the email tab i'm actually going to put the default text of this as the base text text and then we can change it if we want and i'm also going to actually do this for the discord rich text editor too so make sure to click on that and under the default text we're gonna go into the base text and just grab the text like so and of course we can edit this if we wish okay so wonderful let's just check this works of course perhaps we should put our own email in here to email ourselves to so let's just go back to the query and i'm just going to put in my own email address okay and just click run so that says that that has been sent successfully let's check it out and great so i have indeed received that email this is looking wonderful this has worked and let's check if it works from the dashboard itself so once again let's just get up the model and click confirm and let's make sure that this actually runs the query runs the thing that it needs to run so let's click on utils and then let's click on these send messages util why is this red r we need a default tab so let's change this to be base text okay great so we're sending emails everything is working everything is looking good there's a last few things we need to do and that is actually just hook up the analytics on the analytics tabs and then actually link up the discord webhook to discord so first let's do the analytics as that should be relatively easy so let's go ahead and select this first analytic and i'm going to write a new query so let's go ahead and create a new query using the communications data and call this get all customers list and this is just going to find documents and it's just going to look in the customers collection just as we've been doing previously and i'm just going to run it and now this means that if i get the kylie braces up and use that query and just get data length it will show me exactly how many customers we have in that list which is 10 that sounds and now we're just going to get the mailing list count this is easy as we've already written this query so just get the query to get the marketing lists get the data length and that's it great next one so for this one we just want to show the users that are reachable i'm going to write a new query for this in fact let's actually write this in the utils file so let's get up our users file again and i'm just going to not forget the comma and write a function that will essentially show us everyone on the do not disturb list so let's call this dnd list and i'm going to save the dnd count and as default it's going to be zero i'm also going to say the reachable and also make that 0. now what we are going to do is get all customer lists so the query we just wrote i'm going to get the data and for each i guess user coming back to us i'm going to get the user do not disturb and if it equals 0 i want to add to the dnd count however if it does not equal zero i'm going to add it to the reachable count okay so great and then i'm just going to return so let's define what i want to return and i'm going to return an array the first object is going to be for my reachable so i'm just going to make an object that has x as the string reachable and y as the dnd count and x and the second object is going to be for my do not disturb and y is going to be the reachable count great and i'm just going to return this so now i can use the util i have wrote the dnd list of course we need to use utils dot that is the correct syntax and i'm just going to get the filter the second item in my array and get y to show the reachable customers and then i'm also going to use the do not disturb and the same thing so i'm just going to copy and paste all that but this time i'm going to go to fast item from my array and get the y value for that okay so seven reachable customers and three on the do not disturb this is looking correct and great so we're nearly there the last thing we need to do is i'm just going to show you how to use the discord web hook so for this you need to actually have a discord account okay so get up your discord account and if you haven't already i want you to go ahead and start a new server okay because we're assuming that you own a server and you want to message everyone on your server on a certain channel about a certain thing so for example i if i have a server and i have a channel all about bugs i want to everyone everyone on the bug's channel about the bugs so to do this let's create a new server i'm just going to put for me and my friends and i'm going to create it and now once i have done that uh let's just i'm going to show you how to do this on the general channel okay of course once you know how to do this you can connect the correct discord web hook to the correct channel but this is a tutorial so i'm just going to show you how to do it and you can do it yourself now on general i want you to go ahead and just click on the cog and once you're on here i want you to get integration and just essentially create webhook and copy the webhood link and once we have that i'm just going to go on the first marketing list and i'm going to get the first object and in here i'm just going to paste it in okay so on the mailing list of bugs that now has a discord web link which will essentially just post to my general channel on my discord but you get the drift so now let's check it out so if i go back in here and make sure that bugs is selected on the mailing lists and click connect with two users i'm just gonna go ahead and click confirm and great so that has now been sent amazing we've done it we've got the whole app working this is looking fantastic i hope you've enjoyed this lesson we have a few more things to do and that is just deploy this so just bear with me let's do it but i hope you've learned a lot so far and i hope you know now how to add your own discord web hook links too so to do this all i'm going to do is just press on this button right here to connect to git and once done i need to get a remote url to a repository well we need to make a repository first so all i'm going to do is click new right here and create that repository i'm just going to choose add a readme and create now once that is done i'm just going to grab this url like so and paste it in here i'm also going to have to give absolute access to my repository so let's copy this ssh key and go back to github and now under settings i'm just going to click deploy keys and add a deploy key and add that key in there and name it and click add key and that's done let's just connect commit and push and ta-da let's preview what we committed and there is our app and it is saved on our github okay so there we have it there's our wonderful app as you can see here we've got two tabs we can send messages we can also filter through bugs and all our marketing channels and of course we can see all our bug users and all our mailing lists and everything like that thanks so much again for watching i really hope you've enjoyed this tutorial and i hope you love your new app