Go to Qiita Advent Calendar 2024 Top
LoginSignup
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@DEmodoriGatsuO(Gatsuo De'modori)

Power AppsでFluent UIを活用して、オシャレなアプリを作る

Posted at

はじめに

Microsoft MVPでPower Appsの発信をされているMatthew Devaneyさんのブログを見て衝撃を得ました。
SharePointサイトで表示されているファイルアイコンが、Power Appsでサクっと表現できるのなんて・・・👀✨

一体これはどんなテクニックなんだ・・・！、ほかにどんな画像参照ができるのか！ という興味から色々調べて見ました。

Fluent UI

このアイコンの大本となるのは、Fluent UI。
Fluent UIは、Microsoftのアプリケーション、SharePoint Onlineなどで採用されているUXフレームワークです。

今回興味を持った発端となるテクニックは、https://static2.sharepointonline.comという、Microsoftのコンテンツ配信ネットワーク(CDN)から、自分のサーバーにCSS(材料)を用意せずに、Microsoftのサーバーから、Fluent UIのリソースを参照しています。

試しに、メモ帳で下記のコードをコピペして、sample.htmlと名前を付けて保存をしてください。

sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Office UI Fabric アイコン例</title>
    <!-- Office UI Fabric のCSSを読み込んでいる -->
    <link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.css">
    <style>
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            padding: 20px;
        }
        .icon-container {
            display: flex;
            align-items: center;
        }
        .icon-container i {
            margin-right: 10px;
        }
    </style>
</head>
<body>
    <h1>Office UI Fabric アイコン例</h1>
    <div class="icon-container">
        <i class="ms-Icon ms-font-xl ms-Icon--Table ms-fontColor-themePrimary"></i>
        <span>テーブルアイコン</span>
    </div>
</body>
</html>

ブラウザ（Microsoft Edge）で開くと下記のように表示されます。

image.png

Fluent UI Iconsのページを参照してみると、こちらのアイコンと一致していることがわかります。

なぜ自分の手元では、CSSを用意していないのにアイコンを使えるのでしょうか。
それはhttps://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/9.6.1/css/fabric.min.cssを参照しているためです。

これは Fabric Coreというオープンソース コレクションの一部のとのこと。

Fabric Core は、React以外の Office アドインで使用することを目的とした CSS クラスと Sass mixins のオープンソース コレクションです。Fabric Core には、アイコン、色、書体、グリッドなど、Fluent UI デザイン言語の基本的な要素が含まれています。 Fabric Core はフレームワークに依存しないため、任意のシングルページ アプリケーションまたは任意のサーバー側 Web UI フレームワークで使用できます。 (履歴上の理由から、"Fluent Core" ではなく "Fabric Core" と呼ばれます)。

Office アドインの Fabric Core

任意のシングルページ アプリケーションまたは任意のサーバー側 Web UI フレームワークで使用できる、これによって、自分でCSSを用意せずとも、Fabric Coreを参照できるということなんですね。

改めてCSSの中身を覗いてみます。

アイコンや画像が含まれていますね。例えばCSSの中にあるhttps://static2.sharepointonline.com/files/fabric/assets/brand-icons/product/png/excel_16x3.pngにアクセスすると、Excelのアイコンが表示されます。

このおかげで、サクっとSharePointサイトのドキュメント ライブラリで映っているような映えるアイコンが表示できるということなんですね。

■ 参考リンク

使えるものを一覧化してみる

どのようなファイルが参照できるのか、検証してみました。
結果はこの通り。

image.png

圧巻ですね!! 合計61!! (画像の種類単位、拡張子単位であれば300以上)
GitHubなど参考にして出した結果ですが、漏れもあるかもしれません。

ギャラリーコントロールに下記のプロパティに画像を参照しています。
さっそくYAML使うスタイルです。

