LoginSignup
3
2
@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を！

3
2
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
3
2