# how can two separate webcomponents communicate ?

**URL:** <https://forum.servoy.com/t/how-can-two-separate-webcomponents-communicate/19318>\
**Category:** Classic Servoy\
**Created:** [June 23, 2017, 1:05pm UTC](https://forum.servoy.com/t/how-can-two-separate-webcomponents-communicate/19318 "2017-06-23T13:05:35Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![ashutoslenka426](https://avatars.discourse-cdn.com/v4/letter/a/cc9497/32.png) [@ashutoslenka426](https://forum.servoy.com/u/ashutoslenka426)\
**Post date:** [June 23, 2017, 1:05pm UTC](https://forum.servoy.com/t/how-can-two-separate-webcomponents-communicate/19318/1 "2017-06-23T13:05:35Z")

</div>

Hi All ,

I have two separate webcomponent - one is button and another is context menu . My objective is to show the context menu on the click of the button . But what it is happening is , the context menu is showing throughout the screen on the right click . Please find the code below :

Context Menu Js :

```auto
 $scope.api.show = function(Id , contextMenuVisible) {
    		
			 $scope.Id = Id;
			 $scope.contextMenuVisible = contextMenuVisible;
			 
			 $scope.contextMenuOptions = {
	    		  
	    		  dataSource: contextMenuItems,
	    		    width: 200,
	    		    position: {
	    		    	at: 'bottom left'
				    },
				    target: "#" + Id,
				    showEvent: "",
			        bindingOptions: {
			            visible: $scope.contextMenuVisible
			        },
					onItemClick: function(e){
						if (!e.itemData.items) {
				        	DevExpress.ui.notify("The \"" + e.itemData.text + "\" item was clicked", "success", 1500);
				        	$scope.handlers.onActionMethodID(e.itemData.text);
				        }
				    }   
							    
	    	  }	
			 
			  
		}

```

Please find the servoy code on the on action of the button :

```auto
elements.Context_Menu_1.show(elements.Button_1.getMarkupId() , true);

```

Please provide some suggestions.

---

<div class="post-metadata">

**Author:** ![rvanderburg](https://yyz2.discourse-cdn.com/flex010/user_avatar/forum.servoy.com/rvanderburg/32/5076_2.png) [@rvanderburg](https://forum.servoy.com/u/rvanderburg)\
**Post date:** [June 23, 2017, 1:33pm UTC](https://forum.servoy.com/t/how-can-two-separate-webcomponents-communicate/19318/2 "2017-06-23T13:33:21Z")

</div>

You must do this through the server. Using properties, methods or events. You should never make webcomponents talk to each other clientside.

---

<div class="post-metadata">

**Author:** ![ashutoslenka426](https://avatars.discourse-cdn.com/v4/letter/a/cc9497/32.png) [@ashutoslenka426](https://forum.servoy.com/u/ashutoslenka426)\
**Post date:** [June 26, 2017, 5:32am UTC](https://forum.servoy.com/t/how-can-two-separate-webcomponents-communicate/19318/3 "2017-06-26T05:32:33Z")

</div>

Hi ,

Please provide some suggestions . Please share how can I can achieve this.

---

<div class="post-metadata">

**Author:** ![ashutoslenka426](https://avatars.discourse-cdn.com/v4/letter/a/cc9497/32.png) [@ashutoslenka426](https://forum.servoy.com/u/ashutoslenka426)\
**Post date:** [June 26, 2017, 10:45am UTC](https://forum.servoy.com/t/how-can-two-separate-webcomponents-communicate/19318/4 "2017-06-26T10:45:19Z")

</div>

Please provide some help .

---

<div class="post-metadata">

**Author:** ![ashutoslenka426](https://avatars.discourse-cdn.com/v4/letter/a/cc9497/32.png) [@ashutoslenka426](https://forum.servoy.com/u/ashutoslenka426)\
**Post date:** [June 28, 2017, 8:16am UTC](https://forum.servoy.com/t/how-can-two-separate-webcomponents-communicate/19318/5 "2017-06-28T08:16:23Z")

</div>

Thanks solved using binding options.