- GalleryImage:
    Control: Gallery
    Variant: BrowseLayout_Vertical_OneImageThreeColumnVariant_ver5.0
    Properties:
      Items: =["accdb","archive","audio","calendar","classifier","code","contact","csv","desktopfolder","docset","docx","dotx","email","exe", "fluid", "folder","font","form","genericfile","html","link","linkedfolder","splist","model","mpp","mpt","multiple","one","onetoc","pbiapp","pdf","photo","photo360","picturesfolder","potx","powerbi","ppsx","pptx","presentation","pub","spo","sponews","spreadsheet","rtf","sharedfolder","sway","sysfile","txt","vaultclosed","vaultopen","vector","video","video360","vsdx","vssx","vstx","xlsx","xltx","xml","xsn","zip"]
      WrapCount: =12
      DelayItemLoading: =true
      Layout: =Layout.Vertical
      LoadingSpinner: =LoadingSpinner.Data
      TemplatePadding: =4
      TemplateSize: =80
    Children:
    - FileName:
        Control: Text
        Properties:
          Size: =16
          Text: =ThisItem.Value
          Height: =53
          Width: =74
          X: =54
          Y: =1
    - IconImage:
        Control: Image
        Properties:
          OnSelect: =Select(Parent)
          Image: |-
            =$"https://static2.sharepointonline.com/files/fabric/assets/item-types/24/{Coalesce(
                ThisItem.Value,
                "genericfile"
            )}.svg"
          Height: =36
          ImagePosition: =ImagePosition.Fill
          RadiusBottomLeft: =8
          RadiusBottomRight: =8
          RadiusTopLeft: =8
          RadiusTopRight: =8
          Width: =36
          X: =7
          Y: =9

ギャラリーコントロールのデータソースには

Items
["accdb","archive","audio","calendar","classifier","code","contact","csv","desktopfolder","docset","docx","dotx","email","exe", "fluid", "folder","font","form","genericfile","html","link","linkedfolder","splist","model","mpp","mpt","multiple","one","onetoc","pbiapp","pdf","photo","photo360","picturesfolder","potx","powerbi","ppsx","pptx","presentation","pub","spo","sponews","spreadsheet","rtf","sharedfolder","sway","sysfile","txt","vaultclosed","vaultopen","vector","video","video360","vsdx","vssx","vstx","xlsx","xltx","xml","xsn","zip"]

画像は、Imageプロパティに

Image
$"https://static2.sharepointonline.com/files/fabric/assets/item-types/24/{Coalesce(
    ThisItem.Value,
    "genericfile"
)}.svg"

とすることで表現できています。

Coalesce関数と、文字列の先頭にドル記号$を付けたテクニックが使われています。
文字列の置き換えがスマートです。

アイコンを呼び出すキーとファイルの内容

下記のようにまとめました！

