Akumina Digital Workplace

Transcription

1 Akumina Digital Workplace Widget Manager Samples Version 1.1 (May 2016)

2 Table of Contents OVERVIEW... 5 Widget Manager... Error! Bookmark not defined. Widget Manager Manage Widgets... Error! Bookmark not defined. Widget Manager Manage Widget Definitions... Error! Bookmark not defined. Rail Widget Manager UI... Error! Bookmark not defined. Adding a Widget to a Page... Error! Bookmark not defined. Existing Widgets... Error! Bookmark not defined. Widget Snippets... Error! Bookmark not defined. Edit the Webpage... Error! Bookmark not defined. HELLO WORLD WIDGET... 6 Screenshot... 6 How to Deploy... 6 Widget Definition... 6 if ((typeof Akumina.AddIn.HelloWorldWidget) === undefined )... 8 this.getpropertyvalue... 8 this.setdefaultproperties... 8 this.init... 8 this.prerender... 9 this.render... 9 this.refreshwidget... 9 Templates... 9 Widget Manager - Widget Definition WidgetName WidgetClass WidgetProperties WidgetViews Widget Manager Widget Instance Title Title WidgetOptions Widget Manager Widget Snippet Widget Manager Change the View Adding to the Dashboard How to Deploy Dashboard Widget Manager Screenshots CUSTOM WIDGET STOCK TICKER

3 Screenshot How to Deploy Widget Definition if ((typeof Akumina.AddIn.StockTickerWidget) === undefined ) this.getpropertyvalue this.setdefaultproperties this.init this.prerender this.render this.success this.bindtemplate this.refreshwidget Template Widget Manager Widget Definition WidgetName WidgetClass WidgetProperties WidgetViews Widget Manager Widget Instance Title WidgetProperties WidgetOptions Widget Manager Widget Snippet Widget Manager Change the View and Property Value Adding to the Dashboard How to Deploy Dashboard Manager Screenshots CUSTOM WIDGET FLICKR IMAGE LIBRARY Screenshot How to Deploy Widget Definition if ((typeof Akumina.AddIn.FlickrWidget) === undefined ) this.getpropertyvalue this.setdefaultproperties this.init this.prerender this.render this.success this.bindtemplate this.refreshwidget Template

4 Widget Manager Widget Definition WidgetName WidgetClass WidgetProperties Widget Views Widget Manager Widget Instance Title WidgetOptions Widget Manager Widget Snippet Widget Manager Change the Property Value WIDGET DECISION TREE... ERROR! BOOKMARK NOT DEFINED. DIGITAL WORKPLACE THEME CUSTOMIZATIONS... ERROR! BOOKMARK NOT DEFINED. Changing a theme color... Error! Bookmark not defined. Customizing Rail Icons... Error! Bookmark not defined. 4

5 Overview In this document we will go through examples of using the Digital Workplace widget framework to build a Custom Widget. A Custom Widget is needed when we want to utilize data that is not stored within a SharePoint list on your Digital Workplace site. When building a Custom Widget you will need to create the following elements: The Widget Definition The Template 5

