SharePoint 에 script editor 추가하기 : sp-dev-fx-webparts

새로운 일자리에서 SharePoint 를 사용한다...

MS 제품인데 Team 내에서 문서들을 공유하고 커뮤니케이션 하는 웹사이트 같은 플랫폼이다.

JnJ에서 (하루) 일하면서 느낀건데 정말 MS 제품만 사용한다. 그래서 참 제약이 많은듯 ;-;

 

목표

SharePoint에 올리는 Excel 문서랑 연동해서 Home 화면에서 사용자 편의성 있게 만들기

 

 

기존에 있는 앱들 중에 내가 하려는 목표와 가장 유사한 앱이 embed tag 뿐이었다.

그래서 excel 에서 embed tag를 export해와서 복붙하는 수 밖에 없었는데 단순한 표만 나와서 심미성이 별로 일 뿐 만 아니라 height를 엑셀의 높이에 맞게 유동적으로 조절할 수 없어서 (정형화된 수치만 표시 가능했다) 이를 해결하려고 한다.

 

그래도 웹 개발자로써 가장 잘 사용할 수 있는게 javascript 이므로 ㅎㅎ..

그걸 잘 활용하고자 script tag를 사용할 수 있나 찾아봤다.

하지만 최신 버전이후에는 script 를 사용할 수 없다는 충격적인 공식문서를 읽고.... ^-^

할 수 있는 방법을 모조리 찾아보다가 한 깃허브를 발견해따 !-!

 

sp-dev-fx-webparts

https://github.com/pnp/sp-dev-fx-webparts/

GitHub - pnp/sp-dev-fx-webparts: SharePoint Framework web part, Teams tab, personal app, app page samples

SharePoints에서 사용할 수 있는 앱들을 만들어서 무료로 배포해둔 깃허브다!

여기서 나는 React-script-editor를 사용했다.

 

1. Download zip package

우선 해당 레포를 clone 받아준다

git clone https://github.com/pnp/sp-dev-fx-webparts.git

 

 

그리고 원하는 sample 폴더로 들어가준다. (여기서 나는 React-script-editor를 택했다.)

cd samples/react-script-editor

 

2. Install Node.js

해당 앱을 사용하려면 Node.js 버전이 특정 버전 사이에 속해야한다.

나는 공식 사이트에서 14.15.0 버전을 골라서 다운로드 받아주었다.

https://nodejs.org/ko/download/releases/

이전 릴리스 | Node.js

 

3. Install Yeoman

npm isntall -g yo

 

4. Install Gulp

npm install -g gulp

 

5. Install SharePoint Generator

여기서 Node 버전이 일치하지 않으면 설치 되지 않는다.

npm install -g @microsoft/generator-sharepoint

 

 

여기까지 했으면 데모사이트를 실행시켜볼 수도 있고 배포를 할 수도 있다!-!

 

데모사이트 실행

npm install
gulp serve

 

SharePoint에 배포

gulp clean
gulp bundle --ship
gulp package-solution --ship

해당 명령어들을 실행시켜주고 sharepoint/solution 폴더에 들어가 .sppkg 파일을 App Catalog에 업로드 시켜주면 된다.

 

그렇게 된다면 이제 SharePoint에도 script 를 사용한 페이지 webpart 추가가 가능해진다 !-!

 

나는 이제 미국 본사에서 업로드 권한을 가질 때 까지 기다리면 된다... ^-^ 그동안 다른 일 준비를 해둬야게따.