Widgets
It is an easy process for plugins to provide widget views for use on a users dashboard or profile.
Structure
In order to take advantage of Elgg's widget system, you need to create widget edit and view pages which are located in the plugins views.
'Plugin'
- /views
- /default
- /widgets
- /widgettitle
- /edit.php
- /view.php
- /widgettitle
- /widgets
- /default
The view.php is responsible for all the content that will output within the widget. The edit.php file contains any extra edit functions you wish to present to the user. You do not need to add access level as this comes as part of the widget framework.
Initialise the widget
Once you have created your edit and view pages, you need to initialise the plugin widget. This is done within the plugins init() function.
add_widget_type('widgettitle',$name_of_widget,$desc_of_widget) - here is an example:
// Add generic new file widget
add_widget_type('filerepo',elgg_echo("file:widget"),elgg_echo("file:widget:description"));
Note: it is possible to add multiple widgets for a plugin. You just initialise as many widget directories as you need.
// Add generic new file widget
add_widget_type('filerepo',elgg_echo("file:widget"),elgg_echo("file:widget:description"));
// Add a second file widget
add_widget_type('filerepo2',elgg_echo("file:widget2"),elgg_echo("file:widget:description2"));
// Add a third file widget
add_widget_type('filerepo3',elgg_echo("file:widget3"),elgg_echo("file:widget:description3"));
Multiple widgets
Make sure you have the corrosponding directories within your plugin views structure:
'Plugin'
- /views
- /default
- /widgets
- /filerepo
- /edit.php
- /view.php
- /filerepo2
- /edit.php
- /view.php
- /filerepo3
- /edit.php
- /view.php
- /filerepo
- /widgets
- /default
Simple example
Here is a simple Flickr widget that uses Flickr's JSON output.
Widget edit page:
<p>
<?php echo elgg_echo("flickr:id"); ?>
<input type="text" name="params[title]" value="<?php echo htmlentities($vars['entity']->title); ?>" />
</p>
<p><?php echo elgg_echo("flickr:whatisid"); ?></p>
Widget view page:
<?php
//some required params
$flickr_id = $vars['entity']->title;
// if the flickr id is empty, then do not show any photos
if($flickr_id){
?>
<!-- this script uses the jquery cycle plugin -->
<script type="text/javascript" src="<?php echo $vars['url']; ?>mod/flickr/views/default/flickr/js/cycle.js"></script>
<!-- the Flickr JSON script -->
<script>
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?id=
<?php echo $flickr_id;?>&lang=en-us&format=json&jsoncallback=?", function(data){
$.each(data.items, function(i,item){
$("<img/>").attr("src", item.media.m).appendTo("#images")
.wrap("<a href='" + item.link + "'></a>");
});
$('#images').cycle({
fx: 'fade',
speed: 'slow',
timeout: 0,
next: '#next',
prev: '#prev'
});
});
</script>
<!-- some css for display -->
<style type="text/css">
#images {
height: 180px;
width: 100%;
padding:0;
margin:0 0 10px 0;
overflow: hidden;
}
#images img {
border:none;
}
</style>
<!-- div where the images will display -->
<div id="title"></div>
<div id="images" align="center"></div>
<!-- next and prev nav -->
<div class="flickrNav" align="center">
<a id="prev" href="#">« Prev</a> <a id="next" href="#">Next »</a>
</div>
<?php
}else{
//this should go through elgg_echo() - it was taken out for this demo
echo "You have not yet entered your Flickr ID which is required to display your photos.";
}
?>
Last updated 530 days ago by Dave
@ Dave
Suppose I want to use your Flickr widget but make it in such a way that it should be available only to the Admin. Where and how should this be fixed?
shillo 259 days ago
|
Christopher W.
Profile
Friends
Friends of
Pages
Plugins
What if I want to create a widget that one of my users can add to their profile (which is what a widget is) but that widget has embed code from another site? For instance, I want to create a widget for my users to add to their dashboard if they want that adds a widget from ESPN of the top baseball story of the day. I have the embed code from ESPN, but I do not know how to make this a widget in elgg, and my programing skills are not where they need to be to understand the tutorial.
Christopher W. 322 days ago