webdew-logo-new_v2-1
   
webdew-logo-new_v2-1
Close
  • Services
  • Work
  • Resources
    • Knowledge
    • Ebooks
    • Tools
      • Website Audit
      • Website Grader
      • HubSpot ROI
  • Blog
  • About
Let's talk

  • fb-icon-01
  • tw-icon-01
  • insta-icon-01 (1)
  • linkedin-icon-01
  • youtube-icon-01
website-green-icon
Websites
  • Website Designing
  • Website Development
  • Website Migration
  • HubSpot Website
  • WordPress Website
  • Growth-Driven Design
video-blue-icon
Videos
  • 3D Videos
  • 2D Animation
  • Whiteboard Animation
  • Video Ads
  • Explainer Videos
  • Testimonial Videos
  • Onboarding Videos
  • Tutorial Videos
  • Social Media Videos
  • Product Demo Videos
marketing-yellow-icon
Marketing
  • Inbound Marketing
  • Inbound Consulting
  • Marketing Automation
  • Search Engine Optimization
  • Brand Domains
hubspot-red-icon
HubSpot
  • HubSpot Apps
  • HubSpot Themes
  • HubSpot Migration
  • HubSpot Onboarding
  • HubSpot Management
  • HubSpot Development
  • HubSpot Audit
  • Free HubSpot Demo
  • HubSpot Diamond Partner
webdew-logo-new_v2-1
  • Services
  • Work
  • Resources
    • Knowledge
    • Ebooks
    • Tools
      • Website Audit
      • Website Grader
      • HubSpot ROI
  • Blog
  • About
Let's talk

How to develop a case study listing and detailed page using HubDB?

How to develop a case study listing and detailed page using HubDB?-vbh
Tag: HubSpot
Author: Sonu Kumar
Sonu Kumar
Quick Links

Subscribe to Our Blog

Never Miss Any Update From Us !

HubDB is a relational database that helps people to enter and add information in two columns. Organizing and filtering content becomes much more simplified with HubDB. Also, it allows you to build a website store locator page that makes it effortless to structure the website. 

Are you still wondering why you should use dynamic HubDB?

Well! A dynamic website page is basically a CMS page whose content changes based on the URL's path requested by an end-user. 

CRM

HubDB already allows you to add, filter, and showcase data on your HubSpot website pages. HubDB will enable you to create a page for every row in your table with dynamic pages. 

Each dynamic page includes its own unique, SEO-friendly URL and offers page-specific analytics. You can reference more detailed HubDB documentation here.

Don't know how to add one? Need not fret! In this blog, we will discuss and develop the case study pages with the help of HubDB, along with the listing page and details pages. We are going to use the dynamic HubDB for the development of the website structure. 

DB Structure Development 

Now, let's first develop the DB accordingly so that you can add the row and column according to your need.

To make you understand, I'm going to create the case study section, and this page includes the eBooks, where the user can add the eBooks feature image and description, which will be displayed on the listing page. Also, users can add the category. 

Let's first create the following column in DB, which includes: adding featured images, adding an e-book title, and adding a description.

Basic HubDB implementation

First, navigate to HubDB by choosing HubDB from the flyout under Files and templates in the Marketing menu. 

hubdb-menuClick on the 'Create table' button to create a new table and give your new table a name. This name is basically for your internal reference and doesn't need to conform to any standard.

hubdb-desktop
By default, tables contain an "ID" and a "Name" column. Add new columns to your new table with the Add column button. You'll add a label for each column, a name, which is the unique identifier for this column in HubL, and you'll select a column type.

After you've got your columns created, you're ready to populate the table. Use the Add row button below the table to add rows one at a time. You can also add data using CSV files. Check out the resources tab for more details on that process. 

Next, we are going to create the DB with the mentioned columns. 

create-db-with-columns

How can you import DB Files?

You can Import your google sheet with these options. After creating the table, click on the right-corner action button and then click on 'Import.'

import-db-fileNow that you are done creating the table section, it's time to create a listing page that will help display the DB data. For this, we need to create the template in HubSpot. 

How to create a listing page using HubDB?

You can use an HTML file, but if you are using the old version of the template, then you can create the new drag-and-drop template, and don't forget to create the new module. 

If you are new to creating templates, then you can refer to the below-added documents. 

  • How to create a custom template in HubSpot?
https://knowledge.hubspot.com/design-manager/build-a-custom-coded-template
  • How to create a custom module in HubSpot?
https://developers.hubspot.com/docs/cms/guides/getting-started-with-modules

create-custom-module-code

Here, I have used the HubSpot boilerplate template. 

Why HubSpot CMS for marketers will make a good choice in 2022?

