Hello everyone here on the free co camp channel. 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 Anna Kuba and I’m a software developer as well as content creator online. You can find me on my channel or just here on free code camp. 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, AppSmith, 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 is made 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 I’m going to 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. We 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 text. 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 ones 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 in 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 then 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 that has 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 thing I’m going to do is actually use a 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 two 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 order 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 AppSmith, 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 order 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 going to 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 have previously done. But we are going to have to create a new project. So what should we call this project? I’m just going to 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 going to 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 sake of 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 and your kubo. And the password I’m going to use is 1 2 3. 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 zero 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. Well, 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 going to store all our mailing lists for our app. And just click confirm again. And once again, our third collection. I’m going to have three collections for this project. It’s going 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 going to 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 will allow us 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 disturbed. 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, email ID 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 one 01. 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. So there we go. There we have our first 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 zero 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 going to 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 1 2 3 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 AppSmith page and click confirm. And let’s now go back to AppSmith, grab the other one, and then once again go back into MongoDB 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 are 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 called 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 customer cumulations 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 curly braces. So these two curly braces are an appsmith 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. data. And tada, that has brought back all our customers. It has arranged it in columns for us. It’s got all the data. Is very intuitive. This is wonderful. Okay, so this is looking good. The next thing I’m 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 want to 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 dropdown 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 let’s just round it off a little bit, too. So, of course, this has no functioning anality at the moment, but I really wanted 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 modal 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 modal 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 chain some queries together which is why I am 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 modal 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 squiggies 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 modal so that we can open it. So I’m just going to do that now quickly just on click event and change that. While I’m here, I’m also going to 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 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 tada, 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’s just going 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, these select dropdowns that I have made. The first thing I’m going to do is just delete all of this. 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 uh 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 uh and add some stuff in there for this to work. But just for now on the onchange event or action, we’re going to 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, too. So, let’s go ahead and select this second dropdown. And once again, let’s change the label to be as c for ascending. And I’m going to get this value of one and the label to be dc 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 when 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 onchange 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 dropdown. 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 I want 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 modal. So this modal, 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 model 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 one. Again, just for readability, so that we know what we need to pick out when the 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 hardcoded 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 hardcoded a number in here. This is not a placeholder. It is a hardcoded 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 do is just make this bold. 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 modal. 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 the 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 protected]. Okay. And same for the third one. I’m just going to rename this to insert column input three. And the placeholder text is just going to be Jane do. And we’re of course going to change the label too to be customer name. Okay. And let’s just rejiggle 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 uh object math floor to round down a random number. Okay. From essentially anywhere up to 10,000. So math random multiply by 10,000 will do that for us. So if you use this and again using the kali braces so that appsmith knows not to treat it like text. Tada. We will get a random number. In this case it is 1,720. Amazing. Now of course this isn’t foolproof. There is a chance that someone going to have the same customer ID but this is just for tutorial purposes. So I’m going to 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 to 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. We have the do not disturb label and okay, so now what do we want to happen? Well, on the close, nothing 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 cuz 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 yet to write. Uh but let’s go ahead and do that because we want a few things. And again, we want to chain 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 it’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 going to go into okay we’re going to go into the input which we called insert column input one and we’re going to 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 c let’s call this customer email ID just like we did in MongoDP. 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 going to go into the insert column input two and get the text. Okay, just make sure that this is all spelled 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 curly 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 going to get the switch one. And then we’re going to get the is switched on and if it is we’re going to return a one and if it’s not we’re going to 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 value 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 test.com. The customer name, of course, uh 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. I now 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, too, 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 going to name this update column one. And the default text, well, it’s going to be the data table selected row customer ID. Okay. So, I’m just going to use whatever row we selected on the left to essentially populate this uh this uh 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 we did before and copy and paste this widget to create some more widgets. So once again, let’s rename this to update column 2. 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 going to copy the third one. Change this to update column 3. 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 select 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. And 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 our 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 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’s 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 be 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 one 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 three as well as well as switch two. Okay, so just make sure to change those out as well or change them out 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 list 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 loudspeaker 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 widgets. 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 hardcode 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 going to shift these things around a little bit. Okay. Just like so. And 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. So, just paste that in here like this. And this is just 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 uh 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 have the do not disturb on. And let’s change the icon of this to symbolize that too with the blocked person icon. And finally, on the third one, we’re just going to 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 too. 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 list 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 going to have to put in that data. So, we will do this in a bit. I’m just going to finish off styling 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 another query. So first off however let’s go back to MongoDB 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 marketing list. So go ahead and just make sure marketing 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 uh 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 going to 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 going 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 we’re 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 going to 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 uh 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, too. 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 the 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 going to be feedback. Change the ID as well. And I’m also going to change the icon. This time it’s going to just be a heart. 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 going to again use the comma, reformat, change the creation date, change the mailing list uh 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. Just 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 is 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 to. So if we click run, you will see exactly that. You’ll see all the objects that we made that will represent our mailing lists. 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 a 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 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 it, 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 could 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 uh 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 the icon in here from the internet too. 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 cuz 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 name. And the default text I’m going to delete as well. And the label is just going to say well list name cuz 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 web hook URL just like so. And of course, rename this to say web hook. 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. Uh 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. And I’m going to find the documents. And what I’m going to do is look in the customers collection. just click run to essentially get all our customers back. Okay. So again, it’s the same query we 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 modal again and just click on the table. And I’m just going to 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 rename 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 uh mailing list. So, I’m going to use the word add. And then I’m going to use our curly braces to go into table one selected row length. Okay. So if we selected three from table one, it will show me 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 new list. Uh 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 hardcoded 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 web hook input or the input that we called web hook and we want to get the text. So, making sure that’s in curly 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 we 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’re getting 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 one. 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 going to go and find my modal because we haven’t hooked up the modal quite yet. We’re going to 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 and 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 and in we’re going to look and check if the list we selected. So the list widget selected item users. 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 will be the easier option. So I’m just changing all of these to small C’s just like so. So there is tend 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 tada. 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 it shows the name of the mailing list we have selected. And if the length is bigger than zero, I want it to show the list one select a 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 uh enable multiple row selection so that we can choose who we want to email from this list as well. We 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 model 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 going to have the table to selected rows length. So make sure that’s rows multiple length users. So it will show us exactly how many users we have selected. At the moment it 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 2 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? Well on click we actually just want to open a modal. This modal 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 modal. And let’s call this the message modal as that is what this will be. It will be a message modal 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 modal. 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. Uh, 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 uh 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. Uh 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 Discord 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. Is actually to 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 is not text and get the Discord 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. uh 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 list that we have sent messages to, Discord messages to. 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 going to 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 use this 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 is the message modal. And I want to close the modal of message modal. So we’re 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 a 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 five 587. 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 Anna at freecode.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 going to 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 you will see sign in attempt was blocked which is great but it also means we need to unblock this attempt. So less secure app blocked. 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 why. And let’s carry on. So now that we have added our resource send email, I’m actually going to 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 send 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 communications sent via communications dashboard as 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 utos 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 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 going to go ahead and try send a message. So, let’s get up our modal. Let’s 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 going to 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 the send messages util. Why is this red? Uh, 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 the 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 web hook to Discord. So, first let’s do the analytics uh 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 curly 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 utils 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 zero. 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 uh I guess user coming back to us, I’m going to get the user do not disturb and if it equals zero, I want to add to the DND count. However, if it uh does not equal zero, I’m going to add it to the breachable count. Okay. So, great. And then I’m just going to return. So, let’s define what I’m going 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 go to 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 first 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, uh if I have a server and I have a channel all about bugs, I want to email everyone on the bugs 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 web hook and copy the web hook 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 hub 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 going to 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 to 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 Appsmith 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 tada. 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.