FAQ Sample logic in SharePoint Hosted App (JSOM)

Here I am going to perform FAQ operation with SharePoint hosted app (JSOM) .

We need two list

1] FAQ Category

2]FAQ Bank

1] FAQ Category :

From this list , we will bind items to drop down.

2]FAQ Bank:

In this list , we will submit questions on click of submit button.

As well , will  fetch  question and answers based on selected FAQ category from drop down.

FAQ Functionality :

Employee can submit questions : select category from dropdown (binding category from list) and enter question . Question will be submitted click on submit button.

Employee can view FAQs : Select FAQ category from Dropdown. Click on search FAQs, able to view respective FAQs against selected FAQ category.

Html code in ContentPlaceHolderID of default.aspx page .

<asp:Content ContentPlaceHolderID="PlaceHolderMain" runat="server">

    <div>

        <p id="message">

            <!-- The following content will be replaced with the user name when you run the app - see App.js -->

            initializing...

        </p>

        <select id="Category">

 </select>

        <br />

        <br />

        <input type="text" name="Question" id="Question" placeholder="Enter Question"/><br/> <br />

<input type="submit" value="Submit" id="subtn" onclick="btnSubmit_OnClientClick(); return false;"/>

        <br />

        <br />

        <input type="submit" value="Search FAQ" id="searchfaq" onclick="btnSearchFAQ_OnClientClick(); return false;"/>

        <br />

        <br />

        

        <table id="tblFAQ">

         

        </table>

    </div>

</asp:Content>

App.JS Code

'use strict';

function manageQueryStringParameter(paramToRetrieve) {

    var params =

    document.URL.split("?")[1].split("&");

    var strParams = "";

    for (var i = 0; i < params.length; i = i + 1) {

        var singleParam = params[i].split("=");

        if (singleParam[0] == paramToRetrieve) {

            return singleParam[1];

        }

    }

}

var hostWebUrl;

var appWebUrl;

var list1;

var allItems;

var web;

// This code runs when the DOM is ready and creates a context object which is needed to use the SharePoint object model

$(document).ready(function () {

    hostWebUrl = decodeURIComponent(manageQueryStringParameter('SPHostUrl'));

    appWebUrl = decodeURIComponent(manageQueryStringParameter('SPAppWebUrl'));

    getUserName();

});

// This function prepares, loads, and then executes a SharePoint query to get the current users information

function getUserName() {

    var context = new SP.ClientContext(appWebUrl);

    var appCtxSite = new SP.AppContextSite(context, hostWebUrl);

    web = appCtxSite.get_web();

    list1 = web.get_lists().getByTitle("FAQ Category");

    //context.load(list);

    //context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);

    

    var myquery = new SP.CamlQuery.createAllItemsQuery();

    allItems = list1.getItems(myquery);

    context.load(allItems);

    context.executeQueryAsync(onGetUserNameSuccess, onGetUserNameFail);

}

// This function is executed if the above call is successful

// It replaces the contents of the 'message' element with the user name

function onGetUserNameSuccess() {

    $('#message').text('Hello ' + 'Anup Ghume');

    var test;

    var ListEnumerator = allItems.getEnumerator();

    while (ListEnumerator.moveNext()) {

        var currentItem = ListEnumerator.get_current();

        test = currentItem.get_item('Category');

        //alert(test);

        //fillDropDown();

        var ddlCategory = document.getElementById('Category');          

        Category.options[Category.options.length] = new Option(currentItem.get_item('Category'), currentItem.get_item('ID'));

    }

}

function fillDropDown() {

    var ddlCategory = document.getElementById('Category');

    if (ddlCategory != null) {

        alert("ookk");

    }

}

function btnSubmit_OnClientClick() {

    //var categoryValue = document.getElementById('Category').value;

    

    var e = document.getElementById("Category");

    var categoryValue = e.options[e.selectedIndex].text;

    alert(categoryValue);

    var QuestionValue = document.getElementById("Question").value;

    alert(QuestionValue);

    //var list = web.get_lists().getByTitle("FAQ Bank");

    var context = new SP.ClientContext(appWebUrl);

    var appCtxSite = new SP.AppContextSite(context, hostWebUrl);

    web = appCtxSite.get_web();

    var list = web.get_lists().getByTitle("FAQ Bank");

    var listItemCreationInfo = new SP.ListItemCreationInformation();

    var item = list.addItem(listItemCreationInfo);

    item.set_item("FAQCategory", categoryValue);

    item.set_item("Question", QuestionValue);

    item.update();

    context.executeQueryAsync(SaveEmployeeSuccess,SaveEmployeeFailure);

}

// This function is executed if the above call fails

    function onGetUserNameFail(sender, args) {

        alert('Failed to get user name. Error:' + args.get_message());

    }

    function SaveEmployeeSuccess() {

        document.getElementById("Question").value = "";

        document.getElementById("Category").selectedIndex = 0;

    }

    function SaveEmployeeFailure() {

        alert('item not save');

    }

    function btnSearchFAQ_OnClientClick() {

        var e = document.getElementById("Category");

        var categoryValueOnSearch = e.options[e.selectedIndex].text;

        alert(categoryValueOnSearch);

        var context = new SP.ClientContext(appWebUrl);

        var appCtxSite = new SP.AppContextSite(context, hostWebUrl);

        web = appCtxSite.get_web();

        var list = web.get_lists().getByTitle("FAQ Bank");

        var query = new SP.CamlQuery();

        //query.set_viewXml('<Where><Eq><FieldRef Name=\'FAQCategory\' /><Value Type=\'Text\'>UI</Value></Eq></Where>');

        query.set_viewXml("<View><Query><Where><Eq><FieldRef Name='FAQCategory' /><Value Type='Text'>" + categoryValueOnSearch + "</Value></Eq></Where></Query></View>");

        var items = list.getItems(query);

        context.load(list);

        context.load(items);

        var table = $("#tblFAQ");

        var innerHtml = "<tr><td>Questions</td><td>Answers</td></tr>";

        context.executeQueryAsync(

        Function.createDelegate(this, function () {

            //var itemInfo = '';

            var enumerator = items.getEnumerator();

            while (enumerator.moveNext()) {

                var currentListItem = enumerator.get_current();

                //alert(currentListItem.get_item('Question'));

                innerHtml += "<tr><td>" + currentListItem.get_item('Question') + "</td><td>" + currentListItem.get_item('Answer') + "</td></tr>";

            }

            table.html(innerHtml);

        }),

        Function.createDelegate(this, fail)

        );

    }

        function fail() {

            alert("Fail all");

        }