キー 対象の拡張子 説明
accdb accdb, mdb Microsoft Accessファイル
archive 7z, ace, arc, arj, dmg, gz, iso, lzh, pkg, rar, sit, tgz, tar, z 圧縮ファイルなど
audio aif, aiff, aac, alac, amr, ape, au, awb, dct, dss, dvf, flac, gsm, m4a, m4p, mid, mmf, mp3, oga, ra, rm, wav, wma, wv 音声ファイル
calendar ical, icalendar, ics, ifb, vcs カレンダーファイル
classifier classifier
code abap, ada, adp, ahk, as, as3, asc, ascx, asm, asp, awk, bash, bash_login, bash_logout, bash_profile, bashrc, bat, bib, bsh, build, builder, c, cbl, c++, capfile, cc, cfc, cfm, cfml, cl, clj, cls, cmake, cmd, coffee, config, cpp, cpt, cpy, cs, cshtml, cson, csproj, css, ctp, cxx, d, ddl, di, disco, dml, dtd, dtml, el, emakefile, erb, erl, f, f90, f95, fs, fsi, fsscript, fsx, gemfile, gemspec, gitconfig, go, groovy, gvy, h, h++, haml, handlebars, hbs, hcp, hh, hpp, hrl, hs, htc, hxx, idl, iim, inc, inf, ini, inl, ipp, irbrc, jade, jav, java, js, json, jsp, jsproj, jsx, l, less, lhs, lisp, log, lst, ltx, lua, m, mak, make, manifest, master, md, markdn, markdown, mdown, mkdn, ml, mli, mll, mly, mm, mud, nfo, opml, osascript, p, pas, patch, php, php2, php3, php4, php5, phtml, pl, pm, pod, pp, profile, ps1, ps1xml, psd1, psm1, pss, pt, py, pyw, r, rake, rb, rbx, rc, rdf, re, reg, rest, resw, resx, rhtml, rjs, rprofile, rpy, rss, rst, ruby, rxml, s, sass, scala, scm, sconscript, sconstruct, script, scss, sgml, sh, shtml, sml, svn-base, swift, sql, sty, tcl, tex, textile, tld, tli, tmpl, tpl, vb, vi, vim, vmg, webpart, wsp, wsdl, xhtml, xoml, xsd, xslt, yaml, yaws, yml, zsh ソースコードなど
contact vcf 連絡先
csv csv CSV
desktopfolder デスクトップフォルダ
docset ドキュメントセット
docx doc, docm, docx, docb Word文書
dotx dot, dotm, dotx Wordテンプレート
email eml, msg, oft, ost, pst 電子メールファイル
exe application, appref-ms, apk, app, appx, exe, ipa, msi, xap 実行ファイル
folder フォルダ
font ttf, otf, woff フォントファイル
form Formsのアイコン
genericfile ファイル
html htm, html, mht, mhtml HTML
link lnk, link, url, website, webloc リンク
linkedfolder リンク済みのフォルダ
splist
model 3ds, 3mf, blend, cool, dae, df, dwfx, dwg, dxf, fbx, glb, gltf, holo, layer, layout, max, mtl, obj, off, ply, skp, stp, stl, t, thl, x 3Dモデルファイル
mpp mpp Projectプロジェクト
mpt mpt Projectテンプレート
multiple 複数のファイル
one one OneNote
onetoc ms-one-stub, onetoc, onetoc2, onepkg OneNoteノートブック
pbiapp Power BIアプリケーション
pdf pdf PDFファイル
photo arw, bmp, cr2, crw, dic, dicm, dcm, dcm30, dcr, dds, dib, dng, erf, gif, heic, heif, ico, jfi, jfif, jif, jpe, jpeg, jpg, jxr, kdc, mrw, nef, orf, pct, pict, png, pns, psb, psd, raw, tga, tif, tiff, wdp 画像
photo360 360度写真
picturesfolder ピクチャフォルダ
potx pot, potm, potx PowerPointテンプレート
powerbi pbids, pbix Power BIファイル
ppsx pps, ppsm, ppsx PowerPointスライドショー
pptx ppt, pptm, pptx, sldx, sldm PowerPointファイル
presentation odp, gslides, key プレゼンテーションファイル
pub pub Publisherファイル
spo aspx SharePoint Onlineページ
sponews SharePointニュース
spreadsheet odc, ods, gsheet, numbers, tsv スプレッドシート（Excel以外）
rtf epub, gdoc, odt, rtf, wri, pages リッチテキストファイル
sharedfolder 共有済みフォルダ
sway Sway
sysfile bak, bin, cab, cache, cat, cer, class, dat, db, dbg, dl_, dll, ithmb, jar, kb, ldt, lrprev, pkpass, ppa, ppam, pdb, rom, thm, thmx, vsl, xla, xlam, xlb, xll システムファイル
txt dif, diff, readme, out, plist, properties, text, txt テキスト
vaultclosed クローズドボールト
vaultopen オープンボールト
vector ai, ait, cvs, dgn, gdraw, pd, emf, eps, fig, ind, indd, indl, indt, indb, ps, svg, svgz, wmf, oxps, xps, xd, sketch ベクターファイル
video 3g2, 3gp, 3gp2, 3gpp, asf, avi, dvr-ms, flv, m1v, m4v, mkv, mod, mov, mm4p, mp2, mp2v, mp4, mp4v, mpa, mpe, mpeg, mpg, mpv, mpv2, mts, ogg, qt, swf, ts, vob, webm, wlmp, wm, wmv, wmx 動画
video360 360度動画
vsdx vdx, vsd, vsdm, vsdx, vsw, vdw Visioダイアグラム
vssx vss, vssm, vssx Visio図面ステンシル
vstx vst, vstm, vstx, vsx Visioテンプレート
xlsx xlc, xls, xlsb, xlsm, xlsx, xlw Excelスプレッドシート
xltx xlt, xltm, xltx Excelテンプレート
xml xaml, xml, xsl XML
xsn xsn InfoPathファイル
zip zip 圧縮ファイル

