Taking a Manually Entered Field and Automatically Bringing it into Another Module

FSantos
Member

I'd like to take the title entered in this field from this module (pictured below)
Screen Shot 2021-07-16 at 12.52.44 PM.png

 

and automatically bring it into another module.
Screen Shot 2021-07-16 at 12.53.53 PM.png

I'm assuming there is a tag for this, but I didn't have any luck finding it in the documentation.

0 Upvotes
4 Replies 4
dennisedson
Community Manager

@FSantos 

What kind of template are you using for this? 

@Anton , @piersg what do you guys think about this?

Thanks,

Dennis




Check out our Community Developer Blog
where we feature our Community driven developer podcast and how to content
0 Upvotes
piersg
Key Advisor

You can get module data in a page template via {{content.widgets}} e.g. {{content.widgets.MODULE_ID.body}} will return all the widget data. So you can do that to find how to get to the bit of info you need in the JSON e.g. {{content.widgets.MODULE_ID.body.name}}.

 

The problem with this approach is that it's hard coded, you have to know the module id and it will only work for that. There's very little flexibility. You could instead use JS to add the data to a global variable on whatever page the module is used on, then use JS in the second module to grab said data e.g.

 

In the first module:

<script>
  window.data = `{{ upcoming_webinar.name }}`
</script>

and JS in the second, "receiving" module:

webinar: [{
  name: window.data
}]

 

FSantos
Member

Okay, so I put the js you recommended into the first module.

Screen Shot 2021-07-30 at 2.11.59 PM.png

 

And then I placed the JS you recommended into the second module along with adding the associated tag.
Screen Shot 2021-07-30 at 2.12.44 PM.png


Unfortunately, it does not appear to be working. I'm okay with a hard-coded solution as well. I don't picture that I'll be using this in more than one instance.

0 Upvotes
piersg
Key Advisor

@FSantos this first part

 

<script>
  window.data = `{{ upcoming_webinar.name }}`
</script>

 

has to go in the HTML/HubL section of your first module. You can't use HubL syntax in JS.

 

The JS in the second module should be something like:

 

var webinar = [{
    name: window.data
}]
document.getElementsByClassName('post-title')[0].textContent = webinar[0].name;

 

You're only pulling in one blog with the recent_posts function in your second module, so I'm assuming there's only one element with the class "post-title" on the page, and there's only one webinar name you're trying to send from one module to another.

 

You don't need to add anything to the webinar name in the HTML/HubL for the second module as the JS will do that

 

<h6>
	<a href="https://www.corridorcompany.com/join-a-webinar">
		<div class="post-title"></div>
	</a>
</h6>