Adding Javascript to Widget Views with the UICallbackMethod BindUICallback - akumina/AkuminaTraining GitHub Wiki

As of 4.0.0.0, the UICallbackMethod property surfaces an integration point where we pass a callback function that is called after data is bound to the Widget's view html. This enables view specific javascript (like a jquery plugin or click eventing) to be executed when the widget is loaded.

The UICallbackMethod is currently only available within the GenericList,GenericItem and QuickLink widgets. If you require this functionality for additional widgets, please contact support, with the 4.0 branch we can patch just the widget code and is very simple for us to do for you.

In the following Walkthrough, we will incorporate an FAQ widget whose answers will slide up and down via a jquery accordion menu. The jquery will be bound to an onclick event within the UICallbackMethod.

1. If not on a Digital Workplace Foundation site, create the FAQ_AK list.
2. Download digitalworkplace.custom.js from the /Style Library/DigitalWorkplace/JS folder within SharePoint
3. Paste the UICallbackMethod within digitalworkplace.custom.js
4. Upload the updated digitalworkplace.custom.js to the /Style Library/DigitalWorkplace/JS folder within SharePoint
5. In a text editor, create a new file, paste the view markup within and save it as FaqWithUiCallback.html.
6. In the Management Apps tab of AppManager, click on the View Manager. Click Add New. In the left pane navigate to /DigitalWorkplace/Content/Templates/GenericList for the folder path. Click Choose File, navigate to your custom template (FaqWithUiCallback.html). Click Save. In the Management Apps tab of AppManager, click on the Widget Manager app. Then in the list of Widgets find the GenericList widget. Click Edit. Add our newly added templates to the WidgetViews field. Name it FAQ-UICallback. Click Save & Exit.
7. In the Manage Widgets window, find the GenericList widget and click its View Instances button. Then click on Add New. Create your widget instance with the values in the Widget Manager – Widget Instance section. Click Save & Exit
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 the FAQ Widget with accordion markup initialized by the UICallbackMethod.

If you are working on a Digital Workplace Foundation site, the FAQ_AK list will already be deployed. If not, create a new custom list called FAQ_AK. Add the following columns:

• Answer (Type: Text)
• ItemOrder (Type: Number)
• ItemActive (Type: Yes/No)

Add items to the list shown in the image below.

<style>
    .ak-faq-list
    {
        overflow-x:visible;
    }
</style>

<div class="interAction">
    <div class="ak-faq-list ak-module">
        <h4 class="ak-module-header">{{translate "dashboard.faqtitle"}}</h4>
        <ul>
            {{#if HasItems}}
            {{#Items}}
            {{#Active}}
            <li>
                <h5 class="ak-faq-question"><a href="#"><i class="fa fa-caret-right"></i> {{Title}}</a></h5>
                <div class="ak-faq-answer"><p>{{{Answer}}}</p></div>
            </li>
            {{/Active}}
            {{/Items}}
            {{else}}
            <h2>{{translate "dashboard.nofaqfound"}}</h2>
            {{/if}}

        </ul>
        <a class="ak-faqs-more ak-module-more-link" href="{{ViewMoreLink}}">{{ViewMoreText}} &rsaquo;</a>
    </div>
</div>

Every uicallbackmethod should be defined as a javascript function within the digitalworkplace.custom.js. This function will take two parameters: control and props

The control parameter is the div of the widget snippet. This provides a handle for the developer to manipulate child markup of the snippet.

The props parameter is a JSON object of the properties set within the widget instance. This allows the developer to utilize widget instance properties when initializing jquery plugins.

/* BEGIN - FAQ UI Callback */
function faqUiCallback(control, props) {
	
	$(control).find('.ak-faq-question').click(function (event) {

        event.preventDefault();

        //close any open questions
        $(this).parent().siblings().children('.ak-faq-answer').slideUp();
        $(this).parent().siblings().children('h5').children('a').children('i').removeClass('fa-rotate-90');

        //open the answer for the question
        $(this).siblings('.ak-faq-answer').slideDown();

        //rotate icon
        if (!$(this).children('a').children('i').hasClass('fa-rotate-90')) {
            $(this).children('a').children('i').addClass('fa-rotate-90');
        }
        else
        {
            $(this).siblings('.ak-faq-answer').slideUp();
            $(this).children('a').children('i').removeClass('fa-rotate-90');
        }

    });
}
/* END - FAQ UI Callback */

Add the following properties to your widget instance:

• Title: FAQ Widget - UI Callback
• WidgetDescription: FAQ Widget with a UI Callback
• {genericlist.friendlyname_listname}: FAQ_AK
• callbackmethod: ShowFAQItems
• uicallbackmethod: faqUiCallback

For the View, select the FAQ-UICallback view.