間違いあれば教えてください🙇

ファイル種類ってこんなにあったのか！と衝撃です。
Matthew Devaney氏もマッピングしていますが、違いがあるかないかは、ぜひ見てみてください！

こんなことができるかも！

Fluent UIを使う理由は、やはりクールであることです。
そして拡張子から算出できるのであれば、表現が簡単。

添付ファイル コントロールから表示する

工夫することで、添付ファイルコントロールのAttachmentsの中身をアイコンに変換できそうです。

まずは、App.Formulasに下記を設定。
拡張子に対するFileTypeのテーブルです。

【注】（しこたま長いです）
App.Formulas
IconTable = 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"
    }
);

そしてギャラリーコントロールはコチラ。

AttachementControl.Attachments
- galImage:
    Control: Gallery
    Variant: BrowseLayout_Vertical_TwoTextOneImageVariant_ver5.0
    Properties:
      Items: =AttachementControl.Attachments
      WrapCount: =2
      DelayItemLoading: =true
      Layout: =Layout.Vertical
      LoadingSpinner: =LoadingSpinner.Data
      TemplatePadding: =0
      TemplateSize: =104
    Children:
    - lblTitle:
        Control: Text
        Properties:
          Text: =Last(Split(ThisItem.Name,".")).Value
          Height: =27
          Width: =224
          X: =104
          Y: =76
    - lblSubTitle:
        Control: Text
        Properties:
          Size: =18
          Text: =ThisItem.Name
          Weight: ='TextCanvas.Weight'.Semibold
          Height: =76
          Width: =197
          X: =104
    - imgFluent:
        Control: Image
        Properties:
          OnSelect: =Select(Parent)
          Image: |-
            =$"https://static2.sharepointonline.com/files/fabric/assets/item-types/24/{Coalesce(
                LookUp(IconTable,Extention=Last(Split(ThisItem.Name,".")).Value).FileType,
                "genericfile"
            )}.svg"
          Height: =72
          RadiusBottomLeft: =8
          RadiusBottomRight: =8
          RadiusTopLeft: =8
          RadiusTopRight: =8
          Width: =72
          X: =16
          Y: =(Parent.TemplateHeight / 2) - (Self.Height / 2)

image.png

AttachementControlが、添付ファイルコントロールであり、Attachmentsを垂直ギャラリーのソースとしています。

画像のImageプロパティに関数を仕込むことで、アイコンが表現されます。

Image
$"https://static2.sharepointonline.com/files/fabric/assets/item-types/24/{Coalesce(
    LookUp(IconTable,Extention=Last(Split(ThisItem.Name,".")).Value).FileType,
    "genericfile"
)}.svg"

SharePointのドキュメント ライブラリを再現する

SharePointのドキュメント ライブラリをソースにして、あたかもSharePointを直接編集できている感覚は作れそうですね！

そしてギャラリーコントロールのソースを、下記のように設定して

galDocLib.Items
Filter(ドキュメント,フォルダーである<>true)

画像はこのように！

Image
$"https://static2.sharepointonline.com/files/fabric/assets/item-types/24/{Coalesce(
    LookUp(IconTable,Extention=Last(Split(ThisItem.拡張子付きのファイル名,".")).Value).FileType,
    "genericfile"
)}.svg"

右側には、モダン コントロールのフォームを入れて、Itemsをギャラリーコントロール.Selectedとすると。

image.png

メタ データ編集が捗りそうな予感👀✨！

最後に

非常にクイックにオシャレなコンテンツが使えそうです。

しかし使う場合には、下記の注意書きを読んだうえでご利用ください。

Fluent UI primarily uses a custom font for its iconography, released under the Microsoft Fabric Assets License. As of Fluent UI React version 8, an SVG-based version of the same icon set is available under the MIT license.

Fluent UI Icons

それでは、よいPower Lifeを！

4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?