Lesson 18: Embedding a gadget into user generated content using an EMBEDPROVIDER view

From VZ Developer Wiki
Jump to: navigation, search

General Guidelines | XML Specification | Features | Views | JavaScript API | REST API | Tutorials | OAuth


Lesson 17: Send notifications to users Back to overview Lesson 19: Send user to user messages

There are two ways to embed your gadget in any user generated content:

  • from within an installed app (like profile view or canvas view) via creating a pinboard- or user to user message
  • from an EMBEDPROVIDER view while the user is writing the content in the designated textarea

This tutorial explains how to use the second method:

In your gadget you have to define two additional views:

  • An EMBEDPROVIDER view for the interface the user can use to create the embedded gadget (which is technically an link to the EMBED view of his installation
  • An EMBED view which will be shown when the gadget is embedded. This view can be passed any additional parameters.

At first you have to require the embed feature:

<Require feature="embed" />

In the following simple example the user can enter a name into an input box in the EMBEDPROVIDER look and then click a send link:

<Content type="html" view="embedprovider"><![CDATA[
    
    <input type="text" id="__MODULE_ID__name" />
    <a href="javascript:sendMessage()">senden</a>
    
    <script type="text/javascript">

	function sendMessage()
	{
         var params = {name: document.getElementById('__MODULE_ID__name').value};
         vz.embed.getEmbedUrl(params, function(url) {
	    vz.embed.send(url);
         });
	}		

		</script>
    
    ]]></Content>

The vz.embed.getEmbedUrl method generates an embed link with this name as parameter. This url is passed as the return parameter to the callback in wich the vz.embed.send method passes it into the current textarea in which the user types his message and closes the EMBEDPROVIDER view afterwards.

When this embedded gadget is viewed the EMBED view is called and a greeting to the entered name is displayed:

<Content type="html" view="embed"><![CDATA[
<h1>Embedded</h1>
<div id="__MODULE_ID__Greeting"></div>
<script type="text/javascript">

gadgets.util.registerOnLoadHandler(function() {
document.getElementById('__MODULE_ID__Greeting').innerHTML = 'Hello ' + gadgets.views.getParams()['name'];
});

</script>
]]></Content>

Note that the DOM id of the div element has "__MODULE_ID__" as a prefix which will be exchanged by the Gadget Server with the current module id of the gadget (which in case of the EMBED view is unique). This is important because the EMBED view of one gadget can be included several times on one page. Because all these gadgets are rendered on the same domain, it is possible that one view can influence the other ones by manipulating their DOM.


  • Lesson 18: Embedding a gadget into user generated content using an EMBEDPROVIDER view