Sivarajan's Blog

SharePoint | Office 365 | Azure | JavaScript

SharePoint 2013 Responsive WebPart using Knockout with WCF REST Service - Part 2

In the previous post, I had explained on how to create the custom WCF REST Services and we will see that how to use the service with client MVVM model.

Creating a client MVVM model

I have created a new app.js file for implementation. Like that add the jQuery, Knockout, Knockout Template engine and Toastr JavaScript frameworks as mentioned below.

wcf2-1

1. Data Service

I am using the jQuery ajax function to invoke the ProductService.svc (WCF REST Service). ProductService will expose the data as JSON object. I am using a convertToObservable for converting this JSON object to Knockout object.

app.productService = (function ($, toastr) {
    var
        //Get products
        getProducts = function (productObservable, categoryId) {

            productObservable([]);

            var url = '/_layouts/15/SharePointMVVM/Services/ProductService.svc/Products/' + categoryId;

            $.ajax({
                url: url,
                type: 'GET',
                dataType: 'json',
                success: querySucceeded,
                error: queryFailed
            });


            function querySucceeded(data) {
                var products = [];
                data.GetProductsResult.forEach(function (item) {
                    products.push(new convertToObservable(item));
                });
                productObservable(products);
            }
        },

        convertToObservable = function (dto) {
            var mapped = {};
            for (prop in dto) {
                if (dto.hasOwnProperty(prop)) {
                    mapped[prop] = ko.observable(dto[prop]);
                }
            }
            return mapped;
        },

        queryFailed = function (jqXHR, textStatus) {
            toastr.error('Invoke service failed. ' + textStatus);
        };

    return {
        getProducts: getProducts
    };

})($, toastr);

 

Best Practice: In the above code, the getProducts method is public and all other methods are private. This approach will help us to develop more structured JavaScript file like c#.

2. View Model

ProductViewModel function will invoke the ProductDataService (getProducts method) for retrieve the REST service data and the Knockout binding method will use this model for UI data binding.

app.productViewModel = (function ($, ko, dataService) {

    var
        products = ko.observableArray(),
        //IsChecked = ko.observable(),

        //Get products
        getProducts = function (categoryId) {

            //call product data service
            dataService.getProducts(products, categoryId);
        };


    return {
        products: products,
        getProducts: getProducts
    };

})($, ko, app.productService);

 

3. View

You can find below the sample HTML mark-ups and the foreach Knockout function will iterate the products objects.

<table>
    <thead>
        <tr>
            <td class="tdBorder">Select Product
            </td>
            <td class="tdBorder">Product Image
            </td>
            <td class="tdBorder">Product Code
            </td>
            <td class="tdBorder">Category Code
            </td>
            <td class="tdBorder">Product Name
            </td>
            <td class="tdBorder">Product Description
            </td>
        </tr>
    </thead>
    <tbody id="divProducts" data-bind="foreach: products">
        <tr>
            <td class="tdBorder">
                <!--<input type="checkbox" data-bind="checked: IsChecked" />-->
            </td>
            <td class="tdBorder">
                <img data-bind="attr: {src: ImagePath}" />
            </td>
            <td class="tdBorder">
                <span data-bind='text: ProductId'></span>
            </td>
            <td class="tdBorder">
                <span data-bind='text: CategoryId'></span>
            </td>
            <td class="tdBorder">
                <span data-bind='text: ProductName'></span>
            </td>
            <td class="tdBorder">
                <span data-bind='text: ProductDesc'></span>
            </td>
        </tr>
    </tbody>
</table>

 

4. Client Data Binding

The category dropdown will have the list of product categories. The product items will be retrieved from service based on category selection and it will be applied using Knockout.

<script type="text/javascript">
    $(document).ready(function () {

        $('#selCategoryId').on('change', function () {
            //alert(this.value); // or $(this).val()
            ko.applyBindings(app.productViewModel, $('divProducts').get(0));
            app.productViewModel.getProducts(this.value);
        });
    });    
</script>
5. Final Output

The output will be in the browser like below,

wcf2-2

Summary

In Part 2, we saw that how to consume the WCF REST Services using jQuery ajax function and also bind the values using Knockout.JS. In the next post, we will see that how to create a single responsive view for mobile and desktop.

You can find the complete implementation here

Comments (1) -

  • Balakrishnan

    11/8/2013 4:20:53 AM | Reply

    Well written and explained Siva...Keep rocking !!

Add comment

Loading