วิธีแสดง Mode Presentation ของ Power Point บน Power Apps

How to display Power Point Presentation Mode on Power Apps

บทความนี้เกิดขึ้นมาด้วยความบังเอิญที่ User ดันอยากได้โปรแกรมที่จะเอามาทำเป็นเหมือน Training Program หรือเอาไว้สำหรับแสดง Presentation ให้กับคนที่เข้ามาใช้โปรแกรม แต่ไม่อยากให้ผู้ใช้งานเข้าไปยุ่งกับไฟล์ Presentation หรือไฟล์ Power Point นั้นเอง ซึ่งโจทย์ที่ได้มานี้ ไม่ได้ต้องการเพียงแค่นั้น ต้องสามารถเปิดพวก Yuotube ได้ด้วย แต่ก็ไม่ใช้ประเด็นอะไรสำคัญ ซึ่งไอเจ้าปัญหาที่ทำให้มันยากในมุมของผม นั้นคือ การเปิดไฟล์ Power Point ใน Mode Present บน Power Apps มากกว่า

1. Create Power Apps

เริ่มจากสร้าง Power Apps ซึ่งสามารถหาดูวิธีสร้างได้ตาม Google และ Yuotube

2.Create SharePoint & Gallery

ณ ที่นี้เราจะใช้ Folder ที่เก็บไฟล์บน SharePoint เป็นที่ทดสอบในการเรียกไฟล์ Power Point มาแสดง หลังจากนั้นนำ Object ที่จะใช้ในการทดสอบครั้งนี้คือ Gallery มาวางใน Screen ตามภาพด้านล่าง และทำการเชื่อมต่อกับ SharePoint ที่จัดเก็บไฟล์ที่เราต้องการนำมา Presentation

3.Get URI จาก Microsoft Graph

แน่นอนว่า การที่เราจะดึงไฟล์จาก SharePoint แล้วให้อยู่ใน Mode Presentation จะต้องเข้าถึง Uri ที่เป็น Mode Presentation นั้น โดยเริ่มแรกให้เข้าไปที่ Microsoft Graph Explorer ตามลิงค์นี้เลย Graph Explorer | Try Microsoft Graph APIs — Microsoft Graph

