Building A Custom Widget that accesses SharePoint Lists - akumina/AkuminaTraining GitHub Wiki
Akumina Foundation 3.3.0.0 and later
Although the Generic List Control is often sufficient for widgets that draw data from SharePoint, situations may arise when the best solution is to have a Custom Widget draw data from SharePoint. In this document, we will create a Custom Widget and retrieve list data via the GetList functionality.
- Create the HelloWorldList_AK list within your Akumina Foundation site. The HelloWorldList_AK list will need an additional text field called ‘Value’
- 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 (helloworld3.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 the HelloWorldList widget 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 Custom Widget pulling data from the HelloWorldList_AK list.
Create a new custom list called 'HelloWorldList_AK'. Add an additional column called 'Value' with the type 'Single Line of Text'. Add the following values to the list.
if ((typeof Akumina.AddIn.HelloWorldListWidget) === 'undefined') {
Akumina.AddIn.HelloWorldListWidget = 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.Test = _cur.GetPropertyValue(requestIn, "test", "");
return requestOut;
};
//"Init" is the main function called from the framework, everything else is specific to this widget
this.Init = function (HelloWorldRequest) {
_cur.HelloWorldRequest = _cur.SetDefaultsProperties(HelloWorldRequest);
_cur.HelloWorldRequest.EditMode = Akumina.AddIn.Utilities.getEditMode();
//Widget Framework
var widgetName = "HelloWorldList";
Akumina.Digispace.WidgetPropertyViews.AddViewForProperty(widgetName,"DisplayTemplateUrl", "TemplatePicker");
_cur.Prerender();
};
this.Prerender = function () {
var targetDiv = this.HelloWorldRequest.SenderId;
$("#" + targetDiv).html(Akumina.Digispace.ConfigurationContext.LoadingTemplateHtml);
//subscribe to loader completed event, this is fired at the end of the DWP page lifecycle
Akumina.Digispace.AppPart.Eventing.Subscribe('/loader/completed/', _cur.Render);
//subscribe to refresh event, called by Widget Manager on DWP
Akumina.Digispace.AppPart.Eventing.Subscribe('/widget/updated/', _cur.RefreshWidget);
};
this.Render = function () {
var request = {}
//data.Test = _cur.HelloWorldRequest.Test;
request.listName = "HelloWorldList_AK";
request.isRoot = true;
request.selectFields = ["Title","Value"].join();
//Create instance of Akumina.Digispace.Data.SharePoint
var spcaller = new Akumina.Digispace.Data.SharePoint();
//Call GetList
spcaller.GetList(request).then(function (data) {
//retrieve response from the object returned
var response = data.response;
//pass response data to Success Handler
_cur.onQuerySucceeded(response);
},
function (error) {
_cur.onQueryFailed(error.sender, error.args);
});
};
this.onQuerySucceeded = function(response) {
var listItemInfo = '';
var listItemEnumerator = response.listItems.getEnumerator();
var data = {};
data.Items = [];
while (listItemEnumerator.moveNext()) {
var oListItem = listItemEnumerator.get_current();
var returnItem = {};
//Populate item object with field values
returnItem.Title = oListItem.get_item('Title');
returnItem.Value = oListItem.get_item('Value');
//Push item
data.Items.push(returnItem);
}
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);
});
};
}
}<div class="interAction">
{{#Items}}
<h3 style="color:blue;">View 3: This is the view 3! {{Title}} - {{Value}}</h1>
{{/Items}}
</div>
HelloWorldList
Akumina.AddIn.HelloWorldListWidget
Hello World List
/Style Library/DigitalWorkPlace/Content/Templates/helloworld3.html
Most of the fields here will be auto generated
Hello World List
Checked
Selected