6 Hello World Widget Screenshot How to Deploy 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 Interchange, 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 (helloworld1.html). Click Save. Repeat for helloworld2.html. In the Management Apps tab of Interchange, 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 HelloWorld 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 Hello World Widget Widget Definition if ((typeof Akumina.AddIn.HelloWorldWidget) === 'undefined') { Akumina.AddIn.HelloWorldWidget = 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; 6

7 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.test = _cur.getpropertyvalue(requestin, "test", ""); return requestout; this.init = function (HelloWorldRequest) { _cur.appweburl = decodeuricomponent(akumina.addin.utilities.getquerystringparameter("spappweburl", "")); _cur.hosturl = decodeuricomponent(akumina.addin.utilities.getquerystringparameter("sphosturl", "")); _cur.helloworldrequest = _cur.setdefaultsproperties(helloworldrequest); _cur.helloworldrequest.editmode = Akumina.AddIn.Utilities.getEditMode(); //Widget Framework var widgetname = "HelloWorld"; Akumina.Digispace.WidgetPropertyViews.AddViewForProperty(widgetName, "DisplayTemplateUrl", "TemplatePicker"); _cur.prerender(); this.prerender = function () { var targetdiv = this.helloworldrequest.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); 7

8 this.render = function () { var data = { data.test = _cur.helloworldrequest.test; if (!_cur.helloworldrequest.editmode) { _cur.bindtemplate(_cur.helloworldrequest.displaytemplateurl, data, _cur.helloworldrequest.senderid); this.refreshwidget = function (newprops) { if (newprops["id"] == _cur.helloworldrequest.senderid) { _cur.helloworldrequest = _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); ); if ((typeof Akumina.AddIn.HelloWorldWidget) === undefined ) We define the widget name with this line. Naming will follow the convention of Akumina.AddIn.<WidgetName> this.getpropertyvalue Helper method to get properties this.setdefaultproperties We set the default values to properties if nothing is passed in for them. this.init 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. 8

9 this.prerender 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. this.render this.render gets the data and the template this.refreshwidget this.refreshwidget resets the properties and calls this.render Templates helloworld1.html <div class="interaction"> <h1 style="color:green;">view 1!!! - This is the coolest view: {{Test</h1> </div> helloworld2.html <div class="interaction"> <h1 style="color:red;">view 2: This is the view 2! {{Test</h1> </div> 9

10 Widget Manager - Widget Definition WidgetName HelloWorld WidgetClass Akumina.AddIn.HelloWorldWidget WidgetProperties Property Name Test Property Value default Property Type Text 10

11 WidgetViews View 1 View Name View 1 Relative Template Url /Style Library/DigitalWorkplace/Content/Templates/helloworld1.html View 2 View Name View 2 Relative Template Url /Style Library/DigitalWorkplace/Content/Templates/helloworld2.html Widget Manager Widget Instance Most of the fields here will be autogenerated Title Instance 1 11

12 Title Instance 1 WidgetOptions View 1 Display View Checked Selected View Selected View 2 Display View Checked Widget Manager Widget Snippet Widget Manager Change the View In your Digital Workplace Site, click on the Akumina Icon in the Rail, click on the pencil, then click on your HelloWorldWidget to bring up the Widget Manager. Change the View to View 2. Click Update. 12

13 Adding to the Dashboard How to Deploy 1. In the Management Apps Tab of InterChange, click on the Dashboard Widget Manager. Then click Add New. Add the instance of the HelloWorldWidget we just created. Use the Dashboard Widget Manager for reference. Click Save & Exit 2. Navigate to the Dashboard.aspx page of your site. Click Customize, check HelloWorldDashboard. Click Save 3. Flush your cache by clicking on the Akumina icon in the left rail, clicking the refresh icon, then clicking Refresh All Cache 4. Refresh the page. You will see your GLC List Items Widget Dashboard Widget Manager Title HelloWorldDashboard Widget Instance Instance 1 13

14 IsEnabled Checked Screenshots 14

15 Custom Widget Stock Ticker Screenshot How to Deploy 1. Download digitalworkplace.custom.js from the /Style Library/DigitalWorkplace/JS folder within SharePoint 2. Paste the Widget Definition within digitalworkplace.custom.js 3. Upload the updated digitalworkplace.custom.js to the /Style Library/DigitalWorkplace/JS folder within SharePoint 4. In the Management Apps tab of Interchange, 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 (StockList.html). Click Save. Repeat for StockListChart.html. 5. In the Management Apps tab of Interchange, 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 6. In the Manage Widgets window, find StockTicker 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 7. Copy the Widget Snippet of your Widget Instance. 8. Paste the snippet into a Content Editor Web Part on a page within the site. Publish the page. 9. Flush your cache by clicking on the Akumina icon in the left rail, clicking the refresh icon, then clicking Refresh All Cache 10. Refresh the page. You will see your Stock Ticker Widget 15

16 Widget Definition if ((typeof Akumina.AddIn.StockTickerWidget) === 'undefined') { Akumina.AddIn.StockTickerWidget = 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.stocklist = _cur.getpropertyvalue(requestin, "stocklist", ""); requestout.callbackmethod = _cur.getpropertyvalue(requestin, "callbackmethod", ""); return requestout; this.init = function (StockTickerRequest) { _cur.appweburl = decodeuricomponent(akumina.addin.utilities.getquerystringparameter("spappweburl", "")); _cur.hosturl = decodeuricomponent(akumina.addin.utilities.getquerystringparameter("sphosturl", "")); _cur.stocktickerrequest = _cur.setdefaultsproperties(stocktickerrequest); _cur.stocktickerrequest.editmode = Akumina.AddIn.Utilities.getEditMode(); var widgetname = "StockTicker"; 16

17 Akumina.Digispace.WidgetPropertyViews.AddViewForProperty(widgetName, "DisplayTemplateUrl", "TemplatePicker"); _cur.prerender(); this.prerender = function () { var targetdiv = this.stocktickerrequest.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 stocklist = _cur.stocktickerrequest.stocklist; $.getjson(' + stocklist + '&callback=?', function (response) { ); _cur.success(response); this.refreshwidget = function (newprops) { if (newprops["id"] == _cur.stocktickerrequest.senderid) { _cur.stocktickerrequest = _cur.setdefaultsproperties(newprops); _cur.render(); this.success = function(response) { var data = { data.items = []; data.senderid = _cur.stocktickerrequest.senderid; 17

18 for (i = 0; i < response.length; i++) { var stockinfo = response[i]; var title = stockinfo.t; var url = " + stockinfo.t; var chart = " + stockinfo.t + "&t=1d"; var changevalue = parsefloat(stockinfo.c); var changeispositive = changevalue >= 0; var stockprice = stockinfo.l; var differential = stockinfo.c; var percent = stockinfo.cp; var time = stockinfo.lt; var stockitem = { "Title": title, "StockTitle": title, "Url": url, "Positive": changeispositive, "Price": stockprice, "Differential": differential, "Percent": percent, "Time": time, "Chart": chart data.items.push(stockitem); if (!_cur.stocktickerrequest.editmode) { _cur.bindtemplate(_cur.stocktickerrequest.displaytemplateurl, data, _cur.stocktickerrequest.senderid); this.bindtemplate = function (templateuri, data, targetdiv) { new Akumina.Digispace.AppPart.Data().Templates.ParseTemplate(templateUri, data).done(function (html) { ); $("#" + targetdiv).html(html); 18

19 if ((typeof Akumina.AddIn.StockTickerWidget) === undefined ) We define the Stock Ticker widget with this line. this.getpropertyvalue Helper method to get properties this.setdefaultproperties We set the default values to properties if nothing is passed in for them. this.init 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 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. this.render We make a GET call to google finance with our stocklist values as paramters. Upon successful query we call the Success function this.success We assign the results from our GET to values to be used in our template this.bindtemplate We bind our data to our template and render this.refreshwidget this.refreshwidget resets the properties and calls this.render Template Create a file called StockTicker.html and paste the following markup within <style>.ia-announcement-wrapper { background-color:white; 19

20 </style> padding:10px; <div class="interaction"> <div class="ia-announcement-wrapper"> <div class="ia-control-header"> </div> <span class="ia-control-header-icon fa fa-{{webparticon"></span> <h3 class="ia-control-header-heading">{{webparttitle</h3> <div class="ia-announcements"> <ul> {{#Items <li> <h4 class="ia-announcement-title"><a href="{{url">{{stocktitle</a></h4> {{#if Positive <p class="ia-annoucement-summary">{{price <font color="green"> {{Differential ({{Percent%)</font> <br/> {{Time</p> {{else <p class="ia-annoucement-summary">{{price <font color="red"> {{Differential ({{Percent%)</font> </div> </div> </div> </ul> </li> {{/Items <br/> {{Time</p> {{/if Create a file called StockTickerChart.html and paste the following markup within <style>.ia-announcement-wrapper { background-color:white; padding:10px; </style> 20

21 <div class="interaction"> <div class="ia-announcement-wrapper"> <div class="ia-control-header"> <span class="ia-control-header-icon fa fa-{{webparticon"></span> <h3 class="ia-control-header-heading">{{webparttitle</h3> </div> <div class="ia-announcements"> {{#Items <img class="stockticker-chart" src="{{chart"> {{/Items </div> </div> </div> Widget Manager Widget Definition WidgetName StockTicker WidgetClass Akumina.AddIn.StockTickerWidget 21

22 WidgetProperties Property Name Stocklist Property Value MSFT,APPL,ATVI,AMZN,GOOG Property Type Text WidgetViews View 1 View Name View 1 Relative Template Url /Style Library/DigitalWorkplace/Content/Templates/StockList.html View 2 View Name View 2 Relative Template Url /Style Library/DigitalWorkplace/Content/Templates/StockListChart.html 22

23 Widget Manager Widget Instance Title Stock Ticker 1 WidgetProperties Stocklist Property Value MSFT,AAPL,ATVI,AMZN,GOOG WidgetOptions View 1 Display View Checked Selected View Selected View 2 Display View Checked 23

24 Selected View Selected Widget Manager Widget Snippet Widget Manager Change the View and Property Value In your Digital Workplace Site, click on the Akumina Icon in the Rail, click on the pencil, then click on your StockTickerWidget to bring up the Widget Manager. Change the view to View 2. Add TSLA to the stocklist. Click Update. The new view will be showing daily charts for all of the stocks and the TSLA stock info will now appear 24

25 Adding to the Dashboard How to Deploy In the Management Apps Tab of InterChange, click on the Dashboard Widget Manager. Then Click Add New. Add the instance of the StockTickerWidget we just created. Use the Dashboard Widget Manager for reference. Click Save & Exit Navigate to the Dashboard.aspx page of your site. Click Customize, check StockTickerDashboard. Click Save. 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 StockTickerWidget 25

26 Dashboard Manager Title StockTickerDashboard Widget Instance Stock Ticker 1 IsEnabled Checked 26

27 Screenshots 27

28 Custom Widget Flickr Image Library Screenshot How to Deploy 1. Download digitalworkplace.custom.js from the /Style Library/DigitalWorkplace/JS folder within SharePoint 2. Paste the Widget Definition within digitalworkplace.custom.js 3. Upload the updated digitalworkplace.custom.js to the /Style Library/DigitalWorkplace/JS folder within SharePoint 4. In the Management Apps tab of Interchange, 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 (FlickrGallery.html). Click Save. 5. In the Management Apps tab of Interchange, 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 6. In the Manage Widgets window, find Flickr 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 7. Copy the Widget Snippet of your Widget Instance. 8. Paste the snippet into a Content Editor Web Part on a page within the site. Publish the page. 9. Flush your cache by clicking on the Akumina icon in the left rail, clicking the refresh icon, then clicking Refresh All Cache 10. Refresh the page. You will see your Flickr Widget 28

29 Widget Definition if ((typeof Akumina.AddIn.FlickrWidget) === 'undefined') { Akumina.AddIn.FlickrWidget = 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.tags = _cur.getpropertyvalue(requestin, "tags", ""); requestout.callbackmethod = _cur.getpropertyvalue(requestin, "callbackmethod", ""); return requestout; this.init = function (FlickrRequest) { _cur.appweburl = decodeuricomponent(akumina.addin.utilities.getquerystringparameter("spappweburl", "")); _cur.hosturl = decodeuricomponent(akumina.addin.utilities.getquerystringparameter("sphosturl", "")); _cur.flickrrequest = _cur.setdefaultsproperties(flickrrequest); _cur.flickrrequest.editmode = Akumina.AddIn.Utilities.getEditMode(); var widgetname = "Flickr"; 29

30 Akumina.Digispace.WidgetPropertyViews.AddViewForProperty(widgetName, "DisplayTemplateUrl", "TemplatePicker"); _cur.prerender(); this.prerender = function () { var targetdiv = this.flickrrequest.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 tags = _cur.flickrrequest.tags; $.ajax({ type: 'GET', url: ' jsonpcallback: 'jsonflickrfeed', datatype: 'jsonp', data: { "tags": tags, "format": "json", success: function(response) {_cur.success(response) ); this.success = function (response) { console.log(response); var data = { data.items = []; data.senderid = _cur.flickrrequest.senderid; data.title = response.title; for(i = 0; i < response.items.length; i++) { 30

31 var flickrinfo = response.items[i]; var media = flickrinfo.media.m; var flickritem = { "Image": media data.items.push(flickritem); if (!_cur.flickrrequest.editmode) { _cur.bindtemplate(_cur.flickrrequest.displaytemplateurl, data, _cur.flickrrequest.senderid); this.refreshwidget = function (newprops) { if (newprops["id"] == _cur.flickrrequest.senderid) { _cur.flickrrequest = _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); if ((typeof Akumina.AddIn.FlickrWidget) === undefined ) We define the Flickr widget with this line. this.getpropertyvalue Helper method to get properties 31

32 this.setdefaultproperties We set the default values to properties if nothing is passed in for them. this.init 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 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. this.render We make a GET call to Flickr. We pass the tags as paramaters. We re using a Cross Domain AJAX call so we re specifying the callback name, which is specific to site we are calling, in the jsonpcallback property. Upon successful query we call the Success function. Note: If you only want raw JSON without a function wrapper, add the parameter nojsoncallback with a value of 1 to your request. If you want to define your own callback function name, use the desired name as your jsonpcallback value. this.success We assign the results from our GET to values to be used in our template this.bindtemplate We bind our data to our template and render this.refreshwidget this.refreshwidget resets the properties and calls this.render Template Create a file called FlickrGallery.html and paste the markup below within <div class="interaction"> <div class="row"> <div class="small-12 columns"> <div class="ak-media-tabs"> <h1 class="ak-media-tab">{{title</h1> </div> <div class="ak-photo-list"> <ul id="ak-photo-container"> {{#if Items {{#Items <li> <a href="#photo-popup" class="ak-photo-link"> <div class="ak-photo-image"> <img src="{{image"> 32

33 </div> </a> </li> {{/Items {{else <h4>no Photos Found</h4> </ul> </div> <div class="holder"></div> </div> </div> </div> <script type="text/javascript"> $('.ak-photo-link').magnificpopup({ type: 'inline', preloader: false, closebtninside: true, showclosebtn: true, fixedbgpos: true, mainclass: 'ak-photo-modal' ); $('.ak-photo-link').on('click', function () { $('.imagepreview').attr('src', $(this).find('img').attr('src')); ); </script> 33

34 Widget Manager Widget Definition WidgetName Flickr WidgetClass Akumina.AddIn.FlickrWidget WidgetProperties Property Name tags Friendly Name tags Property Value cat Property Type Text Widget Views View 1 View Name View 1 Relative Template Url /Style Library/DigitalWorkplace/Content/Templates/FlickrGallery.html 34

35 Widget Manager Widget Instance Title Flickr 1 WidgetOptions View 1 Display View Checked Selected View Selected Widget Manager Widget Snippet 35

36 Widget Manager Change the Property Value In your Digital Workplace Site, click on the Akumina Icon in the Rail, click on the pencil, then click on your FlickrWidget to bring up the Widget Manager. Change the tags value to havanese. Click Update. 36