หลังจากเข้ามาแล้วก็ทำการทดสอบ ดังนี้

  • เลือก SharePoint Sites >> search for a SharePoint site by keyword
  • นำ Site Name มาใส่แทน contoso ตรง search (site name ให้นำมาจาก URL ของ SharePoint https://<domain>.sharepoint.com/sites/<site name>/<library>/Forms/AllItems.aspx)
  • กด Run Query
  1. หลังจาก Run แล้ว จะได้ json Response โดยให้เรา Copy id เอาไว้
  2. ให้ทำการเลือก SharePoint Sites >> enumerate the document libraries under the root site
  3. นำ id ที่ copy เอาไว้ เมื่อซักครู่ มาใส่แทนคำว่า root ตรงช่องที่จะเตรียมตัว run query
  4. กด Run Query
  • หลังจาก Run Query แล้ว ให้ทำการมองหา (Ctrl + F) name : <library> ที่เราเก็บไฟล์ Power Point ที่เราจะนำมาใช้งาน
  • ทำการ copy id ของ library นั้น
  • กลับไปที่ช่องกรอก link api เมื่อซักครู่ และนำ id library ที่ได้มาใส่ต่อท้าย drives
  • กด Run Query อีกครั้ง (ถ้าไม่มีอะไรผิดพลาด เราจะได้ Respones preview ในส่วนของ context ใน library นั้น)
  • หลังจากนั้นให้พิมพ์ “/root:/<file name with extension>:/preview” ไว้ต่อท้าย id library ข้างต้น
  • ทำการปรับ request จาก GET เป็น POST
  • กด Run Query

ถึงตรงนี้ก็ไม่ควรจะติดอะไร และมี Respones กลับมาเป็น url ที่ยาวๆ หลายๆ บันทัด ซึ่งถ้าเรา copy ไป และนำไปเปิด จะพบว่าไฟล์ดังกล่าวอยู่ใน mode preview เป็นที่เรียบร้อย

แต่ที่เราต้องการ SharePoint REST API  (https://learn.microsoft.com/en-us/sharepoint/dev/apis/sharepoint-rest-graph) ซึ่งทาง Microsoft เขียนวิธีเอาไว้ให้แล้วตามลิงค์

  • กลับมาที่ Microsoft Graph อีกครั้ง และยังอยู่ที่ช่อง กรอก URL ช่องเดิม
  • ใส่ “ ?$whatif ” คำนี้ ต่อท้าย preview (ยังอยู่ใน mode POST นะ)
  • กด Run Query

และแล้วเราก็จะได้ Uri สุดท้ายที่จะนำมาใช้ใน Power Automate โดยเราจะเอาชื่อไฟล์จากการกดเลือกใน Power Apps โปรแกรมของเรา มาใส่แทน <file name with extesion>

สรุปแล้วเราจะได้ URL ที่เอาไว้ใช้ในการดึง Mode Presentation ผ่าน Microsoft Graph Explorer ตามนี้

https://graph.microsoft.com/v1.0/sites/<id_sitename>/drives/<id_library>/root:/<file name with extension>:/preview?$whatif

4. Add flow Power Automate

เมื่อเราได้ URL จาก Microsoft Graph Explorer ที่เป็น Mode Presentation กลับมาที่ Power Apps และไปทำการสร้าง flow

Flow 1 : PowerApps (V2)

  • Add input “ Text “ และตั้งชื่อ input นี้ว่า file name with extension

Flow 2 : Send an HTTP request to SharePoint

  • Site Address : เลือก Site ที่เราทำการเก็บไฟล์เอาไว้
  • Menthod : POST
  • Uri : Uri ที่ได้จาก Microsoft Graph
    และตรงที่เป็นชื่อไฟล์ ก็ให้ใส่เป็น ตัวแปร จาก PowerApps(V2) นั้นคือ file name with extension
  • Header
    Content-Type : application/json
    Accept : application/json

Flow 3 : Compose

  • เลือกแท็ป Dynamic content : body และนำ ?[‘getUrl’] ไปใส่ต่อท้าย
  • กดปุ่ม Add

Flow 4 : Respond to a PowerApp or flow

  • Add input “ Text “ และตั้งชื่อ input นี้ว่า “ previewURL ”
  • เลือก output

เพียงเท่านี้เราก็จะได้ Flow ของ Power Automate ที่จะนำมาใช้ใน Power Apps

5.Modify Power Apps

ในส่วนของ Power Apps ให้มาใส่ Code ใน Gallry โดยเลือกเอาได้เลยอยากให้คลิกตรงไหนแล้ว Action ก็นำไปใส่ใน OnSelect

Set(varFlowresponse,getURL4iframe.Run(ThisItem.'File name with extension'))

จาก Code ก็จะ Set ตัวแปร varFlowresponse เท่ากับ link preview โดย getURL4iframe คือชื่อของ Flow ที่เราสร้างใน Power Automate จากข้อ 4

เหมือนจะจบ แต่ยังไม่จบ !! …คือผู้เขียนก็เริ่มเหนื่อยแหละ

5.Modify Power Apps

ทำการ Download iframe PCF ที่ลิงค์นี้ https://pcf.gallery/iframe-pcf/

หลังจากนั้นทำการ Import solution ที่ Power Apps

เมื่อทำการ Import เป็นที่เรียบร้อยแล้ว เราก็จะได้ Object iframe PCF ที่อยู่ในส่วนของ Code components เพื่อให้เราเอามาทำเป็นพื้นที่โชว์ preview หรือ โชว์ Presentation นั้นเอง ที่สำคัญ อย่าลืม Set Source ให้มาอ่านตัวแปร varFlowresponse ด้วยหละ

varFlowresponse.previewurl

เป็นอันเรียบร้อย สำหรับการสร้าง Mode Presentation ของ Power Point บน Power Apps ที่เรียกได้ว่าไม่หมูอย่างที่คิด ต้องใช้มากกว่าแค่โค้ดปกติ

0