Building a Productivity App on Bubble.io (Everything You Need to Know)

productivity apps are things like Trello Goodreads MyFitnessPal brainscape and mint budget tracker they're designed to help users manage different aspects of their lives and we've seen this type of app take many forms for personal use education and business streamlining that said it can be hard to find the right platform that will allow you to create the customization you need for your specific use case and or industry that's why in this complete walkthrough video we're not just going to be covering whether you can build a productivity app on Bubble I'm also going to guide you through the development of core features so you can work toward launching your own app stick around until the end because we're also going to look at some actual examples of productivity apps some of our own clients have built on Bubble to begin let's understand what a productivity app entails and explore some common and Niche examples these apps allow you to efficiently organize various types of content such as text images and documents while also facilitating collaboration among teens in a business setting they can help you manage important documents track transactions and manage teams as well some examples of these apps include dext QuickBooks and ink file for personal use productivity apps can help you track your health or curate content for personal development we can see this in apps like Goodreads mint budget tracking and MyFitnessPal we're also seeing productivity apps Target education such as brainscape and blinkist these kinds of apps help you manage your study resources they can help you discover or research ideas and also consume learning content in an organized way the Common Thread we're seeing in productivity apps is that they help you organize content so it's more accessible and it's through these core features that are making that happen first category folder and tag management efficiently categorize your content to more easily navigate and retrieve it notes and comments by adding notes and comments to your content you can foster collaboration and provide additional context data Imports being able to seamlessly import data from various sources ensures a smooth transition to apps during onboarding the may even be a core functionality that the user experiences multiple times now your productivity app might require Niche features some of the features we've seen our own clients Implement include user-owned lists so if users can create personalized lists to curate and organize content according to their preferences and their needs they'll find it more valuable and keep coming back data exports you can enable your users to export their data for further analysis or integration with other tools compatibility with the outside world might be a must-have feature for your use case and what about discovering new content from curated recommendations if your app can frequently provide fresh content to your users this is just another capability that'll keep them coming back for more now we recommend our clients use bubble.io to develop their productivity apps and here are a few key reasons why first is custom data management bubble offers robust data management capabilities including custom data structures importing data filtering searching and updates via API also custom data access rules with bubble you can Define custom permissions distinguishing between private and public data personal and shared resources and controlling all of the standard create read update and delete levels of permission bubble also has the flexibility to connect to third Parties by connecting your app with external databases expanding file storage capabilities importing data via apis and more really the extensibility is almost endless a common question we get about building a productivity app is can my users collaborate on content absolutely this is typically supported by specific data structures and permissions you create for your users to view and or edit content created by others the interface's design is completely up to you but the secret to making collaboration work well is really in the data structure as that's the thing that dictates how open and how real-time collaboration can be all right now that we've covered all our bases around what a productivity app entails and a few key components that make bubble the best platform for creating this type of app let's dig into the actual feature set your app will likely need in order to build a reliable productivity app on Bubble strong content organization is a must not only from the backend database perspective but also for the front-end experience your users are going through productivity is often all about organization so I'm going to show you how you can manage categories or tags or a foldering system in bubble these are features we've helped our own clients build over and over again in this bubble application I've created a page where I can manage categories that way I can associate those categories with my books so the books is going to represent any custom content that you might have in a productivity app and I'm also bundling the concept of categories tags and folders under the same umbrella here because really at the end of the day the idea is that you want to organize your content tuned with some kind of a tagging or foldering system it's to help your users find the content more easily right so on the left I have a list of all my categories there's an input that I can type in this is me as a user right this is all the front end all of this is in bubble and I can set up a new category so let's create a category for um let's say travel right that's just going to be a genre for my my book list here immediately this is added to the end of my list I can see that there are zero books tied to that category because I just created it and over on the right if I wanted to let's say associate this book Dune here with that travel category I'll click on this area over on the right right so I've made it kind of intuitive for the user to see okay here are some categories if I want to modify those I can open that up it opens up an editor area for me and I can select from all of my categories choose travel and that instantly saves it and shows me the updated list here you'll see that there's two books that don't have categories so we're going to help the user understand you know instead of showing a blank space there I can click on this button to begin adding my new my first category so in this case I'll choose biographies I'll do the same thing for a good night Moon I might do kids bedtime I might also add let's say favorites right so now all of my books have at least one category we can see the counts are updated in real time remember my new travel category I had zero before now it has one notice how it says one books you can absolutely change this so that if it's in the singular form right it removes that S I just haven't added that logic in now if I want to search by category I've created a custom search system for this now bubble does have some elements that can help um uh make this simpler for you but I really want to show you the level of customization that you have the ability to do here so I'm going to click on something that looks like an input but it's actually not so clicking on this will show me an another group that has listed all of my categories and it actually also has a count of the category of the number of books within that category so I can see that under favorites there are four books I'm actually going to remove one of um let's see let's let's clear out the categories for this one okay so that you can see for uh actually let's see let's get rid of the biographies all together right okay so now the biographies category has zero books and when I look at it here notice that the count is no longer present because the user doesn't need to see a zero there they also don't need to see the parentheses so there's a lot of conditional logic happening behind the scenes to make this really easy and smooth for the user to work with so let's say I want to choose some categories I'll select favorites I'll also select book club now notice what happens when I choose them the the uh the buttons here are colored differently so it's very obvious what I've selected I can also see my choices up here now this little group here is something that is only going to display as long as I want it to be there so I can click out and it'll automatically close right if I show it click out it closes it's a very common type of element to only present it when the user needs it but notice how my selected categories remain there so that I can you know remember that I I'm currently filtered on my list I can also select all of my categories to just check everything easily and I can also deselect right for quick access to those okay so this is a demonstration on the front end of a categorization system or a tagging system that you can Implement in your productivity application again there's a lot of different directions you can take all of this stuff you can put categories in a hierarchy and create subcategories right you can have folders and subfolders you can search through things in kind of a real-time search and have everything update as you select I think actually that's happening yeah that's happening here you can have these filters work with other filters that you might have maybe you want the user to type in the name of the book as well in addition to the category all of this is absolutely under your control so let's jump into the editor to see a little bit more about how this was put together so first of all I always like to go to the data structure because that's really what drives everything so the data types involved are my book data type right that's the my actual content of my app so my book is going to have a title and it's also going to have a relationship to a list of categories these are the two fields that I'm working with at the moment for this demonstration now this list of categories is actually a relationship with another data type so I have category here and that data type just has a name field so if we take a look at our raw data in the database here are all of my books okay so I have seven total in my database those are all the titles and you can see the categories are listed there as well but again this is a relationship field if I go over to my category table this is my full list of categories right so that's essentially what we're seeing on the left here all the categories and um the books on the right so now let's go over to the design okay so on the left hand side I have a repeating group that is going to go search for all of my categories so I can see what I have available to me right just a plain search no constraints here and I can sort by just sorted alphabetically now this is another area where you can really customize this functionality you can make it so that users can create their own categories and basically merge together any categories that you want to provide from just from the platform perspective with any private categories or tags or folders that your users are creating it's just all in your queries of your database and how you structure that content who's going to own what right this is all around privacy rules as well now inside of the cell for the repeating group of categories I have an input here so that if I wanted to change the category name I can by default it will show that category name so let's go back to our preview and let's say I want to call this um let's say favorites and I'm just going to put a I like these something like this okay so you see immediately that updated everywhere because I have a real-time change happening in a workflow as soon as I make a change to this input you'll notice that the the name was updated so everywhere I'm referring to the name it's going to update there as well I'm going to clear this out I could even use an emoji in here let's insert a little heart emoji for our favorites we'll do that one like this okay there you go and see how it updates everywhere okay I'm going to remove this now go back into the editor and uh over to the right side we have our count right so I need to dynamically find how many books do I have that are associated with this category so I'm doing a standalone search here where the category field remember this is that relationship field contains the current cells category and then we will just display the word books there so it'll do a real-time count and that's what we end up seeing here three books four books one book I'm actually going to show you how you can get rid of this s if the count is singular like this if there's only one right because if it's zero we do want to say books zero books or if it's plural anything beyond one three books four books so let's add a condition to this text I'm going to add a condition here we're going to do the same search I'm going to search for books where the category categories contains the current sales category and if this count is one I'm just typing in the number one there then we're going to change the text to Simply say book just like that right so at either say books you know the number of books there or oh we need to have our account in there as well uh we'll type in one book just like that okay so I'm going to refresh the page so that we can see this update it'll make it a little bit more grammatically correct here there we go zero books three books four books and one book for that one all right next to that we have a remove button so that if I wanted to clear out a category this will trigger a workflow uh to delete it right if I don't want it in the system anymore you can also make it so that if there are currently books tied to the category you stop the user from deleting it maybe you show them a pop-up and say hey before you do this you currently have books associated with this are you sure you want to delete and if you do proceed keep in mind that those are all going to be removed from your book or maybe you know discard never mind close it you don't want to change anything so all of this is just in the conditional logic when you click on the button for the workflows So speaking of workflows let's take a look at the ones that we have here for the create button and for the remove for creating I'm going to create a new category and uh save whatever I type into this field here as its name right so I'll go to this button I'm going to edit the workflow and here is our workflow for creating a new category we're going to map that inputs value to the name field for the category this is literally the only field that the category has this data type I should say and then we're going to reset the inputs that way as soon as I create a new category this input will clear out and it's another visual cue to me in addition to seeing the new category show up in the list that something has happened now for the remove let's go to that workflow this is simply going to delete the category really easy this is a data action that bubble has here when we're wanting to work with the database you can create modify delete make copies download things lots of different functionality that you can work with there all right so now let's go over to the right side where we are actually implementing the categories and applying them to the books there's a little bit more going on here let's start with the um this fake input that I've designed here I wanted it to look like an input but it's not actually one so this is actually just a group that contains a text right to act as kind of like a placeholder type of thing a little piece of instruction and in the condition if I have selected categories instead of the placeholder it's just going to tell me which categories I've chosen so we'll talk about this logic here in a second so again just as a reminder if I click on this and I select a few categories that text changes to show me what my selections were and notice that there was also a color change very subtle but I think it makes a difference in keeping the user um you know oriented right where they are in in kind of the settings here all right so what happens when I click on this since this is not an input well I'm actually showing this element here this is a group Focus element this is something that is attached to another element that's why it shows right next to that input of course I can create some offsets if I want a little bit of space there and inside of the group Focus I have another repeating group we have three repeating groups um at least yes three repeating groups on this page the list for the books or sorry the list for the categories the list for the books over here and then another mini list of categories for me to choose from so this is just a search no constraints or anything and inside of this I'm displaying the name of the category and I'm also displaying the count of how many books are linked to that category I'm using a lot of dynamic Expressions here because every category is going to present a different piece of data right so here's the name then I'm going to search for books with this category count them up and I'm going to do an evaluation I'm going to create a a true or false statement if this searches count results in a number that is greater than zero right if that evaluates to yes right because I'm making this a true statement or right if this is true then I'm going to show the count of the books inside of my parentheses if this is not true right if the count is zero then I'm going to leave this blank and that's why we get this here where most of our categories have numbers inside of the parentheses but biographies is blank we don't have the parentheses we don't show zero um okay so that expression is evaluating to false for that particular category and so we're doing another search here based on the category there's also by the way lots of other ways to approach these values with different Expressions depending on your data structure so if we took advantage of list Fields a little bit more I could also cut down on the number of searches that I'm using in these expressions but searches are really kind of the bread and butter of everything and it's important to understand how to use those so you can query your database properly but don't forget about those list Fields because they can also help with your performance they can also help keep your workload down in the conditions uh for the this little button here right this this guy right here so if I hover over this look what's happening the color changes subtly it's this light purple background if I've selected it it's going to be that dark purple okay so that's what those two conditions are doing if this is hovered I'm going to change the background color I'm going to change the font um and then if it's selected we're going to also change the colors now the selection is leveraging a custom State that's a way to keep track of a temporary value it's not something that's updating in the database um it's you know if I were to refresh the page and I let you know if I had last selected this and I refresh the page it's not going to remember my selections it's a temporary value so the custom State lives on my group Focus element I can put it wherever I want and I chose to put it here because it's kind of related to this this uh design here so I have a custom State called selected categories and I've defined it to be a list of categories it's kind of like creating a field in my database but it's more like a temporary field just on this page so whenever I click on my category button here I'm going to trigger a workflow to update that state right so I actually have two workflows here one click if I don't currently have it selected and one click if I do right this one here has a condition if I've clicked on the button and the selected categories that's my custom State doesn't currently contain my category that I've just clicked on then I'm going to update the state to add it to the state list right so I'm taking whatever the state list is currently and adding the current selected sorry the selected category so if this is the first category I'm selecting we have an empty list and adding the first one so it's kind of like saying 0 plus 1 it gives us one once I click on the second one one plus one is two right we have two items in there and then we have the opposite if I see if I click on this and the selected categories already has it then that means that I'm deselecting right it's this situation here I've deselected favorites I'm deselecting save for later so what I'm doing is I'm removing the selected category from my list here I'm using a minus item operator so this custom state is the thing that is changing the data source in my repeating group of books it's also the thing that is changing the the appearance properties of the button right here we go again with this custom state if the list contains the selected category or I should say the cells category then it changes the way that it looks to make it obvious to the user that that's what they've chosen so the repeating group down below this is a repeating group of books the data source is going to search for books just by default and in the condition if I can see that I have at least one category right you see how much repetition is happening here with these Expressions the more you work with this the more you're exposed to kind of the same Trends and patterns and things and um it's it's easier to understand kind of where you need to go um you know for all of your features you just kind of keep your getting your hands on it right so the selected categories if I have at least one count is greater than zero then I'm going to change my data source so I'm going to do my search I'll still sort by their title but now I'm going to add a filter okay now this type of filter is an advanced one because a book can have multiple categories and I can select multiple categories for my filter so when I'm doing a search by category I want to return any book whose list of categories intersects with my selected categories as long as there's one intersection of a category so right there's the we we see that category in both lists in the books category list and in my selected category list for my filter as long as there's one intersection that's a book I care about and I want it to show up in my list here that's exactly what this Advanced filter is doing find me books where it's category list intersects with my selected categories here's our custom State as long as that count is greater than zero that's a book that I want to keep in my search result I don't care which category it is I just want to find one matching one right so if I choose favorites then all of these will show up here even though they have other categories that you know they may not match up otherwise right iRobot is favorites in science fiction whereas where the Crawdad Singh Is book club in favorites so they don't line up with science fiction but they do line up with favorites so if I removed favorites and let's say just science fiction I have a much smaller list here where the Crawdad scenes goes away because I haven't selected a category that is tied to it all right so there we have it there's a look at creating a categorization system you can also use this same these same concepts for tags um you can also use it for folders too if it makes more sense to kind of see it from the perspective of folders if you're associating with documents right it could be multiple items that are are tagged with the same tag or you know organized under the same folder now one more tip that I'll leave you with for this demonstration is the hierarchy system is actually pretty easy to implement let's say you wanted to create a sub-categorization process you'd want to add a new field here to associate any given category with a parent category okay so this is going to be a relationship to another category record with this structure alone you can create an infinite number of levels in a hierarchy okay and I'm going to show you why so let's say we have another category here called Europe all right so I have Europe and I have travel now I want to put Europe underneath travel travel should be the parent category of Europe So within the Europe data record I'm going to search for the travel record so I've related them to each other okay so now in my design I have the ability to show items that belong to another item this is all going to be in the design of how you do repeating groups how you indent things how you filter things because travel doesn't have a parent we can assume that this is at the top of the hierarchy but because Europe does have a parent we know that it is a subcategory I don't necessarily need to have a list of all of the subcategories under travel but as long as I have the relationship from one end here I have everything I need to design a hierarchy system or a folder and subfolder system all right hopefully you were able to take something away from this for your own productivity apps now we often get asked about user-generated categorization the question is typically something like can I have a predefined list of categories that I create but also allow users to create their own and the answer is of course you can the key here is that if you're going to enable categories or a tagging system or folders to be generated then you have to organize them in a data type not in an option set because option sets cannot be modified by your users and make sure there's a relationship between the categories and the Creator so that you have the ability to keep them private to them if you want productivity apps can be found in many Industries and serve a variety of markets this includes organizing content for individual use such as personal development as well as team or group uses such as project management no matter the use case you're still working with user generated content and your users are going to want to mark up that content notes and commenting systems are incredibly popular and useful for productivity apps when we have a client come in with a productivity app it's all almost guaranteed that they'll be building out some kind of a note-taking or commenting system let's dive into a demonstration of how this can be done in a bubble app on this bubble page I've designed a note system for my books so the first thing that I'm going to see here is a list of all of my books and I can easily tell which books have a note versus which ones don't because of the way that I've designed the icon here so there's a conditional statement on this that tells me hey you have at least one note associated with this book and so if I click on it I'm going to now see all of the notes it could be one could be multiple that are tied to this book notice that I am keeping track of which book I've selected here it's going to give me a quick count I have the ability to add a new note and down below I have a list of all of my existing notes this is fantastic for personal record keeping this is something that you can expand to kind of a collaboration setting so you can either leave notes to be visible only to the creator of the note or they can be shared if people are part of a team as long as they belong to the team they can see any notes owned by that team right lots of ways to do that kind of access but the main takeaway here is that there's a relationship between a book and one or more notes and then in the design you can make it easy for the user to contribute further to the the list of notes so for example I'm going to say here um I really enjoyed reading this book now I'm using a plug-in that bubble has called the Rich Text Editor there are other inputs that are more plain text where you don't have to have all of this formatting here but for a system like this I think it's really convenient to offer the user some formatting capabilities uh it you know it can really help them organize notes especially if we're expecting them to type in maybe multiple paragraphs bullet lists things like that so I'll type in my content I'll click on add note and you can see my new note has been added to the list I can edit an existing note so here's an example of some formatting changes here because I'm editing an existing note my button changes to say Safe Note as opposed to add a new note right so I can say within this existing note edit I'm making a change right maybe we'll put that in bold there and I will save that note see how everything clears out for me if I want to go into this note here I don't need to change anything discard changes it returns me back it doesn't change the note go back to this one here I can see that my edit is still there I can also remove my notes I'll click on this button and it just deletes the record so we'll take a look at the backend structure but the notes are individual records in their own table and for any books that don't have any notes right we see the same interface except there's no list down there yet because we don't have any notes yet so here's another book with one note there's another book with one note okay so I'm just passing data from the left side over to the right side so that we can see um the the the information that's actually associated with what I've chosen so let's jump into the editor and see what's necessary here to make this happen so again our data structure we're still working with the books and we're now working with another list field here list of notes so this is a separate data type where we'll have the content of the note and a relationship back to the book okay so in our design I have uh just a repeating group to show my books nothing fancy going on here it's sorting by their title and I have an icon to help me understand which books have a note and which ones don't so by default I have this kind of open icon it's not filled in in the color it does have a just kind of an outline and in the condition I'm going to say if this current sells books notes right this is the list of notes within the book if that count is greater than zero it doesn't matter how many exactly just as long as there's at least one we'll change the icon so I'm using a completely different icon you see the outline versus the filled in one I think that's enough to indicate to the user that um hey this book has notes here now this is a great example of leveraging a list field for a record to cut down on a search right I'm going to sorry it's not not when it's in this data type here I'm leveraging this field this is the one that I'm going to for that condition I could in theory search I could search through the notes data type and filter on the book field I could say search for all notes where the related book equals the current cells book and that would give me the exact same result however it's the next it's a an unnecessary search right if I have the ability to go through the list it's a much more direct thing and it's less workload units that we're using so that's our left side on the right side we have a bit more going on here because this is very Dynamic this right side right we're only going to see information related to what we've selected if you remember when um I was first on this page we actually were only looking at the list of books this group over to the right actually did not show until I selected something that's because I have a condition on it so let's take a look at that group that's this one right here that I've called selected book now this group is acting as a data source because when I click on a book I want to send data over to it dynamically through the workflow that's actually what's happening when I click on that icon that is over here right so we're going to we're going to reset some things inside of the group just to make sure you know if I'm jumping around between my books that the input fully resets that you know I don't have anything hanging around there so that's what these two actions are for and then I'm passing data over to the group on the right right that's my selected book and I'm passing in the current sales book so that dynamically changes the data source of our container now anything that's inside of the container can easily reference the selected book okay so for example I can show the book's title I can show the books note count again notice how we're not doing a search here we're just going to the list field and counting up the items in the list and inside here I have a rich text input I'll point out the plugin that we're using for this is this one right here it's a bubble plugin really great tool for any kind of um you know creating of messages or content emails things like that and you'll see that inside of this we're displaying the parent group's notes content this Rich Text Editor is actually sitting inside of its own group where the type of content is now a note right so we kind of have a mix of data sources here selected book is pointing to book group note is pointing to note that's so that when I select an existing note I can do a very similar thing right I clicked on the icon over here and it passed data to this big group I can do the same thing click on the edit button and pass it over to this subgroup to work with the individual note right I also have a dynamic text here that is by Default hidden right we're not seeing it there but in the condition if I can see that I'm currently editing a note and I know that if the parent group has a data source set to it right there's a record that's been passed to it then I make it visible that tells me that I'm that I you know have something to discard otherwise if it's empty I don't need to see this text and I don't want to confuse my user my add note button is also has a conditional appearance change so by default it'll say add note but in the condition again if I find that I'm I've passed a record to it then it's going to say save note because that tells me that I'm currently editing a note down below we have another repeating group for our notes and take a look at the data source we're not doing a search here we're taking advantage of the list field the parent groups books list of notes right there inside of this I'm displaying some relevant content for the note so I'm showing the creation date just showing it the date without the time although it could format it however I'd like I'm showing a portion of the content so notice how my my node actually gets cut off that's intentional so that this is more legible right they just need a little preview to understand what the note is and then they can hit edit or if you want to say view or something like that you could show the whole thing this part is up to you right I've chosen to cut it off but you can of course show the whole thing and the way that I cut it off was here inside of the let's go to this text I've given it a fixed height right so if there was more content it would have to expand in height to display but I fixed it so that's what cuts it off it prevents it from expanding further I've also got my edit and remove buttons so the edit button is really passing the data over to that note group right just like I did with the sticky note icon this is doing a display data and I'm also setting Focus to the input so that the user can start typing right away that's a nice little convenient touch there and then remove is just going to delete the record right nothing fancy here it's going to delete the note altogether and it will instantly disappear from the repeating group because it no longer exists in the database we don't necessarily even have to update the book record if we delete the record altogether it's no longer going to be in the books list okay now there you have it that's really a simple clean way to manage notes you can do a very similar thing with comments right you think of a comment as multiple notes that are attached to something like a post right or a project type of thing and you can have multiple people contributing to the same entity right so if I am in a book club and uh you know multiple users are talking about the exact same book entity here we can all contribute to the book and I could have information about the author of the content or uh of the note right we could have a conversation here we can really create like a thread system I could also create replies to my notes and comments by having a parent-child relationship between multiple notes or multiple comments a lot of flexibility you have here and again as you'll find a lot of this stuff really just comes down to your data structure how you want to organize the content you want to capture from your user will absolutely dictate how you can present it back to them in these interfaces here all right hopefully you took something away from this that you can apply to your own productivity apps now while messaging applications are an entirely different product category a common question we get related to productivity apps is can I mention collaborators inside my notes or comments or or search through these notes to pull up a past conversation and the answer is you've guessed it 100 yes depending on the complexity of the inline messages or search you might want to incorporate some plugins but these capabilities are absolutely possible in bubble and we've seen our own clients Implement them successfully in their apps productivity apps at their core are data management systems now in bubble you can design your data structure however you want which means you can create records directly inside the app but depending on your use case you may need to pull in data from the outside world whether it's for you as the admin to load the app with a starting library of content or if the user is expected to come in with their own external data in bubble you have several options for importing data let's take a look at an example of how you can have your users import their own data and this is something again we see our own clients creating for their own productivity apps on this bubble page I've designed a data import flow so that a user can come in with a CSV of their own information and have it imported into the app that way they can continue working with the information in the app however it's been designed so here's an example I'm going to click on my file uploader and I'm going to pull in my CSV so here we're working with a list of movies this is going to display a mapping tool now I'm actually using a plug-in for this which I'll point out and the mapping tool is going to help me map any fields that are coming in for my CSV that aren't an exact match with the way that I've structured things in my database in the app now I actually happen to have an exact match so my column headers in my file had title and author and if they were something different I would be able to choose okay for this particular um column let's say that it was name right the word was name I'm going to associate it with the title field in the bubble application or if what I came in with was author name and not just author I could choose hey this application is looking for something related to an author I know that that's the best match and so I'll select that but because I came in with an exact match already this plugin tool has identified hey you've already got it you're good to go we're going to select these for you because they're an exact match it's a very convenient thing especially when you expect your users to come in with different formatted files you also have the ability this is something you can do we see our clients do all the time too because sometimes it's actually easier to provide your users with a template you have the ability to do that so what you'd have is a link element that they can click to download a template for the format so you provide them with an empty spreadsheet where the column headers are already in place right if I click on this it's just going to download um oh it looks like that's a tie to a missing file I might have deleted that one but it would trigger an automatic download to my computer let's actually update that real quick I'm going to come in here so you can see it working if you ever run into this yourself you know how to troubleshoot it so I believe this is a file that I was working with before that I've since deleted so I'm going to remove that um that address I'm going to go over into my database head over to the file manager and I'm going to choose this one here I'm going to copy this address gonna come so that's a previous upload that I've done and I will add that in there and I'm going to refresh my page we'll close this down and what I want to see is that when I click on the link it triggers an automatic download of that file so this link element is pointing to an external URL so it's just the pathway to that file itself and you know with links if it's something that the browser can handle sometimes it'll be able to open it otherwise it'll just download it to the computer and then here's my anchor text so that the user can see what this is actually going to do so I'll click on this here and you see how it opens up my uh file window hopefully you can see this but it's just asking me to type in the name before I save it to my computer okay so that's also helpful like I said if your users may come in with files that don't exactly match your field names and maybe if you don't even want to provide this mapping tool you have you can help them by giving them a template all right so let's move on to the next step here so let's say upload now is going to take the file and here we have things getting parsed out okay so I see the title I see the author I've put these values into inputs in case I want to edit them before I create these items in my in my application now I actually have a book database I know that I pulled in a file called movies I think these are movies here this is just sample data I pulled offline but let's assume that these are books right so a book is also going to have a title and an author and if I click on add to library it has created a record in my database and I have a condition on this button to say hey you're done with this with this one right I can click on another one here that can help me keep track so if I go back into my database just to confirm here and over to the books table I can see that the last two that were added here these are the two that I selected right I have a title an author I don't have categories or a note but this is just to demonstrate you know how one way of presenting an upload like this it doesn't have to work this way I could have also set up a system where once I click upload it sends all the information to a backend workflow especially if I expect many items right I might not want the user to have to go click click click through everything and automatically move through the entire list and create the records one by one right and then after the fact you can present it back the user if you want like once the records are created and they can edit it from there what I'm doing here is just parsing out a smaller list presenting it to the user that so that you can see what is in the file and make a decision from there maybe they don't actually want to bring everything in now in bubble there is an action I'm going to show you here in the workflow under the data area to upload data as a CSV this is one of the most straightforward ways to import a CSV file into your application this is completely separate from this plugin all this action needs is a file so you can reference the file uploader directly if you wanted and you just need to tell bubble which data type do you want to import these CSV rows into so once it runs this action let's say you have a file with a hundred rows this action will create a hundred records one for each row for the data type that you've selected now keep in mind that this is actually a paid feature for this particular action um and depending on the plan that you're on it's going to dictate how many rows you're able to upload per file okay so just be mindful of that now plugins like um this one here can help you work around that limitation if you involve the backend workflow to create kind of a recursive Loop of moving through multiple files all at once so there's a bit more advanced logic to make that happen but it's absolutely doable so what we have here in this design is I've got a file uploader so that the user can choose their file from their device or their computer I already pointed out the link element here right so that they can download that template if you want and down below I have a system for parsing out the details of that CSV okay I've intentionally designed this so that you can see how to create things one by one from this parsed out system the only workflow I have in here is to add directly to the library one one at a time right we're creating a book here author and title before I show you what's going on with the parsing I could have also done the following I could have triggered a workflow that comes with this plug-in oh let me actually point out the plugin let's go over here it's this one right here when tcsv uploader it's wonderful we use it all the time with our own clients who have to upload things or have to have their users upload things and this plugin comes with a workflow event that triggers as soon as it is completed with the with its own kind of parsing of the files right when I click on this button and it's done its thing it can automatically trigger this uh work this workflow event because it will generate one or more files for you from the original file that the user has selected this can actually help you break up a large file into multiple sub-files which is how you can automate a big upload for your users so one thing I could have done was trigger this workflow and scheduled a back-end workflow on the list of files right the type of thing here would be file my list to run on would have been this CSV uploaders list of files and I would have selected a backend workflow that I have um in my application I could have scheduled it to happen you know immediately current date and time and that backing workflow would have run per file the upload data as CSV action and that could have helped me save a lot of clicking right I wouldn't have had to go through one by one especially if this if there was if there were a lot of rows involved okay now I'm just going to remove that because we're going to leave it to what we have here which is just doing a quick little list adding things one by one now in order for me to parse out the title and author into specific inputs that I've designed on the page I'm actually leveraging another plugin called the Json manipulator now Json is not bubble specific this is just kind of a standard format of organizing data and the CSV uploader actually provides the CSV content in a Json structure and I'm using this plugin to help me separate everything out into individual inputs I'm not going to get too much into the Weeds on this one this one is a little bit more advanced to do that but I do want to at least call out that this sort of thing is absolutely possible especially when you start to work with much more custom needs or trickier files that your users might be coming in with you have a lot of flexibility over manipulating data coming from a variety of sources so I'll point out where these elements are from this plugin I have one of the elements here right so this is actually pulling from the generated Json details coming from the CSV uploader this is the first plug-in and we're going to format that content this repeating group here is actually pulling from that formatted content and then inside of each cell we're extracting things further I have one for the title one for the author and ultimately all of that parsed information is just kind of passing its way through to these Inner Elements will ultimately end up in the inside of the input okay that way the user can see what it is their file contains they can edit it if they want and then add it to the library if they want to make that final decision okay so like I said there's there's actually quite a you know a variety of methods and flows and different plugins too that can help you in addition to the built-in stuff that bubble has to pull in um files pull in information via CSV also keep in mind that when you bring in data you can continue to trigger other actions further modifications in your database in the same sequence right like a single import could kick off another ripple effect of actions based on what it is you're doing maybe it sends notifications maybe it updates other records it you know updates counts of things it calculates things there's a lot you can do here also leveraging external tools to help you manipulate Data before you bring it in are Pathways that we've seen our clients use as well it really just depends on what it is you're doing in your own productivity app hopefully you've taken something away from this to understand you know the level of complexity you can really put into this not in a sense of making it harder for yourself but actually in the sense of creating really rich and robust functionality to make your users lives a lot easier now another question that we get around importing data is can I email information to the application so that things are updated this is typically something to make things easier for the users uh you know a feature for convenience and apps absolutely you can now this does involve working with apis you'll want to set up some kind of a shared inbox where your users can send attachments or send a note and your application will receive that parse everything out so that things get updated properly this is actually easily done through zapier as a tool to do a lot of that heavy lifting and then your bubble application can communicate with zapier to parse everything out we've seen it work many times with our own clients it's awesome a great convenience if that's something that makes sense for your application we have the pleasure of working with so many wonderful clients with businesses and ideas for businesses that have been supercharged by their own bubble apps the productivity category is a common one we see for both personal and professional development let's take a look at two real bubble apps from our own clients that contain many of the features falling under the productivity umbrella our first example is Ultimate book list this was created by a client of ours that is incredibly passionate about self-improvement you know getting recommendations for books by experts that they look up to I'm finding related experts in similar spaces that they may have never otherwise heard about there's a lot of search capability here relationships between the personalities and the books themselves is really the thing that makes this work very very well for the user remember the thing about productivity apps regardless of you know what kind of uh Focus the the content is on it's about accessibility of the content it's making it easier for the user to organize things and find things so if I wanted to click on a personality here I'm going to be presented with a detail page and we're going to see similar things for the books as well so this detail page beautiful looking we can favorite the personality I can see what books they may have written maybe not all personalities will have written books themselves but this one does I can see all of the recommendations for them um you know I can favorite them a really great thing about this uh this approach here with ultimate book list is that all of the recommendations are cited uh you know there's a source for every single book here to point us to where this expert talked about the book or wrote about the book right so there's a lot of authority that's happening here I'm going to click on one of these books so that we can see you know the equivalent detail page from that perspective and here we have that similar page so uh you know we've got the author there we have a description um we can save the book mark it as read this is really helpful for kind of keeping track uh you know a personal list of books you can go over to the Amazon link for it and then you can see just from the other side of things all of the various experts celebrities um you know uh anybody who's kind of in the space a tie to this book this happens to be a novel here but uh you know anyone who's recommended uh this book will show up and that way you can kind of go through the web of recommendations and really discover things that you may otherwise never run into on your own this application does a fantastic job of just organizing that content to make it accessible for users so we considered a great productivity application now our next example here also created by a client of ours is archive this is something that helps you organize your projects in a portfolio type of style there's also a lot of collaboration functionality in this particular application so you know consider a scenario where you're an architect and you have all of these various assets and resources images notes right tags for things to document um you know the the status of your project or maybe you know plans that you have for the project that you're collaborating on we have an organization around collections so you know what I was going through regarding tags and notes and folders they've taken a spin on that and created collections because that you know that terminology and the way that things are organized there make more sense for the type of content that's here right you have collaborators that can work together they can communicate things can be linked and you can see kind of the market that this was meant for students professionals institutions this is very much a productivity app because again the organization of this type of content for this Niche makes so much sense to make it easier for these for these users to come together for their information to be housed in one reliable and consistent place right it could be their single source of Truth for all of their project details um so you know you can consider the type of portfolio management system even a project management system but we very much consider this a productivity app as well because it's helping these people stay productive it's helping them move forward in their projects and stay organized makes it easy for them to find all of this information so we love this one as well it's a fantastic example of this type of app all right as you can see there's a ton you can do with productivity apps in bubble and it's an excellent platform for this type of application a lot of the entrepreneurs we help are building this type of app too and from here if you want to take the next step towards launching your own custom app head over to our free extendedtraining at coaching nocodeapps.com Workshop there you'll learn how to properly scope your app use bubble to build it and plan for the launch of a successful app-based business [Music] foreign [Music]

Channel: Coaching No Code Apps

Views: 4,247

Keywords: Bubble, bubble.io, no code, bubble for beginners, productivity, notes, comments, data imports, csv, tags, categories, folders, collaboration, project management, personal development, self improvement, content organization, content management, bubble.io tutorial, productivity app on bubble, productivity app, content management app on bubble, can you build productivity apps on bubble, how to build productivity apps on bubble, bubble.io productivity app, what can you build on bubble

Id: a_X87wSCvfw

Length: 53min 37sec (3217 seconds)

Published: Wed Aug 02 2023