I want a dynamic page where all the job description will be inserted in a database when user enter any data on editing website pages in hubspot and on page load data will be fetched in a form of accordian(please see the sample link below).
There would be a pagination and search option to search anything from accordian.
I have developed similar static page. Below is the link of this page.
However, becuase its a static page, each job rows are a custom module, search is just a google search instead of searching precisely from accordian. less and more button instead of pagination.
I need similar page with full dynamic functionality. Please help me with this.
Its seems HubDB is useful here but never used it and cannot image how to proceed with HubDB.
Also To use HubDB is it necessary for me to know HubL??
The HubL docs are pretty useful. Here’s a handy tutorial doing exactly what you are wanting: Tutorial
Yes, you want to know HubL, but I don’t think anyone should be allowed to develop in Hubspot without knowing HubL. I have to clean up way to many messes. Luckily it is easier to learn than HTML, logically easier to learn Javascript, and the docs make it mostly copy and paste. If the HubL docs don’t do it for you check out the Jinja2 docs. It’s the same stuff, only HubL is personalized to Hubspot and not as inclusive. Also you can’t Python in Hubspot.
You should be able to use some javascript to pass a query to your url, then use HubL to catch the query and filter your HubDB call by the query. Here is a blog I wrote that touches on queries only for blog filtering. It would look something like this:
$(document).ready(function(){
$('#searchform').submit(function() {
var url = YourWebsiteListingPageURL;
var searchTerm = $('#keyword').val().toLowerCase();
var goUrl = url + '?q=' + searchTerm;
window.location = goUrl;
return false;
});
});
HubL:
{% set query = request.query_dict.q|lower %}
{% if query is defined %}
{# filtered results #}
{% else %}
{# regular results #}
{% endif %}
You will need to decided where to put these snippets.
As for learning HubL, If you understand basic programming (variables, conditional logic, expressions, etc.) then all your really missing is the syntax and terminology. You will only get that from the docs and trial and error. You can create a developers account and use it to practice, or what ever portal your allowed to use. I own a company with a portal and I still use a developer portal when playing around.
Just start here with Intro to HubL and work your way down the list on the left side. If you want some help you can PM me.
If you go to a page using the template you are building you will find “developer Info” in when you click on the little “sprocket” you find in the top right. That developer info is pretty helpful for debugging.
I don’t see in your url. Try working with a page in your content staging area instead of a preview page. That make for a smaller url.
I have taken information from Developer Info only but as you can see and as I mentioned in my previous message request.query_dist.q is not working(its coming blank) as it is a part of a property and not a object. Then how to fetch that .q from url/property.
Ok sorry, I have been working double time lately and my focus has been blurry. I think I see the issue here, and it is actually something I myself should keep in mind.
I wrote this blog to try and help answer these types of questions without having to repeat myself.
See the difference? it’s the & sign in the correct format vs the second ? in your example.
Here’s why:
The javascript I gave you assumes a clean url with no appendages. It passes the ? to the url because ? starts a query. Now this is absolutely correct in the cases I have beein using it because when search is clicked it directs them back to {{ group.absolute_url }} which is a clean url. When you go live with this you will want to do the same.
With your test url or a url with queries already attached you will need to modify the javascript:
$(document).ready(function(){
$('#searchform').submit(function() {
var url = YourWebsiteListingPageURL;
var searchTerm = $('#keyword').val().toLowerCase();
var goUrl = url + '&q=' + searchTerm;
window.location = goUrl;
return false;
});
});
I changed the “?” to “&”. Now when you use
{% set query = request.query_dict.q|lower %}
it should recognize “q” within your url and set the variable “query” to “q”'s value.
