Search in SharePoint hosted App


Search in SharePoint hosted app Search functionality is a very common and  important feature.

One of the Microsoft SharePoint hosting options is develop apps with in SharePoint. If you provide search feature as an App to end users then that will help them in lots of ways. So having search in SharePoint hosted app is very important because users tend to use a lot of search in any SharePoint environment so is the case with Apps as well.

In this article you will learn how we will implement the search functionality in SharePoint hosted app using REST (Representational state transfer) API to display list information from host web.

Scenario:

We will take a scenario where you have a list called Students in your host web, now you are planing to develop an App that will search the details of students available in the host web from App web. 

So lets start developing the APP.

Developing an APP to Search:

Open visual studio 2012, click on new project select Apps under office/SharePoint from which select project type as Apps for SharePoint 2013.

Enter your project name as Search-Students.

App for SharePoint 2013

Click ok. It will open the wizard to create the project.

Select the site where you want to deploy the app. "http://sharepoint-journey.com".

Hosting option should be : SharePoint-hosted.


App for SharePoint settings

Once you click on finish it will create a SharePoint hosted app project for you.


Changes in default.aspx:

In the below code snippet of default.aspx page I have added added code to display the search textbox and button.

On the button onclick event you need to call the method that will be written in App.js file. In this example it is executeQuery method by passing the id query of the textbox.

Using REST query in App.js:

In this section you will learn how the below code works.

Whenever DOM is ready it will execute the code inside ready function. To know what is DOM and other basics of jQuery, Please check this article.

In the ready function we are making sure sure that sp.js file gets loaded before performing any action. For that we use executeOrDelayUntilScriptLoaded  which will load SP.js file before performing any actions on the client side or interacting with the ribbon etc. In SharePoint.

If it doesn't load then we are not displaying the anything on the page. How we are making sure about this?. If you see the above code in defalut.aspx the SearchStudentsDiv by default doesn't display. Once we are able to load the SP.js file then only we are showing the div. Please check the below code in line number 8.

Cool, let's continue...

Next is, executeQuery method which will be called whenever we click on the search button in app and we are are passing the query text from the Textbox.

On the line number 13 we have Results object inside the executequery method. This Results object contains the element  and url members and init, load, onSuccess and onError functions.

Go to line number 60, Once we define the Results object,  we are calling init function by passing our StudentsSearchresultsDiv.

So what are you going to do in init function? Very simple. Assign the div element(StudentsSearchresultsDiv) to your Results element and URL which will be used to get the list details from the host web to URL member of Results object. Here we are using REST API to build the URL. Please check the basics of  REST in this video. So init method got executed successfully.

Go to line number 61, here we are calling the load function. What does load function do here. It's basically an Ajax call. 

For URL we are passing the Results. URL memeber

Next Method is GET to select the search results.

Next Data is returned in the form of Json.

If this Ajax call succeeds, then it will execute the onSuccess function else onError function.

onSuccess function displays the search results in table format. 

Giving search service permissions in Appmanifest.xml:

To provide proper permissions to have search in SharePoint hosted app, open the Appmanifest.xml and provide the permissions to search as scope and select the permission "QueryAsUserIgnoreAppPrincipal".


Search scope in Appmanifest.xml

After adding the permissions request you can open the appmanifest.xml file and see that there is an entry added to the AppPermissionRequests section.


Right click on the project and deploy it, once its got deployed when you try to open the app it will show the  below screen. The below screen says App wants to access search service so do you want to allow this App to execute the queries by selecting Trust It . If you clicked on cancel then app will not get deployed.


Trust your App

Once you select Trust It , the APP is ready to use, so you can search in SharePoint hosted App . Enter the student details to search from the App.

You will get the student details inside the list which is located in host web.


Search Results inside App

Fig: Search in SharePoint hosted App.

Conclusion:

Congratulations you have successfully developed an APP which will be able to search the list details from host web.



› Search in SharePoint hosted App

About Author

Devendra Velegandla is a four-time recipient of Microsoft's Most Valuable Professional (MVP) award (2014-2017) for Office Servers and Services MVP and  SharePoint Server.He received the MCC award for his contributions in Microsoft MSDN/TechNet forums.He loves sharing articles, videos and tutorial on SharePoint and Office 365.


If you found this post helpful, please share with your friends!!


Join 6,000 subscribers and receive instant access to

Devendra's Library of Resources for SharePoint Developers