Partekatu honen bidez:

Argibideak: Sortu irudi-liburutegi bat hodeiko fluxua eta Power Pages erabiliz

Artikulu honek urratsez urrats gida bat eskaintzen du Power Pages hodei-fluxuak Power Automate sortzeko eta aprobetxatzeko irudi-liburutegiaren webgunea konfiguratzeko. Webgune honek aukera ematen die autentifikatutako erabiltzaileei irudien galeria modu eraginkorrean kudeatu eta antolatzeko.

Aurrebaldintza

Ikastaro hau burutzeko, Power Automate eta Power Pages ingurunea behar duzu. Lizentziarik ez baduzu, eman izena Power Pages eta Power Automate doako probetan.

Urrats 1: Sortu hodeiko fluxu bat

Eguneratu irudi-fluxua

Urrats honetan, fluxu bat sortzen duzu Power Pages abiarazlea erabiliz eta OneDrive erabili irudiak gordetzeko.

  1. Hasi saioa Power Pages-en.

  2. Hautatu gunea + Editatu.

  3. Aplikazioen integrazioak atalean, joan Konfiguratura eta, ondoren, Hodei-fluxuak.

  4. Hautatu + Sortu fluxu berria.

  5. Bilatu Power Pages eta hautatu Noiz Power Pages deien fluxua abiarazlea.

  6. Hautatu +Gehitu sarrera bat. 

    1. Aukeratu Testua.

    2. Gehitu izena Irudiaren izena.

    3. Hautatu +Gehitu sarrera bat. 

    4. Aukeratu Fitxategia. 

    5. Gehitu izena Irudiaren edukia.

  7. Hautatu Urrats berri gehiago. 

  8. Bilatu OneDrive eta hautatu Sortu fitxategia ekintza.  

  9. Sortu fitxategia ekintzan, sartu balio hauek:

    1. Karpeta-bidea / eta hautatu Erabiltzaile ID eduki dinamikotik.

    Oharra

    Ez ahaztu '/'-ren aurretik jartzea

    1. Fitxategiaren Izenarako, hautatu Irudiaren izena eduki dinamikotik.

    2. Fitxategien edukia lortzeko, hautatu Irudiaren edukia eduki dinamikotik.

  10. Hautatu Urrats berri gehiago. 

  11. Bilatu OneDrive eta hautatu Sortu partekatzeko esteka ekintza.

  12. Sortu partekatzeko esteka ekintzan, idatzi balio hauek:

    1. Fitxategiaren IDa: Eduki dinamikotik

    2. Esteka mota: Eduki dinamikotik ikusi

  13. Hautatu Urrats berri gehiago. 

  14. Bilatu Power Pages eta hautatu Itzuli balioak Power Pages ekintzara.

  15. Itzuli balioak Power Pages ekintzan, idatzi balio hauek:

    1. Hautatu + Gehitu irteera.

    2. Aukeratu irteera mota Testua.

    3. Izena: Irudiaren balioa.

    4. Irudiaren balioa: { "Id":"< Id from the dynamic content>", "URL":"<Web URL from the dynamic content>"}

    5. Fluxuaren izena: Kargatu irudiaren fluxua.

  16. Hautatu Gorde.

  17. Hautatu + Gehitu rolak.

  18. Hautatu Erabiltzaile autentifikatuak.

  19. Hautatu + Gehitu.

  20. Kopiatu fluxuaren URLa gero erabiltzeko.

Lortu Irudien zerrendaren fluxua

