HVAC Designer Application Features
HVAC Designer Application Features My name is Adam and in just under six months I have created a project management app using the Bubble platform. I have zero programming training or experience and want to show you how many cool features I’ve used that can be built into a Bubble app. Before I do I want to say that we considered many platforms for our new app among them OutSystems, Mendix, Appery.io, Configure.it, Ragic, Appypie, Eachscape, Alphasoftware, Zengine, Buildfire, Codiqa, Viziapps and more. Of all of them Bubble was the easiest to navigate, had the most functionality and the best price! In time we are hoping for the capability to release native apps for our phones too, but for now this works great. Guide To begin I’ve created a guide that users can see to interpret the various layouts, buttons and commands.
Navigation All pages can be viewed from a custom sidebar navigation that expands and contracts:
As you can see there are quite a few pages in here that can offer a small business a lot of use! Timesheets A common need is managing payroll and timesheets. Using the calendar plugin makes this easy to set up:
Clicking on a day will bring up a popup to create/edit the hours for that user on that day. Also there is a bulk entry area for those who enter multiple hours at a time. It is possible to even assign schedules to people and add hours every tues thursday for example. We have standard pay periods ending on the 15th and last day of the month. Hours are submitted to payroll using a button and once they are confirmed by the manager it is noted in the bottom right list as a checkmark. At the top right is a small messaging system to ask the boss how many unpaid vacation hours are available. He can respond and it will show the available vacation hours in the top right. Payroll Payroll is viewed by the manager on a separate page. Employees are listed and by clicking on an employees name, a popup will show a calendar with their hours worked. From here the manager can mark hours as paid, respond to requests for available vacation time as well as send emails to anyone that hasn’t submitted their hours yet. If an employee missed a pay period, they are marked as inactive or on holidays, which removes them from lists elsewhere on the platform:
Contacts Most businesses need to manage contacts so I have a listing of our contacts according to their client type (for us is Builders vs. Architects, etc.) Clicking o the name of a contact opens a popup for further editing. Multiple emails, contact persons and phone numbers can be entered. The billing information is used later to populated payment information and invoicing later on. Similar pages are created to handle equipment filtered by brand and model name and show specifications.
Services Our business is service based, so we have somewhat complicated pricing. Some prices are flat fees per item, some are based on square footage or by the hour. Here is a sample of a service that has various pricing brackets based on square footage. Optionally brackets (eg. first 10 units at one rate, next 50 units at another rate) can be switched to pricing tiers (all units at one rate).
Each of our services also has what Ive called tasks. These are items that are used for project management to be assigned to employees and shown as complete or not. Project Manager The meat and potatoes of our app is the project management page which we call our Job Board. This page is loaded with functionality and I’ll highlight a few:
1. An overall filter to show active vs all projects. Other filters can sort out only the projects that have tasks assigned to the current user. 2. A summarized list of tasks assigned to each user. This gives the project manager a sense of how much workload an employee has. 3. The small chat bubble turns orange if there is a conversation on this task, red if there are unread comments. Clicking on it opens a general notes section and a chat thread organized by task. Chat messages show the time it was posted as well as who has read
the message.
4. The small chevron allows for tasks to be increased in their priority, thus ranking it higher in the list. Employees can work from the top down to complete a days work. 5. Unique order numbers created for each order. Formatted numbers are also created for invoices and PO#’s that also symbolized the month and year of the project (eg. 160412, the 12th project of April 2016). 6. Files are attached using the multifile uploader. The download icon turns orange if there are files present. Files are usually dragged from an email to a popup window when a new project is created.
7. Filepath generator. This is a string of text that is copied to the clipboard and then pasted into a file explorer. Filepaths are organized by year, client type and client name and then project name as the project is created. 8. Task view: Services requested are shown with the tasks that employees have to do. Blue means complete, grey means unfinished. A progress bar shows how many are complete thus far. This information can be viewed by the client on their own project progress page. The colored block to the left denotes how many days until due date. 9. The PDF icon generates various forms from the data entered. These forms can be printed to pdfs from the browser or even using workflows in Bubble. This saves us having to copy the data to excel to print out forms and inhouse paperwork. 10. Invoice button. This button will allow the user to select which month to file the invoice under and generate and invoice. Prices will be searched for the services and the invoice will show the total amounts based on the units put in.
Invoicing Invoices are edited and viewed on a separate page. They can be filtered by month and year and colors are used to show paid from unpaid invoices. Invoice numbers are assigned and services can still be added or removed at this stage. With one click on a button an invoice can be printed using a Bubble workflow. It can also be emailed to the user with scripts based on conditions of the services they chose and their payment terms.
We currently use a link in the email for them to click on to pay with. We use a custom link shortener that is a function of our own server here at the office. By using Bubbles API connector, we can do a url call that returns the shortened url with our domain. This short url can then be tracked as well. Revenue and Accounts Receivable Various reports can be generated for our accountants and managers on a dedicated page.
Invoices and payments can be listed by month, quarter or year as well as searched for by invoice number. A full and up to date Accounts Receivable is always at hand. Invoices can be shown by clicking on the invoice number and in time, perhaps reminder emails could be sent to clients for unpaid invoices when their credit terms come due. Searchable Archives After projects are done and invoiced they are archived. Bubble’s Any field search works most of the time, but there are a lot of heirarchies in my dataset, so having custom field searches allows me to pull up more information quickly.
Subcontractors Lastly, there is a page to edit company info as well as manage employee information. Roles can be assigned to employees that affect which pages they can view, which lists they show up
on and whether they are active or not. Also we have created a space for subcontractors. Subcontractors unlike employees can have their own employees.
There is also a settings page for what data the subcontractors can view. Some can only see the projects that are assigned to them, others have more access into our contact information and have editing capability. Privacy Each of the data has a field that lists which companies can view the data. This way all the data that relates to our company is private, viewable only to us and the other users in a company that we allow. It is possible for other companies to create an account and all of their data would be private to them and it would not interfere with our data. Currently I have restricted the creation of new accounts to be only created by us, but the functionality is there for others to use our same platform. Interaction with other Software At the office we also work with Excel and design software such as Wrightsoft. I have created various popups to show how the data in Bubble could be entered into the other programs. For wrightsoft I used an image of a data entry page and layed it behind some clear input fields. Users can copy past the info into the other program in a clear way.
In time we hope to move as much from Excel onto Bubble, but for now we also have a csv string that is generated on the bottom. This can be copypasted into a cell in Excel which is then used to populate the excel spreadsheet instead of having to copypaste cell by cell. Embeddable Forms Right now we have a separate website, but in time we may incorporate this into our Bubble App. It is possible to create a form page on Bubble and then use an iframe on our website to embed the form into our website. This means that services can be ordered on our website, and the data from the order form is automatically in the Bubble database because it was using a Bubble page! We previously had been using Wufoo, but now we can just use bubble complete with multitabulated forms, conditional logic and more!
We hope you found this useful and gave you some ideas. For now our app is private, but Ill look into making it a public app so you can have a test drive yourself. Because the data has privacy settings going to the app doesnt have a signup option and most pages will appear blank if you arent registered with us. A few simple changes and this could be useable by anyone.
Navigation All pages can be viewed from a custom sidebar navigation that expands and contracts:
As you can see there are quite a few pages in here that can offer a small business a lot of use! Timesheets A common need is managing payroll and timesheets. Using the calendar plugin makes this easy to set up:
Clicking on a day will bring up a popup to create/edit the hours for that user on that day. Also there is a bulk entry area for those who enter multiple hours at a time. It is possible to even assign schedules to people and add hours every tues thursday for example. We have standard pay periods ending on the 15th and last day of the month. Hours are submitted to payroll using a button and once they are confirmed by the manager it is noted in the bottom right list as a checkmark. At the top right is a small messaging system to ask the boss how many unpaid vacation hours are available. He can respond and it will show the available vacation hours in the top right. Payroll Payroll is viewed by the manager on a separate page. Employees are listed and by clicking on an employees name, a popup will show a calendar with their hours worked. From here the manager can mark hours as paid, respond to requests for available vacation time as well as send emails to anyone that hasn’t submitted their hours yet. If an employee missed a pay period, they are marked as inactive or on holidays, which removes them from lists elsewhere on the platform:
Contacts Most businesses need to manage contacts so I have a listing of our contacts according to their client type (for us is Builders vs. Architects, etc.) Clicking o the name of a contact opens a popup for further editing. Multiple emails, contact persons and phone numbers can be entered. The billing information is used later to populated payment information and invoicing later on. Similar pages are created to handle equipment filtered by brand and model name and show specifications.
Services Our business is service based, so we have somewhat complicated pricing. Some prices are flat fees per item, some are based on square footage or by the hour. Here is a sample of a service that has various pricing brackets based on square footage. Optionally brackets (eg. first 10 units at one rate, next 50 units at another rate) can be switched to pricing tiers (all units at one rate).
Each of our services also has what Ive called tasks. These are items that are used for project management to be assigned to employees and shown as complete or not. Project Manager The meat and potatoes of our app is the project management page which we call our Job Board. This page is loaded with functionality and I’ll highlight a few:
1. An overall filter to show active vs all projects. Other filters can sort out only the projects that have tasks assigned to the current user. 2. A summarized list of tasks assigned to each user. This gives the project manager a sense of how much workload an employee has. 3. The small chat bubble turns orange if there is a conversation on this task, red if there are unread comments. Clicking on it opens a general notes section and a chat thread organized by task. Chat messages show the time it was posted as well as who has read
the message.
4. The small chevron allows for tasks to be increased in their priority, thus ranking it higher in the list. Employees can work from the top down to complete a days work. 5. Unique order numbers created for each order. Formatted numbers are also created for invoices and PO#’s that also symbolized the month and year of the project (eg. 160412, the 12th project of April 2016). 6. Files are attached using the multifile uploader. The download icon turns orange if there are files present. Files are usually dragged from an email to a popup window when a new project is created.
7. Filepath generator. This is a string of text that is copied to the clipboard and then pasted into a file explorer. Filepaths are organized by year, client type and client name and then project name as the project is created. 8. Task view: Services requested are shown with the tasks that employees have to do. Blue means complete, grey means unfinished. A progress bar shows how many are complete thus far. This information can be viewed by the client on their own project progress page. The colored block to the left denotes how many days until due date. 9. The PDF icon generates various forms from the data entered. These forms can be printed to pdfs from the browser or even using workflows in Bubble. This saves us having to copy the data to excel to print out forms and inhouse paperwork. 10. Invoice button. This button will allow the user to select which month to file the invoice under and generate and invoice. Prices will be searched for the services and the invoice will show the total amounts based on the units put in.
Invoicing Invoices are edited and viewed on a separate page. They can be filtered by month and year and colors are used to show paid from unpaid invoices. Invoice numbers are assigned and services can still be added or removed at this stage. With one click on a button an invoice can be printed using a Bubble workflow. It can also be emailed to the user with scripts based on conditions of the services they chose and their payment terms.
We currently use a link in the email for them to click on to pay with. We use a custom link shortener that is a function of our own server here at the office. By using Bubbles API connector, we can do a url call that returns the shortened url with our domain. This short url can then be tracked as well. Revenue and Accounts Receivable Various reports can be generated for our accountants and managers on a dedicated page.
Invoices and payments can be listed by month, quarter or year as well as searched for by invoice number. A full and up to date Accounts Receivable is always at hand. Invoices can be shown by clicking on the invoice number and in time, perhaps reminder emails could be sent to clients for unpaid invoices when their credit terms come due. Searchable Archives After projects are done and invoiced they are archived. Bubble’s Any field search works most of the time, but there are a lot of heirarchies in my dataset, so having custom field searches allows me to pull up more information quickly.
Subcontractors Lastly, there is a page to edit company info as well as manage employee information. Roles can be assigned to employees that affect which pages they can view, which lists they show up
on and whether they are active or not. Also we have created a space for subcontractors. Subcontractors unlike employees can have their own employees.
There is also a settings page for what data the subcontractors can view. Some can only see the projects that are assigned to them, others have more access into our contact information and have editing capability. Privacy Each of the data has a field that lists which companies can view the data. This way all the data that relates to our company is private, viewable only to us and the other users in a company that we allow. It is possible for other companies to create an account and all of their data would be private to them and it would not interfere with our data. Currently I have restricted the creation of new accounts to be only created by us, but the functionality is there for others to use our same platform. Interaction with other Software At the office we also work with Excel and design software such as Wrightsoft. I have created various popups to show how the data in Bubble could be entered into the other programs. For wrightsoft I used an image of a data entry page and layed it behind some clear input fields. Users can copy past the info into the other program in a clear way.
In time we hope to move as much from Excel onto Bubble, but for now we also have a csv string that is generated on the bottom. This can be copypasted into a cell in Excel which is then used to populate the excel spreadsheet instead of having to copypaste cell by cell. Embeddable Forms Right now we have a separate website, but in time we may incorporate this into our Bubble App. It is possible to create a form page on Bubble and then use an iframe on our website to embed the form into our website. This means that services can be ordered on our website, and the data from the order form is automatically in the Bubble database because it was using a Bubble page! We previously had been using Wufoo, but now we can just use bubble complete with multitabulated forms, conditional logic and more!
We hope you found this useful and gave you some ideas. For now our app is private, but Ill look into making it a public app so you can have a test drive yourself. Because the data has privacy settings going to the app doesnt have a signup option and most pages will appear blank if you arent registered with us. A few simple changes and this could be useable by anyone.
