이 문서에서는 Power Pages를 만들고 Power Automate 클라우드 흐름을 활용하여 이미지 라이브러리 웹 사이트를 설정하는 방법에 대한 단계별 가이드를 제공합니다. 이 웹 사이트를 통해 인증된 사용자는 이미지 갤러리를 효과적으로 관리하고 구성할 수 있습니다.
전제 조건
이 과정을 완료하려면 Power Automate 및 Power Pages 환경이 필요합니다. 라이선스가 없는 경우 Power Pages 및 Power Automate 평가판에 등록할 수 있습니다.
1단계: 클라우드 흐름 만들기
이미지 흐름 업데이트
이 단계에서는 Power Pages 트리거를 사용하여 흐름을 만들고 OneDrive를 사용하여 이미지를 저장합니다.
Power Pages에 로그인합니다.
사이트 + 편집을 선택합니다.
앱 통합에서 설정, 클라우드 흐름으로 이동합니다.
+ 새 흐름 만들기를 선택합니다.
Power Pages를 검색하고 Power Pages가 흐름을 호출하는 경우 트리거를 선택합니다.
+ 입력 추가를 선택합니다.
텍스트를 선택합니다.
이미지 이름을 추가합니다.
+ 입력 추가를 선택합니다.
파일을 선택합니다.
이미지 콘텐츠를 추가합니다.
+ 새 단계를 선택합니다.
OneDrive를 검색하고 파일 만들기 작업을 선택합니다.
파일 만들기 작업에서 다음 값을 입력합니다.
- 폴더 경로 / 및 동적 콘텐츠에서 사용자 ID를 선택합니다.
노트
앞에 '/'를 붙이는 것을 잊지 마세요
파일 이름으로는 동적 콘텐츠에서 이미지 이름을 선택합니다.
파일 콘텐츠의 경우 동적 콘텐츠에서 이미지 콘텐츠를 선택합니다.
+ 새 단계를 선택합니다.
OneDrive를 검색하고 공유 링크 생성 작업을 선택합니다.
공유 링크 생성 작업에서 다음 값을 입력합니다.
파일 ID: 동적 콘텐츠에서
링크 유형: 동적 콘텐츠에서 보기
+ 새 단계를 선택합니다.
Power Pages를 검색하고 Power Pages에 값 반환 작업을 선택합니다.
Power Pages에 값 반환 작업에 다음 값을 입력합니다.
+ 출력 추가를 선택합니다.
출력 유형 텍스트을 선택합니다.
이름: 이미지 값.
이미지 값:
{ "Id":"< Id from the dynamic content>", "URL":"<Web URL from the dynamic content>"}
흐름 이름: 이미지 흐름 업로드.
저장을 선택합니다.
+ 역할 추가를 선택합니다.
인증된 사용자를 선택합니다.
+ 추가를 선택합니다.
나중에 사용할 수 있도록 흐름 URL을 복사합니다.
이미지 목록 흐름 가져오기
이미지 흐름을 만든 후 이 섹션의 단계에 따라 흐름을 확인하세요.
Power Pages에 로그인합니다.
사이트 + 편집을 선택합니다.
앱 통합에서 설정, 클라우드 흐름으로 이동합니다.
+ 클라우드 흐름 추가를 선택합니다.
+ 새 흐름 만들기를 선택합니다.
Power Pages를 검색하고 Power Pages가 흐름을 호출하는 경우 트리거를 선택합니다.
+ 새 단계를 선택합니다.
OneDrive 검색 > 경로로 폴더에서 파일 찾기 다음 값을 입력하십시오.
- 검색 쿼리: *
- 폴더 경로: / + 동적 콘텐츠에서 사용자 ID 선택
- 파일 검색 모드: 패턴
+ 새 단계를 선택합니다.
변수를 검색하고 변수 초기화 작업을 선택합니다.
다음 값을 입력합니다.
이름: 이미지 배열
유형: 배열
+ 새 단계를 선택합니다.
변수를 검색하고 변수 초기화 작업을 선택하세요.
다음 값을 입력합니다.
이름: 이미지 목록
유형: 문자열
+ 새 단계를 선택합니다.
컨트롤을 검색하고 각각에 적용 작업을 선택합니다.
다음 값을 입력합니다.
- 동적 콘텐츠에서 본문을 선택합니다.
작업 추가를 선택합니다.
OneDrive를 검색하고 공유 링크 생성 작업을 선택합니다.
공유 링크 생성 작업에서 다음 값을 입력합니다.
파일 ID: 동적 콘텐츠에서
링크 유형: 동적 콘텐츠에서 보기
작업 추가를 선택합니다.
변수를 검색하고 배열 변수에 추가 작업을 선택하세요.
다음 값을 입력합니다.
이름: 이미지 배열
값:
{ "Id":"<Id from the dynamic content>", "URL":"<Web URL from the dynamic content>" }
+ 새 단계를 선택합니다.
변수를 검색하고 변수 설정 작업을 선택하세요.
다음 값을 입력합니다.
이름: 이미지 목록
값: 이미지 배열
+ 새 단계를 선택합니다.
Power Pages를 검색하고 Power Pages에 값 반환 작업을 선택합니다.
Power Pages에 값 반환 작업에 다음 값을 입력합니다.
+ 출력 추가를 선택합니다.
출력 유형을 텍스트로 선택하고 다음 값을 입력합니다.
- 이름: 이미지 목록.
- 이미지 목록: 동적 콘텐츠에서 이미지 목록을 선택합니다.
흐름 이름을 이미지 목록 가져오기 흐름으로 제공합니다.
저장을 선택합니다.
나중에 사용할 수 있도록 흐름 URL을 복사합니다.
최종 흐름이 나타납니다.
이미지 삭제
이미지 목록 흐름을 구축한 후 이 섹션에 설명된 단계에 따라 이미지 삭제를 위한 트리거를 만듭니다.
Power Pages에 로그인합니다.
사이트 + 편집을 선택합니다.
앱 통합 아래에서 설정 및 클라우드 흐름으로 이동합니다.
+ 클라우드 흐름 추가를 선택합니다.
+ 새 흐름 만들기를 선택합니다.
Power Pages를 검색하고 Power Pages가 흐름을 호출하는 경우 트리거를 선택합니다.
+ 입력 추가를 선택합니다.
텍스트를 선택합니다.
ID 이름을 추가합니다.
+ 새 단계를 선택합니다.
OneDrive를 검색하고 파일 삭제 트리거를 선택합니다.
파일을 업데이트한 다음 동적 콘텐츠에서 ID를 선택하세요.
+ 새 단계를 선택합니다.
Power Pages를 검색하고 Power Pages에 값 반환 작업을 선택한 다음 + 출력을 추가합니다.
Power Pages에 값 반환 작업에 다음 값을 입력합니다.
출력 유형: 예 / 아니요
이름: 상태
상태: True
흐름 이름: 이미지 흐름 삭제
저장을 선택합니다.
+ 역할 추가를 선택합니다.
인증된 사용자를 선택합니다.
추가 단추를 선택합니다.
나중에 사용할 수 있도록 흐름 URL을 복사합니다.
2단계: 이미지 라이브러리 관리 페이지 만들기
흐름을 생성하고 인증된 웹 역할에 대한 액세스를 제공한 후 JavaScript를 사용하여 제어 이벤트에서 이를 호출할 수 있습니다.
페이지 작업 영역으로 이동합니다.
+ 페이지를 선택합니다.
페이지 이름을 이동으로 입력하세요.
이동 페이지 옆에 있는 ...을 선택합니다.
페이지 설정을 선택한 다음 권한을 선택하세요.
이 페이지를 볼 수 있는 사람을 선택하고 싶습니다를 선택하세요.
드롭다운에서 인증된 사용자 역할을 선택합니다.
확인을 선택합니다.
코드 편집을 선택하여 Visual Studio Code를 엽니다.
다음 코드를 붙여넣습니다.
<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/11.0.0/css/fabric.min.css" /> <style> div.image-gallery { display: flex; flex-direction: column; align-items: flex-start; padding: 100px; gap: 36px; width: 840px; } div.image-gallery-header { font-family: Helvetica; font-size: 32px; font-weight: 700; line-height: 32px; letter-spacing: 0px; color: #252729; } div.subHeader { font-family: Segoe UI; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0px; color: #323130; } div.subHeaderLabel { font-family: Segoe UI; font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0px; color: #605E5C; } .image-gallery button { margin-top: 5px; font-family: 'Segoe UI'; padding: 8px 16px; font-size: 16px; background-color: white; color: #8A8886; border: 1px solid #8A8886; border-radius: 4px; cursor: pointer; outline: none; } div.image-gallery-list { margin-top: 0px; } div.date-section { font-family: Segoe UI Variable; font-size: 14px; font-weight: 600; line-height: 20px; letter-spacing: 0em; color: #000000E4; } div.image-list { width: 1024px; display: flex; justify-content: space-between; margin-top: 10px; margin-bottom: 10px; flex-wrap:wrap; } div.image-1 { margin-right: 10px; display: flex; margin-top: 10px; margin-bottom: 20px; } .image-list img { width: 268px; height: 289px; border-radius: 4px; } button.image-delete { background-color: #FFFFFF; width: 32px; height: 32px; position: relative; right: 40px; padding-top: 4px; } .image-delete i { display: flex; justify-content: center; } div.status-message { padding: 10px; background-color: #4CAF50; color: white; text-align: center; } </style> <div class="row sectionBlockLayout text-left" style="display: flex; flex-wrap: wrap; margin: 0px; min-height: auto; padding: 8px;"> <div class="container" style="display: flex; flex-wrap: wrap;"> <div class="col-md-12 columnBlockLayout image-gallery" style="flex-grow: 1; display: flex; flex-direction: column; min-width: 310px; word-break: break-word; padding: 0 120px; margin: 60px 0px;"> <div class="image-gallery-header"> Your travel photos </div> <div> <div class="subHeader"> Upload file </div> <div class="subHeaderLabel"> You can upload JPG, GIF or PNG file </div> <form id="uploadForm"> <p> <input type="file" id="fileInput" style="display: none;" accept="image/x-png,image/gif,image/jpeg" /> <button type="submit"> <i class="ms-Icon ms-Icon--Upload" aria-hidden="true"></i> Upload </button> </p> </form> </div> <div class="status-message" id="statusMessage"style="display: none;"> Uploading your image... Please wait while we process your file. </div> <div class="image-gallery-list"> <div id ="container" class="image-list"> </div> </div> </div> </div> </div> <script> var _getImageListFlowURL = "<Get Image List Flow URL>"; var _uploadImageFlowURL = "<Upload Image Flow URL>"; var _deleteImageFlowURL = "<Delete Image Flow URL>"; function createImageElement(element){ var div1 = document.createElement('div'); div1.className = "image-1"; var img = document.createElement('img'); img.src = element["URL"]; div1.appendChild(img); var button1 = document.createElement('Button'); button1.type ="submit"; button1.className = "image-delete"; button1.data = element["Id"]; var i = document.createElement('i'); i.className = "ms-Icon ms-Icon--Delete"; button1.appendChild(i); div1.appendChild(button1); button1.addEventListener('click', function(){ this.parentElement.remove(); var data = { } ; data["Id"] = element["Id"]; var payload = { } ; payload.eventData = JSON.stringify(data); shell .ajaxSafePost({ type: "POST", url: _deleteImageFlowURL, data: payload } ) .done(function (response) { const result = JSON.parse(response); } ) .fail(function () { console.log('Error'); } ); } ); return div1; } document.addEventListener("DOMContentLoaded", () => { var data = { } ; var payload = { } ; payload.eventData = JSON.stringify(data); shell .ajaxSafePost({ type: "POST", url: _getImageListFlowURL, data: payload } ) .done(function (response) { const result = JSON.parse(response); var imageList =JSON.parse(result['image_list']); var imageContainer = document.getElementById("container"); for (let index = 0; index < imageList.length; index++) { imageContainer.appendChild(createImageElement(imageList[index])); } } ) .fail(function () { console.log('Error'); } ); } ); document.getElementById("uploadForm").addEventListener("submit", function (event) { event.preventDefault(); var imageInput = document.getElementById("fileInput"); imageInput.onchange = _ => { let selectedFile = imageInput.files[0]; UploadImageToBlob(selectedFile); } function UploadImageToBlob(inputFile) { var reader = new FileReader(); reader.readAsDataURL(inputFile); reader.onload = function () { document.getElementById("statusMessage").style.display="block"; var file = { } ; file.name = inputFile.name; file.contentBytes = reader.result.split(',')[1]; var data = { } ; data["Image Name"] = inputFile.name; data["Image Content"] = file; var payload = { } ; payload.eventData = JSON.stringify(data); shell .ajaxSafePost({ type: "POST", url: _uploadImageFlowURL, data: payload } ) .done(function (response) { const result = JSON.parse(response); var imageList = JSON.parse(result['image_value']); var imageContainer = document.getElementById("container"); imageContainer.prepend(createImageElement(imageList)); document.getElementById("statusMessage").style.display="none"; } ) .fail(function () { document.getElementById("statusMessage").style.display="none"; console.log('Error'); } ); } reader.onerror = function (error) { console.log('Error: ', error); } ; } imageInput.click(); } ); </script>
URL을 이전에 복사한 URL로 바꾸세요.
CTRL + S를 선택하여 코드를 저장합니다.
디자인 스튜디오에서 동기화를 선택합니다.
3단계: 흐름 통합 테스트
흐름 통합 기능을 테스트하려면:
프리뷰를 선택하여 사이트를 엽니다.
사이트에 로그인합니다.
업로드 버튼을 선택합니다.
이미지를 선택합니다.
열기를 선택합니다.