topic Re: HubL - Any way to get the id of the module instance? in CMS Development

HubL - Any way to get the id of the module instance?

yidanwang — Fri, 04 Jan 2019 17:47:28 GMT

When the custom module is rendered, an unique id is attached to the HTML div component with the format hs_cos_wrapper_widget_1538643526593

Is there a way to get this unique ID in the module itself through HUBL?

Basically I'm looking for a way to identify the very instance of the module in template to assign media-query specific CSS. Class alone is not unique enough for our use-case.

Appreciate any insight! 🙂

Re: HubL - Any way to get the id of the module instance?

JasonRosa — Mon, 07 Jan 2019 18:47:07 GMT

Hey @yidanwang I believe that you can access that using the {{ name }} variable in HubL within the custom module. Here is an example where I used the variable in my code:

And the output that I received in the HTML as a result:

So in your case you might need something like:

.hs_cos_wrapper_{{name}} {

}

Please note that HubL can only be used in the HTML pane of the custom module editor so you might need to put your CSS in some <style> tags in the HTML pane and wrap that in {% require_css %}{% end_require_css %}

Re: HubL - Any way to get the id of the module instance?

yidanwang — Mon, 07 Jan 2019 21:24:00 GMT

WORKS LIKE A CHARM! Thank you SO MUCH, Jason! This saves my world!

One minor twist to your answer: the css selector is # (Id selector), not class selector 🙂

Re: HubL - Any way to get the id of the module instance?

JasonRosa — Tue, 08 Jan 2019 12:58:32 GMT

Hey @yidanwang I'm happy to hear this is working for you! Also, good catch on the ID !

Re: HubL - Any way to get the id of the module instance?

kchung — Wed, 29 Jul 2020 15:59:46 GMT

Hi Jason,

I tried placing in: {{ name }}

But it gives me the same ID number for each item or instance the module creates.

Is there a way to have it produce completely different IDs for each item within the module?

Re: HubL - Any way to get the id of the module instance?

JasonRosa — Wed, 29 Jul 2020 16:09:35 GMT

Hey @kchung would you mind sending over a screenshot of your code? Are you trying to have a unique id/class usign {{ name }} for each module instance (e.g. an image module is added to a page three times) or for a module field in a for loop (e.g. a tabber with repeatable tabs)?

Re: HubL - Any way to get the id of the module instance?

kchung — Wed, 29 Jul 2020 16:12:44 GMT

Re: HubL - Any way to get the id of the module instance?

kchung — Wed, 29 Jul 2020 16:14:40 GMT

Jason,

Its on line 4.

I tried placing it in Class and then I tried it with id="" - as you see it in the screen capture.

Re: HubL - Any way to get the id of the module instance?

JasonRosa — Wed, 29 Jul 2020 18:14:45 GMT

Hey @kchung thanks for sending that example! So {{ name }} would be individual to the module as a whole and not a field within a repeater of the module. For example if you added {{ name }} to the top level class on your module (on line 1), each time you added that module to a page the module you added would have a unique class name. If you wanted to have a unique class name for each item in a loop I'd recommend {{ loop.index }} (https://developers.hubspot.com/docs/cms/hubl/for-loops#loop-properties). For example:

{% for item in forloop %}

</div>

{% endif %}

This should output a number after "story-item-" for the ID which should keep each loop item unique.

Re: HubL - Any way to get the id of the module instance?

kchung — Wed, 29 Jul 2020 18:36:48 GMT

Hi Jason,

That works! It created a unique ID for each of the items within the module. Now I can target each item to re-style in CSS.

Thank you so much!

Re: HubL - Any way to get the id of the module instance?

JasonRosa — Wed, 29 Jul 2020 18:51:13 GMT

No problem! Happy to hear it worked