Building A Customdataload Callback: Hello World - akumina/AkuminaTraining GitHub Wiki

Hello World Custom Output

In this widget we will display the values we set to the dataloadproperties widget property.

Screenshot

image 5

How to Deploy

  1. Download digitalworkplace.custom.js from the “/Style Library/DigitalWorkplace/JS” folder within SharePoint.
  2. Paste the Customdataload Callback 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 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 (ListItems.html). Click “Save”.
  5. In the Manage Widgets window, find the GenericList 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
  6. Copy the Widget Snippet of your Widget Instance
  7. Paste the snippet into a Content Editor Web Part on a page within the site. Publish the page.
  8. Flush your cache by clicking on the Akumina icon in the left rail, clicking the refresh icon, then clicking “Refresh All Cache”
  9. Refresh the page. You will see your Hello World widget.

Customdataload Callback

function MyHelloWorldDataCallback(listRequest, def) {
	var me = this;

    var context = new SP.ClientContext();
	
	if (listRequest.dataLoadProperties == null || listRequest.dataLoadProperties == '') {
        listRequest.dataLoadProperties = "{'first':'Hoo','second':'Blah'}";
    }
    var dataLoadProperties = JSON.parse(listRequest.dataLoadProperties.replace(/'/g, "\""));
	
	listRequest.first = dataLoadProperties.first;
	listRequest.second = dataLoadProperties.second;


    Akumina.AddIn.Logger.logSPCall('HelloWorldCallback');
    context.executeQueryAsync(
		Function.createDelegate(me, function () { HelloWorldSuccesshandler(listRequest, def); }),
		Function.createDelegate(me, function (sender, args) {
		    Akumina.AddIn.Logger.WriteErrorLog('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
		    HelloWorldErrorhandler(listRequest, def);
		})
	);
	
}

function HelloWorldSuccesshandler(listRequest, def) {
	var result = {};
	result.Items = [];
	result.ListName = "My Hello World Customdataload";
		
	item =
	{
		"Key": listRequest.first,
		"Value": listRequest.second
	}

	result.Items.push(item);
	
	def.resolve({ response: result });
   
}
	
function HelloWorldErrorhandler(listRequest, def) {
	def.reject();
}

Template

ListItems.html

<div> 
	<h2>List Items from {{ListName}}</h2>
    {{#if Items}}
    <table>
        <thead>
            <tr><th>Key</th><th>Value</th></tr>
        </thead>
        {{#Items}}
            <tr><td>{{Key}}</td><td>{{Value}}</td></tr>
        {{/Items}}
    </table> 
    {{else}}
        No Items available.
	{{/if}}
</div>

Widget Manager - Widget Definition

As Customdataload callbacks run out of GLC widgets we will be editing the GenericList widget within the Widget Manager. image 6 We will be only ading our new view to the WidgetViews section image 7 image 9

WidgetViews

ListItems

View Name

ListItems

Relative Template Url

/Style Library/DigitalWorkplace/Content/Templates/ListItems.html

Widget Manager - Widget Instance

image 8

Title

HelloWorld – Customdatacallback

WidgetProperties

callbackmethod

MyHelloWorldDataCallback

callbacktype

customdataload

dataloadproperties

{‘first’:’Hello’,’second’:’World’}

WidgetOptions

ListItems

Display View

Checked

Selected View

Selected

Widget Manager - Widget Snippet

image 10

References

See the articles below for more on the Customdataload callback

⚠️ **GitHub.com Fallback** ⚠️