Tuesday, 8 December 2015

Create Custom Discussion Board App in SharePoint 2013

Discussion boards provide forums for site participants to discuss topics with each other. Most site templates include the ability to create discussion boards.
In this blog we will see how to create Custom ​Discussion Board app in SharePoint 2013.
Step 1: To create SharePoint App for Discussion Board, user needs to create Discussion Board list. To create the list go to Site Settings -> Site Contents.
 ​


Step 2: from Site Contents click on add an app.



Step 3: from add an app click on App Details to create new app.


Step 4: Now click on ADD IT to create list based on Discussion Board Template.



Step 5: Here can see the Discussion Board list created.



Step 6: Now to create SharePoint Hosted App for Discussion Board, first open Visual Studio and click on New Project to create a new project.



Step 7: From Template -> Visual C# -> Office/SharePoint -> Apps, select Apps for SharePoint and give it a name DiscussionBoardApp and click Ok.



Step 8: Here in Which SharePoint Site do you want to use for debugging your app?, give your site's url where you want to debug this app and in How do you want to host your app for SharePoint?, select SharePoint-hosted and click Finish.



Step 9: Here right click the solution and from Add click on New Item.



Step 10: From Visual C# Items -> Office/SharePoint, Select Client Web Part (Host Web) and give It a name DiscussionBoard and click Add.



Step 11: Here select the option Create a new app web page for the client web part content, give page a name and click Finish.



Step 12: After creating a page create a JavaScript to work in app. To create a script go to Scripts -> Add -> New Item.



Step 13: From Visual C# Items -> Web -> JavaScript File and give It a name discussion.js and click Add.



Step 14: Here in DiscussionBoard.aspx, add reference of JavaScript, css and add the UI part.



Step 15: Here in Elements.xml file, create custom property. Here user can set the default value for property.



Step 16: In discussion.js file add your code for Discussion Board. It will have the logic of the app.



Step 17: In the AppManifest.xml file in the Permissions tab in the scope select Site Collection and in Permission select FullControl.



Step 18: After completing this, right click the solution and then click on Build to build the solution.



Step 19: Once solution is build, Deploy the solution by right clicking the solution and click on Deploy.



Step 20: After Deployment will be completed It will ask to Trust the app. Click on Trust It.



Step 21: Here in the Site Contents user can see the DiscussionBoardApp is deployed.



Step 22: Now from Settings gear icon, select Add a Page to create new page.



Step 23: Here give It a name Discussions and click Create to create a new page.



Step 24: From Edit Page, click on Insert then on App Part and then select DiscussionBoard App part which is created and click on Add.


Step 25: After Adding the App in a page It will look like the below one. Here all the discussions which are running will be shown and users can Reply to that discussion and can see all replies by clicking on View all replies link.





  

1 comment:

  1. Is the discussion.js available for download?

    -Bill

    ReplyDelete