PowerApps & Power Automate: PDF Viewer Uygulaması

5 min readFeb 24, 2022

Bu yazıda Power Apps ile uygulama içerisinden pdf dökümanlarını görüntüleyebildiğimiz basit bir uygulama yapacağız.

Görüntü olarak yukarıdaki şekilde olacak olan uygulamadan kısaca bahsetmek gerekirse, sol tarafta bulunan çeşitli isimdeki pdf dosyalarına tıkladıkça uygulamanın sağ tarafında görüntülenecek. Şimdi sıra geldi bu uygulamanın nasıl yapılacağına.

Sharepoint Document Library Oluşturma

Öncelikle kullacak olduğumuz pdf uzantılı dosyalar için Sharepoint üzerinde Document Library oluşturulmalıdır. Hızlı bir şekilde nasıl oluşturulur göz atalım:

Oluşturduğunuz Sharepoint Site tıklayarak sol üst köşedeki New sekmesinden Document Library seçerek oluşturabiliriz. Ben hali hazırda Document Viewer adında bir adet oluşturup içerisine çeşitli pdf uzantılı dosyalar yükledim.

Sizde benzer şekilde çeşitli pdf dosyalarını bu kütüphaneye yükleyerek hızlıca oluşuturabilirsiniz. Şimdi hızlıca Power Apps uygulama ekranı tasarımına geçelim!

PDF Döküman Listesi Oluşturma

Boş bir canvas tablet uygulaması oluşturarak. Üst kısma bir adet label ekleyerek PDF Viewer olarak Text propertysini isimlendirelim.

Dikkat ederseniz sol tarafta Sharepoint üzerinde oluşturduğum veri kaynağı ekledim bir sonraki aşamada galeri yardımı ile PDF döküman listesini oluştururken işimize yarayacak. Sizde Data kısmından kendi veri kaynağınızı benzer şekilde uygulama içerisine alın ve devam edelim…

Galerinin Items property’sini seçtiğinizde oluşturduğunuz Sharepoint kütüphanesinin ismini göreceksiniz. Şimdi galeriyi biraz daha güzel hale getirelim.

Arkaplan rengini: (Fill: RGBA(237, 237, 237, 1)),

Şablon dolgusunu:(TemplateFill: ColorFade(LightSkyBlue, 70%)),

Şablon Boyutu: (TemplateSize: 70)

Olarak ayarlayabilirsiniz. Tasarım tercihinde kendi tasarım dilinize göre istediğiniz tasarım dilini kullanabilirsiniz.

Dikkatinizi çekmek istediğim noktalardan bir tanesi sarı olarak işaretlediğim kısımlardaki alanları temsil edilen noktalar. Text propertysi içerisinde galerideki tüm name alanına sahip kayıtlarda benzer şekilde görüntülenecektir. Bildiğiniz üzere Power Apps üzerindeki galeri bu özelliği ile gerek fonksiyonel gerekse işlevsel olarak bize kolaylık sağlamaktadır.

Benzer şekilde oluşturulma tarihini gösterdiğimiz label üzerinde de benzer şekilde davranarak bütün kayıtlarda verdiğiniz boyuta göre galeri içerisinde konumlanacaktır. (Bu noktada subtitle kısmına, Sharepoint Döküman Kütüphanesi üzerinde oluşturduğunuz alanı ekleyebilirsiniz. Benzer oluşturulma tarihini eklemeyi tercih ettim.)

PDF Iconu oluşturma

Hali hazırda Icons kısmındaki ikonları kullanabilirsiniz ancak bu noktada değinmek istediğim bir yer var şimdi galerideki iconu seçerek Image propertysini aşağıdaki şekilde güncelleyelim

**Image Property aşağıdaki kod bloğu gibi olmalıdır:**

