How to build an Investment Management Dashboard on Tadabase

in this video we're going to look at how to convert several Excel spreadsheets and turn them into a fully working database application we're going to have pages where you can manage all of the companies this is going to be for an investment management portal where you'll have all the companies and be able to track all the investments and all the partners and the founders are associated with each investment you'll be able to add companies and also see a dashboard view of what's going on on the day-to-day basis you'll be able to see details about each partner in the firm and all the investments that they made and by the time we finish this you'll be able to build your own database application so let's dive right in and get started we're going to start with a blink app you can see here I have another app for a job board this is for a previous video that we made you can check out that video if you're interested we are going to start with a new app and we will call this one investment management let's give this a cool funky icon we'll make a dollar sign and let's make it green for money one of our goals in this app is to convert our Excel spreadsheets into fully functional app and let's look at our spreadsheets understand better what our apps supposed to look like at the end based on how our data is currently structured so you could see we have one spreadsheet here called partners this is all of the partners are going to be logged in to the app to be able to make an update changes to their investments now these are people that work for our company so we're going to be using a fictitious company I'm actually using some real data some not so I'm just kind of tweaked but I need somewhere to start so I'm using some of this data so this will be the partners and you can see here we have a bunch of columns or names or titles some links their email and bio and things like that and then the next one we have is the companies this is all of the companies that this firm invested in or is considering investing in and you can see that we have the company name the description the link this is going to be an image URL this is the logo for each of these companies the investment and if this company was ultimately acquired we have another category for that finally we also have the investments and this is each investment that was given to each company the date amount and which stage of investment there was as well as which partner oversaw that investment there is one more table for the founders here we just have a table of all the founders and which company they belong to just made these columns a little bit bigger so you could see what what the actual data here is you can see the name of the founder and the company that they're associated with this company must match exactly the name of the company that's in the company's table and when we import this data it will automatically match it and make sure that it lines up correctly so let's get started our first table we're going to do is upload our company's table into the app so I'm going to click here add table now you could also do upload your CSV but I will just choose a table and I'm gonna click import CSV and here I can choose the company's table I'm going to click open and here I'll give it a name let's give it an icon okay and now we'll click Save now our next item would be to line up the columns with a type of fields that they are so for example the name of the company is just a simple text field while the description is likely a long text and the link will be a link which we will choose by going scrolling down and selecting link URL and image URL this is going to be the photo of the logo the actual picture of the logo investment is going to be a radio so we can choose if it's either a seat or Series A Series B and finally acquisitions will be the last field which is a basic text field let's go ahead and click Save and what's going to happen now behind the scenes is going to import every one of these records it's going to download the logo from wherever the sources and then upload it to our image hosting so that took about seven eight seconds and once that's done if you go to the records tab you can now see all of the names of the companies the descriptions the links and all the information that we just uploaded so now we can move forward by going to the page builder and for this we're going to just add a list of our companies and the list is just one of the ways you can display your data now if you actually preview this page by clicking on the preview button or on the eyeball icon on the top it'll open up in another page and you'll see it's gonna look quite messy not quite what we have in mind so let's go ahead and make this look a little nicer so we can go back in the Builder open the companies list and we're going to you know let's remove the URL the image URL and let's remove the investment we'll keep this a little bit clean and under the layouts we want to choose a bordered box on the border to be all-around and the border which would be one pixel and we want the image URL to be the cover on the top and you'll see in one second what that means also on a nice little icon border color finally we wanted to be three columns and we want to show nine records per page so now when we click Save and we refresh our page we have a much nicer looking page so so far we took our very basic spreadsheet with all of the companies and turned it into a nice-looking list now we're going to continue and as we continue adding data we're going to update our page to make it look nice with the new data now the next thing we probably want to track would be which which investments went into which company so as you can recall we have the investment spreadsheet and this has the name of the company that date the amount that was given and the stage also the partner now this partner is going to be the users that are logged into the app and they're going to be the one that's associated with each investment so what we want to do before we add the investments is actually add the partners into the app so we can actually connect that and map it correctly so what we'll do next is we'll actually import the partners so we'll go into the users and go to the imports and we have a users import template we're going to customize this so here you can see we have the name the password email status and role we also want to add some additional fields here to be able to import now import templates if you're not familiar with what they are I'd highly recommend you watch the two-minute video explaining what import templates are but otherwise just a brief bird's-eye view it's a way of letting you create a template that you can automatically import records without having to map all the fields each time so for example here we're saying map everything in the name field in the database to everything that's in the name column and the CSV so here we have inside the partners table we have a name field so we're saying map this to that column so we just need some additional columns so I'm going to go into the fields and add some columns we'll say this will be titled let me see what else we had we also had an image this will be a profile image what other columns we have here a Twitter link LinkedIn and bio so those will be links so we're going to miscellaneous links will be Twitter LinkedIn and the bio will be a long text because it's going to be more than 256 characters likely so it's going to make all its bio I do believe that's all the fields we have here status we'll make it active and in a role we should probably add these roles first as well so we're going to go back into the roles table and we're gonna have new roles so let's see which roles here we have a managing partner I'm just copying and pasting this to save some time partner advisor and venture partner okay so now we have all the same rules that we have in this spreadsheet we also have it as a role inside our database so now we could we could import all of these records without any issues let's go back into the records now you could also just import directly from here you don't have to use an import template in fact I'll actually do that because a little bit quicker for this we're only doing this one time so we're going to say we want to import a regular import I'm going to choose the CSV file we want to be the company I'm sorry the partners and keep all those as a fault we're going to say the name will be the name title Twitter linked and this will be the email not the email field will be how these people log into the app and bio we're actually going to skip the image for now seems like these got unchecked or some reason and status will include and finally the password obviously we don't recommend you putting these types of passwords in and there are password policies you could implement inside the user settings which will ensure that that doesn't happen we're going to go ahead and save you could see the log looks like everything was saved correctly and here we have our columns we forgot we didn't do the profile image I will do that later so now that we have our users who are going to be using this app which we call here our partners but inside database are going to be users meaning they're going to be able to log in to this app by going to log in and then we can restrict specific access based on each user so we're going to now import all of the investments and we could line up each investment to each user so in the data builder we'll add a new table call this investments and we'll import a CSV let's give us an icon as well we could just leave a description blank for now now here's where you have to pay a little bit of attention to make sure you line it up correctly because you want to make sure that the connection fields line up to the right columns in the right table so for example here we have the name this is the name of the company that we invested in so we want to make sure we connect it to the name of the company in the company's table so here we have a connection to companies we want to choose connection to companies and here we have that this is just a regular date field amount as a currency state again will be a radio field and partner we want to connect it to the user to the users name this is the partner that's actually logged into the app now let's go ahead and save this and let's preview our records and you can see the partner this is going to connect to the users table and then the companies as well is going to connect to the company's table so now that we've imported our users and our investments we can now see more detail at each company based on the investments that were made so we'll go to the page builder and inside the companies list table we'll add a link to view the record details page and the reason for this is we want that when we see our companies will have a details page where we can see all the investments that were made in this company so I'm going to go ahead and refresh this page click details and I could see more details about this company so now we're on misfit now inside this company page we want to see all the investments that were made so we'll go back into the details page that was just created and we're gonna add a new row and again we're making the assumption here that you're familiar somewhat with the database and the Builder if not we have a whole video series explaining a little bit more about each part of the Builder all the menu items how the page builder is structured there's also videos on the side that highly recommend you watch and what we're doing now is we're on the details page of a company and we want to see a table of all the of all of the investments so we're going to add a new table and we said we want to see their records connected to this page and we want to see the investments and let me just reiterate why we why we're choosing this option we want to see we're right now in a misfit page and we want to see the investments that were specifically given to this investor to this company so we're going to customize it we'll put in some information and we'll clear the title let's go ahead and save that refresh the page and now you can see we have four misfit there's been two investments on these dates for these amounts and these stages I'm going to organize this top of the page a little bit to make it look a little neater so I've done this is some other videos as well essentially you're just opening up that component and I'm going to shrink the columns and just put things into two different size so we'll put something like this that'll just break up the page a little bit and make it look a little nicer one last thing I'm going to move the logo all the way to the right side so I'll just do this a little bit I had one more column and we'll put the logo in that last column over there to make it look a little clean let's go ahead and save and every time you do any saving over there you have to make sure you refresh I'm just going to remove the title from this and now you could see we have a very basic page where we have all the details about the specific company as well as the investments that were made in each company we go to any company's page I click on the details page and you could see the same information now you could see in the details of each investment you could see who the partner was for that particular investment so here we have Austin and David they were both partners who dealt with each of these investments and we want to do next is actually see the details about each partner and also be able to see all the investments that each partner made so we can go back into here I'm going to add a new page we'll call this partners well choose to add it to the fault layout into the default menu so basically what we're saying is use the same layout as this page and also add it to the top menu which is right here at the top we have a menu we want to say add this page called partners to that menu and you'll see now when we refresh this page we have a new menu item here called partners we don't have anything on this page so it'll be blank but you do see that there is a menu that menu represents the layout and that's when we added it we chose the default layout so here we want to have a table I guess we can do a table you can do different whatever a different view you'd like but I think tables makes the most sense for this one we'll do a table of all of the I'm show a default we don't see the users that's called users here but it's where we're using it for partners and we're going to choose the name to email their status their role and their title we also want a detail space for each of these users and we'll title this partners if we refresh the page you could see all of the partners now I can go into the details of each of these partners so let's go into David's page and we can see all the information about David now on the bottom of this page we want to see all of his investments so we're going gonna go do the same thing that we did in the company details page except we'll do that here again well add a new grid of 12 and we'll say add a table of all of the investments that this investor made this partner made so records connected to this page we want to see the name of the investment that they'd the amount the stage and the partner now again we refresh the page we could see all the investments that David has made while he's at this company as you can see here we have the name of the company that was the investment was made in and we're only seeing their investments that were made by David so if we want to actually see all of the other investors that were involved in this investment we can technically just go into companies find that company and then see more details about it or we can link directly from here so we'll go full circle without having to go and find that company so I'm going to go back into the investments data table we'll open up the left navigation and we say we want a connected page we want to see the company's details page and we'll just let's just make this a little nicer we'll format this as a but then I'll make it outline and we'll call this now here we're not adding a new page we're simply linking from this page directly to this invested into this company and you can see now and click on more details it takes us to this company we could see the other investments and chances are from this page also we can do the same thing we want to see let's say all of other investments made by David or by many we could do that by going into the details page of this company so over here we'll go to the companies open up the details page with this company and then inside the left navigation we're going to do connected page we'll say connect this to the partners details page and here we'll call it partner and again we could format it as a button this just adds a little bit of some aesthetics and let's go ahead and refresh and we could see partner details and now we can go right to minis page and see all her other investments and from here we can go and see all of the other companies and each of their investments so now we can go full circle so we're not going to continue optimizing this app and making it a little bit easier to get some data at a glance so one thing we'd like to do is whenever we're on a partner's page we want to know more information about each partner right from this page for example we want to know how many investments they've invested in and maybe even the total amount so we're gonna go back into the Builder and inside the users table we're going to add a new field so I just went to users and in the fields tab on the top and here I'm going to add a new field I'm going to say counts and we want to say total investments we want to count all the records from the investments that are connected to this partner and we're going to go ahead and click Save what that did is added a new column and you can see here total investment and it has a summary of 7 for all the investments we can then now go into the page builder and the partners page open up that table so we're opening up this table right here and we're going to add this new column into it we don't want it to be the last column so we're going to put a little bit over and go ahead and refresh the page you can now see the total investments each of these partners have seven investments and you can see that is the case when you go into the details you can see each of them have seven that is you could see here that is the case let's also add a summary that sums up all the values for each of these partners so we could see the total that they invest it in and we'll do that again back in the data builder for the users we're going to add a new field and under the number we want to do the sum so we want to say total investment let's actually make that total invested we want the total from the investments table and all the amounts so when are you doing a sum value you need to sum up a number field so in this case we want to sum of the amount of the investment and let's format it as a currency with the with the icon with the dollar symbol in the beginning of it let's go ahead and click Save and again we'll do the same thing we'll add this back into the users table under total as total invested let's go ahead and click Save and again you get the gist of it you got a refresh and you can see it looks like I did it as a suffix by accident let's go ahead and change that we want this to be a prefix so we want the dollar symbol before the money and then you can see the total invested by each by each of these partners and inside the details we can do the same thing we can add that same field here at the top by just opening up that partners page opening up the details and here we can add those columns so let's just organize this a little bit again shrink this column add a new column here and we're gonna put in total investment total investments and total invested so we can see that on the side let's also move the social media icons to the right sorry some media links to the Ray let's move the bio right under the name and the email will also put on the right side we don't need to see the status or the role at this point or the profile image sean trying to keep it a little bit cleaner and now when you refresh the page you can see here's all the information we're going to also add a total summary row on the bottom under the amount so we can see the total invested right below the table so we're gonna do that by going to filters and grouping and add a summary row we're gonna call this total and click Save when you refresh the page now you'll have the total invested here now suppose for example we wanted to group them by their stage of investment so seed or vs. series a we can go into here and there's actually two options I'll show you both the grouping we could say groupid by stage and we could even add a color for doing multiple groupings we couldn't started as collapsed and visible and I'll show you what those options are in one second let's do that by actually instead of telling you let me show you so you can see here we have seen and series a and for each of these will have their own summary rows now if you were to do some of the options in here for example if we started with collapsed then what's going to happen is that when you refresh the page it's automatically going to start with a collapse so you can see how many are underneath each of these and the other option here I just want to show you what that is it is if you do it visible columns so if you could tell right now the amount I'm sorry the stage is not visible we only see it on the top if you select to show that column it's going to also keep the stage as the column inside the table and you can see here stage is also inside this page we're going to keep this all of these settings we just changed except for one thing I want it to be expanded when it loads I'm not gonna say collapsed and you can also add filters filters I'll show you what those are in another able to make a little bit easier so suppose for example in the company's table let's just refresh this make sure it works correctly okay great suppose in the company's table this is actually a list let's actually look at the partners page again and suppose we want to filter this page based on the title so we want venture partner advisor or Managing Partner to be filterable we can easily do that by going to the partners page and opening that table and inside the filters and groupings I'm going to enable the filter and I'm going to call this first item we'll call it managing and for this we only want to show wherever the title is and that's going to be managing partner let's go ahead and save this and refresh the page and now you can see you have managing and it's only going to show you the managing partners and you can do that with each of these titles so let's go ahead and do that quickly okay let's go ahead and again after we did all that you could save it and now you could see you can filter it based on each of these tabs on the top once we're at it I might as well also show you that you can customize the colors for each of these tabs and you can even had or hide sorry you can hide fields based on whatever tab was chosen so for example here we can set a color so a Managing Partner will be purple green for the next one's blue and let's finally make this one orange and save let's go ahead and refresh and you can see it has some added color on the top you could even choose to hide a column so suppose for example if we choose advisor we only we don't want to see let's say their their status so we can go into the table and we could say inside of the filter groupings we could say advisor hide their status column and let's save that refresh the page and you can see whenever we choose advisor the status column is now hidden we change its status column comes back up we could clear the filters you could even choose to not allow clearing the filters so disable the clear filter tab and you could even choose a default so whenever the page loads it'll open a specific specific link so for example we said the partner as a default and we saved that and we reload the page that'll always pull up when the page loads on the partner that's enough about the the filters and groupings just wanted to show you that quickly now we have this app that's totally wide open to the whole internet we definitely don't want to do that we don't want everyone to be able to see you know which investments and all the different things that are going on so let's now start getting into the user security now what we want to do is we want to make sure for example a page like the partners is not visible to the whole world also suppose we're ok with showing specific information about each of these companies but we don't want to show the investments for example so we can do that with the user security and let's do that let's start with this page on this page we have the company name and then we have the investments and this can be applied for many different reasons for example if you want to say you can't see all the investments unless you are a user of this app or you paid us a subscription fee or something like that you can do that with security and we'll do that by going into the companies and inside the company details page we have this new row with all the investment data right that's this row right here with all the investment data we can go into the right here at the top of that row edit it and say only for specific logged in users and then we could choose which roles are allowed to see this so for example if I say only for default users click Save and refresh I will no longer see that unless I log in and I'm also a default user and suppose that role can be customers let's actually do that if we go into the users roles let's call it a new user called customers they save that and then we set the security in this page we can set it to only customers can see this page also assuming we also want our partners and venture partners you can add multiple roles for now we'll just keep it basic the only customers can see it and now I'm going to refresh you'll still see that that that has gone out because I'm not logged in as a customer so our main objective so far was to convert this excel spreadsheets all these Express which I just realized I haven't actually imported the founders table let's do that quickly we're gonna go back into the data builder we'll add a new table we'll call it founders and we're going to import the CSV with the founders and four this is going to be person okay and now in this column we have the name of the company and the name of the user or the founder which will just keep us text field and in the company which will be a connection to the companies the name meaning this is the name field in a company's table we wanted to automatically map to that and just by simply doing that we added all of these records inside of the details of each company I'm going to add a new 12 column grid to see oops going to add a new grid to see all of the founders for each of these companies well customize that we just want to see the founders name and let's refresh the page and now we could see the founders are associated with this company but as I was saying right before I imported the founders table is that we still haven't really added much way much ways to actually add and edit data so right now we had we took all our data from these spreadsheets and we put them into the app and now we have them all here but we don't really have any ways to edit them so there's very there's a lot of different ways you can go about this and we're going to tackle one or two for now suppose we want to separate the adding from the actual pages we can easily do that so we can go into let's say the company's page and let's actually add a new page and we'll call this add company we'll choose a default layout we're not gonna add it to the menu right now because when you add it to the menu it automatically adds it to the top layer we're gonna want it to be a sub item of the company's and we'll do that manually so here we're going to do add company you're gonna add a form for our companies and we'll just do quick add now quick that all quick add just adds all the fields for you and makes it easy to get started with eat with adding the field now if we refresh the page we're not gonna see that page because we didn't add it to the menu it is here though so technically if you want it to go you can go to get the slug URL from the page and then change this and then reload and you'll see that page but instead we wanted to show up underneath companies so we're gonna go into the default layout and we're gonna open up the menu under the menu let's just let's shrink all these guys and under the menu under companies we're gonna click the plus sign I'm gonna say add company and here we want to open up the add company page let's even add an icon of + and let's go ahead and save that refresh the page and now we have a new add company page which guides us directly to this page so now we've addressed how to add additional companies using the add form page suppose we actually wanted to edit some information so let's say for example let's go into the details of a company misfit okay so let's say we want to edit some information here we can actually add direct inline editing to edit something or add additional pages to edit so if you can recall we just had a different table here with all of the investments and we lock that down that only users that are logged in can view that so for the purposes of this I'm just going to undo that for a minute and we'll mark that as public and let's refresh that and now you can see this investment so suppose for example we want to change the amount of the investment for this investment specifically let's figure out two ways I like how we can do that first way is we can open up the investments to add a table and go to the options and do allow inline editing now when we do that it makes everything in this page editable everything in this table I apologize editable so now you can see when you hover it over when you hover over you could see the amount you could click on it and make an update to how much was invested and you can see that updates right away in real time now that's one way to do that there's no way to secure this inline editing based on roles so we don't recommend doing this unless you're already secured the app or the row or the page so the wrong users don't make any changes another thing you can do is actually create a new page that allows you to edit so I go into the investments page right so I'm back in this table again and I'm going to click on the links and edit link when I save that and refresh now we have an edit link next to this one and we click on it we can now make any changes we want to make so let's say we put this back to 150,000 move it to seed around and click Save when you go back it saves it and pulls it right back to this page if you notice when you clicked edit or added us to another page I know some users don't like that so you can also if you like open up the table open up the Edit column and then say show in a pop-up and let's save that now when we refresh click on edit it opens up a nice little pop-up and let's make another change click Save and now it saves it and closes the pop-up I will now continue by customizing and handing our default landing pages so what the users are gonna see when they first come on the page whenever you create a new app is automatically a default landing page and you can see that the default page because it has that star and that's changed here in the settings of each page you can choose which is a default landing page and when that essentially means is that it suppose you have a custom domain if you put in a custom domain here for your app when someone goes to that whatever you set as default page will be what's loaded first in our case the default landing page is here so when you click preview investment management on the very top right that's automatically gonna open up the default landing page which is what comes you know pre-built with every tattoo based app we can go ahead and just delete this we don't need this right now now if you delete this you're going to see that when you preview your investment management app it's gonna say 404 page not found so it's very important to have a default landing page otherwise that won't be found so I'm going to add a new page we'll call this home well add just a default layout and in this page I think we should have a chart so we can show a pie chart of the investments that we're gonna want to know the investments by the stage a total number of Records let's refresh we can see what kind of looks like and here we have a new page let's make this a default landing page so again when somebody loads the page it should show them this page so now when we load it we can see the investments based on this stage let's also add a char on the right side or below it we'll see how it looks to see all the actual investments we're gonna go back to this home page let's compress let's shrink this column a bit I'm going to want to do it side by side so here we're gonna add a new column on the right side we'll expand this the full width of the page now these are video guides here as you probably have seen in some other videos you can hide that if you need more room by just going to the settings and clicking hide help window so now when you go back to the page builder you'll have more room to work with it so now on the right side also let's say I want to see a bar chart of all of the investments by their stage so we'll say by krupa by the stage and then do the total amount let's refresh now we can see the total investments for each stage that's been through this company let's go ahead and save that and again when we refresh the page here we could see whatever we want to see if based on the the amount how many investments per stage and how much invested in each stage now the ways our app is currently set up any user can sign up and even if we restrict pages if they're allowed to just sign up on their own that can be a security issue so just be sure to go into the settings the user settings and ovair you can just disable the user registration so nobody could sign up for your app without your consent keep in mind if you do want to secure the app you could do that through several different ways I showed you earlier how you can do through the rows and permissions but you can also do it through the pages and here you can do that open up any page and you could say who can you view this app this page and you can choose only logged in users or users and specific user roles you could even add page rules to say that if somebody comes to a certain page and certain criteria is met for example if the user is a specific role then automatically reroute them or show a message or redirect them to another website and it even had further conditions we'll get into that later in this video I'm going to add two or three more features in this in this app and then we're going to finish this first part of this video so back in the home page or landing page we're going to add a new row and just to add some more data at a glance so we can have some beautiful reporting right when we come into on the site we're going to add some cards so I added a new row with three columns and here I'll add a new component we'll call this one we'll use a card for this one and here let's just add some summaries so we can see for example the total companies we want to say the count the total records we don't need to auto refresh auto refresh we'll just simply you know do a refresh everything every little bit but here we just want to see the total records the total companies and we'll title this companies now you have a lot of a lot of different settings you could do here to make it look as nice as you like you know adding custom headers and footers and all the different stuff in the content we're going to just leave this somewhat basic for now so we can preview it and make the changes like that and we're gonna go back here preview this page and now you can see we have companies 32 and let's do some other summaries like total investments and total founders so another card with the investments and that should be good for this one and let's say we do total founders or us to do total manager total users many total partners and you can even add conditions you can say only count where the you know where the title is managing partner so let's just call it let's just change it I'm not exactly sure why you'd want to know this kind of data I'm just trying to show you here how you can customize and add cards and summaries and tables and stuff like that anywhere you'd like and customize it however you want it to appear on the page so far everything we've designed has been using a fixed layout which means that it's not taking out the full width of the page you can see on the right and left we have some white space you can easily customize that by opening up any row and setting it to fluid and what that will do is only set that one specific row to fluid so you can see now this shows up all the way very wide while this does not I'm going to change that I just wanted to show you that because it seems to be very much necessary in certain apps where you have a lot of data at the display okay the last thing is we're going to add this pace to the menu up top so we're going to do that by going to the default layout opening up the menu and adding a new a new menu item we'll call this home or let's actually make it dashboard and we'll link it to the home page we want to add an icon of dashboard this one and let's move it to the on top of the company so it should be before the companies and now we have our dashboard page our companies and our partners this will conclude the first part of this video in our next video we'll dive deeper and keep building up this application and hopefully after 2 hours of development you should be able to have a fully working dashboard to manage all investments all investors and all of the partners as well as add and track tasks which will do it the next video finally I just wanted to point out that there are many videos you can visit and see on YouTube to watch and understand different parts of working with the platform each video is generally under two to three minutes and will explain to you specific features in depth with some great visual help we also have a support forum where you can go and ask your questions see some solutions and as always you can email us at support at a debate that I owe and we'd be happy to answer any questions you have [Music] you

Channel: Tadabase No Code Web App Builder

Views: 1,852

Rating: 5 out of 5

Keywords: How to build an Investment Management Dashboard on Tadabase, How to build a job board app on Tadabase, tadabase builder overview, no code web app builder, easy online database builder, knack.com, kintone, quickbase

Id: GLC0HObfFeg

Length: 45min 8sec (2708 seconds)

Published: Thu Oct 24 2019