jQuery based client side site review with smileys


 

feedbackvideo

Before proceeding please read the prerequisite blog posted by me. Need to setup the referenced js and css files in the master page. If you don’t want to add in master page. Please add those in the txt file which is added below.

Navigate to Github to get the files required for this Review / Feedback jQuery

The Github have following files

  1. Feedback.stp – List template used to submit review details
  2. Feedbackhtml.txt – This file contains the html and the style
  3. feedbackMaster.js – this is the javascript to submit the Feedbacks list
  4. gif file no need to use…

Step 1: List Template

Upload the list template to the site and create the Feedbacks list. The js code will get the list instance by the title Feedbacks so use the name Feedbacks while creating the List

Step 2: Upload the Files

In my case the site url is https://<sitecollection>/ms/ so navigate the site assets under your site where you want the review component. Under Site Assets create a folder called scripts. Under the scripts folder upload both the js and the txt file, that is feedbackhtml.txt and feedbackmaster.js. If you don’t want to upload to siteassets ->scripts folder make sure you change the path of the js file. The js file path must be the folder you are using.

Step 3: WebPart Add

After the files are uploaded to the scripts folder. Go to the page where you want the review jquery app. Edit the pager and add the content editor webpart to the page. Edit the webpart and in the path text enter the full path to the txt file. https://<sitecollection>/ms/siteassets/scripts/feedbackhtml.txt . Now save the webpart and the page. If dependency js, css are correct and the path to feedbackMaster.js is correct the feedback / review will be displayed as per the gif picture above.

The javascript uses the site url for the variable. Make sure you point to your site path. In my case the site url is /ms

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

Create a website or blog at WordPress.com

Up ↑

%d bloggers like this: