다음을 통해 공유

방법: 클라우드 흐름 및 Power Pages를 사용하여 이미지 라이브러리 만들기

이 문서에서는 Power Pages를 만들고 Power Automate 클라우드 흐름을 활용하여 이미지 라이브러리 웹 사이트를 설정하는 방법에 대한 단계별 가이드를 제공합니다. 이 웹 사이트를 통해 인증된 사용자는 이미지 갤러리를 효과적으로 관리하고 구성할 수 있습니다.

전제 조건

이 과정을 완료하려면 Power Automate 및 Power Pages 환경이 필요합니다. 라이선스가 없는 경우 Power Pages 및 Power Automate 평가판에 등록할 수 있습니다.

1단계: 클라우드 흐름 만들기

이미지 흐름 업데이트

이 단계에서는 Power Pages 트리거를 사용하여 흐름을 만들고 OneDrive를 사용하여 이미지를 저장합니다.

  1. Power Pages에 로그인합니다.

  2. 사이트 + 편집을 선택합니다.

  3. 앱 통합에서 설정, 클라우드 흐름으로 이동합니다.

  4. + 새 흐름 만들기를 선택합니다.

  5. Power Pages를 검색하고 Power Pages가 흐름을 호출하는 경우 트리거를 선택합니다.

  6. + 입력 추가를 선택합니다. 

    1. 텍스트를 선택합니다.

    2. 이미지 이름을 추가합니다.

    3. + 입력 추가를 선택합니다. 

    4. 파일을 선택합니다. 

    5. 이미지 콘텐츠를 추가합니다.

  7. + 새 단계를 선택합니다. 

  8. OneDrive를 검색하고 파일 만들기 작업을 선택합니다.  

  9. 파일 만들기 작업에서 다음 값을 입력합니다.

    1. 폴더 경로 / 및 동적 콘텐츠에서 사용자 ID를 선택합니다.

    노트

    앞에 '/'를 붙이는 것을 잊지 마세요

    1. 파일 이름으로는 동적 콘텐츠에서 이미지 이름을 선택합니다.

    2. 파일 콘텐츠의 경우 동적 콘텐츠에서 이미지 콘텐츠를 선택합니다.

  10. + 새 단계를 선택합니다. 

  11. OneDrive를 검색하고 공유 링크 생성 작업을 선택합니다.

  12. 공유 링크 생성 작업에서 다음 값을 입력합니다.

    1. 파일 ID: 동적 콘텐츠에서

    2. 링크 유형: 동적 콘텐츠에서 보기

  13. + 새 단계를 선택합니다. 

  14. Power Pages를 검색하고 Power Pages에 값 반환 작업을 선택합니다.

  15. Power Pages에 값 반환 작업에 다음 값을 입력합니다.

    1. + 출력 추가를 선택합니다.

    2. 출력 유형 텍스트을 선택합니다.

    3. 이름: 이미지 값.

    4. 이미지 값: { "Id":"< Id from the dynamic content>", "URL":"<Web URL from the dynamic content>"}

    5. 흐름 이름: 이미지 흐름 업로드.

  16. 저장을 선택합니다.

  17. + 역할 추가를 선택합니다.

  18. 인증된 사용자를 선택합니다.

  19. + 추가를 선택합니다.

  20. 나중에 사용할 수 있도록 흐름 URL을 복사합니다.

이미지 목록 흐름 가져오기

이미지 흐름을 만든 후 이 섹션의 단계에 따라 흐름을 확인하세요.

  1. Power Pages에 로그인합니다.

  2. 사이트 + 편집을 선택합니다.

  3. 앱 통합에서 설정, 클라우드 흐름으로 이동합니다.

  4. + 클라우드 흐름 추가를 선택합니다.

  5. + 새 흐름 만들기를 선택합니다.

  6. Power Pages를 검색하고 Power Pages가 흐름을 호출하는 경우 트리거를 선택합니다.

  7. + 새 단계를 선택합니다.

  8. OneDrive 검색 > 경로로 폴더에서 파일 찾기 다음 값을 입력하십시오.

    • 검색 쿼리: *
    • 폴더 경로: / + 동적 콘텐츠에서 사용자 ID 선택
    • 파일 검색 모드: 패턴

  9. + 새 단계를 선택합니다.

  10. 변수를 검색하고 변수 초기화 작업을 선택합니다.

  11. 다음 값을 입력합니다.

    1. 이름: 이미지 배열

    2. 유형: 배열

  12. + 새 단계를 선택합니다.

  13. 변수를 검색하고 변수 초기화 작업을 선택하세요.

  14. 다음 값을 입력합니다.

    1. 이름: 이미지 목록

    2. 유형: 문자열

  15. + 새 단계를 선택합니다.

  16. 컨트롤을 검색하고 각각에 적용 작업을 선택합니다.

  17. 다음 값을 입력합니다.

    1. 동적 콘텐츠에서 본문을 선택합니다.

  18. 작업 추가를 선택합니다.

  19. OneDrive를 검색하고 공유 링크 생성 작업을 선택합니다.

  20. 공유 링크 생성 작업에서 다음 값을 입력합니다.

    1. 파일 ID: 동적 콘텐츠에서

    2. 링크 유형: 동적 콘텐츠에서 보기

  21. 작업 추가를 선택합니다.

  22. 변수를 검색하고 배열 변수에 추가 작업을 선택하세요.

  23. 다음 값을 입력합니다.

    1. 이름: 이미지 배열

    2. 값:
      { "Id":"<Id from the dynamic content>", "URL":"<Web URL from the dynamic content>" }

  24. + 새 단계를 선택합니다.

  25. 변수를 검색하고 변수 설정 작업을 선택하세요.

  26. 다음 값을 입력합니다.

    1. 이름: 이미지 목록

    2. 값: 이미지 배열

  27. + 새 단계를 선택합니다.

  28. Power Pages를 검색하고 Power Pages에 값 반환 작업을 선택합니다.

  29. Power Pages에 값 반환 작업에 다음 값을 입력합니다.

  30. + 출력 추가를 선택합니다.

  31. 출력 유형을 텍스트로 선택하고 다음 값을 입력합니다.

    1. 이름: 이미지 목록.
    2. 이미지 목록: 동적 콘텐츠에서 이미지 목록을 선택합니다.

  32. 흐름 이름을 이미지 목록 가져오기 흐름으로 제공합니다.

  33. 저장을 선택합니다.

  34. 나중에 사용할 수 있도록 흐름 URL을 복사합니다.

최종 흐름이 나타납니다.

이미지 삭제

이미지 목록 흐름을 구축한 후 이 섹션에 설명된 단계에 따라 이미지 삭제를 위한 트리거를 만듭니다.

  1. Power Pages에 로그인합니다.

  2. 사이트 + 편집을 선택합니다.

  3. 앱 통합 아래에서 설정 및 클라우드 흐름으로 이동합니다.

  4. + 클라우드 흐름 추가를 선택합니다.

  5. + 새 흐름 만들기를 선택합니다.

  6. Power Pages를 검색하고 Power Pages가 흐름을 호출하는 경우 트리거를 선택합니다.

  7. + 입력 추가를 선택합니다.

  8. 텍스트를 선택합니다.

  9. ID 이름을 추가합니다.

  10. + 새 단계를 선택합니다.

  11. OneDrive를 검색하고 파일 삭제 트리거를 선택합니다.

  12. 파일을 업데이트한 다음 동적 콘텐츠에서 ID를 선택하세요.

  13. + 새 단계를 선택합니다.

  14. Power Pages를 검색하고 Power Pages에 값 반환 작업을 선택한 다음 + 출력을 추가합니다.

  15. Power Pages에 값 반환 작업에 다음 값을 입력합니다.

    1. 출력 유형: 예 / 아니요

    2. 이름: 상태

    3. 상태: True

    4. 흐름 이름: 이미지 흐름 삭제

  16. 저장을 선택합니다.

  17. + 역할 추가를 선택합니다.

  18. 인증된 사용자를 선택합니다.

  19. 추가 단추를 선택합니다.

  20. 나중에 사용할 수 있도록 흐름 URL을 복사합니다.

2단계: 이미지 라이브러리 관리 페이지 만들기

흐름을 생성하고 인증된 웹 역할에 대한 액세스를 제공한 후 JavaScript를 사용하여 제어 이벤트에서 이를 호출할 수 있습니다.

  1. 페이지 작업 영역으로 이동합니다.

  2. + 페이지를 선택합니다.

  3. 페이지 이름을 이동으로 입력하세요.

  4. 이동 페이지 옆에 있는 ...을 선택합니다.

  5. 페이지 설정을 선택한 다음 권한을 선택하세요.

    1. 이 페이지를 볼 수 있는 사람을 선택하고 싶습니다를 선택하세요.

    2. 드롭다운에서 인증된 사용자 역할을 선택합니다.

  6. 확인을 선택합니다.

  7. 코드 편집을 선택하여 Visual Studio Code를 엽니다.

  8. 다음 코드를 붙여넣습니다.

    <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>

  9. URL을 이전에 복사한 URL로 바꾸세요.

  10. CTRL + S를 선택하여 코드를 저장합니다.

  11. 디자인 스튜디오에서 동기화를 선택합니다.

3단계: 흐름 통합 테스트

흐름 통합 기능을 테스트하려면:

  1. 프리뷰를 선택하여 사이트를 엽니다.

  2. 사이트에 로그인합니다.

  3. 업로드 버튼을 선택합니다.

  4. 이미지를 선택합니다.

  5. 열기를 선택합니다.