Now I'm creating a loop to display the e-Book Listing. This listing should display the e-Book feature image, and description, and redirect to its details page.

loop-to-display-ebook -listing
You can make the best use of this code to display the DB data if you are creating the same thing.

Still, need more existence? You can refer to this document:

https://developers.hubspot.com/docs/cms/data/hubdb

Congratulations! You're done with displaying the main listing on the listing page. You can add more styles according to your needs. Also, you can use the CSS library, which helps to style the overall page very well.

style-overall-page

Now we have to make these listings clickable so that users can view the detail or post page also. 

It can be done with the help of dynamic DB and external linking. In this case study, I want the user to edit everything on the details page and edit the form. So, for that reason, I'm using external linking. 

This external page includes the following:

  • Editable banner form (so that users can update the new form and after the form submission they showcase their e-book link)
  • Slider for e-book chapter or other important details display 
  • FAQ related to E-books

Here I have developed the following modules.

  • Banner Section

banner-section-of-module

  • Slider Section

banner-section-of-module

  • FAQ section

faq-section

Finally, we are done with the creation of the detail page section. Now, it's time to create the option in DB where I have to add the link, and when someone clicks on the listing, they redirect to their post page. 

Please create a new column in your DB with the link field. 

create-new-column

And now open the listing page code and update this tag with the col id name. 

listing-page-code

Now, we have to create the category for listing. Like in our case study page, some books are related to some particular case study. 

21 HubSpot integrations to get the best out of HubSpot

For this, we have to create a new table with the option to assign the post category. So I am going to create the table and add the foreign key of the case study table so that I can display the two table data. 

You can refer to this document for more details:

https://developers.hubspot.com/docs/cms/guides/hubdb/join-multiple-tables


case-study-category
Now again, I'm using a looping tag to display the category. You can refer to the below-added code:

 <div class="company-blog-list">

                                

                            </div>

Once you run this code; then you will get the output similar to the below-added screenshot:

looping-tag-code-outputOutput

1- Case study Listing Page with category option

case-study-listing-page-output-1

2- Post Page

case-study-listing-post-page
post-page-viewpost-page-view-of-faq

Importing and Exporting tables with CSV files

To import or export a HubDB table, this workflow will be different depending on exactly what you need to do. 

But in this example, we'll take an existing table, export it to a CSV file, import it to google sheets, and edit, then export and import it back into HubDB. 

While you can use Microsoft Excel for this, it's important to mention that excel has a nasty habit of modifying special characters. So I recommend google sheets if you have a choice.

Importing File

You can import your google sheet with these options. After creating the table, please click on the right-corner action button and click on the import.

import-tables-with-csv-files

Export File 

You can export your DB table. After creating the table, please click on the right-corner action button and click on the export. Here you have all the options for files. 

export-tables-with-csv-files

In a Crux 

Well! developing a case study listing and detailed page using HubDB is not a cakewalk. But if you follow the above points and keep the examples and code in mind, then you can easily proceed with the creation of web pages with the help of HubDB. 

Hoping this blog was helpful. But, if you still have any questions or want any assistance in creating a website using HubDB or utilizing HubSpot to its fullest, feel free to contact us and get HubSpot CMS onboarding.

                                                                                                                                                                                                                                                                                                   Editor: Divya

Top 10 Tips to Hire HubSpot Expert for Business Growth

Related Blogs

How to create email template in HubSpot with 10 simple steps-vbh
HubSpot

How to create email template in HubSpot with 10 simple steps

Create custom objects in HubSpot using API with this easy guide-vbh
HubSpot

Create custom objects in HubSpot using API with this easy guide

How to create UX modules in HubSpot Boilerplate using external assets?-vbh
HubSpot

How to create UX modules in HubSpot Boilerplate using external assets?

review-star

Based on 1000+ Reviews on

footer-dot-logo-img
  • Hubspot_Logo-icon
  • clutch_Logo-icon
  • upwork_Logo-icon
  • designrush_Logo-icon
  • goodfirms_Logo-icon
  • g2_Logo-icon
WE ARE GLOBAL
  • US-flag
  • CA-flag
  • IN-flag
  • GB-flag

Copyright © 2019 - 2021 Webdew, Inc. All Rights Reserved

Copyright © 2019 - 2021 Webdew Labs Inc. All Rights Reserved

Copyright © 2016 - 2021 Webdew Private Limited. All Rights Reserved

Copyright © 2019 - 2021 Webdew, Inc. All Rights Reserved

WE ARE SOCIAL
  • fb-icon-01
  • tw-icon-01
  • insta-icon-01 (1)
  • linkedin-icon-01
  • youtube-icon-01
Terms of Services
Privacy Policy