How do I build a proposal or quote generator?

In this episode, we'll learn how to build dynamic and professional proposals, quotes, or contracts to collect digital signatures using:

• The Page Builder
• PDF Pages
• Signature Field

Features Discussed:

1. Connection Fields (Time: 7:05)
   Learn how to structure relationships in two tiers, such as Proposal and Services. Example: Users can digitally sign contracts directly on your platform, with signed documents automatically emailed to relevant parties, streamlining the signing process.
2. Security (Time: 8:37)
   Learn how to enforce security with role-based access control. Example: Check if a user is an admin during login; grant access or display a blank screen.
3. Connected to Page (Time: 12:06)
   Learn how to create a table component linked to a connected page and rename the link. Example: The proposal table connects to the proposal details page.
4. Form Component (Time: 15:49)
   Learn how to set up and customize forms for efficient user input. Example: Design forms to collect customer details, validate entries, and optimize layout for a seamless experience.
5. Layout & Page (Time: 22:45)
   Learn how to create a new layout with security features added to all pages in the security management system.
6. Image Components (Time: 25:34)
   Learn about the Image Component, how to use it, set the background color, and implement additional CSS.
7. HTML Component (Time: 26:55)
   Learn about HTML components, including how to use them, set header tags, and center-align content. For example, you can learn to set field values and change attributes like color and font size, allowing for further customization as needed.
8. Link Button (Time: 28:01)
   Learn about the Link Button, how to use it, and how to set it up to navigate to a specific page URL.
9. HTML Component (Time: 29:33)
   Learn how to set a dynamic value in an HTML component. For example, you can customize a welcome message by dynamically inserting the user's name into the message.
10. List Component (Time: 32:19)
    Learn how to use the List Component and how to hide the field title.

Transcript Summary

Introduction

The idea here is that we are creating projects, and we then want to create proposals for those projects. We want to do this dynamically, so by adding different pieces of the proposal, whether that's line items or project phases, we are adding all this data into our application for our own internal use. At the same time, we are building out all the data necessary to dynamically generate a nice, clean, beautiful digital proposal. This proposal can be sent to a client, and we can collect signatures on it using the signature field. Ultimately, you can always generate that proposal as a PDF and save it, print it, email it—whatever you want to do.

Tools and Features

To do this, we're going to be using the page builder. I realized that we haven't spent a lot of time inside the page builder doing a bunch of different things. Usually, when we end up in the page builder during these episodes, it's for a very specific reason, and we kind of glance over some of the other abilities or features within it. Today, we're going to take a look at some of those.

We'll be doing:

1. PDF pages
2. E-signatures using the signature field in our data table to collect signatures both internally and from the client.

I'll show you a little trick on how you can use that field in a cool way. Then, I'll show you the finished product, and we'll hop into the builder.

Finished Product Overview

Here’s the finished product. On the back end—what I refer to as the internal use of the application—we're actually building out a proposal. As mentioned in the intro, we're collecting information for the proposal, but the cool part is how we're going to display it.

On this page, we have different data sets that we're adding to this proposal as connected records. We have a button to view the proposal, which brings us to a page purpose-built to display this proposal as a digital document. There is no menu or layout—just all our data displayed cleanly. At the bottom, we have the ability to add signatures.

Building the Proposal System

Data Structure

Let’s go through the data structure thoroughly before moving on to the page builder. We have our users, which include both internal and external people. For example, I’m an internal person connected to my own company, and David Ross is a customer belonging to a different company. These companies are held in a table with just a single field, "company name." Users from those companies can add new projects. These projects have connections to the company and contact, along with fields defining the project: name, hourly rate, project description, status, priority, and more. This helps identify the project scope and generate a proposal more easily.

In this example, we’re focusing on application development. Once the project is created, we can create a proposal record. This proposal record includes the project name, connections to the project, company, and customer, along with fields for customer and internal organization signatures, an overview, and the proposal status.

We also have tables for predefined services, which are offered to every project and proposal. These services are pre-defined with a name, type, image, and cost. For more dynamic data, we have line items that connect to both a proposal and a predefined service, allowing us to define specific costs. We also have project phases, outlining what we’ll do in each phase, and tables listing all the pages and data tables we intend to build for the application.

Page Builder

We need to set up an administrator layout for internal organization members to create projects, view submitted projects, and create proposals. I’ve created this admin layout and secured it by user roles, so only admins can access the pages within it. We have pages for customers, companies, projects, services, and proposals. I’ll be working mainly from the project details and proposal details pages.

When a new project is submitted, we can process it and generate a proposal. From the project details page, we can add a new proposal connected to the project and then add all the items to the proposal.

Creating and Editing Proposals

Now, let’s log in as David Ross, the fake user, and submit a project. After submission, I can see the project details as an administrator. From here, I can create a proposal by copying the project name and entering some text for the overview. This creates the proposal record, and I can link it to the proposal details page.

In the proposal details page, we’ll add rows and columns to display the proposal content. This includes line items, project phases, data structures, and page structures. Each row has a form on one side and the content on the other. For each section, we’ll customize the display and remove unnecessary fields.

For example, in the line items section, we’ll only display the necessary fields and hide the proposal field, as we’re already on the details page. Similarly, we’ll add tables and forms for project phases, data structures, and page structures.

Displaying the Proposal

We’ll build a separate page layout for viewing proposals, which will be more polished. This layout will be dedicated solely to proposals, with no menu or layout—just a page container. We’ll secure the layout so that only admins can see all proposals, but the details page will be accessible to any logged-in user, allowing customers to view their proposals.

We’ll add components like images, text, and custom HTML to create a visually appealing proposal. The overview, data structure, page structure, and project phases will be displayed with dynamic content pulled from the proposal details. We’ll also include a calendar to show the project phases.

Adding Signatures

Finally, we’ll add a section for signatures. We’ll create a detail component to display the customer and internal organization signatures, along with the dates they were signed. To ensure only the relevant user can sign, we’ll hide the signature form for non-logged-in users and display a login prompt instead. Once logged in, the customer can sign the proposal, and the admin can sign their portion. We’ll also set up email notifications to alert both parties when the proposal is signed.

Conclusion

This proposal system allows you to dynamically generate proposals, collect signatures, and display the proposal in a clean, professional format. You can further customize and expand this system to fit your specific needs, whether it’s for app development, construction, events, or any other field.

As usual, if you have any questions or comments, I’d be happy to discuss them in our community. Until next week, I hope you enjoyed this video, and I’ll see you next time. Thanks, and take care.