Skip to main content

Youtube Video Search on Sharepoint


Youtube Video Search on Sharepoint!!


Scenario:- Users should be able to search for youtube videos and play them.

Pre-Requsite:- Basics of React and sharepoint content editor webpart.

UI Layout:-
React App steps for build
  1. The react solution has total five componenets of which only one is class based component all other are functional components.
  • App
  • Search Bar
  • Video Details
  • Video List
  • Video List Item
  1. For searching youtube videos from the youtube we use youtube-api-search package. We also need to have an API Key for youtube to know who is searching the videos.
NPM install youtube-api-search
  1. We can use the YTSearch function from the api to perform the search. In the callback function we get the list of videos.
  1. App :- It’s a parent componenet which holds all the child components. Its contains internal state of Videos and selected Video.  
  1. Search :- It’s a functional component where we show a search box and onchange event. Search expects a props for the onchange event. Whenever a search term changes this event gets called.
  1. Video Details:- It’s a functionla componenet which will show the selected videos passed as props to the component. It will display the title and description of the video. We will embed video on the page using the video url.  
  1. Video List Item:- It’s a functional component which shows short information of the video. It handles onclick event to pass the selected video details to the parent component.
  1. Video List:- IT shows the list of videos which are passed as Props to the component. It uses the child component Video List Item to show short video details.

  1. On the App component the UI looks like below which shows all the details.
  1. Build the App and the generate the bundle.js file. Create a html page which contains a div html element with the class container, react components will be loaded under the div element.

Uploading the Files to sharepoint and configure the webpart.
  1. Upload the files bundle.js and index.html to the Style Assets library of the root site.
  1. Create a new page on the root web and add the content editor web part. Edit the properties of the content editor webpart. To refer the uploaded index.html page from the site assets library. Save the settings and publish the page.

  1. The final Youtube search page looks like below.
The complete code to the above app is located in the below git hub location.


Labels:

Comments

Post a Comment

Popular posts from this blog

How to upgrade typescript version in a SPFX solution

Why do we need to upgrade typescript version in a SPFX solution? As part of SPFX development we try to install 3 rd party libraries, there is a possibility that we might face type errors. For example, if we try to install ANTD package as part of your solution and use one of its components and try to build the solution. You might be seeing the type errors (TS1005,TS1109) as shown below. Typescript errors How to find out the typescript version? When you build (Gulp build) the SPFX solution you will be able to find out the typescript version from the build log as shown below.  Steps for updating the Typescript version. In SPFX solution typescript version has dependency on the @Microsoft/rush-stack-compiler package version.  In the package.json if you have @microsoft/rush-stack-compiler-2.7 then the typescript version is 2.7.x.    In the SPFX solution deleted the node_modules folder. It will remove all the packages that are installed....
Post a Comment
Read more

Sharepoint 2013 REST API limitations with site columns

Recently i attended an interview for one of the company, the interviewer asked me a question on rest api. How to get a publishing image field using rest api? I answered its the normal way how we get the other fields. But later i came to know that its the wrong answer. After some research on Google came to know that there some limitations to rest api in sharepoint 2013. Below is a list of columns available using Rest api. Column Support Notes Hyperlink or Picture Supported Single Line of Text Supported Multiple lines of text :: Plaintext Supported Multiple lines of text :: Richtext Supported Returns unencoded XHTML Multiple lines of text :: Enhanced Richtext Supported Returns unencoded XHTML Choice Supported Column is required in the  $expand  keyword Counter Supported Integer Supported Number Supported Currency Supported Date Supported Returns an ISO 8601 date e.g. 2013-03-08T11:00:00 Yes/No Supported Returns true or false string literals Person or Group Suppo...
1 comment
Read more

Add Items to sharepoint online List using powershell!!

SharePoint online provides only a small set of basic commands for writing powershell scripts. IF we have to do any operation using powershell we need to use CSOM or REST API.   Sharepoint patterns and Practises (PnP) team came with a powershell module for doing operation on the sharepoint online. Its very help full while writing scripts.   Similar modules exists for Sharepoint 2013 and Sharepoint 2016.   Link to the Github respositry. In the below article I will try to add items to a list picking the data from the JSON file.           Try to check whether SharepointPNPPowershellOnline module was installed or not. If not install it. # This script adds items to the list picking up the data from the json file. if (-not (Get-Module -ListAvailable -Name SharePointPnPPowerShellOnline)) { Install-Module SharePointPnPPowerShellOnline }           Get the data from the json file and store it in a va...
Post a Comment
Read more