Upgrading Widget Snippets: Updating an OOB Widget Snippet - akumina/AkuminaTraining GitHub Wiki

Updating an OOB Widget Snippet

Consider the scenario where we want to update the Featured Photos widget snippet on the Akumina Foundation Site home page.

Retrieving the Original Snippet

image 1

First, you will need to edit the page and edit the source of the Content Editor containing the FeaturedPhotos widget.

image 2

This will take you to the HTML Source editor. Create a text file in your local machine and paste the snippet code found here inside of it. We will use it for reference.

image 3

The snippet code for FeaturedPhotos widget will be as follows

<div class="ak-controls ak-genericlist-widget" id="16f4afea-d117-4c31-b2d6-fab1252007eb" ak:listname="ImageGallery_AK" ak:displaytemplateurl="/sites/3316100661InterChange/Style Library/digitalworkplace/Content/Templates/GenericList/FeaturedPhotos.html" ak:callbackmethod="ShowFeaturedPhotoItems" ak:selectfields="_ModerationStatus,Image" ak:viewxml="&lt;View&gt;&lt;Query&gt;&lt;OrderBy&gt;&lt;FieldRef Name=&#39;Created&#39; Ascending=&#39;FALSE&#39;&gt;&lt;/FieldRef&gt;&lt;/OrderBy&gt;&lt;/Query&gt;&lt;RowLimit&gt;5&lt;/RowLimit&gt;&lt;/View&gt;" xmlns:ak="http://www.w3.org/ak"><span class="ms-rteStyle-IntenseQuote"></span><br/></div>

Finding the Updated Snippet

We will find the updated snippet associated with a Widget Instance inside of the AppManager Widget Manager. However, we will need to determine which instance is correct.

When searching for the updated snippet of an OOB widget, we will reference the old snippet code for clues. First let’s look at the class of the old snippet

div class="ak-controls ak-genericlist-widget"

Since the class is ak-genericlist-widget, the new snippet will be an instance of the GenericList widget. Open up the Widget Manager by going to the Management Apps tab of AppManager and clicking on the ‘Widget Manager’ app.

image 4 In the Manage Widgets menu, find GenericList and click the 'View Instances' button. image 5

In the Widget Instance menu, we will search for an instance name that describes the widget. HomePage-Photos looks promising. We will investigate further by editing the instance. image 6

In order to verify that the HomePage-Photos instance is indeed the widget we are looking for we will have to compare the properties in the Edit Widget Instance page to those in the original snippet

image 7 image 8

Our snippet has the following properties

ak:listname="ImageGallery_AK"
ak:callbackmethod="ShowFeaturedPhotoItems"
ak:displaytemplateurl="/sites/3316100661InterChange/Style Library/digitalworkplace/Content/Templates/GenericList/FeaturedPhotos.html"

The HomePage-Photos instance has the following values for the properties List Name: ImageGallery_AK callbackmethod: ShowFeaturedPhotoItems With the selected view url value being: /Style Library/digitalworkplace/Content/Templates/GenericList/FeaturedPhotos.html

These properties match that of the snippet (the view url matches the site relative portion of the displaytemplateurl). We can conclude that HomePage-Photos is the instance we are looking for.

Replacing the Original Snippet with the Updated

We will return to the Widget Instance menu of the GenericList widget, find HomePage-Photos and click its ‘Copy’ button. image 9

Return to the home page of your Akumina Foundation Site. Edit the page, edit the source of the Content Editor containing the original snippet. Delete the original snippet and paste the updated one.

image 10 Click OK. Publish the page. With the new snippet, our widget will show up as before, but now it can be leveraged with the new Widget Manager.

References

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