Building A Custom Widget: Yammer Widget
- Download digitalworkplace.custom.js from the “/Style Library/DigitalWorkplace/JS” folder within SharePoint
- Paste the Widget Definition within digitalworkplace.custom.js
- Upload the updated digitalworkplace.custom.js to the “/Style Library/DigitalWorkplace/JS” folder within SharePoint
- In the Management Apps tab of AppManager, click on the View Manager. Click “Add New”. In the left pane navigate to “/DigitalWorkplace/Content/Templates/” for the folder path. Click “Choose File”, navigate to your custom template (Yammer.html). Click “Save”.
- In the Management Apps tab of AppManager, click on the Widget Manager app. Then click on Add Widget. Create your widget with the values in the Widget Manager – Widget Definition section. Click Save & Exit
- In the Manage Widgets window, find Yammer and click its ‘View Widget Definitions’ button. Then click on ‘Add New’. Create your widget instance with the values in the Widget Manager – Widget Instance section. Click Save & Exit
- Copy the Widget Snippet of your Widget Instance.
- Paste the snippet into a Content Editor Web Part on a page within the site. Publish the page.
- Flush your cache by clicking on the Akumina icon in the left rail, clicking the refresh icon, then clicking “Refresh All Cache”
- Refresh the page. You will see your Yammer Widget
if ((typeof Akumina.AddIn.YammerWidget) === 'undefined') {
Akumina.AddIn.YammerWidget = function () {
var _cur = this;
this.GetPropertyValue = function (requestIn, key, defaultValue) {
var propertyValue = "";
for (var prop in requestIn) {
if (key.toLowerCase() == prop.toLowerCase()) {
propertyValue = requestIn[prop];
break;
}
}
return (propertyValue == undefined || propertyValue.toString().trim() == "") ? defaultValue : propertyValue;
};
this.SetDefaultsProperties = function (requestIn) {
var requestOut = requestIn;
requestOut.SenderId = _cur.GetPropertyValue(requestIn, "id", "");
requestOut.DisplayTemplateUrl = _cur.GetPropertyValue(requestIn, "displaytemplateurl", "");
requestOut.FeedId = _cur.GetPropertyValue(requestIn, "FeedId", "");
requestOut.Network = _cur.GetPropertyValue(requestIn, "Network", "");
requestOut.callbackMethod = _cur.GetPropertyValue(requestIn, "callbackmethod", "");
return requestOut;
};
this.Init = function (yammerRequest) {
_cur.appWebUrl = decodeURIComponent(Akumina.AddIn.Utilities.getQueryStringParameter("SPAppWebUrl", ""));
_cur.hostUrl = decodeURIComponent(Akumina.AddIn.Utilities.getQueryStringParameter("SPHostUrl", ""));
_cur.YammerRequest = _cur.SetDefaultsProperties(yammerRequest);
_cur.YammerRequest.EditMode = Akumina.AddIn.Utilities.getEditMode();
var widgetName = "Yammer";
Akumina.Digispace.WidgetPropertyViews.AddViewForProperty(widgetName, "DisplayTemplateUrl", "TemplatePicker");
_cur.Prerender();
};
this.Prerender = function () {
var targetDiv = this.YammerRequest.SenderId;
$("#" + targetDiv).html(Akumina.Digispace.ConfigurationContext.LoadingTemplateHtml);
Akumina.Digispace.AppPart.Eventing.Subscribe('/loader/completed/', _cur.Render);
Akumina.Digispace.AppPart.Eventing.Subscribe('/widget/updated/', _cur.RefreshWidget);
};
this.Render = function () {
var data = {};
data.FeedId = _cur.YammerRequest.FeedId;
data.Network = _cur.YammerRequest.Network;
data.SenderId = _cur.YammerRequest.SenderId;
if (!_cur.YammerRequest.EditMode) {
_cur.BindTemplate(_cur.YammerRequest.DisplayTemplateUrl, data, _cur.YammerRequest.SenderId);
}
};
this.RefreshWidget = function (newProps) {
if (newProps["id"] == _cur.YammerRequest.SenderId) {
_cur.YammerRequest = _cur.SetDefaultsProperties(newProps);
_cur.Render();
}
};
this.BindTemplate = function (templateUri, data, targetDiv) {
new Akumina.Digispace.AppPart.Data().Templates.ParseTemplate(templateUri, data).done(function (html) {
$("#" + targetDiv).html(html);
});
};
}
};
We define the Yammer widget with this line.
Helper method to get properties
We set the default values to properties if nothing is passed in for them.
this.Init calls the functions to render the widget. We also specify the widget name that we will use for the Widget Class step and we subscribe the widget to the Template Picker.
this.Prerender defines what will show while the widget is rendering. We use subscriptions to call the this.Render function when loading is complete and this.RefreshWidget when the widget is updated.
We build the model using the properties passed into the control.
We bind our data to our template and render
this.RefreshWidget resets the properties and calls this.Render
Create a file called Yammer.html and paste the following markup within
<div id="embedded-feed" style="height:800px;width:400px;"></div>
<script type="text/javascript">
$.getScript( "https://s0.assets-yammer.com/assets/platform_embed.js", function( data, textStatus, jqxhr ) {
yam.connect.embedFeed({
container: "#embedded-feed",
network: "{{Network}}",
feedType: "group",
feedId: "{{FeedId}}",
"config": {
"header": false,
"footer": false,
"hideNetworkName": true
}
});
});
</script>
Yammer
Akumina.AddIn.YammerWidget
FeedId
10784789 (NOTE this is the group id; change this as appropriate to your values).
Text
Network
akuminademo.onmicrosoft.com (NOTE this is the network value; change this as appropriate to your values).
Text
View 1
/Style Library/DigitalWorkplace/Content/Templates/Yammer.html
Company Yammer
10784789 (change this as appropriate to your values)
akuminademo.onmicrosoft.com (change this as appropriate to your values)
Checked
Selected
For more info on Custom Widgets see the following articles
- Building a Custom Widget: Overview
- Building A Custom Widget: Hello World Widget
- Building A Custom Widget that accesses SharePoint Lists
- Building A Generic List Control Widget
- Custom Widget: SP Sites List
- Building A Custom Widget: Angular Stock Ticker Widget
- Building A Custom Widget: Flickr Image Library
- Building A Custom Widget: Stock Ticker Widget
- Building A Custom Widget that Accesses a List
- Building A Custom Widget: Yammer Widget
- What's in the Core Site?
- Troubleshooting in the Core Site
- Building your first widget
- Building a Custom Masterpage
- Building a Page Layout
- Applying Custom Styles
- Widget Manager: Overview
- Widget Manager: Retrieving View Icons
- Widget Manager: Adding an Existing Widget to a Page
- Widget Manager: Creating a Custom View for an Existing Widget
- Building a Customdataload Callback: Accessing a List
- Building A Customdataload Callback: Accessing a List from a Different Site
- Building A Customdataload Callback: Hello World
- Building a Customdataload Callback: Overview
- Building A Customdataload Callback: Third Party Data
- Changing the Loading View of a Widget
- Multilingual widget instances
- Search: Displaying search results with the GenericSearchList widget
- Upgrading Widget Snippets: Overview
- Upgrading Widget Snippets: Updating a Custom Built Widget Snippet
- Upgrading Widget Snippets: Updating an OOB Widget Snippet
- View Creation: Handlebars
- View Manager: Creating a Custom View
- Widget Development Process: Widget Decision Tree
- Widget Development Process: Widget Design Use Cases
- Eventing: OOB Digital Workplace Events
- Eventing: Overview
- Framework Integration Points
- Framework: ConfigurationContext
- Framework: UserContext
- Generating a HAR file for troubleshooting performance
- Getting List Items with JSOM
- Masterpage: Enabling a Custom Masterpage to work with the Akumina Widget Framework
- Multilingual tokens
- Multilingual: Akumina Framework language awareness
- Page Life Cycle: Overview
- Page Life Cycle framework: execution steps
- Page Life Cycle: Accessing a List
- Page Life Cycle: Accessing a List (3.3.0.0)
- Page Life Cycle: Accessing UserContext
- Page Life Cycle: Accessing UserContext (3.3.0.0)
- Page Life Cycle: Adding Custom Steps
- Page Life Cycle: Adding Custom Steps (3.3.0.0)
- Page Life Cycle: Akumina Foundation Shipped Site Steps
- Page Life Cycle: Appending Additional Markup
- Page Life Cycle: Appending Additional Markup (3.3.0.0)
- Page Life Cycle: Core Steps
- Page Life Cycle: Hello World Step
- Page Life Cycle: Hello World Step (3.3.0.0)
- Page Life Cycle: Optimizing Page Load Performance
- People Sync: Overview
- People Sync: Adding Attributes to the People Directory View
- People Sync: Creating a Custom Data Source
- People Sync: Custom User Processor
- Using the Debug Panel
- AppManager: Enabling Load Balancing
- Deployment Manager: Overview
- Deployment Manager: Adding A Custom Site Definition
- Deployment Manager: Core Step Classes
- Deployment Manager: Custom Site Definition Components
- Deployment Manager: Custom Site Definition XML
- Deployment Manager: Custom Subsite Definitions
- Deployment Manager: Sample Step Code
- Deployment Manager: Supported Tokens
- Performance Considerations
- Production Settings: Disabling debug mode
- Akumina Foundation Site
- Akumina Multilingual vs Variations
- Caching: Modifying Site Caching
- Caching: Modifying Widget Caching Settings
- Managing Widget Load Priority
- Theme: Adding a New Rail Icon
- Theme: Changing the Theme of an Akumina Foundation Site
- Theme: Customizing Rail Icons
- Theme: Modifying an Akumina Foundation Theme