If(
    // PDF Kontrol
    EndsWith(ThisItem.'File name with extension', "pdf"),

    // PDF Ikon
"data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%202048%202048%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M1920%201664h-128v384H128v-384H0V640h128V0h1243l421%20421v219h128v1024zM1408%20384h165l-165-165v165zM256%20640h1408V512h-384V128H256v512zm1408%201024H256v256h1408v-256zm128-896H128v768h1664V768zM448%20896q40%200%2075%2015t61%2041%2041%2061%2015%2075q0%2040-15%2075t-41%2061-61%2041-75%2015h-64v128H256V896h192zm0%20256q26%200%2045-19t19-45q0-26-19-45t-45-19h-64v128h64zm448-256q53%200%2099%2020t82%2055%2055%2081%2020%20100q0%2053-20%2099t-55%2082-81%2055-100%2020H768V896h128zm0%20384q27%200%2050-10t40-27%2028-41%2010-50q0-27-10-50t-27-40-41-28-50-10v256zm384-384h320v128h-192v128h192v128h-192v128h-128V896z%27%20fill%3D%27%23d13438%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E",

    // Dosya Ikon
    "data:image/svg+xml;utf8, %3Csvg%20%20viewBox%3D%270%200%202048%202048%27%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%3E%3Cpath%20d%3D%27M1243%200l549%20549v1499H128V0h1115zm37%20219v293h293l-293-293zM256%201920h1408V640h-512V128H256v1792zm256-896V896h896v128H512zm0%20256v-128h896v128H512zm0%20256v-128h896v128H512z%27%20fill%3D%27%237a7574%27%3E%3C%2Fpath%3E%3C%2Fsvg%3E"

Uygulamaya PDF Viewer Control Ekleme

Media -> PDF Viewer(experimental)

Şimdi sıra sağ tarafta tıkladığımız PDF başlıklarının içeriklerini PDF Viewer Control yardımı ile sol tarafta görüntülemede. Bunun için Power Automate’den yardım alacağız. Ayrıca sol tarafta varsayılan olarak Lorem Ipsum metnini görüyorsunuz bu içerik flow yardımı ile dinamik hale gelecek.

Power Automate Yardımı İle PDF İçeriğini Alma

Üst kısımdaki sekmelerden Action kısmından Power Automate seçerek yeni bir flow oluşturabilirsiniz.

Flow isminizi verdikten sonra action olarak Power Apps seçmelisiniz.

Flow adımları ve içerikleri aşağıdak gibi olmalı:

Power Apps(v2):Dosyamızı Power Apps uygulaması içerisinden alırken bunun bir yerde tutulması gerekiyor DocsIdentifier olarak isimlendirdiğim bu text bize yardımcı olacak,
Get File Content: Site Address kısmında kendi Sharepoint Document Library yolunuzu vermeniz gerekmektedir. Ben içeriğini kapattığım için beyaz olarak görünüyor. File Identifer kısmını sol taraftan direk seçerek ekleyebilirsiniz.
Compose: Bu aşamada dosya içeriğini almak için expression içerisinde belirtilen dosya içeriğini base64ToBinary olarak alıyoruz. Flowlar bu tarz işlerde bize kolaylıkla istediğimiz formatta veriyi sağlıyor. (Expression içeriğini görselin altından kopyalayabilirsiniz.)

**Expression = datauri(base64ToBinary(body(‘Get_file_content’)?[‘$content’]))**

4. Son aşamada çıktımızı Apps içerisinde kullanmak için Respond to a Powerapp or flow adımı ile flow adımlarımızı sonlandırıyoruz.

PDF Data URI ile İçeriği Görüntüleme

Son aşama olarak sol tarafta tıkladığımız içeriği sağ taraftaki PDF Viewer içerisinde görebilmek için birkaç adımımız daha kaldı:

Galerinin onSelect propertysini aşağıdaki şekilde güncelleyelim.

Set(varDocumentSelected, DocumentViewer.Run(glr_documentViewer.Selected.Identifier).result)

Seçilen dökümanı bir değişkende tutarak, bu değişkenin değerinin oluşturduğumuz flow içerisinde seçilen kaydın sonucu (result) olmasını görüyoruz. Şimdi bu değişkenimizi sol tarafta oluşturduğumuz PDF Viewer’ın Document propertysine yerleştirelim

Son olarak dikkat edilmesi gereken nokta ise oluşturduğumuz galeri içerisinde bulunan ikon ve label gibi elementlerin onSelect propertysinin seçilen itemin parenti olması. Bunları galeri içerisindeki elementlerin onSelect özelliklerine hızlıca kontrol ederek emin olabilirsiniz.(Title, SubTitle ve PDF Iconu kontrol edilebilir.)