Zure Irudi-fluxua sortu ondoren, jarraitu atal honetako urratsak fluxua ikusteko.

  1. Hasi saioa Power Pages-en.

  2. Hautatu gunea + Editatu.

  3. Aplikazioen integrazioak atalean, joan Konfiguratu era, gero Hodei-fluxuak.

  4. Hautatu + Gehitu hodeiko fluxua.

  5. Hautatu + Sortu fluxu berria.

  6. Bilatu Power Pages eta hautatu Noiz Power Pages deien fluxua abiarazlea.

  7. Hautatu Urrats berri gehiago.

  8. Bilatu OneDrive > Bilatu fitxategiak karpetan bidearen arabera. Sartu balio hauek:

    • Bilaketa kontsulta: *
    • Karpeta-bidea: / + hautatu Erabiltzaile IDa eduki dinamikotik
    • Fitxategiak bilatzeko modua: Eredua

  9. Hautatu Urrats berri gehiago.

  10. Bilatu Aldagaia eta hautatu Hasiera aldagaia ekintza.

  11. Sartu balio hauek:

    1. Izena: Irudi Array

    2. Mota: Array

  12. Hautatu Urrats berri gehiago.

  13. Bilatu Aldagaia Hautatu Hasiera aldagaia ekintza.

  14. Sartu balio hauek:

    1. Izena: Irudien zerrenda

    2. Mota: Katea

  15. Hautatu Urrats berri gehiago.

  16. Bilatu Kontrol Hautatu Aplikatu ekintza bakoitzari.

  17. Sartu balio hauek:

    1. Hautatu body eduki dinamikotik.

  18. Hautatu Gehitu ekintza bat.

  19. Bilatu OneDrive eta hautatu Sortu partekatzeko esteka ekintza.

  20. Sortu partekatzeko esteka ekintzan, sartu balio hauek:

    1. Fitxategiaren IDa: eduki dinamikoa

    2. Esteka mota: Eduki dinamikotik ikusi

  21. Hautatu Gehitu ekintza bat.

  22. Bilatu Aldagaia Hautatu Gehitu array aldagaiari ekintza.

  23. Idatzi honako balio hauek:

    1. Izena: Irudi Array

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

  24. Hautatu Urrats berri gehiago.

  25. Bilatu Aldagaia Hautatu Ezarri aldagaia ekintza.

  26. Sartu balio hauek:

    1. Izena: Irudien zerrenda

    2. Balioa: Irudi-matrizea

  27. Hautatu Urrats berri gehiago.

  28. Bilatu Power Pages eta hautatu Itzuli balioak Power Pages ekintzara.

  29. Itzuli balioak Power Pages ekintzan, sartu balio hauek:

  30. Hautatu + Gehitu irteera.

  31. Aukeratu irteera mota Testua eta idatzi balio hauek:

    1. Izena: Irudien zerrenda.
    2. Irudien zerrenda: aukeratu Irudien zerrenda eduki dinamikotik.

  32. Eman fluxuaren izena Lortu irudien zerrenda fluxua.

  33. Hautatu Gorde.

  34. Kopiatu fluxuaren URLa gero erabiltzeko.

Azken fluxua agertzen da.

Ezabatu irudia

Zure Irudi Zerrenda fluxua eraikitzen duzunean, jarraitu atal honetan adierazitako urratsak sortu irudiak ezabatzeko abiarazlea.

  1. Hasi saioa Power Pages-en.

  2. Hautatu gunea + Editatu.

  3. Joan Konfiguratu eta Hodei-fluxuak Aplikazioen integrazioak atalean.

  4. Hautatu + Gehitu hodeiko fluxua.

  5. Hautatu + Sortu fluxu berria.

  6. Bilatu Power Pages eta hautatu Noiz Power Pages deiak fluxua abiarazlea.

  7. Hautatu +Gehitu sarrera bat.

  8. Aukeratu Testua.

  9. Gehitu izena Id.

  10. Hautatu Urrats berri gehiago.

  11. Bilatu OneDrive Hautatu Ezabatu fitxategia abiarazlea.

  12. Eguneratu Fitxategia eta, ondoren, hautatu Id Eduki dinamikotik.

  13. Hautatu Urrats berri gehiago.

  14. Bilatu Power Pages eta hautatu Itzuli balioak Power Pages ekintzara, gero + Gehitu irteera.

  15. Itzuli balioak Power Pages ekintzan, idatzi balio hauek:

    1. Irteera mota: Bai / Ez

    2. Izena: Egoera

    3. Egoera: Egia

    4. Fluxuaren izena: Ezabatu irudiaren fluxua

  16. Hautatu Gorde.

  17. Hautatu + Gehitu rolak.

  18. Hautatu Erabiltzaile autentifikatuak.

  19. Sakatu Gehitu botoia.

  20. Kopiatu fluxuaren URLa gero erabiltzeko.

Urrats 2: Sortu orrialde bat Irudien liburutegia kudeatzeko

Fluxua sortu eta autentifikatutako web rolerako sarbidea eman ondoren, kontrol-gertaera batetik dei dezakezu JavaScript erabiliz.

  1. Joan orriak laneko eremura.

  2. Hautatu + Orria.

  3. Eman orriaren izena Bidaia gisa.

  4. Hautatu ... Bidaia orriaren ondoan.

  5. Aukeratu Orriaren ezarpenak, eta, ondoren, Baimenak.

    1. Hautatu Orri hau nork ikus dezakeen aukeratu nahi dut.

    2. Hautatu goitibeherako Erabiltzaile autentifikatuak rola.

  6. Aukeratu Ados.

  7. Hautatu Editatu kodea Visual Studio Code irekitzeko.

  8. Itsatsi honako kodea:

    <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. Ordeztu URL aurretik kopiatutakoarekin.

  10. Gorde kodea hautatuta KTRL + S.

  11. Diseinu estudioan, hautatu Sync.

3. urratsa: probatu fluxuaren integrazioa

Fluxuaren integrazioaren funtzionamendua probatzeko:

  1. Hautatu aurreargitalpen gunea irekitzeko.

  2. Saioa hasi webgunean.

  3. Hautatu Kargatu botoia.

  4. Aukeratu irudia.

  5. Hautatu Ireki.