2024.08.06 22:55時点でPower AppsのYAML ソースコードのビューが使用できない状態です。
GitHubからコンポーネントを複製することはできない状態ですので、ご了承のほど、よろしくお願いいたします。
はじめに
SharePointのドキュメント ライブラリへPower Appsから直接ファイルをアップロードしたい
こう思ったことはありませんか。私は度々ありました。
Power Appsからファイルをアップロードする場合、
-
フォーム コントロールからSubmitForm 関数でSharePoint Listsの添付ファイル列にアップロードする - Collect 関数を使っての添付ファイル列にアップロードする
-
Power Automateを利用する
主にこの3つの方法が挙げられます。
SubmitForm 関数やCollect 関数の場合、SharePoint Listsのみ。
Power Automateを毎回構築するのも非常に手間です。
そのような中でPower Apps界隈のロックスターReza Dorrani氏の下記の動画を拝見しました。
Office 365 Groups コネクタを用いたGraph APIによるファイルアップロードのアプローチです。
本当に素晴らしすぎて感動します✨
コネクタのうちHTTP リクエストを送信 「非推奨」を使って、APIの利用を実現します。
残念ながら、2024.08.03時点で、[非推奨]のアクションです。
廃止される可能性が存在する方法とご認識ください。
Office 365 Groups コネクタによるHTTP リクエストを送信
Office 365 Groups コネクタによる
HTTP リクエストを送信 「非推奨」は、幅広いセグメントに対するアプローチを実施することができます。
SharePointへのファイルアップロードも同様であり、アップロードに加えて、ファイルやフォルダの存在の有無もPower Appsから実現できてしまいます。
まずはReza Dorrani氏の動画をもとに見ていきましょう。
SharePointのドキュメント ライブラリにファイルをアップロードする場合は、あらかじめsite-idとdrive-idが必要になります。
それぞれのidの取得方法について、動画で解説が既にされており、こちらもGraph APIを用いることで取得することができます。
Graph Explorerで下記を試すことが手っ取り早いです。
エンドポイント
https://graph.microsoft.com/v1.0/sites/{自分のRootのSharePointサイト}:/sites/{サイト名}
下記に対して、[ Run query ]を実行すると、赤枠にsite_idが表示されます。
取得したsite_idをもとに、対象のSharePoint Siteのドキュメント ライブラリを列挙するために、下記のQueryを実行します。
エンドポイント
https://graph.microsoft.com/v1.0/sites/{site_id}/drives
こちらでサイト内に存在するドキュメントライブラリのdrive_idを取得できます。
キャプチャの場合、ドキュメントのdrive_idは赤枠のb!dwCAcNIG5ki0BV6fOMT1Rr9SpIdKR-FLpWFirBodrDt37yRHQymCRI9sniRyxB1dが該当します。
コンポーネントを作成する
さて、このファイルのアップロード機能は、活躍する範囲が広い見込みなので、コンポーネントとして作成します。
コンポーネントとして作成することにより、複数のアプリケーションで、作成した機能を再利用することができます。
作成したものがコチラ。
尊敬するReza Dorrani(@rezadorrani)氏の動画を参考に、Office 365 Groupsコネクタでファイルアップロードのコンポーネント作成。このアクション生存し続けてほしい・・・。
— 出戻りガツオ🐟 Microsoft MVP (@DemodoriGatsuo) August 2, 2024
A heartfelt thank you to Reza Dorrani for his invaluable contributions to the Power Platform community. Your… pic.twitter.com/0L3O2YbL3A
ベータ版ですが、試用されたい場合は、GitHubにYAMLソースコードをアップしておりますので、そちらをご覧ください。
内容はアップデートする可能性があります。
あらかじめご了承ください。
またリポジトリのREADMEの作成は未着手です。
コンポーネントの機能は
- ユーザーが指定したフォルダに、ドラッグアンドドロップでファイルをアップロード
- Fluent UIを使ったSharePointで表示されるファイルアイコンの表示
- 指定のフォルダの子ファイルの一覧表示
上記の機能を含めてみます。
準備
コンポーネントの詳細な作成手順は、この記事では触れません。
コンポーネントライブラリにて、任意の名称でライブラリを作成している状態から進めます。
コンポーネントの作成画面で新しいコンポーネントをクリックし、[データ] > [+ データの追加]からOffice 365 Groups コネクタを追加します。
コンポーネントの入力プロパティ
コンポーネントの入力プロパティに下記の値を設定します。
-
site_id - Graph APIで取得した
SharePointサイト id -
drive_id - Graph APIで取得した
SharePointのドキュメント ライブラリ id - folder_name - フォルダの名前
- static_icon_table
site-idとdrive-idは文字通り、SharePointの値、folder_nameにはアップロードするフォルダの名前を設定します。
このうちstatic_icon_tableはFluent UIを使ったSharePointで表示されるファイルアイコンの表示に用いる参照用のテーブルです。
静的な値だと思ってください。
非常に長いため、折りたたみで関数を載せます。
static_icon_table
static_icon_table
Table(
{
FileType: "accdb",
Extention: "accdb"
},
{
FileType: "accdb",
Extention: "mdb"
},
{
FileType: "archive",
Extention: "7z"
},
{
FileType: "archive",
Extention: "ace"
},
{
FileType: "archive",
Extention: "arc"
},
{
FileType: "archive",
Extention: "arj"
},
{
FileType: "archive",
Extention: "dmg"
},
{
FileType: "archive",
Extention: "gz"
},
{
FileType: "archive",
Extention: "iso"
},
{
FileType: "archive",
Extention: "lzh"
},
{
FileType: "archive",
Extention: "pkg"
},
{
FileType: "archive",
Extention: "rar"
},
{
FileType: "archive",
Extention: "sit"
},
{
FileType: "archive",
Extention: "tgz"
},
{
FileType: "archive",
Extention: "tar"
},
{
FileType: "archive",
Extention: "z"
},
{
FileType: "audio",
Extention: "aif"
},
{
FileType: "audio",
Extention: "aiff"
},
{
FileType: "audio",
Extention: "aac"
},
{
FileType: "audio",
Extention: "alac"
},
{
FileType: "audio",
Extention: "amr"
},
{
FileType: "audio",
Extention: "ape"
},
{
FileType: "audio",
Extention: "au"
},
{
FileType: "audio",
Extention: "awb"
},
{
FileType: "audio",
Extention: "dct"
},
{
FileType: "audio",
Extention: "dss"
},
{
FileType: "audio",
Extention: "dvf"
},
{
FileType: "audio",
Extention: "flac"
},
{
FileType: "audio",
Extention: "gsm"
},
{
FileType: "audio",
Extention: "m4a"
},
{
FileType: "audio",
Extention: "m4p"
},
{
FileType: "audio",
Extention: "mid"
},
{
FileType: "audio",
Extention: "mmf"
},
{
FileType: "audio",
Extention: "mp3"
},
{
FileType: "audio",
Extention: "oga"
},
{
FileType: "audio",
Extention: "ra"
},
{
FileType: "audio",
Extention: "rm"
},
{
FileType: "audio",
Extention: "wav"
},
{
FileType: "audio",
Extention: "wma"
},
{
FileType: "audio",
Extention: "wv"
},
{
FileType: "calendar",
Extention: "ical"
},
{
FileType: "calendar",
Extention: "icalendar"
},
{
FileType: "calendar",
Extention: "ics"
},
{
FileType: "calendar",
Extention: "ifb"
},
{
FileType: "calendar",
Extention: "vcs"
},
{
FileType: "classifier",
Extention: "classifier"
},
{
FileType: "clipchamp",
Extention: "clipchamp"
},
{
FileType: "code",
Extention: "abap"
},
{
FileType: "code",
Extention: "ada"
},
{
FileType: "code",
Extention: "adp"
},
{
FileType: "code",
Extention: "ahk"
},
{
FileType: "code",
Extention: "as"
},
{
FileType: "code",
Extention: "as3"
},
{
FileType: "code",
Extention: "asc"
},
{
FileType: "code",
Extention: "ascx"
},
{
FileType: "code",
Extention: "asm"
},
{
FileType: "code",
Extention: "asp"
},
{
FileType: "code",
Extention: "awk"
},
{
FileType: "code",
Extention: "bash"
},
{
FileType: "code",
Extention: "bash_login"
},
{
FileType: "code",
Extention: "bash_logout"
},
{
FileType: "code",
Extention: "bash_profile"
},
{
FileType: "code",
Extention: "bashrc"
},
{
FileType: "code",
Extention: "bat"
},
{
FileType: "code",
Extention: "bib"
},
{
FileType: "code",
Extention: "bsh"
},
{
FileType: "code",
Extention: "build"
},
{
FileType: "code",
Extention: "builder"
},
{
FileType: "code",
Extention: "c"
},
{
FileType: "code",
Extention: "cbl"
},
{
FileType: "code",
Extention: "c++"
},
{
FileType: "code",
Extention: "capfile"
},
{
FileType: "code",
Extention: "cc"
},
{
FileType: "code",
Extention: "cfc"
},
{
FileType: "code",
Extention: "cfm"
},
{
FileType: "code",
Extention: "cfml"
},
{
FileType: "code",
Extention: "cl"
},
{
FileType: "code",
Extention: "clj"
},
{
FileType: "code",
Extention: "cls"
},
{
FileType: "code",
Extention: "cmake"
},
{
FileType: "code",
Extention: "cmd"
},
{
FileType: "code",
Extention: "coffee"
},
{
FileType: "code",
Extention: "config"
},
{
FileType: "code",
Extention: "cpp"
},
{
FileType: "code",
Extention: "cpt"
},
{
FileType: "code",
Extention: "cpy"
},
{
FileType: "code",
Extention: "cs"
},
{
FileType: "code",
Extention: "cshtml"
},
{
FileType: "code",
Extention: "cson"
},
{
FileType: "code",
Extention: "csproj"
},
{
FileType: "code",
Extention: "css"
},
{
FileType: "code",
Extention: "ctp"
},
{
FileType: "code",
Extention: "cxx"
},
{
FileType: "code",
Extention: "d"
},
{
FileType: "code",
Extention: "ddl"
},
{
FileType: "code",
Extention: "di"
},
{
FileType: "code",
Extention: "disco"
},
{
FileType: "code",
Extention: "dml"
},
{
FileType: "code",
Extention: "dtd"
},
{
FileType: "code",
Extention: "dtml"
},
{
FileType: "code",
Extention: "el"
},
{
FileType: "code",
Extention: "emakefile"
},
{
FileType: "code",
Extention: "erb"
},
{
FileType: "code",
Extention: "erl"
},
{
FileType: "code",
Extention: "f"
},
{
FileType: "code",
Extention: "f90"
},
{
FileType: "code",
Extention: "f95"
},
{
FileType: "code",
Extention: "fs"
},
{
FileType: "code",
Extention: "fsi"
},
{
FileType: "code",
Extention: "fsscript"
},
{
FileType: "code",
Extention: "fsx"
},
{
FileType: "code",
Extention: "gemfile"
},
{
FileType: "code",
Extention: "gemspec"
},
{
FileType: "code",
Extention: "gitconfig"
},
{
FileType: "code",
Extention: "go"
},
{
FileType: "code",
Extention: "groovy"
},
{
FileType: "code",
Extention: "gvy"
},
{
FileType: "code",
Extention: "h"
},
{
FileType: "code",
Extention: "h++"
},
{
FileType: "code",
Extention: "haml"
},
{
FileType: "code",
Extention: "handlebars"
},
{
FileType: "code",
Extention: "hbs"
},
{
FileType: "code",
Extention: "hcp"
},
{
FileType: "code",
Extention: "hh"
},
{
FileType: "code",
Extention: "hpp"
},
{
FileType: "code",
Extention: "hrl"
},
{
FileType: "code",
Extention: "hs"
},
{
FileType: "code",
Extention: "htc"
},
{
FileType: "code",
Extention: "hxx"
},
{
FileType: "code",
Extention: "idl"
},
{
FileType: "code",
Extention: "iim"
},
{
FileType: "code",
Extention: "inc"
},
{
FileType: "code",
Extention: "inf"
},
{
FileType: "code",
Extention: "ini"
},
{
FileType: "code",
Extention: "inl"
},
{
FileType: "code",
Extention: "ipp"
},
{
FileType: "code",
Extention: "irbrc"
},
{
FileType: "code",
Extention: "jade"
},
{
FileType: "code",
Extention: "jav"
},
{
FileType: "code",
Extention: "java"
},
{
FileType: "code",
Extention: "js"
},
{
FileType: "code",
Extention: "json"
},
{
FileType: "code",
Extention: "jsp"
},
{
FileType: "code",
Extention: "jsproj"
},
{
FileType: "code",
Extention: "jsx"
},
{
FileType: "code",
Extention: "l"
},
{
FileType: "code",
Extention: "less"
},
{
FileType: "code",
Extention: "lhs"
},
{
FileType: "code",
Extention: "lisp"
},
{
FileType: "code",
Extention: "log"
},
{
FileType: "code",
Extention: "lst"
},
{
FileType: "code",
Extention: "ltx"
},
{
FileType: "code",
Extention: "lua"
},
{
FileType: "code",
Extention: "m"
},
{
FileType: "code",
Extention: "mak"
},
{
FileType: "code",
Extention: "make"
},
{
FileType: "code",
Extention: "manifest"
},
{
FileType: "code",
Extention: "master"
},
{
FileType: "code",
Extention: "md"
},
{
FileType: "code",
Extention: "markdn"
},
{
FileType: "code",
Extention: "markdown"
},
{
FileType: "code",
Extention: "mdown"
},
{
FileType: "code",
Extention: "mkdn"
},
{
FileType: "code",
Extention: "ml"
},
{
FileType: "code",
Extention: "mli"
},
{
FileType: "code",
Extention: "mll"
},
{
FileType: "code",
Extention: "mly"
},
{
FileType: "code",
Extention: "mm"
},
{
FileType: "code",
Extention: "mud"
},
{
FileType: "code",
Extention: "nfo"
},
{
FileType: "code",
Extention: "opml"
},
{
FileType: "code",
Extention: "osascript"
},
{
FileType: "code",
Extention: "p"
},
{
FileType: "code",
Extention: "pas"
},
{
FileType: "code",
Extention: "patch"
},
{
FileType: "code",
Extention: "php"
},
{
FileType: "code",
Extention: "php2"
},
{
FileType: "code",
Extention: "php3"
},
{
FileType: "code",
Extention: "php4"
},
{
FileType: "code",
Extention: "php5"
},
{
FileType: "code",
Extention: "phtml"
},
{
FileType: "code",
Extention: "pl"
},
{
FileType: "code",
Extention: "pm"
},
{
FileType: "code",
Extention: "pod"
},
{
FileType: "code",
Extention: "pp"
},
{
FileType: "code",
Extention: "profile"
},
{
FileType: "code",
Extention: "ps1"
},
{
FileType: "code",
Extention: "ps1xml"
},
{
FileType: "code",
Extention: "psd1"
},
{
FileType: "code",
Extention: "psm1"
},
{
FileType: "code",
Extention: "pss"
},
{
FileType: "code",
Extention: "pt"
},
{
FileType: "code",
Extention: "py"
},
{
FileType: "code",
Extention: "pyw"
},
{
FileType: "code",
Extention: "r"
},
{
FileType: "code",
Extention: "rake"
},
{
FileType: "code",
Extention: "rb"
},
{
FileType: "code",
Extention: "rbx"
},
{
FileType: "code",
Extention: "rc"
},
{
FileType: "code",
Extention: "rdf"
},
{
FileType: "code",
Extention: "re"
},
{
FileType: "code",
Extention: "reg"
},
{
FileType: "code",
Extention: "rest"
},
{
FileType: "code",
Extention: "resw"
},
{
FileType: "code",
Extention: "resx"
},
{
FileType: "code",
Extention: "rhtml"
},
{
FileType: "code",
Extention: "rjs"
},
{
FileType: "code",
Extention: "rprofile"
},
{
FileType: "code",
Extention: "rpy"
},
{
FileType: "code",
Extention: "rss"
},
{
FileType: "code",
Extention: "rst"
},
{
FileType: "code",
Extention: "ruby"
},
{
FileType: "code",
Extention: "rxml"
},
{
FileType: "code",
Extention: "s"
},
{
FileType: "code",
Extention: "sass"
},
{
FileType: "code",
Extention: "scala"
},
{
FileType: "code",
Extention: "scm"
},
{
FileType: "code",
Extention: "sconscript"
},
{
FileType: "code",
Extention: "sconstruct"
},
{
FileType: "code",
Extention: "script"
},
{
FileType: "code",
Extention: "scss"
},
{
FileType: "code",
Extention: "sgml"
},
{
FileType: "code",
Extention: "sh"
},
{
FileType: "code",
Extention: "shtml"
},
{
FileType: "code",
Extention: "sml"
},
{
FileType: "code",
Extention: "svn-base"
},
{
FileType: "code",
Extention: "swift"
},
{
FileType: "code",
Extention: "sql"
},
{
FileType: "code",
Extention: "sty"
},
{
FileType: "code",
Extention: "tcl"
},
{
FileType: "code",
Extention: "tex"
},
{
FileType: "code",
Extention: "textile"
},
{
FileType: "code",
Extention: "tld"
},
{
FileType: "code",
Extention: "tli"
},
{
FileType: "code",
Extention: "tmpl"
},
{
FileType: "code",
Extention: "tpl"
},
{
FileType: "code",
Extention: "vb"
},
{
FileType: "code",
Extention: "vi"
},
{
FileType: "code",
Extention: "vim"
},
{
FileType: "code",
Extention: "vmg"
},
{
FileType: "code",
Extention: "webpart"
},
{
FileType: "code",
Extention: "wsp"
},
{
FileType: "code",
Extention: "wsdl"
},
{
FileType: "code",
Extention: "xhtml"
},
{
FileType: "code",
Extention: "xoml"
},
{
FileType: "code",
Extention: "xsd"
},
{
FileType: "code",
Extention: "xslt"
},
{
FileType: "code",
Extention: "yaml"
},
{
FileType: "code",
Extention: "yaws"
},
{
FileType: "code",
Extention: "yml"
},
{
FileType: "code",
Extention: "zsh"
},
{
FileType: "contact",
Extention: "vcf"
},
{
FileType: "csv",
Extention: "csv"
},
{
FileType: "designer",
Extention: "design"
},
{
FileType: "desktopfolder",
Extention: "{}"
},
{
FileType: "docset",
Extention: "{}"
},
{
FileType: "documentsfolder",
Extention: "{}"
},
{
FileType: "docx",
Extention: "doc"
},
{
FileType: "docx",
Extention: "docm"
},
{
FileType: "docx",
Extention: "docx"
},
{
FileType: "docx",
Extention: "docb"
},
{
FileType: "dotx",
Extention: "dot"
},
{
FileType: "dotx",
Extention: "dotm"
},
{
FileType: "dotx",
Extention: "dotx"
},
{
FileType: "email",
Extention: "eml"
},
{
FileType: "email",
Extention: "msg"
},
{
FileType: "email",
Extention: "oft"
},
{
FileType: "email",
Extention: "ost"
},
{
FileType: "email",
Extention: "pst"
},
{
FileType: "exe",
Extention: "application"
},
{
FileType: "exe",
Extention: "appref-ms"
},
{
FileType: "exe",
Extention: "apk"
},
{
FileType: "exe",
Extention: "app"
},
{
FileType: "exe",
Extention: "appx"
},
{
FileType: "exe",
Extention: "exe"
},
{
FileType: "exe",
Extention: "ipa"
},
{
FileType: "exe",
Extention: "msi"
},
{
FileType: "exe",
Extention: "xap"
},
{
FileType: "favoritesfolder",
Extention: "{}"
},
{
FileType: "folder",
Extention: "{}"
},
{
FileType: "font",
Extention: "ttf"
},
{
FileType: "font",
Extention: "otf"
},
{
FileType: "font",
Extention: "woff"
},
{
FileType: "form",
Extention: "{}"
},
{
FileType: "genericfile",
Extention: "{}"
},
{
FileType: "html",
Extention: "htm"
},
{
FileType: "html",
Extention: "html"
},
{
FileType: "html",
Extention: "mht"
},
{
FileType: "html",
Extention: "mhtml"
},
{
FileType: "ipynb",
Extention: "nnb"
},
{
FileType: "ipynb",
Extention: "ipynb"
},
{
FileType: "link",
Extention: "lnk"
},
{
FileType: "link",
Extention: "link"
},
{
FileType: "link",
Extention: "url"
},
{
FileType: "link",
Extention: "website"
},
{
FileType: "link",
Extention: "webloc"
},
{
FileType: "linkedfolder",
Extention: "{}"
},
{
FileType: "listitem",
Extention: "{}"
},
{
FileType: "loop",
Extention: "fluid"
},
{
FileType: "loop",
Extention: "loop"
},
{
FileType: "loop",
Extention: "note"
},
{
FileType: "loopworkspace",
Extention: "{}"
},
{
FileType: "officescript",
Extention: "osts"
},
{
FileType: "splist",
Extention: "{}"
},
{
FileType: "mcworld",
Extention: "mcworld"
},
{
FileType: "mctemplate",
Extention: "mctemplate"
},
{
FileType: "model",
Extention: "3ds"
},
{
FileType: "model",
Extention: "3mf"
},
{
FileType: "model",
Extention: "blend"
},
{
FileType: "model",
Extention: "cool"
},
{
FileType: "model",
Extention: "dae"
},
{
FileType: "model",
Extention: "df"
},
{
FileType: "model",
Extention: "dwfx"
},
{
FileType: "model",
Extention: "dwg"
},
{
FileType: "model",
Extention: "dxf"
},
{
FileType: "model",
Extention: "fbx"
},
{
FileType: "model",
Extention: "glb"
},
{
FileType: "model",
Extention: "gltf"
},
{
FileType: "model",
Extention: "holo"
},
{
FileType: "model",
Extention: "layer"
},
{
FileType: "model",
Extention: "layout"
},
{
FileType: "model",
Extention: "max"
},
{
FileType: "model",
Extention: "mtl"
},
{
FileType: "model",
Extention: "obj"
},
{
FileType: "model",
Extention: "off"
},
{
FileType: "model",
Extention: "ply"
},
{
FileType: "model",
Extention: "skp"
},
{
FileType: "model",
Extention: "stp"
},
{
FileType: "model",
Extention: "stl"
},
{
FileType: "model",
Extention: "t"
},
{
FileType: "model",
Extention: "thl"
},
{
FileType: "model",
Extention: "x"
},
{
FileType: "mpp",
Extention: "mpp"
},
{
FileType: "mpt",
Extention: "mpt"
},
{
FileType: "multiple",
Extention: "one"
},
{
FileType: "one",
Extention: "{}"
},
{
FileType: "onetoc",
Extention: "ms-one-stub"
},
{
FileType: "onetoc",
Extention: "onetoc"
},
{
FileType: "onetoc",
Extention: "onetoc2"
},
{
FileType: "onetoc",
Extention: "onepkg"
},
{
FileType: "pbiapp",
Extention: "{}"
},
{
FileType: "pdf",
Extention: "pdf"
},
{
FileType: "photo",
Extention: "arw"
},
{
FileType: "photo",
Extention: "bmp"
},
{
FileType: "photo",
Extention: "cr2"
},
{
FileType: "photo",
Extention: "crw"
},
{
FileType: "photo",
Extention: "dic"
},
{
FileType: "photo",
Extention: "dicm"
},
{
FileType: "photo",
Extention: "dcm"
},
{
FileType: "photo",
Extention: "dcm30"
},
{
FileType: "photo",
Extention: "dcr"
},
{
FileType: "photo",
Extention: "dds"
},
{
FileType: "photo",
Extention: "dib"
},
{
FileType: "photo",
Extention: "dng"
},
{
FileType: "photo",
Extention: "erf"
},
{
FileType: "photo",
Extention: "gif"
},
{
FileType: "photo",
Extention: "heic"
},
{
FileType: "photo",
Extention: "heif"
},
{
FileType: "photo",
Extention: "ico"
},
{
FileType: "photo",
Extention: "jfi"
},
{
FileType: "photo",
Extention: "jfif"
},
{
FileType: "photo",
Extention: "jif"
},
{
FileType: "photo",
Extention: "jpe"
},
{
FileType: "photo",
Extention: "jpeg"
},
{
FileType: "photo",
Extention: "jpg"
},
{
FileType: "photo",
Extention: "jxr"
},
{
FileType: "photo",
Extention: "kdc"
},
{
FileType: "photo",
Extention: "mrw"
},
{
FileType: "photo",
Extention: "nef"
},
{
FileType: "photo",
Extention: "orf"
},
{
FileType: "photo",
Extention: "pct"
},
{
FileType: "photo",
Extention: "pict"
},
{
FileType: "photo",
Extention: "png"
},
{
FileType: "photo",
Extention: "pns"
},
{
FileType: "photo",
Extention: "psb"
},
{
FileType: "photo",
Extention: "psd"
},
{
FileType: "photo",
Extention: "raw"
},
{
FileType: "photo",
Extention: "tga"
},
{
FileType: "photo",
Extention: "tif"
},
{
FileType: "photo",
Extention: "tiff"
},
{
FileType: "photo",
Extention: "wdp"
},
{
FileType: "photo360",
Extention: "{}"
},
{
FileType: "picturesfolder",
Extention: "{}"
},
{
FileType: "planner",
Extention: "{}"
},
{
FileType: "potx",
Extention: "pot"
},
{
FileType: "potx",
Extention: "potm"
},
{
FileType: "potx",
Extention: "potx"
},
{
FileType: "powerbi",
Extention: "pbids"
},
{
FileType: "powerbi",
Extention: "pbix"
},
{
FileType: "ppsx",
Extention: "pps"
},
{
FileType: "ppsx",
Extention: "ppsm"
},
{
FileType: "ppsx",
Extention: "ppsx"
},
{
FileType: "pptx",
Extention: "ppt"
},
{
FileType: "pptx",
Extention: "pptm"
},
{
FileType: "pptx",
Extention: "pptx"
},
{
FileType: "pptx",
Extention: "sldx"
},
{
FileType: "pptx",
Extention: "sldm"
},
{
FileType: "presentation",
Extention: "odp"
},
{
FileType: "presentation",
Extention: "gslides"
},
{
FileType: "presentation",
Extention: "key"
},
{
FileType: "pub",
Extention: "pub"
},
{
FileType: "spo",
Extention: "aspx"
},
{
FileType: "sponews",
Extention: "{}"
},
{
FileType: "spreadsheet",
Extention: "odc"
},
{
FileType: "spreadsheet",
Extention: "ods"
},
{
FileType: "spreadsheet",
Extention: "gsheet"
},
{
FileType: "spreadsheet",
Extention: "numbers"
},
{
FileType: "spreadsheet",
Extention: "tsv"
},
{
FileType: "rtf",
Extention: "epub"
},
{
FileType: "rtf",
Extention: "gdoc"
},
{
FileType: "rtf",
Extention: "odt"
},
{
FileType: "rtf",
Extention: "rtf"
},
{
FileType: "rtf",
Extention: "wri"
},
{
FileType: "rtf",
Extention: "pages"
},
{
FileType: "sharedfolder",
Extention: "{}"
},
{
FileType: "playlist",
Extention: "{}"
},
{
FileType: "sway",
Extention: "{}"
},
{
FileType: "sysfile",
Extention: "bak"
},
{
FileType: "sysfile",
Extention: "bin"
},
{
FileType: "sysfile",
Extention: "cab"
},
{
FileType: "sysfile",
Extention: "cache"
},
{
FileType: "sysfile",
Extention: "cat"
},
{
FileType: "sysfile",
Extention: "cer"
},
{
FileType: "sysfile",
Extention: "class"
},
{
FileType: "sysfile",
Extention: "dat"
},
{
FileType: "sysfile",
Extention: "db"
},
{
FileType: "sysfile",
Extention: "dbg"
},
{
FileType: "sysfile",
Extention: "dl_"
},
{
FileType: "sysfile",
Extention: "dll"
},
{
FileType: "sysfile",
Extention: "ithmb"
},
{
FileType: "sysfile",
Extention: "jar"
},
{
FileType: "sysfile",
Extention: "kb"
},
{
FileType: "sysfile",
Extention: "ldt"
},
{
FileType: "sysfile",
Extention: "lrprev"
},
{
FileType: "sysfile",
Extention: "pkpass"
},
{
FileType: "sysfile",
Extention: "ppa"
},
{
FileType: "sysfile",
Extention: "ppam"
},
{
FileType: "sysfile",
Extention: "pdb"
},
{
FileType: "sysfile",
Extention: "rom"
},
{
FileType: "sysfile",
Extention: "thm"
},
{
FileType: "sysfile",
Extention: "thmx"
},
{
FileType: "sysfile",
Extention: "vsl"
},
{
FileType: "sysfile",
Extention: "xla"
},
{
FileType: "sysfile",
Extention: "xlam"
},
{
FileType: "sysfile",
Extention: "xlb"
},
{
FileType: "sysfile",
Extention: "xll"
},
{
FileType: "todoitem",
Extention: "{}"
},
{
FileType: "txt",
Extention: "dif"
},
{
FileType: "txt",
Extention: "diff"
},
{
FileType: "txt",
Extention: "readme"
},
{
FileType: "txt",
Extention: "out"
},
{
FileType: "txt",
Extention: "plist"
},
{
FileType: "txt",
Extention: "properties"
},
{
FileType: "txt",
Extention: "text"
},
{
FileType: "txt",
Extention: "txt"
},
{
FileType: "vaultclosed",
Extention: "{}"
},
{
FileType: "vaultopen",
Extention: "{}"
},
{
FileType: "vector",
Extention: "ai"
},
{
FileType: "vector",
Extention: "ait"
},
{
FileType: "vector",
Extention: "cvs"
},
{
FileType: "vector",
Extention: "dgn"
},
{
FileType: "vector",
Extention: "gdraw"
},
{
FileType: "vector",
Extention: "pd"
},
{
FileType: "vector",
Extention: "emf"
},
{
FileType: "vector",
Extention: "eps"
},
{
FileType: "vector",
Extention: "fig"
},
{
FileType: "vector",
Extention: "ind"
},
{
FileType: "vector",
Extention: "indd"
},
{
FileType: "vector",
Extention: "indl"
},
{
FileType: "vector",
Extention: "indt"
},
{
FileType: "vector",
Extention: "indb"
},
{
FileType: "vector",
Extention: "ps"
},
{
FileType: "vector",
Extention: "svg"
},
{
FileType: "vector",
Extention: "svgz"
},
{
FileType: "vector",
Extention: "wmf"
},
{
FileType: "vector",
Extention: "oxps"
},
{
FileType: "vector",
Extention: "xps"
},
{
FileType: "vector",
Extention: "xd"
},
{
FileType: "vector",
Extention: "sketch"
},
{
FileType: "video",
Extention: "3g2"
},
{
FileType: "video",
Extention: "3gp"
},
{
FileType: "video",
Extention: "3gp2"
},
{
FileType: "video",
Extention: "3gpp"
},
{
FileType: "video",
Extention: "asf"
},
{
FileType: "video",
Extention: "avi"
},
{
FileType: "video",
Extention: "dvr-ms"
},
{
FileType: "video",
Extention: "flv"
},
{
FileType: "video",
Extention: "m1v"
},
{
FileType: "video",
Extention: "m4v"
},
{
FileType: "video",
Extention: "mkv"
},
{
FileType: "video",
Extention: "mod"
},
{
FileType: "video",
Extention: "mov"
},
{
FileType: "video",
Extention: "mm4p"
},
{
FileType: "video",
Extention: "mp2"
},
{
FileType: "video",
Extention: "mp2v"
},
{
FileType: "video",
Extention: "mp4"
},
{
FileType: "video",
Extention: "mp4v"
},
{
FileType: "video",
Extention: "mpa"
},
{
FileType: "video",
Extention: "mpe"
},
{
FileType: "video",
Extention: "mpeg"
},
{
FileType: "video",
Extention: "mpg"
},
{
FileType: "video",
Extention: "mpv"
},
{
FileType: "video",
Extention: "mpv2"
},
{
FileType: "video",
Extention: "mts"
},
{
FileType: "video",
Extention: "ogg"
},
{
FileType: "video",
Extention: "qt"
},
{
FileType: "video",
Extention: "swf"
},
{
FileType: "video",
Extention: "ts"
},
{
FileType: "video",
Extention: "vob"
},
{
FileType: "video",
Extention: "webm"
},
{
FileType: "video",
Extention: "wlmp"
},
{
FileType: "video",
Extention: "wm"
},
{
FileType: "video",
Extention: "wmv"
},
{
FileType: "video",
Extention: "wmx"
},
{
FileType: "video360",
Extention: "{}"
},
{
FileType: "vsdx",
Extention: "vdx"
},
{
FileType: "vsdx",
Extention: "vsd"
},
{
FileType: "vsdx",
Extention: "vsdm"
},
{
FileType: "vsdx",
Extention: "vsdx"
},
{
FileType: "vsdx",
Extention: "vsw"
},
{
FileType: "vsdx",
Extention: "vdw"
},
{
FileType: "vssx",
Extention: "vss"
},
{
FileType: "vssx",
Extention: "vssm"
},
{
FileType: "vssx",
Extention: "vssx"
},
{
FileType: "vstx",
Extention: "vst"
},
{
FileType: "vstx",
Extention: "vstm"
},
{
FileType: "vstx",
Extention: "vstx"
},
{
FileType: "vstx",
Extention: "vsx"
},
{
FileType: "whiteboard",
Extention: "whiteboard"
},
{
FileType: "whiteboard",
Extention: "wbtx"
},
{
FileType: "xlsx",
Extention: "xlc"
},
{
FileType: "xlsx",
Extention: "xls"
},
{
FileType: "xlsx",
Extention: "xlsb"
},
{
FileType: "xlsx",
Extention: "xlsm"
},
{
FileType: "xlsx",
Extention: "xlsx"
},
{
FileType: "xlsx",
Extention: "xlw"
},
{
FileType: "xltx",
Extention: "xlt"
},
{
FileType: "xltx",
Extention: "xltm"
},
{
FileType: "xltx",
Extention: "xltx"
},
{
FileType: "xml",
Extention: "xaml"
},
{
FileType: "xml",
Extention: "xml"
},
{
FileType: "xml",
Extention: "xsl"
},
{
FileType: "xsn",
Extention: "xsn"
},
{
FileType: "zip",
Extention: "zip"
}
)
このコンポーネントでは、フォルダー内のファイル名やURLを取得します。
その値を、コンポーネントで埋め込むアプリケーションの、ほかのコントロールにて使用する場合は、出力プロパティにテーブル型を設定することで、参照することができます。
responseという名前で出力プロパティを定義しました。
ファイルをアップロードする入口を作成する
ファイルをアップロードする入口は添付ファイル コントロールが必須になります。
ユーザー側の操作イメージは、ドラッグアンドドロップでファイルを添付することのみに焦点を当てたいため、
OnAddFile プロパティでファイルが追加されるタイミングで、Graph APIを実行する仕様にしていきます。
OnAddFileプロパティは、ユーザーが新しい添付ファイルを追加したときに実行されます。
ざっくりと解説すると
-
site_idとdrive_idを含めたエンドポイントを変数で設定する - 追加されたファイルに対して下記を実行
- ファイルの存在の有無を確認
- ファイルが存在しない場合アップロード
- フォルダの中に格納されたファイルの情報をコレクションに格納
- 添付ファイル コントロールをリセットする
OnAddFile
Set(
_endpoint,
$"https://graph.microsoft.com/v1.0/sites/{cmp_file_uploader.site_id}/drives/{cmp_file_uploader.drive_id}/root:/"
);
ForAll(
Self.Attachments,
IfError(
Office365グループ.HttpRequest(
$"{_endpoint}{EncodeUrl($"{cmp_file_uploader.folder_name}/{ThisRecord.Name}")}",
"GET",
""
),
Office365グループ.HttpRequest(
$"{_endpoint}{EncodeUrl($"{cmp_file_uploader.folder_name}/{ThisRecord.Name}")}:/content",
"PUT",
ThisRecord.Value
)
)
);
ClearCollect(
FolderChildren,
ForAll(
Office365グループ.HttpRequest(
$"{_endpoint}{EncodeUrl(cmp_file_uploader.folder_name)}:/children",
"GET",
""
).value,
{
name: Text(ThisRecord.name),
webUrl: Text(ThisRecord.webUrl),
lastModifiedDateTime: DateTimeValue(ThisRecord.lastModifiedDateTime),
lastModifiedBy: Text(ThisRecord.lastModifiedBy.user.displayName)
}
)
);
Reset(Self);
SharePoint Listsの添付ファイル列と連動させるわけではないため、常にコントロールの中に、アップロードされたファイルが反映されることにはなりません。
アップロードされたファイルは赤枠のフォルダー内のファイルを参照するギャラリー コントロールで表示します。
ギャラリー コントロール
ギャラリー コントロールは下記の構成にします。
| 項目名 | コントロール | 詳細 |
|---|---|---|
| img_filetype | 画像 |
ファイル アイコンを表示 |
| lbl_filename | テキスト ラベル | ファイル名 |
| lbl_lastmodifieddatetime | テキスト ラベル | 更新日時 |
| lbl_lastmodifiedby | テキスト ラベル | 更新者 |
| shp_gal_files | 四角形 | 区切り線 |
参照元はFolderChildrenというコレクションです。
ギャラリーコントロールに含める画像 コントロールのImage プロパティに下記の関数を設定します。
Image
$"https://static2.sharepointonline.com/files/fabric/assets/item-types/24/{Coalesce(
LookUp(
cmp_file_uploader.static_icon_table,
Extention = Last(
Split(
ThisItem.name,
"."
)
).Value
).FileType,
"genericfile"
)}.svg"
これにより、ファイルの拡張子をもとに、SharePointで参照するときのようにファイルのアイコンを表示することができます。
過去にQiitaの記事で触れましたので、よろしければ見てみてください。
あとは、ファイル名とファイルのリンク、更新日時と更新者をSharePointのドキュメントライブラリに寄せて作ってみます。
この大本はGraph APIにて取得した戻り値から表示しています。
Graph APIの戻り値はUntyped Objectsと評価されます。
型を明示的に指定しないと、値を表示できません。
OnAddFileのコレクション格納部分
ClearCollect(
FolderChildren,
ForAll(
Office365グループ.HttpRequest(
$"{_endpoint}{EncodeUrl(cmp_file_uploader.folder_name)}:/children",
"GET",
""
).value,
{
name: Text(ThisRecord.name),
webUrl: Text(ThisRecord.webUrl),
lastModifiedDateTime: DateTimeValue(ThisRecord.lastModifiedDateTime),
lastModifiedBy: Text(ThisRecord.lastModifiedBy.user.displayName)
}
)
);
上記がコレクションのファイルの格納に該当する部分です。
明示的に型を指定した値を格納します。
name: Text(ThisRecord.name)webUrl: Text(ThisRecord.webUrl)lastModifiedDateTime: DateTimeValue(ThisRecord.lastModifiedDateTime)lastModifiedBy: Text(ThisRecord.lastModifiedBy.user.displayName)
これで表示の準備が整いました。
コンポーネントの動作
こちらの機能で実施することは、ファイルのアップロードがメインです。
しかし
- フォルダが存在しない場合はフォルダを作成したい
- 誤ってファイルを上書きすることは避けたい
このようなニーズがあると思っています。
こちらについて対応を考えてみましょう。
フォルダが存在しない場合はフォルダを作成したい
こちらは特別注意をせずとも、フォルダが存在しない場合は、{フォルダーパス}/{拡張子付きファイル名}の組み合わせが含まれていれば、フォルダは作成されます。
特段フォルダを作成する機能を設けることは不要です。
誤ってファイルを上書きすることは避けたい
上記のハンドリングを実現するために、Graph APIとIfError 関数を組み合わせて対処します。
OnAddFileでファイルの存在を確認したうえで、ファイルの作成を実行している箇所
IfError(
Office365グループ.HttpRequest(
$"{_endpoint}{EncodeUrl($"{cmp_file_uploader.folder_name}/{ThisRecord.Name}")}",
"GET",
""
),
Office365グループ.HttpRequest(
$"{_endpoint}{EncodeUrl($"{cmp_file_uploader.folder_name}/{ThisRecord.Name}")}:/content",
"PUT",
ThisRecord.Value
)
)
こちらのアクションを実行することで、ファイル(またはフォルダ)の情報を取得することができます。
ファイル(またはフォルダ)が存在しない場合は、変数にErrorが格納されます。
変数に格納された値がErrorかどうかの判断でファイルの存在チェックが実現できるため、IfError 関数で、Errorではないときに、ファイルをアップロードする動作を仕込めば課題が解決します。
変数の格納自体が失敗するわけではなく、Errorという値が格納されるため、IfError関数でエラーハンドリングが実現できます。
あとはファイルがアップロードされたときに、フォルダの中身を再度取得し、ギャラリー コントロールに表示します。
ドラッグ アンド ドロップでクイックにファイルをアップロードできそうで非常に便利です。
おわりに
Reza Dorrani氏の動画は無限に見ていられますね。Power Platformで実現したいことは、ほとんどRezaが解決していると過言ではありません。
困ったときに彼の動画を見てみましょう。