APIs & Integrations

ruann
Participant

HUBL in Javascript code

SOLVE

Hello,

I would just want to ask if executing HUBL code in javascript is possible?

Thank you!

0 Upvotes
2 Accepted solutions
louischausse
Solution
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

HUBL in Javascript code

SOLVE

ok this is a much wider problem than just using hubl to javascript. I have never done something like this but did you take a look at hubDB API documentation : https://developers.hubspot.com/docs/methods/hubdb/v2/create_row

 

If that doesn't help I would recommend opening a new community forum discussion with your last comment or ask your question in the HubSpot Developer Slack https://designers.hubspot.com/slack 

Louis Chaussé from Auxilio HubSpot Solutions Partner Signature
Louis Chaussé from Auxilio HubSpot Solutions Partner Meeting link

View solution in original post

OBojahr
Solution
Contributor

HUBL in Javascript code

SOLVE

Maybe a hint that looks more standardized and hence cooler is using the script type "application/json":

module.html

 

<script id="data" type="application/json">  
  {
    "country_filter": "{{ module.country_filter }}"
  }
</script>

 

 Then you can use this and other variables in your Javascript module file, which you should consider best practice, since it increases readability of your code quite a bit and allows unit testing and other state of the art best-practices. 

module.js

 

const data = JSON.parse(document.getElementById("data").text)
console.log('From HubL generation', data.country_filter)

 

 

View solution in original post

16 Replies 16
OBojahr
Solution
Contributor

HUBL in Javascript code

SOLVE

Maybe a hint that looks more standardized and hence cooler is using the script type "application/json":

module.html

 

<script id="data" type="application/json">  
  {
    "country_filter": "{{ module.country_filter }}"
  }
</script>

 

 Then you can use this and other variables in your Javascript module file, which you should consider best practice, since it increases readability of your code quite a bit and allows unit testing and other state of the art best-practices. 

module.js

 

const data = JSON.parse(document.getElementById("data").text)
console.log('From HubL generation', data.country_filter)

 

 

louischausse
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

HUBL in Javascript code

SOLVE

@BérangèreL this should be marked as a solution. This is so clean and powerful!!

Louis Chaussé from Auxilio HubSpot Solutions Partner Signature
Louis Chaussé from Auxilio HubSpot Solutions Partner Meeting link
0 Upvotes
cbarley
HubSpot Alumni
HubSpot Alumni

HUBL in Javascript code

SOLVE

HI @ruanngabriel, what is your use-case here? You can certainly use HubL to inject values into a javascript function as long as this ends up being valid JS.

For a very simple example, if I want to log the value of my name to the console, I can do something like this:

{% set myName = "Connor" %}

{% if myName %}
<script type="text/javascript">
     console.log("{{ myName }}")
</script>
{% endif %}

Here are two screenshots that show this works:

Let me know if I'm misunderstanding you and I'd be happy to take a further look!

scokic
Participant

HUBL in Javascript code

SOLVE

Thanks a lot! This is exactly what I needed for generating JS objects from HubL data when creating custom functions and using API! 😀

0 Upvotes
ruann
Participant

HUBL in Javascript code

SOLVE

How about vice-versa?
hubl code inside external javascript file?

Thanks!

cbarley
HubSpot Alumni
HubSpot Alumni

HUBL in Javascript code

SOLVE

Hi @ruanngabriel external in what way? You attach a JS file hosted externally with HubL in it to a HubSpot hosted page? If so, no you cannot do that. You can write HubL inside of Design Manager hosted JS files, custom modules, and the head HTML/ footer HTML of pages/content settings but that is it.

0 Upvotes
ruann
Participant

HUBL in Javascript code

SOLVE

External JS hosted in HubSpot. Like I'm writing the code in Design Manager.

0 Upvotes
cbarley
HubSpot Alumni
HubSpot Alumni

HUBL in Javascript code

SOLVE

Yep, that's possible!

0 Upvotes
mansigovani
Contributor

HUBL in Javascript code

SOLVE

Hello @cbarley@ruann 

I am trying something similar. So can you please share one example of how to use HUBL code inside <script> tag. 

 

Thank you for your help in advance!
Mansi

0 Upvotes
louischausse
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

HUBL in Javascript code

SOLVE

@mansigovani Did you find out how? I'd like to use it in a <script> tag as well.

 

Thanks

Louis Chaussé from Auxilio HubSpot Solutions Partner Signature
Louis Chaussé from Auxilio HubSpot Solutions Partner Meeting link
0 Upvotes
mansigovani
Contributor

HUBL in Javascript code

SOLVE

@louischausse, no I didn't find any solution on how to use HUBL code inside <script> tag. 

0 Upvotes
louischausse
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

HUBL in Javascript code

SOLVE

@mansigovani 

 

Are you working in a module or directly in a template or elsewhere. If you work in a module you can only use hubl in the hubl + html panel.

 

If you are coding elsewhere just tell me where and I'll try to help you

Louis Chaussé from Auxilio HubSpot Solutions Partner Signature
Louis Chaussé from Auxilio HubSpot Solutions Partner Meeting link
0 Upvotes
mansigovani
Contributor

HUBL in Javascript code

SOLVE

@louischausse ,

I am creating this custom Customer Review Form. Now on Submit, I would like to add the review to my HubDB table as a new row. 

 

Do you have any ideas on how to implement that?

 

Thank you in advance for your help!
screenshot-app.hubspot.com-2020.01.png

0 Upvotes
louischausse
Solution
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

HUBL in Javascript code

SOLVE

ok this is a much wider problem than just using hubl to javascript. I have never done something like this but did you take a look at hubDB API documentation : https://developers.hubspot.com/docs/methods/hubdb/v2/create_row

 

If that doesn't help I would recommend opening a new community forum discussion with your last comment or ask your question in the HubSpot Developer Slack https://designers.hubspot.com/slack 

Louis Chaussé from Auxilio HubSpot Solutions Partner Signature
Louis Chaussé from Auxilio HubSpot Solutions Partner Meeting link
mansigovani
Contributor

HUBL in Javascript code

SOLVE

@louischausse , thanks for referring me to Slack. I was able to find the solution to my query there. It was by using Zapier's Webhooks to insert values to my HUBDB. 

0 Upvotes
louischausse
Key Advisor | Platinum Partner
Key Advisor | Platinum Partner

HUBL in Javascript code

SOLVE
Hi @mansigovani

You are welcome!

You can mark my reply as a solution if you are satisfied or ask me anything else

Best
Louis Chaussé from Auxilio HubSpot Solutions Partner Signature
Louis Chaussé from Auxilio HubSpot Solutions Partner Meeting link
0 Upvotes