- rpReport:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
X: =0
Y: =0
Width: =Parent.Width
Height: =Parent.Height
Fill: =RGBA(245, 252, 255, 1)
Children:
- rpAmbient:
Control: Timer@2.1.0
Properties:
Duration: =12000
AutoStart: =true
Start: =!Coalesce(rpPaused, false)
Repeat: =true
AutoPause: =true
Visible: =false
Width: =1
Height: =1
X: =0
Y: =0
- rpReveal:
Control: Timer@2.1.0
Properties:
Duration: =850
AutoStart: =true
Start: =!Coalesce(rpPaused, false)
Repeat: =false
AutoPause: =true
Visible: =false
Width: =1
Height: =1
X: =0
Y: =0
- rpBuildTimer:
Control: Timer@2.1.0
Properties:
Duration: =16000
Repeat: =true
AutoStart: =true
Start: =!Coalesce(rpPaused, false) && (rpSlide = 2 || rpSlide = 4) && IsBlank(rpBuildManual)
AutoPause: =true
Visible: =false
X: =0
Y: =0
Width: =1
Height: =1
- rpGuideTimer:
Control: Timer@2.1.0
Properties:
Duration: =1100
AutoStart: =false
Start: =Coalesce(rpGuideRun, false) && !Coalesce(rpPaused, false)
Repeat: =false
AutoPause: =true
OnTimerEnd: =Set(rpGuideRun, false)
Visible: =false
Width: =1
Height: =1
X: =0
Y: =0
- rpTopLine:
Control: Rectangle@2.3.0
Properties:
Fill: =RGBA(29, 183, 205, 1)
X: =0
Y: =0
Width: =Parent.Width
Height: =5
- rpSweep:
Control: Rectangle@2.3.0
Properties:
Fill: =RGBA(255, 218, 104, 1)
X: =(Parent.Width - 100) * (0.5 + 0.5 * Sin(2 * Pi() * rpAmbient.Value / rpAmbient.Duration))
Y: =0
Width: =100
Height: =5
- rpBrand:
Control: Label@2.5.1
Properties:
Text: ="dorago01 / M365 CODE LAB"
X: =48
Y: =25
Width: =Parent.Width - 620
Height: =34
Size: =13
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
FontWeight: =FontWeight.Bold
PaddingLeft: =0
PaddingRight: =0
- rpPause:
Control: Classic/Button@2.2.0
Properties:
Text: =If(Coalesce(rpPaused, false), "動きを再開 ▶", "動きを停止 Ⅱ")
OnSelect: =Set(rpPaused, !Coalesce(rpPaused, false))
X: =Parent.Width - 180
Y: =26
Width: =140
Height: =38
Size: =11
Fill: =RGBA(0, 137, 164, 1)
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
- rpReplay:
Control: Classic/Button@2.2.0
Properties:
Text: ="もう一回！ ↻"
OnSelect: =Set(rpGuideFromX, rpGuideRobot.X); Set(rpGuideFromY, rpGuideRobot.Y); Reset(rpReveal); Set(rpGuideToX, Max(4, Min(rpReport.Width - 68, Self.X + Self.Width + 8))); Set(rpGuideToY, Max(4, Min(rpReport.Height - 68, Self.Y - 12))); Set(rpGuideMood, Coalesce(rpGuideMood, 0) + 1); Set(rpGuideRun, false); Reset(rpGuideTimer); Set(rpGuideRun, true); Set(rpBuildManual, Blank()); Reset(rpBuildTimer)
X: =Parent.Width - 332
Y: =26
Width: =140
Height: =38
Size: =11
Fill: =RGBA(0, 137, 164, 1)
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
- rpNotesOpen:
Control: Classic/Button@2.2.0
Properties:
Text: ="補足・出典"
OnSelect: =Set(rpShowNotes, true)
X: =Parent.Width - 484
Y: =26
Width: =140
Height: =38
Size: =11
Fill: =RGBA(0, 137, 164, 1)
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
- rpEyebrow:
Control: Label@2.5.1
Properties:
Text: =Switch(Coalesce(rpSlide, 1), 1, "01 / 今回やったこと", 2, "02 / SharePointをカスタマイズ", 4, "03 / Power Appsをカスタマイズ", 3, "04 / どうやって作った？", 6, "05 / できたこと・これから")
X: =52
Y: =100
Width: =Parent.Width * 0.46
Height: =28
Size: =12
Color: =RGBA(0, 130, 156, 1)
Wrap: =true
FontWeight: =FontWeight.Bold
PaddingLeft: =0
PaddingRight: =0
- rpTitle:
Control: Label@2.5.1
Properties:
Text: |-
=Switch(Coalesce(rpSlide, 1), 1, "SharePointとPower Appsを
HACKしてみた！", 2, "CLIで命令すると、
SharePointができる。", 3, "コードはどうした？
気合と根性…！", 4, "YAMLを貼ると、
Power Appsができる。", 5, "ロボットも動く！
でも、ちょっと邪魔？", 6, "いつものツールで、
ここまで作れました！")
X: =52 + 40 * Power(1 - (If(Coalesce(rpPaused, false), 1, Min(1, rpReveal.Value / rpReveal.Duration))), 3)
Y: =144
Width: =Parent.Width * 0.46 - 52
Height: =168
Size: =30
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
FontWeight: =FontWeight.Bold
PaddingLeft: =0
PaddingRight: =0
- rpDescription:
Control: Label@2.5.1
Properties:
Text: |-
=Switch(Coalesce(rpSlide, 1), 1, "会社でおなじみの2つのツールをカスタマイズ。
サイトの見た目と、操作できる紹介画面を作ってみました。", 2, "PowerShellで「ページを作る」「本文を入れる」と命令。
右側では、コードに合わせてサイトができあがります。", 3, "どうやってコーディングしたか…。気合と根性…！
（詳しくは個別にお話ししますね…）", 4, "YAMLで画面を作り、Power Fxでボタンの動きを設定。
コード → 画面 → 操作の順で、できることを紹介します。", 5, "にぎやかにしたら、ロボットが本文より目立ちました。
読んでほしいときは、横へ移動。必要ならお休みです。", 6, "SharePointは、見た目をカスタマイズ。
Power Appsは、動く紹介画面に。今回のHACKはこの2つ！")
X: =52
Y: =Parent.Height * 0.365
Width: =Parent.Width * 0.46 - 52
Height: =114
Size: =16
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
FontWeight: =FontWeight.Normal
PaddingLeft: =0
PaddingRight: =0
- rpIllustration:
Control: Image@2.2.3
Properties:
Image: |-
=If(rpSlide = 2 || rpSlide = 4, "data:image/svg+xml;utf8," & EncodeUrl(If(rpSlide = 2, Switch(Coalesce(rpBuildManual, Min(4, 1 + RoundDown(rpBuildTimer.Value / 4000, 0))), 1, "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 660'><rect x='0' y='0' width='1000' height='660' rx='10' fill='#f5fcff' stroke='none'/><text xml:space='preserve' x='20' y='35' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='#183f53'>CODE</text><text xml:space='preserve' x='600' y='35' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='#183f53'>RESULT / PREVIEW</text><rect x='16' y='54' width='530' height='510' rx='10' fill='#15283d' stroke='none'/><rect x='16' y='54' width='530' height='40' rx='10' fill='#24435b' stroke='none'/><text xml:space='preserve' x='34' y='81' font-family='Segoe UI,Arial,sans-serif' font-size='18' fill='#ffffff'>PowerShell / PnP</text><rect x='27' y='102' width='508' height='56' rx='5' fill='#284958' stroke='none'/><text xml:space='preserve' x='36' y='124' font-family='Consolas,monospace' font-size='17' fill='#72eddf'># Connected test site</text><text xml:space='preserve' x='36' y='148' font-family='Consolas,monospace' font-size='17' fill='#72eddf'>PS> Add-PnPPage -Name "Demo"</text><text xml:space='preserve' x='31' y='600' font-family='Segoe UI,Arial,sans-serif' font-size='19' fill='#183f53'>STEP 1 / 4</text><rect x='563' y='265' width='27' height='6' rx='3' fill='#00b8ce' stroke='none'/><path d='M580 254L596 268L580 282' fill='none' stroke='#00b8ce' stroke-width='5'/><rect x='610' y='54' width='374' height='510' rx='12' fill='white' stroke='#c8e1e9'/><rect x='610' y='54' width='374' height='42' rx='10' fill='#087d87' stroke='none'/><text xml:space='preserve' x='626' y='82' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='white'>SharePoint</text><text xml:space='preserve' x='626' y='125' font-family='Segoe UI,Arial,sans-serif' font-size='19' fill='#183f53'>dorago01 / Site</text><text xml:space='preserve' x='626' y='154' font-family='Segoe UI,Arial,sans-serif' font-size='13' fill='#638294'>Home Documents Pages</text><rect x='626' y='178' width='340' height='105' rx='10' fill='#d3f3fa' stroke='none'/><text xml:space='preserve' x='642' y='219' font-family='Segoe UI,Arial,sans-serif' font-size='29' fill='#183f53'>Demo</text><text xml:space='preserve' x='642' y='251' font-family='Segoe UI,Arial,sans-serif' font-size='15' fill='#183f53'>A page created with PnP</text><text xml:space='preserve' x='612' y='600' font-family='Segoe UI,Arial,sans-serif' font-size='21' fill='#00869b'>CODE -> UI</text><text xml:space='preserve' x='20' y='644' font-family='Segoe UI,Arial,sans-serif' font-size='13' fill='#638294'>ILLUSTRATIVE BUILD SEQUENCE / NOT A LIVE TENANT SESSION</text></svg>", 2, "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 660'><rect x='0' y='0' width='1000' height='660' rx='10' fill='#f5fcff' stroke='none'/><text xml:space='preserve' x='20' y='35' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='#183f53'>CODE</text><text xml:space='preserve' x='600' y='35' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='#183f53'>RESULT / PREVIEW</text><rect x='16' y='54' width='530' height='510' rx='10' fill='#15283d' stroke='none'/><rect x='16' y='54' width='530' height='40' rx='10' fill='#24435b' stroke='none'/><text xml:space='preserve' x='34' y='81' font-family='Segoe UI,Arial,sans-serif' font-size='18' fill='#ffffff'>PowerShell / PnP</text><text xml:space='preserve' x='36' y='124' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'># Connected test site</text><text xml:space='preserve' x='36' y='148' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'>PS> Add-PnPPage -Name "Demo"</text><rect x='27' y='168' width='508' height='80' rx='5' fill='#284958' stroke='none'/><text xml:space='preserve' x='36' y='190' font-family='Consolas,monospace' font-size='17' fill='#72eddf'>PS> Add-PnPPageSection</text><text xml:space='preserve' x='36' y='214' font-family='Consolas,monospace' font-size='17' fill='#72eddf'> -Page "Demo"</text><text xml:space='preserve' x='36' y='238' font-family='Consolas,monospace' font-size='17' fill='#72eddf'> -SectionTemplate OneColumn</text><text xml:space='preserve' x='31' y='600' font-family='Segoe UI,Arial,sans-serif' font-size='19' fill='#183f53'>STEP 2 / 4</text><rect x='563' y='265' width='27' height='6' rx='3' fill='#00b8ce' stroke='none'/><path d='M580 254L596 268L580 282' fill='none' stroke='#00b8ce' stroke-width='5'/><rect x='610' y='54' width='374' height='510' rx='12' fill='white' stroke='#c8e1e9'/><rect x='610' y='54' width='374' height='42' rx='10' fill='#087d87' stroke='none'/><text xml:space='preserve' x='626' y='82' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='white'>SharePoint</text><text xml:space='preserve' x='626' y='125' font-family='Segoe UI,Arial,sans-serif' font-size='19' fill='#183f53'>dorago01 / Site</text><text xml:space='preserve' x='626' y='154' font-family='Segoe UI,Arial,sans-serif' font-size='13' fill='#638294'>Home Documents Pages</text><rect x='626' y='178' width='340' height='105' rx='10' fill='#d3f3fa' stroke='none'/><text xml:space='preserve' x='642' y='219' font-family='Segoe UI,Arial,sans-serif' font-size='29' fill='#183f53'>Demo</text><text xml:space='preserve' x='642' y='251' font-family='Segoe UI,Arial,sans-serif' font-size='15' fill='#183f53'>A page created with PnP</text><rect x='627' y='303' width='338' height='206' rx='6' fill='#f4fbfd' stroke='#19b9d2'/><text xml:space='preserve' x='641' y='329' font-family='Segoe UI,Arial,sans-serif' font-size='14' fill='#00869b'>SECTION 1</text><text xml:space='preserve' x='612' y='600' font-family='Segoe UI,Arial,sans-serif' font-size='21' fill='#00869b'>CODE -> UI</text><text xml:space='preserve' x='20' y='644' font-family='Segoe UI,Arial,sans-serif' font-size='13' fill='#638294'>ILLUSTRATIVE BUILD SEQUENCE / NOT A LIVE TENANT SESSION</text></svg>", 3, "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 660'><rect x='0' y='0' width='1000' height='660' rx='10' fill='#f5fcff' stroke='none'/><text xml:space='preserve' x='20' y='35' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='#183f53'>CODE</text><text xml:space='preserve' x='600' y='35' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='#183f53'>RESULT / PREVIEW</text><rect x='16' y='54' width='530' height='510' rx='10' fill='#15283d' stroke='none'/><rect x='16' y='54' width='530' height='40' rx='10' fill='#24435b' stroke='none'/><text xml:space='preserve' x='34' y='81' font-family='Segoe UI,Arial,sans-serif' font-size='18' fill='#ffffff'>PowerShell / PnP</text><text xml:space='preserve' x='36' y='124' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'># Connected test site</text><text xml:space='preserve' x='36' y='148' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'>PS> Add-PnPPage -Name "Demo"</text><text xml:space='preserve' x='36' y='190' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'>PS> Add-PnPPageSection</text><text xml:space='preserve' x='36' y='214' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> -Page "Demo"</text><text xml:space='preserve' x='36' y='238' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> -SectionTemplate OneColumn</text><rect x='27' y='258' width='508' height='80' rx='5' fill='#284958' stroke='none'/><text xml:space='preserve' x='36' y='280' font-family='Consolas,monospace' font-size='17' fill='#72eddf'>PS> Add-PnPPageTextPart</text><text xml:space='preserve' x='36' y='304' font-family='Consolas,monospace' font-size='17' fill='#72eddf'> -Page "Demo"</text><text xml:space='preserve' x='36' y='328' font-family='Consolas,monospace' font-size='17' fill='#72eddf'> -Text "Hello from code!"</text><text xml:space='preserve' x='31' y='600' font-family='Segoe UI,Arial,sans-serif' font-size='19' fill='#183f53'>STEP 3 / 4</text><rect x='563' y='265' width='27' height='6' rx='3' fill='#00b8ce' stroke='none'/><path d='M580 254L596 268L580 282' fill='none' stroke='#00b8ce' stroke-width='5'/><rect x='610' y='54' width='374' height='510' rx='12' fill='white' stroke='#c8e1e9'/><rect x='610' y='54' width='374' height='42' rx='10' fill='#087d87' stroke='none'/><text xml:space='preserve' x='626' y='82' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='white'>SharePoint</text><text xml:space='preserve' x='626' y='125' font-family='Segoe UI,Arial,sans-serif' font-size='19' fill='#183f53'>dorago01 / Site</text><text xml:space='preserve' x='626' y='154' font-family='Segoe UI,Arial,sans-serif' font-size='13' fill='#638294'>Home Documents Pages</text><rect x='626' y='178' width='340' height='105' rx='10' fill='#d3f3fa' stroke='none'/><text xml:space='preserve' x='642' y='219' font-family='Segoe UI,Arial,sans-serif' font-size='29' fill='#183f53'>Demo</text><text xml:space='preserve' x='642' y='251' font-family='Segoe UI,Arial,sans-serif' font-size='15' fill='#183f53'>A page created with PnP</text><rect x='627' y='303' width='338' height='206' rx='6' fill='#f4fbfd' stroke='#19b9d2'/><text xml:space='preserve' x='641' y='329' font-family='Segoe UI,Arial,sans-serif' font-size='14' fill='#00869b'>SECTION 1</text><text xml:space='preserve' x='641' y='371' font-family='Segoe UI,Arial,sans-serif' font-size='22' fill='#183f53'>Hello from code!</text><text xml:space='preserve' x='641' y='407' font-family='Segoe UI,Arial,sans-serif' font-size='15' fill='#183f53'>Text added by PowerShell</text><rect x='641' y='434' width='301' height='9' rx='4' fill='#cee8ed' stroke='none'/><rect x='641' y='455' width='250' height='9' rx='4' fill='#cee8ed' stroke='none'/><text xml:space='preserve' x='612' y='600' font-family='Segoe UI,Arial,sans-serif' font-size='21' fill='#00869b'>CODE -> UI</text><text xml:space='preserve' x='20' y='644' font-family='Segoe UI,Arial,sans-serif' font-size='13' fill='#638294'>ILLUSTRATIVE BUILD SEQUENCE / NOT A LIVE TENANT SESSION</text></svg>", 4, "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 660'><rect x='0' y='0' width='1000' height='660' rx='10' fill='#f5fcff' stroke='none'/><text xml:space='preserve' x='20' y='35' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='#183f53'>CODE</text><text xml:space='preserve' x='600' y='35' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='#183f53'>RESULT / PREVIEW</text><rect x='16' y='54' width='530' height='510' rx='10' fill='#15283d' stroke='none'/><rect x='16' y='54' width='530' height='40' rx='10' fill='#24435b' stroke='none'/><text xml:space='preserve' x='34' y='81' font-family='Segoe UI,Arial,sans-serif' font-size='18' fill='#ffffff'>PowerShell / PnP</text><text xml:space='preserve' x='36' y='124' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'># Connected test site</text><text xml:space='preserve' x='36' y='148' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'>PS> Add-PnPPage -Name "Demo"</text><text xml:space='preserve' x='36' y='190' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'>PS> Add-PnPPageSection</text><text xml:space='preserve' x='36' y='214' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> -Page "Demo"</text><text xml:space='preserve' x='36' y='238' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> -SectionTemplate OneColumn</text><text xml:space='preserve' x='36' y='280' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'>PS> Add-PnPPageTextPart</text><text xml:space='preserve' x='36' y='304' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> -Page "Demo"</text><text xml:space='preserve' x='36' y='328' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> -Text "Hello from code!"</text><rect x='27' y='348' width='508' height='56' rx='5' fill='#284958' stroke='none'/><text xml:space='preserve' x='36' y='370' font-family='Consolas,monospace' font-size='17' fill='#72eddf'># Page assembled as a draft</text><text xml:space='preserve' x='36' y='394' font-family='Consolas,monospace' font-size='17' fill='#72eddf'># Review in SharePoint</text><text xml:space='preserve' x='31' y='600' font-family='Segoe UI,Arial,sans-serif' font-size='19' fill='#183f53'>STEP 4 / 4</text><rect x='563' y='265' width='27' height='6' rx='3' fill='#00b8ce' stroke='none'/><path d='M580 254L596 268L580 282' fill='none' stroke='#00b8ce' stroke-width='5'/><rect x='610' y='54' width='374' height='510' rx='12' fill='white' stroke='#c8e1e9'/><rect x='610' y='54' width='374' height='42' rx='10' fill='#087d87' stroke='none'/><text xml:space='preserve' x='626' y='82' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='white'>SharePoint</text><text xml:space='preserve' x='626' y='125' font-family='Segoe UI,Arial,sans-serif' font-size='19' fill='#183f53'>dorago01 / Site</text><text xml:space='preserve' x='626' y='154' font-family='Segoe UI,Arial,sans-serif' font-size='13' fill='#638294'>Home Documents Pages</text><rect x='626' y='178' width='340' height='105' rx='10' fill='#d3f3fa' stroke='none'/><text xml:space='preserve' x='642' y='219' font-family='Segoe UI,Arial,sans-serif' font-size='29' fill='#183f53'>Demo</text><text xml:space='preserve' x='642' y='251' font-family='Segoe UI,Arial,sans-serif' font-size='15' fill='#183f53'>A page created with PnP</text><rect x='627' y='303' width='338' height='206' rx='6' fill='#f4fbfd' stroke='#19b9d2'/><text xml:space='preserve' x='641' y='329' font-family='Segoe UI,Arial,sans-serif' font-size='14' fill='#00869b'>SECTION 1</text><text xml:space='preserve' x='641' y='371' font-family='Segoe UI,Arial,sans-serif' font-size='22' fill='#183f53'>Hello from code!</text><text xml:space='preserve' x='641' y='407' font-family='Segoe UI,Arial,sans-serif' font-size='15' fill='#183f53'>Text added by PowerShell</text><rect x='641' y='434' width='301' height='9' rx='4' fill='#cee8ed' stroke='none'/><rect x='641' y='455' width='250' height='9' rx='4' fill='#cee8ed' stroke='none'/><rect x='827' y='113' width='137' height='31' rx='10' fill='#ddf6e9' stroke='none'/><text xml:space='preserve' x='840' y='135' font-family='Segoe UI,Arial,sans-serif' font-size='16' fill='#14764c'>Draft ready</text><text xml:space='preserve' x='612' y='600' font-family='Segoe UI,Arial,sans-serif' font-size='21' fill='#00869b'>CODE -> UI</text><text xml:space='preserve' x='20' y='644' font-family='Segoe UI,Arial,sans-serif' font-size='13' fill='#638294'>ILLUSTRATIVE BUILD SEQUENCE / NOT A LIVE TENANT SESSION</text></svg>"), Switch(Coalesce(rpBuildManual, Min(4, 1 + RoundDown(rpBuildTimer.Value / 4000, 0))), 1, "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 660'><rect x='0' y='0' width='1000' height='660' rx='10' fill='#f5fcff' stroke='none'/><text xml:space='preserve' x='20' y='35' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='#183f53'>CODE</text><text xml:space='preserve' x='600' y='35' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='#183f53'>RESULT / PREVIEW</text><rect x='16' y='54' width='530' height='510' rx='10' fill='#15283d' stroke='none'/><rect x='16' y='54' width='530' height='40' rx='10' fill='#24435b' stroke='none'/><text xml:space='preserve' x='34' y='81' font-family='Segoe UI,Arial,sans-serif' font-size='18' fill='#ffffff'>Power Apps / YAML + Power Fx</text><rect x='27' y='102' width='508' height='56' rx='5' fill='#284958' stroke='none'/><text xml:space='preserve' x='36' y='124' font-family='Consolas,monospace' font-size='17' fill='#72eddf'>- DemoButton:</text><text xml:space='preserve' x='36' y='148' font-family='Consolas,monospace' font-size='17' fill='#72eddf'> Control: Classic/Button@2.2.0</text><text xml:space='preserve' x='31' y='600' font-family='Segoe UI,Arial,sans-serif' font-size='19' fill='#183f53'>STEP 1 / 4</text><rect x='563' y='265' width='27' height='6' rx='3' fill='#00b8ce' stroke='none'/><path d='M580 254L596 268L580 282' fill='none' stroke='#00b8ce' stroke-width='5'/><rect x='610' y='54' width='374' height='510' rx='12' fill='white' stroke='#c8e1e9'/><rect x='610' y='54' width='374' height='42' rx='10' fill='#74399b' stroke='none'/><text xml:space='preserve' x='626' y='82' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='white'>Power Apps</text><text xml:space='preserve' x='631' y='136' font-family='Segoe UI,Arial,sans-serif' font-size='22' fill='#183f53'>My introduction app</text><rect x='634' y='178' width='327' height='315' rx='10' fill='#f5fcff' stroke='#c8e1e9'/><text xml:space='preserve' x='651' y='211' font-family='Segoe UI,Arial,sans-serif' font-size='16' fill='#183f53'>Screen1</text><text xml:space='preserve' x='612' y='600' font-family='Segoe UI,Arial,sans-serif' font-size='21' fill='#00869b'>YAML -> UI -> ACTION</text><text xml:space='preserve' x='20' y='644' font-family='Segoe UI,Arial,sans-serif' font-size='13' fill='#638294'>ILLUSTRATIVE BUILD SEQUENCE / NOT A LIVE TENANT SESSION</text></svg>", 2, "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 660'><rect x='0' y='0' width='1000' height='660' rx='10' fill='#f5fcff' stroke='none'/><text xml:space='preserve' x='20' y='35' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='#183f53'>CODE</text><text xml:space='preserve' x='600' y='35' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='#183f53'>RESULT / PREVIEW</text><rect x='16' y='54' width='530' height='510' rx='10' fill='#15283d' stroke='none'/><rect x='16' y='54' width='530' height='40' rx='10' fill='#24435b' stroke='none'/><text xml:space='preserve' x='34' y='81' font-family='Segoe UI,Arial,sans-serif' font-size='18' fill='#ffffff'>Power Apps / YAML + Power Fx</text><text xml:space='preserve' x='36' y='124' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'>- DemoButton:</text><text xml:space='preserve' x='36' y='148' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> Control: Classic/Button@2.2.0</text><rect x='27' y='168' width='508' height='104' rx='5' fill='#284958' stroke='none'/><text xml:space='preserve' x='36' y='190' font-family='Consolas,monospace' font-size='17' fill='#72eddf'> Properties:</text><text xml:space='preserve' x='36' y='214' font-family='Consolas,monospace' font-size='17' fill='#72eddf'> Text: ="Show details"</text><text xml:space='preserve' x='36' y='238' font-family='Consolas,monospace' font-size='17' fill='#72eddf'> X: =40</text><text xml:space='preserve' x='36' y='262' font-family='Consolas,monospace' font-size='17' fill='#72eddf'> Y: =120</text><text xml:space='preserve' x='31' y='600' font-family='Segoe UI,Arial,sans-serif' font-size='19' fill='#183f53'>STEP 2 / 4</text><rect x='563' y='265' width='27' height='6' rx='3' fill='#00b8ce' stroke='none'/><path d='M580 254L596 268L580 282' fill='none' stroke='#00b8ce' stroke-width='5'/><rect x='610' y='54' width='374' height='510' rx='12' fill='white' stroke='#c8e1e9'/><rect x='610' y='54' width='374' height='42' rx='10' fill='#74399b' stroke='none'/><text xml:space='preserve' x='626' y='82' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='white'>Power Apps</text><text xml:space='preserve' x='631' y='136' font-family='Segoe UI,Arial,sans-serif' font-size='22' fill='#183f53'>My introduction app</text><rect x='634' y='178' width='327' height='315' rx='10' fill='#f5fcff' stroke='#c8e1e9'/><text xml:space='preserve' x='651' y='211' font-family='Segoe UI,Arial,sans-serif' font-size='16' fill='#183f53'>Screen1</text><rect x='651' y='243' width='235' height='52' rx='10' fill='#009fb7' stroke='none'/><text xml:space='preserve' x='674' y='276' font-family='Segoe UI,Arial,sans-serif' font-size='22' fill='white'>Show details</text><text xml:space='preserve' x='612' y='600' font-family='Segoe UI,Arial,sans-serif' font-size='21' fill='#00869b'>YAML -> UI -> ACTION</text><text xml:space='preserve' x='20' y='644' font-family='Segoe UI,Arial,sans-serif' font-size='13' fill='#638294'>ILLUSTRATIVE BUILD SEQUENCE / NOT A LIVE TENANT SESSION</text></svg>", 3, "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 660'><rect x='0' y='0' width='1000' height='660' rx='10' fill='#f5fcff' stroke='none'/><text xml:space='preserve' x='20' y='35' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='#183f53'>CODE</text><text xml:space='preserve' x='600' y='35' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='#183f53'>RESULT / PREVIEW</text><rect x='16' y='54' width='530' height='510' rx='10' fill='#15283d' stroke='none'/><rect x='16' y='54' width='530' height='40' rx='10' fill='#24435b' stroke='none'/><text xml:space='preserve' x='34' y='81' font-family='Segoe UI,Arial,sans-serif' font-size='18' fill='#ffffff'>Power Apps / YAML + Power Fx</text><text xml:space='preserve' x='36' y='124' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'>- DemoButton:</text><text xml:space='preserve' x='36' y='148' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> Control: Classic/Button@2.2.0</text><text xml:space='preserve' x='36' y='190' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> Properties:</text><text xml:space='preserve' x='36' y='214' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> Text: ="Show details"</text><text xml:space='preserve' x='36' y='238' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> X: =40</text><text xml:space='preserve' x='36' y='262' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> Y: =120</text><rect x='27' y='282' width='508' height='80' rx='5' fill='#284958' stroke='none'/><text xml:space='preserve' x='36' y='304' font-family='Consolas,monospace' font-size='17' fill='#72eddf'> OnSelect: =Set(show, true)</text><text xml:space='preserve' x='36' y='328' font-family='Consolas,monospace' font-size='17' fill='#72eddf'></text><text xml:space='preserve' x='36' y='352' font-family='Consolas,monospace' font-size='17' fill='#72eddf'># DetailLabel.Visible: =show</text><text xml:space='preserve' x='31' y='600' font-family='Segoe UI,Arial,sans-serif' font-size='19' fill='#183f53'>STEP 3 / 4</text><rect x='563' y='265' width='27' height='6' rx='3' fill='#00b8ce' stroke='none'/><path d='M580 254L596 268L580 282' fill='none' stroke='#00b8ce' stroke-width='5'/><rect x='610' y='54' width='374' height='510' rx='12' fill='white' stroke='#c8e1e9'/><rect x='610' y='54' width='374' height='42' rx='10' fill='#74399b' stroke='none'/><text xml:space='preserve' x='626' y='82' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='white'>Power Apps</text><text xml:space='preserve' x='631' y='136' font-family='Segoe UI,Arial,sans-serif' font-size='22' fill='#183f53'>My introduction app</text><rect x='634' y='178' width='327' height='315' rx='10' fill='#f5fcff' stroke='#c8e1e9'/><text xml:space='preserve' x='651' y='211' font-family='Segoe UI,Arial,sans-serif' font-size='16' fill='#183f53'>Screen1</text><rect x='651' y='243' width='235' height='52' rx='10' fill='#009fb7' stroke='none'/><text xml:space='preserve' x='674' y='276' font-family='Segoe UI,Arial,sans-serif' font-size='22' fill='white'>Show details</text><text xml:space='preserve' x='651' y='334' font-family='Segoe UI,Arial,sans-serif' font-size='16' fill='#7d3e9e'>OnSelect -> show = true</text><text xml:space='preserve' x='612' y='600' font-family='Segoe UI,Arial,sans-serif' font-size='21' fill='#00869b'>YAML -> UI -> ACTION</text><text xml:space='preserve' x='20' y='644' font-family='Segoe UI,Arial,sans-serif' font-size='13' fill='#638294'>ILLUSTRATIVE BUILD SEQUENCE / NOT A LIVE TENANT SESSION</text></svg>", 4, "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1000 660'><rect x='0' y='0' width='1000' height='660' rx='10' fill='#f5fcff' stroke='none'/><text xml:space='preserve' x='20' y='35' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='#183f53'>CODE</text><text xml:space='preserve' x='600' y='35' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='#183f53'>RESULT / PREVIEW</text><rect x='16' y='54' width='530' height='510' rx='10' fill='#15283d' stroke='none'/><rect x='16' y='54' width='530' height='40' rx='10' fill='#24435b' stroke='none'/><text xml:space='preserve' x='34' y='81' font-family='Segoe UI,Arial,sans-serif' font-size='18' fill='#ffffff'>Power Apps / YAML + Power Fx</text><text xml:space='preserve' x='36' y='124' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'>- DemoButton:</text><text xml:space='preserve' x='36' y='148' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> Control: Classic/Button@2.2.0</text><text xml:space='preserve' x='36' y='190' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> Properties:</text><text xml:space='preserve' x='36' y='214' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> Text: ="Show details"</text><text xml:space='preserve' x='36' y='238' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> X: =40</text><text xml:space='preserve' x='36' y='262' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> Y: =120</text><text xml:space='preserve' x='36' y='304' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'> OnSelect: =Set(show, true)</text><text xml:space='preserve' x='36' y='328' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'></text><text xml:space='preserve' x='36' y='352' font-family='Consolas,monospace' font-size='17' fill='#b9cdda'># DetailLabel.Visible: =show</text><rect x='27' y='372' width='508' height='56' rx='5' fill='#284958' stroke='none'/><text xml:space='preserve' x='36' y='394' font-family='Consolas,monospace' font-size='17' fill='#72eddf'># Preview: click the button</text><text xml:space='preserve' x='36' y='418' font-family='Consolas,monospace' font-size='17' fill='#72eddf'># show = true -> details appear</text><text xml:space='preserve' x='31' y='600' font-family='Segoe UI,Arial,sans-serif' font-size='19' fill='#183f53'>STEP 4 / 4</text><rect x='563' y='265' width='27' height='6' rx='3' fill='#00b8ce' stroke='none'/><path d='M580 254L596 268L580 282' fill='none' stroke='#00b8ce' stroke-width='5'/><rect x='610' y='54' width='374' height='510' rx='12' fill='white' stroke='#c8e1e9'/><rect x='610' y='54' width='374' height='42' rx='10' fill='#74399b' stroke='none'/><text xml:space='preserve' x='626' y='82' font-family='Segoe UI,Arial,sans-serif' font-size='20' fill='white'>Power Apps</text><text xml:space='preserve' x='631' y='136' font-family='Segoe UI,Arial,sans-serif' font-size='22' fill='#183f53'>My introduction app</text><rect x='634' y='178' width='327' height='315' rx='10' fill='#f5fcff' stroke='#c8e1e9'/><text xml:space='preserve' x='651' y='211' font-family='Segoe UI,Arial,sans-serif' font-size='16' fill='#183f53'>Screen1</text><rect x='651' y='243' width='235' height='52' rx='10' fill='#009fb7' stroke='none'/><text xml:space='preserve' x='674' y='276' font-family='Segoe UI,Arial,sans-serif' font-size='22' fill='white'>Show details</text><text xml:space='preserve' x='651' y='334' font-family='Segoe UI,Arial,sans-serif' font-size='16' fill='#7d3e9e'>OnSelect -> show = true</text><path d='M869 272L883 308L890 292L907 289Z' fill='#1c3e52' stroke='white' stroke-width='2'/><rect x='651' y='355' width='288' height='102' rx='10' fill='#daf7f4' stroke='none'/><text xml:space='preserve' x='669' y='390' font-family='Segoe UI,Arial,sans-serif' font-size='22' fill='#183f53'>Hello from code!</text><text xml:space='preserve' x='669' y='424' font-family='Segoe UI,Arial,sans-serif' font-size='16' fill='#183f53'>Details are now visible.</text><text xml:space='preserve' x='612' y='600' font-family='Segoe UI,Arial,sans-serif' font-size='21' fill='#00869b'>YAML -> UI -> ACTION</text><text xml:space='preserve' x='20' y='644' font-family='Segoe UI,Arial,sans-serif' font-size='13' fill='#638294'>ILLUSTRATIVE BUILD SEQUENCE / NOT A LIVE TENANT SESSION</text></svg>"))), With({t: 2 * Pi() * rpAmbient.Value / rpAmbient.Duration}, "data:image/svg+xml;utf8," & EncodeUrl(Switch(Coalesce(rpSlide, 1),
1,
"<svg xmlns=""http://www.w3.org/2000/svg"" width=""640"" height=""480"" viewBox=""0 0 640 480""><rect width=""640"" height=""480"" rx=""32"" fill=""#f5fcff""/><circle cx=""349"" cy=""245"" r=""189"" fill=""#18b9d4"" opacity=""0.10""/><path d=""M78 391Q316 316 578 400"" fill=""none"" stroke=""#ccebf3"" stroke-width=""2""/>" &
"<g transform=""translate(335 " &
Text(251 + 11 * Sin(t * 2), "0.00", "en-US") &
") scale(1.15)"">" &
"<ellipse cx=""0"" cy=""140"" rx=""81"" ry=""14"" fill=""#7ecfe0"" opacity=""0.25""/><path d=""M-42 99l-10 28M42 99l10 28"" stroke=""#224459"" stroke-width=""16"" stroke-linecap=""round""/><path d=""M-68 129h31M36 129h31"" stroke=""#10b6ce"" stroke-width=""15"" stroke-linecap=""round""/><rect x=""-69"" y=""17"" width=""138"" height=""93"" rx=""34"" fill=""white"" stroke=""#25455b"" stroke-width=""5""/><rect x=""-46"" y=""45"" width=""92"" height=""42"" rx=""17"" fill=""#dcf8fe""/><text xml:space='preserve' x=""0"" y=""74"" text-anchor=""middle"" font-family=""Segoe UI,sans-serif"" font-size=""23"" font-weight=""700"" fill=""#018aab"">{ / }</text>" &
"<g transform=""rotate(" &
Text(-20 + 16 * Sin(t * 3), "0.00", "en-US") &
" -66 38)""><path d=""M-66 38l-45 -29"" stroke=""#25455b"" stroke-width=""15"" stroke-linecap=""round""/><circle cx=""-113"" cy=""7"" r=""17"" fill=""#ffe07a"" stroke=""#25455b"" stroke-width=""4""/></g>" &
"<g transform=""rotate(" &
Text(25 + 21 * Sin(t * 3 + 1), "0.00", "en-US") &
" 66 37)""><path d=""M66 37l45 -32"" stroke=""#25455b"" stroke-width=""15"" stroke-linecap=""round""/><circle cx=""114"" cy=""3"" r=""17"" fill=""#ffe07a"" stroke=""#25455b"" stroke-width=""4""/></g>" &
"<path d=""M0 -74V-106"" stroke=""#25455b"" stroke-width=""5""/><circle cx=""0"" cy=""-112"" r=""11"" fill=""#ff7c94"" stroke=""#25455b"" stroke-width=""4""/><rect x=""-86"" y=""-74"" width=""172"" height=""112"" rx=""41"" fill=""white"" stroke=""#25455b"" stroke-width=""5""/><rect x=""-67"" y=""-54"" width=""134"" height=""67"" rx=""25"" fill=""#d5f6ff""/><ellipse cx=""-29"" cy=""-24"" rx=""8"" ry=""" &
Text(7 + 6 * Abs(Sin(t * 2)), "0.00", "en-US") &
""" fill=""#234357""/><ellipse cx=""29"" cy=""-24"" rx=""8"" ry=""" &
Text(7 + 6 * Abs(Sin(t * 2)), "0.00", "en-US") &
""" fill=""#234357""/><path d=""M-12 -8Q0 3 12 -8"" fill=""none"" stroke=""#234357"" stroke-width=""4"" stroke-linecap=""round""/><ellipse cx=""-47"" cy=""-6"" rx=""10"" ry=""5"" fill=""#ffafbf""/><ellipse cx=""47"" cy=""-6"" rx=""10"" ry=""5"" fill=""#ffafbf""/></g>" &
"<g transform=""translate(0 " &
Text(8*Sin(t*2+50), "0.00", "en-US") &
")"">" &
"<rect x=""55"" y=""101"" width=""142"" height=""62"" rx=""16"" fill=""#102d45"" opacity=""0.08""/><rect x=""50"" y=""94"" width=""142"" height=""62"" rx=""16"" fill=""white"" stroke=""#1cb3c9"" stroke-width=""3""/><text xml:space='preserve' x=""66"" y=""124"" font-family=""Segoe UI,sans-serif"" fill=""#203c52"" font-size=""17"" font-weight=""700"">PnP</text>" &
"</g>" &
"<g transform=""translate(0 " &
Text(8*Sin(t*2+450), "0.00", "en-US") &
")"">" &
"<rect x=""455"" y=""103"" width=""142"" height=""62"" rx=""16"" fill=""#102d45"" opacity=""0.08""/><rect x=""450"" y=""96"" width=""142"" height=""62"" rx=""16"" fill=""white"" stroke=""#8a73e8"" stroke-width=""3""/><text xml:space='preserve' x=""466"" y=""126"" font-family=""Segoe UI,sans-serif"" fill=""#203c52"" font-size=""17"" font-weight=""700"">YAML</text>" &
"</g>" &
"<g transform=""translate(0 " &
Text(8*Sin(t*2+48), "0.00", "en-US") &
")"">" &
"<rect x=""53"" y=""337"" width=""142"" height=""62"" rx=""16"" fill=""#102d45"" opacity=""0.08""/><rect x=""48"" y=""330"" width=""142"" height=""62"" rx=""16"" fill=""white"" stroke=""#ff9d78"" stroke-width=""3""/><text xml:space='preserve' x=""64"" y=""360"" font-family=""Segoe UI,sans-serif"" fill=""#203c52"" font-size=""17"" font-weight=""700"">Power Fx</text>" &
"</g>" &
"<g transform=""translate(" &
Text(93+8*Sin(t*2+0), "0.00", "en-US") &
" " &
Text(239+12*Cos(t*2+0), "0.00", "en-US") &
") rotate(" &
Text(t*28+0, "0.00", "en-US") &
")""><path d=""M0 -13L4 -4 13 0 4 4 0 13 -4 4 -13 0 -4 -4Z"" fill=""#ffd45a""/></g>" &
"<g transform=""translate(" &
Text(517+8*Sin(t*2+1), "0.00", "en-US") &
" " &
Text(264+12*Cos(t*2+1), "0.00", "en-US") &
") rotate(" &
Text(t*28+30, "0.00", "en-US") &
")""><path d=""M0 -13L4 -4 13 0 4 4 0 13 -4 4 -13 0 -4 -4Z"" fill=""#10bdd3""/></g>" &
"<g transform=""translate(" &
Text(411+8*Sin(t*2+2), "0.00", "en-US") &
" " &
Text(41+12*Cos(t*2+2), "0.00", "en-US") &
") rotate(" &
Text(t*28+60, "0.00", "en-US") &
")""><path d=""M0 -13L4 -4 13 0 4 4 0 13 -4 4 -13 0 -4 -4Z"" fill=""#ff7f98""/></g>" &
"<g transform=""translate(" &
Text(212+8*Sin(t*2+3), "0.00", "en-US") &
" " &
Text(394+12*Cos(t*2+3), "0.00", "en-US") &
") rotate(" &
Text(t*28+90, "0.00", "en-US") &
")""><path d=""M0 -13L4 -4 13 0 4 4 0 13 -4 4 -13 0 -4 -4Z"" fill=""#9480ef""/></g>" &
"</svg>",
2,
"<svg xmlns=""http://www.w3.org/2000/svg"" width=""640"" height=""480"" viewBox=""0 0 640 480""><rect width=""640"" height=""480"" rx=""32"" fill=""#f5fcff""/><circle cx=""349"" cy=""245"" r=""189"" fill=""#21b7c9"" opacity=""0.10""/><path d=""M78 391Q316 316 578 400"" fill=""none"" stroke=""#ccebf3"" stroke-width=""2""/>" &
"<rect x=""49"" y=""102"" width=""355"" height=""250"" rx=""16"" fill=""#102d45"" opacity=""0.08""/><rect x=""44"" y=""95"" width=""355"" height=""250"" rx=""16"" fill=""white"" stroke=""#20b6ca"" stroke-width=""3""/><text xml:space='preserve' x=""60"" y=""125"" font-family=""Segoe UI,sans-serif"" fill=""#203c52"" font-size=""17"" font-weight=""700"">SITE / PAGE BUILDER</text>" &
"<g transform=""translate(0 " &
Text(12*Sin(t*2+0), "0.00", "en-US") &
")""><rect x=""66"" y=""146"" width=""305"" height=""52"" rx=""10"" fill=""#c8f2fa""/><path d=""M78 167h281"" stroke=""white"" stroke-width=""5""/></g>" &
"<g transform=""translate(0 " &
Text(12*Sin(t*2+1), "0.00", "en-US") &
")""><rect x=""66"" y=""213"" width=""92"" height=""106"" rx=""10"" fill=""#e6ddff""/><path d=""M78 234h68"" stroke=""white"" stroke-width=""5""/></g>" &
"<g transform=""translate(0 " &
Text(12*Sin(t*2+2), "0.00", "en-US") &
")""><rect x=""172"" y=""213"" width=""92"" height=""106"" rx=""10"" fill=""#ffecd0""/><path d=""M184 234h68"" stroke=""white"" stroke-width=""5""/></g>" &
"<g transform=""translate(0 " &
Text(12*Sin(t*2+3), "0.00", "en-US") &
")""><rect x=""278"" y=""213"" width=""92"" height=""106"" rx=""10"" fill=""#d4f5e8""/><path d=""M290 234h68"" stroke=""white"" stroke-width=""5""/></g>" &
"<g transform=""translate(474 " &
Text(269 + 11 * Sin(t * 2), "0.00", "en-US") &
") scale(0.75)"">" &
"<ellipse cx=""0"" cy=""140"" rx=""81"" ry=""14"" fill=""#7ecfe0"" opacity=""0.25""/><path d=""M-42 99l-10 28M42 99l10 28"" stroke=""#224459"" stroke-width=""16"" stroke-linecap=""round""/><path d=""M-68 129h31M36 129h31"" stroke=""#10b6ce"" stroke-width=""15"" stroke-linecap=""round""/><rect x=""-69"" y=""17"" width=""138"" height=""93"" rx=""34"" fill=""white"" stroke=""#25455b"" stroke-width=""5""/><rect x=""-46"" y=""45"" width=""92"" height=""42"" rx=""17"" fill=""#dcf8fe""/><text xml:space='preserve' x=""0"" y=""74"" text-anchor=""middle"" font-family=""Segoe UI,sans-serif"" font-size=""23"" font-weight=""700"" fill=""#018aab"">{ / }</text>" &
"<g transform=""rotate(" &
Text(-20 + 16 * Sin(t * 3), "0.00", "en-US") &
" -66 38)""><path d=""M-66 38l-45 -29"" stroke=""#25455b"" stroke-width=""15"" stroke-linecap=""round""/><circle cx=""-113"" cy=""7"" r=""17"" fill=""#ffe07a"" stroke=""#25455b"" stroke-width=""4""/></g>" &
"<g transform=""rotate(" &
Text(25 + 21 * Sin(t * 3 + 1), "0.00", "en-US") &
" 66 37)""><path d=""M66 37l45 -32"" stroke=""#25455b"" stroke-width=""15"" stroke-linecap=""round""/><circle cx=""114"" cy=""3"" r=""17"" fill=""#ffe07a"" stroke=""#25455b"" stroke-width=""4""/></g>" &
"<path d=""M0 -74V-106"" stroke=""#25455b"" stroke-width=""5""/><circle cx=""0"" cy=""-112"" r=""11"" fill=""#ff7c94"" stroke=""#25455b"" stroke-width=""4""/><rect x=""-86"" y=""-74"" width=""172"" height=""112"" rx=""41"" fill=""white"" stroke=""#25455b"" stroke-width=""5""/><rect x=""-67"" y=""-54"" width=""134"" height=""67"" rx=""25"" fill=""#d5f6ff""/><ellipse cx=""-29"" cy=""-24"" rx=""8"" ry=""" &
Text(7 + 6 * Abs(Sin(t * 2)), "0.00", "en-US") &
""" fill=""#234357""/><ellipse cx=""29"" cy=""-24"" rx=""8"" ry=""" &
Text(7 + 6 * Abs(Sin(t * 2)), "0.00", "en-US") &
""" fill=""#234357""/><path d=""M-12 -8Q0 3 12 -8"" fill=""none"" stroke=""#234357"" stroke-width=""4"" stroke-linecap=""round""/><ellipse cx=""-47"" cy=""-6"" rx=""10"" ry=""5"" fill=""#ffafbf""/><ellipse cx=""47"" cy=""-6"" rx=""10"" ry=""5"" fill=""#ffafbf""/></g>" &
"<g transform=""translate(" &
Text(428+8*Sin(t*2+1), "0.00", "en-US") &
" " &
Text(91+12*Cos(t*2+1), "0.00", "en-US") &
") rotate(" &
Text(t*28+30, "0.00", "en-US") &
")""><path d=""M0 -13L4 -4 13 0 4 4 0 13 -4 4 -13 0 -4 -4Z"" fill=""#ffce51""/></g>" &
"</svg>",
3,
"<svg xmlns=""http://www.w3.org/2000/svg"" width=""640"" height=""480"" viewBox=""0 0 640 480""><rect width=""640"" height=""480"" rx=""32"" fill=""#f5fcff""/><circle cx=""349"" cy=""245"" r=""189"" fill=""#9177e3"" opacity=""0.10""/><path d=""M78 391Q316 316 578 400"" fill=""none"" stroke=""#ccebf3"" stroke-width=""2""/>" &
"<rect x=""40"" y=""112"" width=""263"" height=""196"" rx=""16"" fill=""#102d45"" opacity=""0.08""/><rect x=""35"" y=""105"" width=""263"" height=""196"" rx=""16"" fill=""white"" stroke=""#9077e5"" stroke-width=""3""/><text xml:space='preserve' x=""51"" y=""135"" font-family=""Segoe UI,sans-serif"" fill=""#203c52"" font-size=""17"" font-weight=""700"">YAML / SOURCE</text>" &
"<rect x=""64"" y=""162"" width=""190"" height=""8"" rx=""4"" fill=""#9277e5""/>" &
"<rect x=""64"" y=""190"" width=""145"" height=""8"" rx=""4"" fill=""#2eb5cc""/>" &
"<rect x=""64"" y=""218"" width=""169"" height=""8"" rx=""4"" fill=""#2eb5cc""/>" &
"<rect x=""64"" y=""246"" width=""115"" height=""8"" rx=""4"" fill=""#fbab75""/>" &
"<path d=""M300 218H370"" fill=""none"" stroke=""#ab96ee"" stroke-width=""5""/><path d=""m356 205 15 13-15 13"" fill=""none"" stroke=""#ab96ee"" stroke-width=""5""/><circle cx=""" &
Text(305+55*Mod(t/Pi(),1), "0.00", "en-US") &
""" cy=""218"" r=""7"" fill=""#f5ba4b""/>" &
"<rect x=""398"" y=""112"" width=""207"" height=""196"" rx=""16"" fill=""#102d45"" opacity=""0.08""/><rect x=""393"" y=""105"" width=""207"" height=""196"" rx=""16"" fill=""white"" stroke=""#23b7ce"" stroke-width=""3""/><text xml:space='preserve' x=""409"" y=""135"" font-family=""Segoe UI,sans-serif"" fill=""#203c52"" font-size=""17"" font-weight=""700"">CANVAS / UI</text>" &
"<rect x=""416"" y=""158"" width=""160"" height=""27"" rx=""8"" fill=""#cef5fa""/>" &
"<rect x=""416"" y=""198"" width=""160"" height=""27"" rx=""8"" fill=""#ede4ff""/>" &
"<rect x=""416"" y=""238"" width=""160"" height=""27"" rx=""8"" fill=""#ffe5d0""/>" &
"<g transform=""translate(324 " &
Text(370 + 11 * Sin(t * 2), "0.00", "en-US") &
") scale(0.48)"">" &
"<ellipse cx=""0"" cy=""140"" rx=""81"" ry=""14"" fill=""#7ecfe0"" opacity=""0.25""/><path d=""M-42 99l-10 28M42 99l10 28"" stroke=""#224459"" stroke-width=""16"" stroke-linecap=""round""/><path d=""M-68 129h31M36 129h31"" stroke=""#10b6ce"" stroke-width=""15"" stroke-linecap=""round""/><rect x=""-69"" y=""17"" width=""138"" height=""93"" rx=""34"" fill=""white"" stroke=""#25455b"" stroke-width=""5""/><rect x=""-46"" y=""45"" width=""92"" height=""42"" rx=""17"" fill=""#dcf8fe""/><text xml:space='preserve' x=""0"" y=""74"" text-anchor=""middle"" font-family=""Segoe UI,sans-serif"" font-size=""23"" font-weight=""700"" fill=""#018aab"">{ / }</text>" &
"<g transform=""rotate(" &
Text(-20 + 16 * Sin(t * 3), "0.00", "en-US") &
" -66 38)""><path d=""M-66 38l-45 -29"" stroke=""#25455b"" stroke-width=""15"" stroke-linecap=""round""/><circle cx=""-113"" cy=""7"" r=""17"" fill=""#ffe07a"" stroke=""#25455b"" stroke-width=""4""/></g>" &
"<g transform=""rotate(" &
Text(25 + 21 * Sin(t * 3 + 1), "0.00", "en-US") &
" 66 37)""><path d=""M66 37l45 -32"" stroke=""#25455b"" stroke-width=""15"" stroke-linecap=""round""/><circle cx=""114"" cy=""3"" r=""17"" fill=""#ffe07a"" stroke=""#25455b"" stroke-width=""4""/></g>" &
"<path d=""M0 -74V-106"" stroke=""#25455b"" stroke-width=""5""/><circle cx=""0"" cy=""-112"" r=""11"" fill=""#ff7c94"" stroke=""#25455b"" stroke-width=""4""/><rect x=""-86"" y=""-74"" width=""172"" height=""112"" rx=""41"" fill=""white"" stroke=""#25455b"" stroke-width=""5""/><rect x=""-67"" y=""-54"" width=""134"" height=""67"" rx=""25"" fill=""#d5f6ff""/><ellipse cx=""-29"" cy=""-24"" rx=""8"" ry=""" &
Text(7 + 6 * Abs(Sin(t * 2)), "0.00", "en-US") &
""" fill=""#234357""/><ellipse cx=""29"" cy=""-24"" rx=""8"" ry=""" &
Text(7 + 6 * Abs(Sin(t * 2)), "0.00", "en-US") &
""" fill=""#234357""/><path d=""M-12 -8Q0 3 12 -8"" fill=""none"" stroke=""#234357"" stroke-width=""4"" stroke-linecap=""round""/><ellipse cx=""-47"" cy=""-6"" rx=""10"" ry=""5"" fill=""#ffafbf""/><ellipse cx=""47"" cy=""-6"" rx=""10"" ry=""5"" fill=""#ffafbf""/></g>" &
"</svg>",
4,
"<svg xmlns=""http://www.w3.org/2000/svg"" width=""640"" height=""480"" viewBox=""0 0 640 480""><rect width=""640"" height=""480"" rx=""32"" fill=""#f5fcff""/><circle cx=""349"" cy=""245"" r=""189"" fill=""#ff9978"" opacity=""0.10""/><path d=""M78 391Q316 316 578 400"" fill=""none"" stroke=""#ccebf3"" stroke-width=""2""/>" &
"<rect x=""60"" y=""101"" width=""365"" height=""258"" rx=""16"" fill=""#102d45"" opacity=""0.08""/><rect x=""55"" y=""94"" width=""365"" height=""258"" rx=""16"" fill=""white"" stroke=""#ff9c7e"" stroke-width=""3""/><text xml:space='preserve' x=""71"" y=""124"" font-family=""Segoe UI,sans-serif"" fill=""#203c52"" font-size=""17"" font-weight=""700"">CLICK / SWITCH / OPEN</text>" &
"<rect x=""83"" y=""155"" width=""304"" height=""41"" rx=""12"" fill=""" &
If(Mod(RoundDown(t/Pi(),0),3)=0, "#18b5cf", "#e9f7fb") &
"""/><circle cx=""106"" cy=""175"" r=""7"" fill=""white""/><path d=""M129 175h139"" stroke=""white"" stroke-width=""6""/>" &
"<rect x=""83"" y=""210"" width=""304"" height=""41"" rx=""12"" fill=""" &
If(Mod(RoundDown(t/Pi(),0),3)=1, "#18b5cf", "#e9f7fb") &
"""/><circle cx=""106"" cy=""230"" r=""7"" fill=""white""/><path d=""M129 230h139"" stroke=""white"" stroke-width=""6""/>" &
"<rect x=""83"" y=""265"" width=""304"" height=""41"" rx=""12"" fill=""" &
If(Mod(RoundDown(t/Pi(),0),3)=2, "#18b5cf", "#e9f7fb") &
"""/><circle cx=""106"" cy=""285"" r=""7"" fill=""white""/><path d=""M129 285h139"" stroke=""white"" stroke-width=""6""/>" &
"<g transform=""translate(478 " &
Text(282 + 11 * Sin(t * 2), "0.00", "en-US") &
") scale(0.75)"">" &
"<ellipse cx=""0"" cy=""140"" rx=""81"" ry=""14"" fill=""#7ecfe0"" opacity=""0.25""/><path d=""M-42 99l-10 28M42 99l10 28"" stroke=""#224459"" stroke-width=""16"" stroke-linecap=""round""/><path d=""M-68 129h31M36 129h31"" stroke=""#10b6ce"" stroke-width=""15"" stroke-linecap=""round""/><rect x=""-69"" y=""17"" width=""138"" height=""93"" rx=""34"" fill=""white"" stroke=""#25455b"" stroke-width=""5""/><rect x=""-46"" y=""45"" width=""92"" height=""42"" rx=""17"" fill=""#dcf8fe""/><text xml:space='preserve' x=""0"" y=""74"" text-anchor=""middle"" font-family=""Segoe UI,sans-serif"" font-size=""23"" font-weight=""700"" fill=""#018aab"">{ / }</text>" &
"<g transform=""rotate(" &
Text(-20 + 16 * Sin(t * 3), "0.00", "en-US") &
" -66 38)""><path d=""M-66 38l-45 -29"" stroke=""#25455b"" stroke-width=""15"" stroke-linecap=""round""/><circle cx=""-113"" cy=""7"" r=""17"" fill=""#ffe07a"" stroke=""#25455b"" stroke-width=""4""/></g>" &
"<g transform=""rotate(" &
Text(25 + 21 * Sin(t * 3 + 1), "0.00", "en-US") &
" 66 37)""><path d=""M66 37l45 -32"" stroke=""#25455b"" stroke-width=""15"" stroke-linecap=""round""/><circle cx=""114"" cy=""3"" r=""17"" fill=""#ffe07a"" stroke=""#25455b"" stroke-width=""4""/></g>" &
"<path d=""M0 -74V-106"" stroke=""#25455b"" stroke-width=""5""/><circle cx=""0"" cy=""-112"" r=""11"" fill=""#ff7c94"" stroke=""#25455b"" stroke-width=""4""/><rect x=""-86"" y=""-74"" width=""172"" height=""112"" rx=""41"" fill=""white"" stroke=""#25455b"" stroke-width=""5""/><rect x=""-67"" y=""-54"" width=""134"" height=""67"" rx=""25"" fill=""#d5f6ff""/><ellipse cx=""-29"" cy=""-24"" rx=""8"" ry=""" &
Text(7 + 6 * Abs(Sin(t * 2)), "0.00", "en-US") &
""" fill=""#234357""/><ellipse cx=""29"" cy=""-24"" rx=""8"" ry=""" &
Text(7 + 6 * Abs(Sin(t * 2)), "0.00", "en-US") &
""" fill=""#234357""/><path d=""M-12 -8Q0 3 12 -8"" fill=""none"" stroke=""#234357"" stroke-width=""4"" stroke-linecap=""round""/><ellipse cx=""-47"" cy=""-6"" rx=""10"" ry=""5"" fill=""#ffafbf""/><ellipse cx=""47"" cy=""-6"" rx=""10"" ry=""5"" fill=""#ffafbf""/></g>" &
"<g transform=""translate(" &
Text(475+8*Sin(t*2+2), "0.00", "en-US") &
" " &
Text(99+12*Cos(t*2+2), "0.00", "en-US") &
") rotate(" &
Text(t*28+60, "0.00", "en-US") &
")""><path d=""M0 -13L4 -4 13 0 4 4 0 13 -4 4 -13 0 -4 -4Z"" fill=""#ffc946""/></g>" &
"</svg>",
5,
"<svg xmlns=""http://www.w3.org/2000/svg"" width=""640"" height=""480"" viewBox=""0 0 640 480""><rect width=""640"" height=""480"" rx=""32"" fill=""#f5fcff""/><circle cx=""349"" cy=""245"" r=""189"" fill=""#eab641"" opacity=""0.10""/><path d=""M78 391Q316 316 578 400"" fill=""none"" stroke=""#ccebf3"" stroke-width=""2""/>" &
"<rect x=""57"" y=""110"" width=""367"" height=""250"" rx=""16"" fill=""#102d45"" opacity=""0.08""/><rect x=""52"" y=""103"" width=""367"" height=""250"" rx=""16"" fill=""white"" stroke=""#e6b241"" stroke-width=""3""/><text xml:space='preserve' x=""68"" y=""133"" font-family=""Segoe UI,sans-serif"" fill=""#203c52"" font-size=""17"" font-weight=""700"">READABLE / MOVABLE</text>" &
"<rect x=""77"" y=""165"" width=""275"" height=""9"" rx=""4"" fill=""#d6eaf0""/>" &
"<rect x=""77"" y=""194"" width=""254"" height=""9"" rx=""4"" fill=""#d6eaf0""/>" &
"<rect x=""77"" y=""223"" width=""210"" height=""9"" rx=""4"" fill=""#d6eaf0""/>" &
"<rect x=""77"" y=""252"" width=""269"" height=""9"" rx=""4"" fill=""#d6eaf0""/>" &
"<rect x=""77"" y=""281"" width=""189"" height=""9"" rx=""4"" fill=""#d6eaf0""/>" &
"<g transform=""translate(" &
Text(60+260*(0.5+0.5*Sin(t)), "0.00", "en-US") &
" 125)""><rect width=""78"" height=""68"" rx=""14"" fill=""#dcf8fd"" stroke=""#13b8cf"" stroke-width=""3""/><path d=""M39 12l22 10v16c0 12-13 20-22 25-9-5-22-13-22-25V22z"" fill=""white"" stroke=""#0098b5"" stroke-width=""2""/></g>" &
"<g transform=""translate(490 " &
Text(290 + 11 * Sin(t * 2), "0.00", "en-US") &
") scale(0.7)"">" &
"<ellipse cx=""0"" cy=""140"" rx=""81"" ry=""14"" fill=""#7ecfe0"" opacity=""0.25""/><path d=""M-42 99l-10 28M42 99l10 28"" stroke=""#224459"" stroke-width=""16"" stroke-linecap=""round""/><path d=""M-68 129h31M36 129h31"" stroke=""#10b6ce"" stroke-width=""15"" stroke-linecap=""round""/><rect x=""-69"" y=""17"" width=""138"" height=""93"" rx=""34"" fill=""white"" stroke=""#25455b"" stroke-width=""5""/><rect x=""-46"" y=""45"" width=""92"" height=""42"" rx=""17"" fill=""#dcf8fe""/><text xml:space='preserve' x=""0"" y=""74"" text-anchor=""middle"" font-family=""Segoe UI,sans-serif"" font-size=""23"" font-weight=""700"" fill=""#018aab"">{ / }</text>" &
"<g transform=""rotate(" &
Text(-20 + 16 * Sin(t * 3), "0.00", "en-US") &
" -66 38)""><path d=""M-66 38l-45 -29"" stroke=""#25455b"" stroke-width=""15"" stroke-linecap=""round""/><circle cx=""-113"" cy=""7"" r=""17"" fill=""#ffe07a"" stroke=""#25455b"" stroke-width=""4""/></g>" &
"<g transform=""rotate(" &
Text(25 + 21 * Sin(t * 3 + 1), "0.00", "en-US") &
" 66 37)""><path d=""M66 37l45 -32"" stroke=""#25455b"" stroke-width=""15"" stroke-linecap=""round""/><circle cx=""114"" cy=""3"" r=""17"" fill=""#ffe07a"" stroke=""#25455b"" stroke-width=""4""/></g>" &
"<path d=""M0 -74V-106"" stroke=""#25455b"" stroke-width=""5""/><circle cx=""0"" cy=""-112"" r=""11"" fill=""#ff7c94"" stroke=""#25455b"" stroke-width=""4""/><rect x=""-86"" y=""-74"" width=""172"" height=""112"" rx=""41"" fill=""white"" stroke=""#25455b"" stroke-width=""5""/><rect x=""-67"" y=""-54"" width=""134"" height=""67"" rx=""25"" fill=""#d5f6ff""/><ellipse cx=""-29"" cy=""-24"" rx=""8"" ry=""" &
Text(7 + 6 * Abs(Sin(t * 2)), "0.00", "en-US") &
""" fill=""#234357""/><ellipse cx=""29"" cy=""-24"" rx=""8"" ry=""" &
Text(7 + 6 * Abs(Sin(t * 2)), "0.00", "en-US") &
""" fill=""#234357""/><path d=""M-12 -8Q0 3 12 -8"" fill=""none"" stroke=""#234357"" stroke-width=""4"" stroke-linecap=""round""/><ellipse cx=""-47"" cy=""-6"" rx=""10"" ry=""5"" fill=""#ffafbf""/><ellipse cx=""47"" cy=""-6"" rx=""10"" ry=""5"" fill=""#ffafbf""/></g>" &
"</svg>",
6,
"<svg xmlns=""http://www.w3.org/2000/svg"" width=""640"" height=""480"" viewBox=""0 0 640 480""><rect width=""640"" height=""480"" rx=""32"" fill=""#f5fcff""/><circle cx=""349"" cy=""245"" r=""189"" fill=""#25b6a5"" opacity=""0.10""/><path d=""M78 391Q316 316 578 400"" fill=""none"" stroke=""#ccebf3"" stroke-width=""2""/>" &
"<g transform=""translate(325 " &
Text(252 + 11 * Sin(t * 2), "0.00", "en-US") &
") scale(0.95)"">" &
"<ellipse cx=""0"" cy=""140"" rx=""81"" ry=""14"" fill=""#7ecfe0"" opacity=""0.25""/><path d=""M-42 99l-10 28M42 99l10 28"" stroke=""#224459"" stroke-width=""16"" stroke-linecap=""round""/><path d=""M-68 129h31M36 129h31"" stroke=""#10b6ce"" stroke-width=""15"" stroke-linecap=""round""/><rect x=""-69"" y=""17"" width=""138"" height=""93"" rx=""34"" fill=""white"" stroke=""#25455b"" stroke-width=""5""/><rect x=""-46"" y=""45"" width=""92"" height=""42"" rx=""17"" fill=""#dcf8fe""/><text xml:space='preserve' x=""0"" y=""74"" text-anchor=""middle"" font-family=""Segoe UI,sans-serif"" font-size=""23"" font-weight=""700"" fill=""#018aab"">{ / }</text>" &
"<g transform=""rotate(" &
Text(-20 + 16 * Sin(t * 3), "0.00", "en-US") &
" -66 38)""><path d=""M-66 38l-45 -29"" stroke=""#25455b"" stroke-width=""15"" stroke-linecap=""round""/><circle cx=""-113"" cy=""7"" r=""17"" fill=""#ffe07a"" stroke=""#25455b"" stroke-width=""4""/></g>" &
"<g transform=""rotate(" &
Text(25 + 21 * Sin(t * 3 + 1), "0.00", "en-US") &
" 66 37)""><path d=""M66 37l45 -32"" stroke=""#25455b"" stroke-width=""15"" stroke-linecap=""round""/><circle cx=""114"" cy=""3"" r=""17"" fill=""#ffe07a"" stroke=""#25455b"" stroke-width=""4""/></g>" &
"<path d=""M0 -74V-106"" stroke=""#25455b"" stroke-width=""5""/><circle cx=""0"" cy=""-112"" r=""11"" fill=""#ff7c94"" stroke=""#25455b"" stroke-width=""4""/><rect x=""-86"" y=""-74"" width=""172"" height=""112"" rx=""41"" fill=""white"" stroke=""#25455b"" stroke-width=""5""/><rect x=""-67"" y=""-54"" width=""134"" height=""67"" rx=""25"" fill=""#d5f6ff""/><ellipse cx=""-29"" cy=""-24"" rx=""8"" ry=""" &
Text(7 + 6 * Abs(Sin(t * 2)), "0.00", "en-US") &
""" fill=""#234357""/><ellipse cx=""29"" cy=""-24"" rx=""8"" ry=""" &
Text(7 + 6 * Abs(Sin(t * 2)), "0.00", "en-US") &
""" fill=""#234357""/><path d=""M-12 -8Q0 3 12 -8"" fill=""none"" stroke=""#234357"" stroke-width=""4"" stroke-linecap=""round""/><ellipse cx=""-47"" cy=""-6"" rx=""10"" ry=""5"" fill=""#ffafbf""/><ellipse cx=""47"" cy=""-6"" rx=""10"" ry=""5"" fill=""#ffafbf""/></g>" &
"<rect x=""39"" y=""92"" width=""170"" height=""57"" rx=""16"" fill=""#102d45"" opacity=""0.08""/><rect x=""34"" y=""85"" width=""170"" height=""57"" rx=""16"" fill=""white"" stroke=""#1bb3ca"" stroke-width=""3""/><text xml:space='preserve' x=""50"" y=""115"" font-family=""Segoe UI,sans-serif"" fill=""#203c52"" font-size=""17"" font-weight=""700"">KNOWLEDGE</text>" &
"<rect x=""444"" y=""105"" width=""170"" height=""57"" rx=""16"" fill=""#102d45"" opacity=""0.08""/><rect x=""439"" y=""98"" width=""170"" height=""57"" rx=""16"" fill=""white"" stroke=""#9278e6"" stroke-width=""3""/><text xml:space='preserve' x=""455"" y=""128"" font-family=""Segoe UI,sans-serif"" fill=""#203c52"" font-size=""17"" font-weight=""700"">ONBOARDING</text>" &
"<rect x=""406"" y=""355"" width=""170"" height=""57"" rx=""16"" fill=""#102d45"" opacity=""0.08""/><rect x=""401"" y=""348"" width=""170"" height=""57"" rx=""16"" fill=""white"" stroke=""#f5ad65"" stroke-width=""3""/><text xml:space='preserve' x=""417"" y=""378"" font-family=""Segoe UI,sans-serif"" fill=""#203c52"" font-size=""17"" font-weight=""700"">PORTAL</text>" &
"<g transform=""translate(" &
Text(75+8*Sin(t*2+0), "0.00", "en-US") &
" " &
Text(290+12*Cos(t*2+0), "0.00", "en-US") &
") rotate(" &
Text(t*28+0, "0.00", "en-US") &
")""><path d=""M0 -13L4 -4 13 0 4 4 0 13 -4 4 -13 0 -4 -4Z"" fill=""#ffc844""/></g>" &
"<g transform=""translate(" &
Text(525+8*Sin(t*2+1), "0.00", "en-US") &
" " &
Text(271+12*Cos(t*2+1), "0.00", "en-US") &
") rotate(" &
Text(t*28+30, "0.00", "en-US") &
")""><path d=""M0 -13L4 -4 13 0 4 4 0 13 -4 4 -13 0 -4 -4Z"" fill=""#25b9d2""/></g>" &
"<g transform=""translate(" &
Text(339+8*Sin(t*2+2), "0.00", "en-US") &
" " &
Text(49+12*Cos(t*2+2), "0.00", "en-US") &
") rotate(" &
Text(t*28+60, "0.00", "en-US") &
")""><path d=""M0 -13L4 -4 13 0 4 4 0 13 -4 4 -13 0 -4 -4Z"" fill=""#fa87a4""/></g>" &
"<g transform=""translate(" &
Text(189+8*Sin(t*2+3), "0.00", "en-US") &
" " &
Text(392+12*Cos(t*2+3), "0.00", "en-US") &
") rotate(" &
Text(t*28+90, "0.00", "en-US") &
")""><path d=""M0 -13L4 -4 13 0 4 4 0 13 -4 4 -13 0 -4 -4Z"" fill=""#9b80ed""/></g>" &
"</svg>"))))
AccessibleLabel: ="コードによる構築を紹介する、動くロボットと図のイラスト"
ImagePosition: =ImagePosition.Fit
X: =Parent.Width * 0.51 + 40 * Power(1 - (If(Coalesce(rpPaused, false), 1, Min(1, rpReveal.Value / rpReveal.Duration))), 3)
Y: =104
Width: =Parent.Width * 0.46 - 20
Height: =Parent.Height - 410
- rpHint:
Control: Label@2.5.1
Properties:
Text: =Switch(Coalesce(rpSlide, 1), 1, "項目を押すと、小さなロボットも近くへ移動します！", 2, "下のボタンで拡大。4つの工程を順番に見せられます。", 3, "実際には、YAMLで画面を定義して、動きを設定しています。", 4, "下のボタンで拡大。コードと画面の対応を見られます。", 5, "下のボタンから、ロボットの席替えを試せます。", 6, "会社での展開や、最新版の細かな動作確認はこれから。")
X: =52
Y: =Parent.Height - 408
Width: =Parent.Width * 0.46 - 52
Height: =52
Size: =12
Color: =RGBA(82, 108, 126, 1)
Wrap: =true
FontWeight: =FontWeight.Normal
PaddingLeft: =0
PaddingRight: =0
- rpAction:
Control: Classic/Button@2.2.0
Properties:
Text: =Switch(Coalesce(rpSlide, 1), 1, "何をしたか見る →", 2, "CLI → ページ作成を再生", 3, "制作の裏側（小声）", 4, "YAML → アプリ作成を再生", 5, "ロボットの席替え", 6, "できたことを確認")
OnSelect: =Set(rpGuideFromX, rpGuideRobot.X); Set(rpGuideFromY, rpGuideRobot.Y); If(Coalesce(rpSlide, 1) = 1, Set(rpSlide, 2); Reset(rpReveal), Set(rpShowDemo, true); Set(rpDemoTab, 1); Set(rpFaqOpen, false); Set(rpDemoPlace, 1)); Set(rpGuideToX, Max(4, Min(rpReport.Width - 68, If(Coalesce(rpShowDemo, false), rpReport.Width - 86, Self.X + Self.Width + 8)))); Set(rpGuideToY, Max(4, Min(rpReport.Height - 68, If(Coalesce(rpShowDemo, false), 98, Self.Y - 12)))); Set(rpGuideMood, Coalesce(rpGuideMood, 0) + 1); Set(rpGuideRun, false); Reset(rpGuideTimer); Set(rpGuideRun, true); Set(rpBuildManual, Blank()); Reset(rpBuildTimer)
X: =52
Y: =Parent.Height - 344
Width: =220
Height: =42
Size: =11
Fill: =RGBA(0, 137, 164, 1)
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
- rpCard0:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
X: =48 + 0 * ((Parent.Width - 128) / 3 + 16)
Y: =Parent.Height - 260 + 24 * Power(1 - (If(Coalesce(rpPaused, false), 1, Min(1, Max(0, (rpReveal.Value - 0) / 520)))), 3)
Width: =(Parent.Width - 128) / 3
Height: =170
Fill: =RGBA(255, 255, 255, 1)
RadiusTopLeft: =16
RadiusTopRight: =16
RadiusBottomLeft: =16
RadiusBottomRight: =16
Children:
- rpCardStripe0:
Control: Rectangle@2.3.0
Properties:
Fill: =RGBA(22, 182, 207, 1)
X: =0
Y: =0
Width: =Parent.Width
Height: =5
- rpCardTitle0:
Control: Label@2.5.1
Properties:
Text: =Switch(Coalesce(rpSlide, 1), 1, "SharePoint", 2, "① コードを書く", 3, "画面を作る", 4, "① YAMLで配置", 5, "中央に登場", 6, "SharePoint")
X: =20
Y: =19
Width: =Parent.Width - 40
Height: =42
Size: =18
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
FontWeight: =FontWeight.Bold
PaddingLeft: =0
PaddingRight: =0
- rpCardBody0:
Control: Label@2.5.1
Properties:
Text: =Switch(Coalesce(rpSlide, 1), 1, "いつものサイトの色や配置を変えて、自分らしいページに。", 2, "PnP PowerShellで、ページ・セクション・本文を指定。", 3, "YAMLというコードで、文字やボタンの配置を指定。", 4, "文字やボタンをコードで指定し、Studioに貼り付ける。", 5, "最初は大きく登場。「こちらにご注目！」", 6, "ページを作成し、色や配置をカスタマイズできた。")
X: =20
Y: =66
Width: =Parent.Width - 40
Height: =90
Size: =13
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
FontWeight: =FontWeight.Normal
PaddingLeft: =0
PaddingRight: =0
- rpCard1:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
X: =48 + 1 * ((Parent.Width - 128) / 3 + 16)
Y: =Parent.Height - 260 + 24 * Power(1 - (If(Coalesce(rpPaused, false), 1, Min(1, Max(0, (rpReveal.Value - 130) / 520)))), 3)
Width: =(Parent.Width - 128) / 3
Height: =170
Fill: =RGBA(255, 255, 255, 1)
RadiusTopLeft: =16
RadiusTopRight: =16
RadiusBottomLeft: =16
RadiusBottomRight: =16
Children:
- rpCardStripe1:
Control: Rectangle@2.3.0
Properties:
Fill: =RGBA(147, 119, 229, 1)
X: =0
Y: =0
Width: =Parent.Width
Height: =5
- rpCardTitle1:
Control: Label@2.5.1
Properties:
Text: =Switch(Coalesce(rpSlide, 1), 1, "Power Apps", 2, "② CLIで実行", 3, "動きを付ける", 4, "② Power Fxで操作", 5, "横へ移動", 6, "Power Apps")
X: =20
Y: =19
Width: =Parent.Width - 40
Height: =42
Size: =18
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
FontWeight: =FontWeight.Bold
PaddingLeft: =0
PaddingRight: =0
- rpCardBody1:
Control: Label@2.5.1
Properties:
Text: =Switch(Coalesce(rpSlide, 1), 1, "ボタンで内容が変わり、イラストも動く紹介画面に。", 2, "接続先のSharePointへ、ページ作成の命令を送る。", 3, "Power Fxという数式で、ボタンの反応や表示を設定。", 4, "押したら説明を表示する、などの動きを数式で設定。", 5, "読むときは右側へ。「ちょっとそこ退いてね」", 6, "YAMLから画面を作り、CG風の表示を確認できた。")
X: =20
Y: =66
Width: =Parent.Width - 40
Height: =90
Size: =13
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
FontWeight: =FontWeight.Normal
PaddingLeft: =0
PaddingRight: =0
- rpCard2:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
X: =48 + 2 * ((Parent.Width - 128) / 3 + 16)
Y: =Parent.Height - 260 + 24 * Power(1 - (If(Coalesce(rpPaused, false), 1, Min(1, Max(0, (rpReveal.Value - 260) / 520)))), 3)
Width: =(Parent.Width - 128) / 3
Height: =170
Fill: =RGBA(255, 255, 255, 1)
RadiusTopLeft: =16
RadiusTopRight: =16
RadiusBottomLeft: =16
RadiusBottomRight: =16
Children:
- rpCardStripe2:
Control: Rectangle@2.3.0
Properties:
Fill: =RGBA(248, 166, 103, 1)
X: =0
Y: =0
Width: =Parent.Width
Height: =5
- rpCardTitle2:
Control: Label@2.5.1
Properties:
Text: =Switch(Coalesce(rpSlide, 1), 1, "制作の裏側", 2, "③ ページができる", 3, "そして微調整", 4, "③ アプリとして動く", 5, "必要なら隠す", 6, "次にやりたいこと")
X: =20
Y: =19
Width: =Parent.Width - 40
Height: =42
Size: =18
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
FontWeight: =FontWeight.Bold
PaddingLeft: =0
PaddingRight: =0
- rpCardBody2:
Control: Label@2.5.1
Properties:
Text: =Switch(Coalesce(rpSlide, 1), 1, "どうやって書いたか？ 気合と根性…！ 詳細は個別に。", 2, "作成したページをブラウザーで確認。構成をコードに残せる。", 3, "エラーを見て直す。この部分は、少し根性でした。", 4, "プレビューで操作を確認。この報告画面も同じ方法で作成。", 5, "「一旦お休み！」で非表示。本文を読みやすく。", 6, "社内の紹介ページや説明資料として、小さく試したい。")
X: =20
Y: =66
Width: =Parent.Width - 40
Height: =90
Size: =13
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
FontWeight: =FontWeight.Normal
PaddingLeft: =0
PaddingRight: =0
- rpPrev:
Control: Classic/Button@2.2.0
Properties:
Text: ="← 前へ"
OnSelect: =Set(rpGuideFromX, rpGuideRobot.X); Set(rpGuideFromY, rpGuideRobot.Y); Set(rpSlide, Switch(Coalesce(rpSlide, 1), 1, 1, 2, 1, 4, 2, 3, 4, 6, 3, 1)); Reset(rpReveal); Set(rpGuideToX, Max(4, Min(rpReport.Width - 68, Self.X + Self.Width / 2 - 32))); Set(rpGuideToY, Max(4, Min(rpReport.Height - 68, Self.Y - 65))); Set(rpGuideMood, Coalesce(rpGuideMood, 0) + 1); Set(rpGuideRun, false); Reset(rpGuideTimer); Set(rpGuideRun, true); Set(rpBuildManual, Blank()); Reset(rpBuildTimer)
X: =48
Y: =Parent.Height - 60
Width: =130
Height: =38
Size: =11
Fill: =RGBA(0, 137, 164, 1)
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
- rpNext:
Control: Classic/Button@2.2.0
Properties:
Text: =If(Coalesce(rpSlide, 1) = 6, "最初へ ↻", "次へ →")
OnSelect: =Set(rpGuideFromX, rpGuideRobot.X); Set(rpGuideFromY, rpGuideRobot.Y); Set(rpSlide, Switch(Coalesce(rpSlide, 1), 1, 2, 2, 4, 4, 3, 3, 6, 6, 1, 1)); Reset(rpReveal); Set(rpGuideToX, Max(4, Min(rpReport.Width - 68, Self.X + Self.Width / 2 - 32))); Set(rpGuideToY, Max(4, Min(rpReport.Height - 68, Self.Y - 65))); Set(rpGuideMood, Coalesce(rpGuideMood, 0) + 1); Set(rpGuideRun, false); Reset(rpGuideTimer); Set(rpGuideRun, true); Set(rpBuildManual, Blank()); Reset(rpBuildTimer)
X: =Parent.Width - 178
Y: =Parent.Height - 60
Width: =130
Height: =38
Size: =11
Fill: =RGBA(0, 137, 164, 1)
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
- rpJump1:
Control: Classic/Button@2.2.0
Properties:
Text: ="1"
OnSelect: =Set(rpGuideFromX, rpGuideRobot.X); Set(rpGuideFromY, rpGuideRobot.Y); Set(rpSlide, 1); Reset(rpReveal); Set(rpGuideToX, Max(4, Min(rpReport.Width - 68, Self.X + Self.Width / 2 - 32))); Set(rpGuideToY, Max(4, Min(rpReport.Height - 68, Self.Y - 65))); Set(rpGuideMood, Coalesce(rpGuideMood, 0) + 1); Set(rpGuideRun, false); Reset(rpGuideTimer); Set(rpGuideRun, true); Set(rpBuildManual, Blank()); Reset(rpBuildTimer)
X: =Parent.Width / 2 - 114 + 0
Y: =Parent.Height - 60
Width: =36
Height: =36
Size: =11
Fill: =If(Coalesce(rpSlide, 1) = 1, RGBA(0, 137, 164, 1), RGBA(224, 242, 249, 1))
Color: =If(Coalesce(rpSlide, 1) = 1, RGBA(255, 255, 255, 1), RGBA(55, 92, 112, 1))
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
- rpJump2:
Control: Classic/Button@2.2.0
Properties:
Text: ="2"
OnSelect: =Set(rpGuideFromX, rpGuideRobot.X); Set(rpGuideFromY, rpGuideRobot.Y); Set(rpSlide, 2); Reset(rpReveal); Set(rpGuideToX, Max(4, Min(rpReport.Width - 68, Self.X + Self.Width / 2 - 32))); Set(rpGuideToY, Max(4, Min(rpReport.Height - 68, Self.Y - 65))); Set(rpGuideMood, Coalesce(rpGuideMood, 0) + 1); Set(rpGuideRun, false); Reset(rpGuideTimer); Set(rpGuideRun, true); Set(rpBuildManual, Blank()); Reset(rpBuildTimer)
X: =Parent.Width / 2 - 114 + 48
Y: =Parent.Height - 60
Width: =36
Height: =36
Size: =11
Fill: =If(Coalesce(rpSlide, 1) = 2, RGBA(0, 137, 164, 1), RGBA(224, 242, 249, 1))
Color: =If(Coalesce(rpSlide, 1) = 2, RGBA(255, 255, 255, 1), RGBA(55, 92, 112, 1))
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
- rpJump3:
Control: Classic/Button@2.2.0
Properties:
Text: ="3"
OnSelect: =Set(rpGuideFromX, rpGuideRobot.X); Set(rpGuideFromY, rpGuideRobot.Y); Set(rpSlide, 4); Reset(rpReveal); Set(rpGuideToX, Max(4, Min(rpReport.Width - 68, Self.X + Self.Width / 2 - 32))); Set(rpGuideToY, Max(4, Min(rpReport.Height - 68, Self.Y - 65))); Set(rpGuideMood, Coalesce(rpGuideMood, 0) + 1); Set(rpGuideRun, false); Reset(rpGuideTimer); Set(rpGuideRun, true); Set(rpBuildManual, Blank()); Reset(rpBuildTimer)
X: =Parent.Width / 2 - 114 + 96
Y: =Parent.Height - 60
Width: =36
Height: =36
Size: =11
Fill: =If(Coalesce(rpSlide, 1) = 4, RGBA(0, 137, 164, 1), RGBA(224, 242, 249, 1))
Color: =If(Coalesce(rpSlide, 1) = 4, RGBA(255, 255, 255, 1), RGBA(55, 92, 112, 1))
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
- rpJump4:
Control: Classic/Button@2.2.0
Properties:
Text: ="4"
OnSelect: =Set(rpGuideFromX, rpGuideRobot.X); Set(rpGuideFromY, rpGuideRobot.Y); Set(rpSlide, 3); Reset(rpReveal); Set(rpGuideToX, Max(4, Min(rpReport.Width - 68, Self.X + Self.Width / 2 - 32))); Set(rpGuideToY, Max(4, Min(rpReport.Height - 68, Self.Y - 65))); Set(rpGuideMood, Coalesce(rpGuideMood, 0) + 1); Set(rpGuideRun, false); Reset(rpGuideTimer); Set(rpGuideRun, true); Set(rpBuildManual, Blank()); Reset(rpBuildTimer)
X: =Parent.Width / 2 - 114 + 144
Y: =Parent.Height - 60
Width: =36
Height: =36
Size: =11
Fill: =If(Coalesce(rpSlide, 1) = 3, RGBA(0, 137, 164, 1), RGBA(224, 242, 249, 1))
Color: =If(Coalesce(rpSlide, 1) = 3, RGBA(255, 255, 255, 1), RGBA(55, 92, 112, 1))
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
- rpJump5:
Control: Classic/Button@2.2.0
Properties:
Text: ="5"
OnSelect: =Set(rpGuideFromX, rpGuideRobot.X); Set(rpGuideFromY, rpGuideRobot.Y); Set(rpSlide, 6); Reset(rpReveal); Set(rpGuideToX, Max(4, Min(rpReport.Width - 68, Self.X + Self.Width / 2 - 32))); Set(rpGuideToY, Max(4, Min(rpReport.Height - 68, Self.Y - 65))); Set(rpGuideMood, Coalesce(rpGuideMood, 0) + 1); Set(rpGuideRun, false); Reset(rpGuideTimer); Set(rpGuideRun, true); Set(rpBuildManual, Blank()); Reset(rpBuildTimer)
X: =Parent.Width / 2 - 114 + 192
Y: =Parent.Height - 60
Width: =36
Height: =36
Size: =11
Fill: =If(Coalesce(rpSlide, 1) = 6, RGBA(0, 137, 164, 1), RGBA(224, 242, 249, 1))
Color: =If(Coalesce(rpSlide, 1) = 6, RGBA(255, 255, 255, 1), RGBA(55, 92, 112, 1))
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
- rpBuildCaption:
Control: Label@2.5.1
Properties:
Text: =If(rpSlide = 2, Switch(Coalesce(rpBuildManual, Min(4, 1 + RoundDown(rpBuildTimer.Value / 4000, 0))), 1, "① CLIでページ作成を指示", 2, "② ページにセクションを追加", 3, "③ コードから本文を配置", 4, "④ 下書きページが完成。ブラウザーで確認"), Switch(Coalesce(rpBuildManual, Min(4, 1 + RoundDown(rpBuildTimer.Value / 4000, 0))), 1, "① YAMLでボタンを定義", 2, "② Text・X・Yで見た目と位置を指定", 3, "③ OnSelectにPower Fxを書く", 4, "④ ボタンを押すと説明が表示される"))
X: =Parent.Width * 0.51
Y: =Parent.Height - 306
Width: =Parent.Width * 0.46
Height: =36
Size: =14
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
Visible: =rpSlide = 2 || rpSlide = 4
- rpDemoStage:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
X: =0
Y: =0
Width: =Parent.Width
Height: =Parent.Height
Fill: =RGBA(245, 252, 255, 1)
Visible: =Coalesce(rpShowDemo, false)
Children:
- rpDemoTitle:
Control: Label@2.5.1
Properties:
Text: =Switch(Coalesce(rpSlide, 1), 1, "INTRO", 2, "SharePoint：CLIの命令がページになる", 3, "制作の裏側（ここだけ小声）", 4, "Power Apps：コードが画面と動きになる", 5, "CGさん、席替えをお願いします", 6, "成果と宿題、両方あります")
X: =40
Y: =32
Width: =Parent.Width - 260
Height: =60
Size: =28
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
FontWeight: =FontWeight.Bold
PaddingLeft: =0
PaddingRight: =0
- rpDemoClose:
Control: Classic/Button@2.2.0
Properties:
Text: ="報告に戻る ×"
OnSelect: =Set(rpGuideFromX, rpGuideRobot.X); Set(rpGuideFromY, rpGuideRobot.Y); Set(rpShowDemo, false); Set(rpGuideToX, Max(4, Min(rpReport.Width - 68, Self.X + Self.Width + 8))); Set(rpGuideToY, Max(4, Min(rpReport.Height - 68, Self.Y - 12))); Set(rpGuideMood, Coalesce(rpGuideMood, 0) + 1); Set(rpGuideRun, false); Reset(rpGuideTimer); Set(rpGuideRun, true)
X: =Parent.Width - 200
Y: =40
Width: =160
Height: =38
Size: =11
Fill: =RGBA(0, 137, 164, 1)
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
- rpDemoText:
Control: Label@2.5.1
Properties:
Text: |-
=Switch(Coalesce(rpSlide, 1), 1, "", 2, "接続先サイトを指定
↓
ページを作成
↓
セクション・Webパーツ・画像を配置
↓
配色やタイトルを調整。お着替え完了！
見た目はポップでも、接続先と権限の確認はしっかり。
今回の検証条件：Windows PowerShell 5.1 / PnP.PowerShell 1.12.0", 3, "Q. コーディングは、どうしたんですか？
A. 気合と根性…！
（詳しくは個別にお話ししますね…）
……というのは、半分ジョークです。
画面の形はYAML、ボタンなどの操作はPower Fx。
貼って、確認して、エラーを読んで、直して。
少しずつ「作りたい画面」に近づけました。
今日はまず、「こんなことができた！」をご覧ください。", 4, "", 5, "", 6, "確認できたこと
・PnPによる検証ポータルの作成
・YAML貼り付け後のPower Apps画面表示
・白×シアンの画面、CG風コンテンツの表示
これから確認すること
・最新版の全画面・全操作
・閲覧者への共有と利用条件
・会社環境への本番展開
・作業時間や学習効果の測定
削減率などの数値は、まだ測定していません。")
X: =48
Y: =130
Width: =Parent.Width - 96
Height: =Parent.Height - 190
Size: =19
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
FontWeight: =FontWeight.Normal
PaddingLeft: =0
PaddingRight: =0
Visible: =(Coalesce(rpSlide, 1) = 2 || Coalesce(rpSlide, 1) = 3 || Coalesce(rpSlide, 1) = 6) && rpSlide <> 2 && rpSlide <> 4
- rpDemoTab1:
Control: Classic/Button@2.2.0
Properties:
Text: ="テーマ A"
OnSelect: =Set(rpGuideFromX, rpGuideRobot.X); Set(rpGuideFromY, rpGuideRobot.Y); Set(rpDemoTab, 1); Set(rpGuideToX, Max(4, Min(rpReport.Width - 68, Self.X + Self.Width + 8))); Set(rpGuideToY, Max(4, Min(rpReport.Height - 68, Self.Y - 12))); Set(rpGuideMood, Coalesce(rpGuideMood, 0) + 1); Set(rpGuideRun, false); Reset(rpGuideTimer); Set(rpGuideRun, true)
X: =48 + 0
Y: =134
Width: =168
Height: =38
Size: =11
Fill: =RGBA(0, 137, 164, 1)
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
Visible: =(rpSlide = 4) && rpSlide <> 2 && rpSlide <> 4
- rpDemoTab2:
Control: Classic/Button@2.2.0
Properties:
Text: ="テーマ B"
OnSelect: =Set(rpGuideFromX, rpGuideRobot.X); Set(rpGuideFromY, rpGuideRobot.Y); Set(rpDemoTab, 2); Set(rpGuideToX, Max(4, Min(rpReport.Width - 68, Self.X + Self.Width + 8))); Set(rpGuideToY, Max(4, Min(rpReport.Height - 68, Self.Y - 12))); Set(rpGuideMood, Coalesce(rpGuideMood, 0) + 1); Set(rpGuideRun, false); Reset(rpGuideTimer); Set(rpGuideRun, true)
X: =48 + 184
Y: =134
Width: =168
Height: =38
Size: =11
Fill: =RGBA(0, 137, 164, 1)
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
Visible: =(rpSlide = 4) && rpSlide <> 2 && rpSlide <> 4
- rpDemoTab3:
Control: Classic/Button@2.2.0
Properties:
Text: ="テーマ C"
OnSelect: =Set(rpGuideFromX, rpGuideRobot.X); Set(rpGuideFromY, rpGuideRobot.Y); Set(rpDemoTab, 3); Set(rpGuideToX, Max(4, Min(rpReport.Width - 68, Self.X + Self.Width + 8))); Set(rpGuideToY, Max(4, Min(rpReport.Height - 68, Self.Y - 12))); Set(rpGuideMood, Coalesce(rpGuideMood, 0) + 1); Set(rpGuideRun, false); Reset(rpGuideTimer); Set(rpGuideRun, true)
X: =48 + 368
Y: =134
Width: =168
Height: =38
Size: =11
Fill: =RGBA(0, 137, 164, 1)
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
Visible: =(rpSlide = 4) && rpSlide <> 2 && rpSlide <> 4
- rpDemoChapter:
Control: Label@2.5.1
Properties:
Text: =Switch(Coalesce(rpDemoTab, 1), 1, "テーマ A：共同で守る仕組み", 2, "テーマ B：対策の役割", 3, "テーマ C：検知した後の対応")
X: =48
Y: =208
Width: =Parent.Width - 96
Height: =72
Size: =27
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
FontWeight: =FontWeight.Bold
PaddingLeft: =0
PaddingRight: =0
Visible: =(rpSlide = 4) && rpSlide <> 2 && rpSlide <> 4
- rpDemoParagraph:
Control: Label@2.5.1
Properties:
Text: =Switch(Coalesce(rpDemoTab, 1), 1, "選択した項目に合わせて、見出しと本文が変わります。", 2, "同じ領域で別の内容を表示することで、説明を整理できます。", 3, "必要な説明を開く操作も、標準ボタンとPower Fxで作れます。")
X: =48
Y: =288
Width: =Parent.Width - 96
Height: =86
Size: =20
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
FontWeight: =FontWeight.Normal
PaddingLeft: =0
PaddingRight: =0
Visible: =(rpSlide = 4) && rpSlide <> 2 && rpSlide <> 4
- rpFAQ:
Control: Classic/Button@2.2.0
Properties:
Text: =If(Coalesce(rpFaqOpen, false), "− どうやって切り替えている？", "＋ どうやって切り替えている？")
OnSelect: =Set(rpGuideFromX, rpGuideRobot.X); Set(rpGuideFromY, rpGuideRobot.Y); Set(rpFaqOpen, !Coalesce(rpFaqOpen, false)); Set(rpGuideToX, Max(4, Min(rpReport.Width - 68, Self.X + Self.Width + 8))); Set(rpGuideToY, Max(4, Min(rpReport.Height - 68, Self.Y - 12))); Set(rpGuideMood, Coalesce(rpGuideMood, 0) + 1); Set(rpGuideRun, false); Reset(rpGuideTimer); Set(rpGuideRun, true)
X: =48
Y: =408
Width: =410
Height: =44
Size: =11
Fill: =RGBA(0, 137, 164, 1)
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
Visible: =(rpSlide = 4) && rpSlide <> 2 && rpSlide <> 4
- rpFAQAnswer:
Control: Label@2.5.1
Properties:
Text: |-
="ボタンで変数を更新し、SwitchやVisibleで表示を切り替えています。
この部分は、実際に動くPower Appsのコントロールです。"
X: =48
Y: =475
Width: =Parent.Width - 96
Height: =130
Size: =19
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
FontWeight: =FontWeight.Normal
PaddingLeft: =0
PaddingRight: =0
Visible: =(rpSlide = 4 && Coalesce(rpFaqOpen, false)) && rpSlide <> 2 && rpSlide <> 4
- rpBuildLarge:
Control: Image@2.2.3
Properties:
Image: '="data:image/svg+xml;utf8," & EncodeUrl(If(rpSlide = 2, Switch(Coalesce(rpBuildManual, Min(4, 1 + RoundDown(rpBuildTimer.Value / 4000, 0))), 1, "<svg xmlns=''http://www.w3.org/2000/svg'' viewBox=''0 0 1000 660''><rect x=''0'' y=''0'' width=''1000'' height=''660'' rx=''10'' fill=''#f5fcff'' stroke=''none''/><text xml:space=''preserve'' x=''20'' y=''35'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''#183f53''>CODE</text><text xml:space=''preserve'' x=''600'' y=''35'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''#183f53''>RESULT / PREVIEW</text><rect x=''16'' y=''54'' width=''530'' height=''510'' rx=''10'' fill=''#15283d'' stroke=''none''/><rect x=''16'' y=''54'' width=''530'' height=''40'' rx=''10'' fill=''#24435b'' stroke=''none''/><text xml:space=''preserve'' x=''34'' y=''81'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''18'' fill=''#ffffff''>PowerShell / PnP</text><rect x=''27'' y=''102'' width=''508'' height=''56'' rx=''5'' fill=''#284958'' stroke=''none''/><text xml:space=''preserve'' x=''36'' y=''124'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''># Connected test site</text><text xml:space=''preserve'' x=''36'' y=''148'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''>PS> Add-PnPPage -Name "Demo"</text><text xml:space=''preserve'' x=''31'' y=''600'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''19'' fill=''#183f53''>STEP 1 / 4</text><rect x=''563'' y=''265'' width=''27'' height=''6'' rx=''3'' fill=''#00b8ce'' stroke=''none''/><path d=''M580 254L596 268L580 282'' fill=''none'' stroke=''#00b8ce'' stroke-width=''5''/><rect x=''610'' y=''54'' width=''374'' height=''510'' rx=''12'' fill=''white'' stroke=''#c8e1e9''/><rect x=''610'' y=''54'' width=''374'' height=''42'' rx=''10'' fill=''#087d87'' stroke=''none''/><text xml:space=''preserve'' x=''626'' y=''82'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''white''>SharePoint</text><text xml:space=''preserve'' x=''626'' y=''125'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''19'' fill=''#183f53''>dorago01 / Site</text><text xml:space=''preserve'' x=''626'' y=''154'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''13'' fill=''#638294''>Home Documents Pages</text><rect x=''626'' y=''178'' width=''340'' height=''105'' rx=''10'' fill=''#d3f3fa'' stroke=''none''/><text xml:space=''preserve'' x=''642'' y=''219'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''29'' fill=''#183f53''>Demo</text><text xml:space=''preserve'' x=''642'' y=''251'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''15'' fill=''#183f53''>A page created with PnP</text><text xml:space=''preserve'' x=''612'' y=''600'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''21'' fill=''#00869b''>CODE -> UI</text><text xml:space=''preserve'' x=''20'' y=''644'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''13'' fill=''#638294''>ILLUSTRATIVE BUILD SEQUENCE / NOT A LIVE TENANT SESSION</text></svg>", 2, "<svg xmlns=''http://www.w3.org/2000/svg'' viewBox=''0 0 1000 660''><rect x=''0'' y=''0'' width=''1000'' height=''660'' rx=''10'' fill=''#f5fcff'' stroke=''none''/><text xml:space=''preserve'' x=''20'' y=''35'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''#183f53''>CODE</text><text xml:space=''preserve'' x=''600'' y=''35'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''#183f53''>RESULT / PREVIEW</text><rect x=''16'' y=''54'' width=''530'' height=''510'' rx=''10'' fill=''#15283d'' stroke=''none''/><rect x=''16'' y=''54'' width=''530'' height=''40'' rx=''10'' fill=''#24435b'' stroke=''none''/><text xml:space=''preserve'' x=''34'' y=''81'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''18'' fill=''#ffffff''>PowerShell / PnP</text><text xml:space=''preserve'' x=''36'' y=''124'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''># Connected test site</text><text xml:space=''preserve'' x=''36'' y=''148'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''>PS> Add-PnPPage -Name "Demo"</text><rect x=''27'' y=''168'' width=''508'' height=''80'' rx=''5'' fill=''#284958'' stroke=''none''/><text xml:space=''preserve'' x=''36'' y=''190'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''>PS> Add-PnPPageSection</text><text xml:space=''preserve'' x=''36'' y=''214'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''> -Page "Demo"</text><text xml:space=''preserve'' x=''36'' y=''238'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''> -SectionTemplate OneColumn</text><text xml:space=''preserve'' x=''31'' y=''600'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''19'' fill=''#183f53''>STEP 2 / 4</text><rect x=''563'' y=''265'' width=''27'' height=''6'' rx=''3'' fill=''#00b8ce'' stroke=''none''/><path d=''M580 254L596 268L580 282'' fill=''none'' stroke=''#00b8ce'' stroke-width=''5''/><rect x=''610'' y=''54'' width=''374'' height=''510'' rx=''12'' fill=''white'' stroke=''#c8e1e9''/><rect x=''610'' y=''54'' width=''374'' height=''42'' rx=''10'' fill=''#087d87'' stroke=''none''/><text xml:space=''preserve'' x=''626'' y=''82'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''white''>SharePoint</text><text xml:space=''preserve'' x=''626'' y=''125'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''19'' fill=''#183f53''>dorago01 / Site</text><text xml:space=''preserve'' x=''626'' y=''154'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''13'' fill=''#638294''>Home Documents Pages</text><rect x=''626'' y=''178'' width=''340'' height=''105'' rx=''10'' fill=''#d3f3fa'' stroke=''none''/><text xml:space=''preserve'' x=''642'' y=''219'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''29'' fill=''#183f53''>Demo</text><text xml:space=''preserve'' x=''642'' y=''251'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''15'' fill=''#183f53''>A page created with PnP</text><rect x=''627'' y=''303'' width=''338'' height=''206'' rx=''6'' fill=''#f4fbfd'' stroke=''#19b9d2''/><text xml:space=''preserve'' x=''641'' y=''329'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''14'' fill=''#00869b''>SECTION 1</text><text xml:space=''preserve'' x=''612'' y=''600'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''21'' fill=''#00869b''>CODE -> UI</text><text xml:space=''preserve'' x=''20'' y=''644'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''13'' fill=''#638294''>ILLUSTRATIVE BUILD SEQUENCE / NOT A LIVE TENANT SESSION</text></svg>", 3, "<svg xmlns=''http://www.w3.org/2000/svg'' viewBox=''0 0 1000 660''><rect x=''0'' y=''0'' width=''1000'' height=''660'' rx=''10'' fill=''#f5fcff'' stroke=''none''/><text xml:space=''preserve'' x=''20'' y=''35'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''#183f53''>CODE</text><text xml:space=''preserve'' x=''600'' y=''35'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''#183f53''>RESULT / PREVIEW</text><rect x=''16'' y=''54'' width=''530'' height=''510'' rx=''10'' fill=''#15283d'' stroke=''none''/><rect x=''16'' y=''54'' width=''530'' height=''40'' rx=''10'' fill=''#24435b'' stroke=''none''/><text xml:space=''preserve'' x=''34'' y=''81'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''18'' fill=''#ffffff''>PowerShell / PnP</text><text xml:space=''preserve'' x=''36'' y=''124'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''># Connected test site</text><text xml:space=''preserve'' x=''36'' y=''148'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''>PS> Add-PnPPage -Name "Demo"</text><text xml:space=''preserve'' x=''36'' y=''190'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''>PS> Add-PnPPageSection</text><text xml:space=''preserve'' x=''36'' y=''214'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> -Page "Demo"</text><text xml:space=''preserve'' x=''36'' y=''238'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> -SectionTemplate OneColumn</text><rect x=''27'' y=''258'' width=''508'' height=''80'' rx=''5'' fill=''#284958'' stroke=''none''/><text xml:space=''preserve'' x=''36'' y=''280'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''>PS> Add-PnPPageTextPart</text><text xml:space=''preserve'' x=''36'' y=''304'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''> -Page "Demo"</text><text xml:space=''preserve'' x=''36'' y=''328'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''> -Text "Hello from code!"</text><text xml:space=''preserve'' x=''31'' y=''600'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''19'' fill=''#183f53''>STEP 3 / 4</text><rect x=''563'' y=''265'' width=''27'' height=''6'' rx=''3'' fill=''#00b8ce'' stroke=''none''/><path d=''M580 254L596 268L580 282'' fill=''none'' stroke=''#00b8ce'' stroke-width=''5''/><rect x=''610'' y=''54'' width=''374'' height=''510'' rx=''12'' fill=''white'' stroke=''#c8e1e9''/><rect x=''610'' y=''54'' width=''374'' height=''42'' rx=''10'' fill=''#087d87'' stroke=''none''/><text xml:space=''preserve'' x=''626'' y=''82'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''white''>SharePoint</text><text xml:space=''preserve'' x=''626'' y=''125'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''19'' fill=''#183f53''>dorago01 / Site</text><text xml:space=''preserve'' x=''626'' y=''154'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''13'' fill=''#638294''>Home Documents Pages</text><rect x=''626'' y=''178'' width=''340'' height=''105'' rx=''10'' fill=''#d3f3fa'' stroke=''none''/><text xml:space=''preserve'' x=''642'' y=''219'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''29'' fill=''#183f53''>Demo</text><text xml:space=''preserve'' x=''642'' y=''251'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''15'' fill=''#183f53''>A page created with PnP</text><rect x=''627'' y=''303'' width=''338'' height=''206'' rx=''6'' fill=''#f4fbfd'' stroke=''#19b9d2''/><text xml:space=''preserve'' x=''641'' y=''329'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''14'' fill=''#00869b''>SECTION 1</text><text xml:space=''preserve'' x=''641'' y=''371'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''22'' fill=''#183f53''>Hello from code!</text><text xml:space=''preserve'' x=''641'' y=''407'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''15'' fill=''#183f53''>Text added by PowerShell</text><rect x=''641'' y=''434'' width=''301'' height=''9'' rx=''4'' fill=''#cee8ed'' stroke=''none''/><rect x=''641'' y=''455'' width=''250'' height=''9'' rx=''4'' fill=''#cee8ed'' stroke=''none''/><text xml:space=''preserve'' x=''612'' y=''600'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''21'' fill=''#00869b''>CODE -> UI</text><text xml:space=''preserve'' x=''20'' y=''644'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''13'' fill=''#638294''>ILLUSTRATIVE BUILD SEQUENCE / NOT A LIVE TENANT SESSION</text></svg>", 4, "<svg xmlns=''http://www.w3.org/2000/svg'' viewBox=''0 0 1000 660''><rect x=''0'' y=''0'' width=''1000'' height=''660'' rx=''10'' fill=''#f5fcff'' stroke=''none''/><text xml:space=''preserve'' x=''20'' y=''35'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''#183f53''>CODE</text><text xml:space=''preserve'' x=''600'' y=''35'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''#183f53''>RESULT / PREVIEW</text><rect x=''16'' y=''54'' width=''530'' height=''510'' rx=''10'' fill=''#15283d'' stroke=''none''/><rect x=''16'' y=''54'' width=''530'' height=''40'' rx=''10'' fill=''#24435b'' stroke=''none''/><text xml:space=''preserve'' x=''34'' y=''81'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''18'' fill=''#ffffff''>PowerShell / PnP</text><text xml:space=''preserve'' x=''36'' y=''124'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''># Connected test site</text><text xml:space=''preserve'' x=''36'' y=''148'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''>PS> Add-PnPPage -Name "Demo"</text><text xml:space=''preserve'' x=''36'' y=''190'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''>PS> Add-PnPPageSection</text><text xml:space=''preserve'' x=''36'' y=''214'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> -Page "Demo"</text><text xml:space=''preserve'' x=''36'' y=''238'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> -SectionTemplate OneColumn</text><text xml:space=''preserve'' x=''36'' y=''280'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''>PS> Add-PnPPageTextPart</text><text xml:space=''preserve'' x=''36'' y=''304'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> -Page "Demo"</text><text xml:space=''preserve'' x=''36'' y=''328'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> -Text "Hello from code!"</text><rect x=''27'' y=''348'' width=''508'' height=''56'' rx=''5'' fill=''#284958'' stroke=''none''/><text xml:space=''preserve'' x=''36'' y=''370'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''># Page assembled as a draft</text><text xml:space=''preserve'' x=''36'' y=''394'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''># Review in SharePoint</text><text xml:space=''preserve'' x=''31'' y=''600'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''19'' fill=''#183f53''>STEP 4 / 4</text><rect x=''563'' y=''265'' width=''27'' height=''6'' rx=''3'' fill=''#00b8ce'' stroke=''none''/><path d=''M580 254L596 268L580 282'' fill=''none'' stroke=''#00b8ce'' stroke-width=''5''/><rect x=''610'' y=''54'' width=''374'' height=''510'' rx=''12'' fill=''white'' stroke=''#c8e1e9''/><rect x=''610'' y=''54'' width=''374'' height=''42'' rx=''10'' fill=''#087d87'' stroke=''none''/><text xml:space=''preserve'' x=''626'' y=''82'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''white''>SharePoint</text><text xml:space=''preserve'' x=''626'' y=''125'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''19'' fill=''#183f53''>dorago01 / Site</text><text xml:space=''preserve'' x=''626'' y=''154'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''13'' fill=''#638294''>Home Documents Pages</text><rect x=''626'' y=''178'' width=''340'' height=''105'' rx=''10'' fill=''#d3f3fa'' stroke=''none''/><text xml:space=''preserve'' x=''642'' y=''219'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''29'' fill=''#183f53''>Demo</text><text xml:space=''preserve'' x=''642'' y=''251'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''15'' fill=''#183f53''>A page created with PnP</text><rect x=''627'' y=''303'' width=''338'' height=''206'' rx=''6'' fill=''#f4fbfd'' stroke=''#19b9d2''/><text xml:space=''preserve'' x=''641'' y=''329'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''14'' fill=''#00869b''>SECTION 1</text><text xml:space=''preserve'' x=''641'' y=''371'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''22'' fill=''#183f53''>Hello from code!</text><text xml:space=''preserve'' x=''641'' y=''407'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''15'' fill=''#183f53''>Text added by PowerShell</text><rect x=''641'' y=''434'' width=''301'' height=''9'' rx=''4'' fill=''#cee8ed'' stroke=''none''/><rect x=''641'' y=''455'' width=''250'' height=''9'' rx=''4'' fill=''#cee8ed'' stroke=''none''/><rect x=''827'' y=''113'' width=''137'' height=''31'' rx=''10'' fill=''#ddf6e9'' stroke=''none''/><text xml:space=''preserve'' x=''840'' y=''135'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''16'' fill=''#14764c''>Draft ready</text><text xml:space=''preserve'' x=''612'' y=''600'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''21'' fill=''#00869b''>CODE -> UI</text><text xml:space=''preserve'' x=''20'' y=''644'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''13'' fill=''#638294''>ILLUSTRATIVE BUILD SEQUENCE / NOT A LIVE TENANT SESSION</text></svg>"), Switch(Coalesce(rpBuildManual, Min(4, 1 + RoundDown(rpBuildTimer.Value / 4000, 0))), 1, "<svg xmlns=''http://www.w3.org/2000/svg'' viewBox=''0 0 1000 660''><rect x=''0'' y=''0'' width=''1000'' height=''660'' rx=''10'' fill=''#f5fcff'' stroke=''none''/><text xml:space=''preserve'' x=''20'' y=''35'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''#183f53''>CODE</text><text xml:space=''preserve'' x=''600'' y=''35'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''#183f53''>RESULT / PREVIEW</text><rect x=''16'' y=''54'' width=''530'' height=''510'' rx=''10'' fill=''#15283d'' stroke=''none''/><rect x=''16'' y=''54'' width=''530'' height=''40'' rx=''10'' fill=''#24435b'' stroke=''none''/><text xml:space=''preserve'' x=''34'' y=''81'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''18'' fill=''#ffffff''>Power Apps / YAML + Power Fx</text><rect x=''27'' y=''102'' width=''508'' height=''56'' rx=''5'' fill=''#284958'' stroke=''none''/><text xml:space=''preserve'' x=''36'' y=''124'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''>- DemoButton:</text><text xml:space=''preserve'' x=''36'' y=''148'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''> Control: Classic/Button@2.2.0</text><text xml:space=''preserve'' x=''31'' y=''600'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''19'' fill=''#183f53''>STEP 1 / 4</text><rect x=''563'' y=''265'' width=''27'' height=''6'' rx=''3'' fill=''#00b8ce'' stroke=''none''/><path d=''M580 254L596 268L580 282'' fill=''none'' stroke=''#00b8ce'' stroke-width=''5''/><rect x=''610'' y=''54'' width=''374'' height=''510'' rx=''12'' fill=''white'' stroke=''#c8e1e9''/><rect x=''610'' y=''54'' width=''374'' height=''42'' rx=''10'' fill=''#74399b'' stroke=''none''/><text xml:space=''preserve'' x=''626'' y=''82'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''white''>Power Apps</text><text xml:space=''preserve'' x=''631'' y=''136'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''22'' fill=''#183f53''>My introduction app</text><rect x=''634'' y=''178'' width=''327'' height=''315'' rx=''10'' fill=''#f5fcff'' stroke=''#c8e1e9''/><text xml:space=''preserve'' x=''651'' y=''211'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''16'' fill=''#183f53''>Screen1</text><text xml:space=''preserve'' x=''612'' y=''600'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''21'' fill=''#00869b''>YAML -> UI -> ACTION</text><text xml:space=''preserve'' x=''20'' y=''644'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''13'' fill=''#638294''>ILLUSTRATIVE BUILD SEQUENCE / NOT A LIVE TENANT SESSION</text></svg>", 2, "<svg xmlns=''http://www.w3.org/2000/svg'' viewBox=''0 0 1000 660''><rect x=''0'' y=''0'' width=''1000'' height=''660'' rx=''10'' fill=''#f5fcff'' stroke=''none''/><text xml:space=''preserve'' x=''20'' y=''35'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''#183f53''>CODE</text><text xml:space=''preserve'' x=''600'' y=''35'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''#183f53''>RESULT / PREVIEW</text><rect x=''16'' y=''54'' width=''530'' height=''510'' rx=''10'' fill=''#15283d'' stroke=''none''/><rect x=''16'' y=''54'' width=''530'' height=''40'' rx=''10'' fill=''#24435b'' stroke=''none''/><text xml:space=''preserve'' x=''34'' y=''81'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''18'' fill=''#ffffff''>Power Apps / YAML + Power Fx</text><text xml:space=''preserve'' x=''36'' y=''124'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''>- DemoButton:</text><text xml:space=''preserve'' x=''36'' y=''148'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> Control: Classic/Button@2.2.0</text><rect x=''27'' y=''168'' width=''508'' height=''104'' rx=''5'' fill=''#284958'' stroke=''none''/><text xml:space=''preserve'' x=''36'' y=''190'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''> Properties:</text><text xml:space=''preserve'' x=''36'' y=''214'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''> Text: ="Show details"</text><text xml:space=''preserve'' x=''36'' y=''238'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''> X: =40</text><text xml:space=''preserve'' x=''36'' y=''262'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''> Y: =120</text><text xml:space=''preserve'' x=''31'' y=''600'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''19'' fill=''#183f53''>STEP 2 / 4</text><rect x=''563'' y=''265'' width=''27'' height=''6'' rx=''3'' fill=''#00b8ce'' stroke=''none''/><path d=''M580 254L596 268L580 282'' fill=''none'' stroke=''#00b8ce'' stroke-width=''5''/><rect x=''610'' y=''54'' width=''374'' height=''510'' rx=''12'' fill=''white'' stroke=''#c8e1e9''/><rect x=''610'' y=''54'' width=''374'' height=''42'' rx=''10'' fill=''#74399b'' stroke=''none''/><text xml:space=''preserve'' x=''626'' y=''82'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''white''>Power Apps</text><text xml:space=''preserve'' x=''631'' y=''136'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''22'' fill=''#183f53''>My introduction app</text><rect x=''634'' y=''178'' width=''327'' height=''315'' rx=''10'' fill=''#f5fcff'' stroke=''#c8e1e9''/><text xml:space=''preserve'' x=''651'' y=''211'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''16'' fill=''#183f53''>Screen1</text><rect x=''651'' y=''243'' width=''235'' height=''52'' rx=''10'' fill=''#009fb7'' stroke=''none''/><text xml:space=''preserve'' x=''674'' y=''276'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''22'' fill=''white''>Show details</text><text xml:space=''preserve'' x=''612'' y=''600'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''21'' fill=''#00869b''>YAML -> UI -> ACTION</text><text xml:space=''preserve'' x=''20'' y=''644'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''13'' fill=''#638294''>ILLUSTRATIVE BUILD SEQUENCE / NOT A LIVE TENANT SESSION</text></svg>", 3, "<svg xmlns=''http://www.w3.org/2000/svg'' viewBox=''0 0 1000 660''><rect x=''0'' y=''0'' width=''1000'' height=''660'' rx=''10'' fill=''#f5fcff'' stroke=''none''/><text xml:space=''preserve'' x=''20'' y=''35'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''#183f53''>CODE</text><text xml:space=''preserve'' x=''600'' y=''35'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''#183f53''>RESULT / PREVIEW</text><rect x=''16'' y=''54'' width=''530'' height=''510'' rx=''10'' fill=''#15283d'' stroke=''none''/><rect x=''16'' y=''54'' width=''530'' height=''40'' rx=''10'' fill=''#24435b'' stroke=''none''/><text xml:space=''preserve'' x=''34'' y=''81'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''18'' fill=''#ffffff''>Power Apps / YAML + Power Fx</text><text xml:space=''preserve'' x=''36'' y=''124'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''>- DemoButton:</text><text xml:space=''preserve'' x=''36'' y=''148'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> Control: Classic/Button@2.2.0</text><text xml:space=''preserve'' x=''36'' y=''190'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> Properties:</text><text xml:space=''preserve'' x=''36'' y=''214'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> Text: ="Show details"</text><text xml:space=''preserve'' x=''36'' y=''238'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> X: =40</text><text xml:space=''preserve'' x=''36'' y=''262'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> Y: =120</text><rect x=''27'' y=''282'' width=''508'' height=''80'' rx=''5'' fill=''#284958'' stroke=''none''/><text xml:space=''preserve'' x=''36'' y=''304'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''> OnSelect: =Set(show, true)</text><text xml:space=''preserve'' x=''36'' y=''328'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''></text><text xml:space=''preserve'' x=''36'' y=''352'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''># DetailLabel.Visible: =show</text><text xml:space=''preserve'' x=''31'' y=''600'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''19'' fill=''#183f53''>STEP 3 / 4</text><rect x=''563'' y=''265'' width=''27'' height=''6'' rx=''3'' fill=''#00b8ce'' stroke=''none''/><path d=''M580 254L596 268L580 282'' fill=''none'' stroke=''#00b8ce'' stroke-width=''5''/><rect x=''610'' y=''54'' width=''374'' height=''510'' rx=''12'' fill=''white'' stroke=''#c8e1e9''/><rect x=''610'' y=''54'' width=''374'' height=''42'' rx=''10'' fill=''#74399b'' stroke=''none''/><text xml:space=''preserve'' x=''626'' y=''82'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''white''>Power Apps</text><text xml:space=''preserve'' x=''631'' y=''136'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''22'' fill=''#183f53''>My introduction app</text><rect x=''634'' y=''178'' width=''327'' height=''315'' rx=''10'' fill=''#f5fcff'' stroke=''#c8e1e9''/><text xml:space=''preserve'' x=''651'' y=''211'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''16'' fill=''#183f53''>Screen1</text><rect x=''651'' y=''243'' width=''235'' height=''52'' rx=''10'' fill=''#009fb7'' stroke=''none''/><text xml:space=''preserve'' x=''674'' y=''276'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''22'' fill=''white''>Show details</text><text xml:space=''preserve'' x=''651'' y=''334'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''16'' fill=''#7d3e9e''>OnSelect -> show = true</text><text xml:space=''preserve'' x=''612'' y=''600'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''21'' fill=''#00869b''>YAML -> UI -> ACTION</text><text xml:space=''preserve'' x=''20'' y=''644'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''13'' fill=''#638294''>ILLUSTRATIVE BUILD SEQUENCE / NOT A LIVE TENANT SESSION</text></svg>", 4, "<svg xmlns=''http://www.w3.org/2000/svg'' viewBox=''0 0 1000 660''><rect x=''0'' y=''0'' width=''1000'' height=''660'' rx=''10'' fill=''#f5fcff'' stroke=''none''/><text xml:space=''preserve'' x=''20'' y=''35'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''#183f53''>CODE</text><text xml:space=''preserve'' x=''600'' y=''35'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''#183f53''>RESULT / PREVIEW</text><rect x=''16'' y=''54'' width=''530'' height=''510'' rx=''10'' fill=''#15283d'' stroke=''none''/><rect x=''16'' y=''54'' width=''530'' height=''40'' rx=''10'' fill=''#24435b'' stroke=''none''/><text xml:space=''preserve'' x=''34'' y=''81'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''18'' fill=''#ffffff''>Power Apps / YAML + Power Fx</text><text xml:space=''preserve'' x=''36'' y=''124'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''>- DemoButton:</text><text xml:space=''preserve'' x=''36'' y=''148'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> Control: Classic/Button@2.2.0</text><text xml:space=''preserve'' x=''36'' y=''190'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> Properties:</text><text xml:space=''preserve'' x=''36'' y=''214'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> Text: ="Show details"</text><text xml:space=''preserve'' x=''36'' y=''238'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> X: =40</text><text xml:space=''preserve'' x=''36'' y=''262'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> Y: =120</text><text xml:space=''preserve'' x=''36'' y=''304'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''> OnSelect: =Set(show, true)</text><text xml:space=''preserve'' x=''36'' y=''328'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''></text><text xml:space=''preserve'' x=''36'' y=''352'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#b9cdda''># DetailLabel.Visible: =show</text><rect x=''27'' y=''372'' width=''508'' height=''56'' rx=''5'' fill=''#284958'' stroke=''none''/><text xml:space=''preserve'' x=''36'' y=''394'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''># Preview: click the button</text><text xml:space=''preserve'' x=''36'' y=''418'' font-family=''Consolas,monospace'' font-size=''17'' fill=''#72eddf''># show = true -> details appear</text><text xml:space=''preserve'' x=''31'' y=''600'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''19'' fill=''#183f53''>STEP 4 / 4</text><rect x=''563'' y=''265'' width=''27'' height=''6'' rx=''3'' fill=''#00b8ce'' stroke=''none''/><path d=''M580 254L596 268L580 282'' fill=''none'' stroke=''#00b8ce'' stroke-width=''5''/><rect x=''610'' y=''54'' width=''374'' height=''510'' rx=''12'' fill=''white'' stroke=''#c8e1e9''/><rect x=''610'' y=''54'' width=''374'' height=''42'' rx=''10'' fill=''#74399b'' stroke=''none''/><text xml:space=''preserve'' x=''626'' y=''82'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''20'' fill=''white''>Power Apps</text><text xml:space=''preserve'' x=''631'' y=''136'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''22'' fill=''#183f53''>My introduction app</text><rect x=''634'' y=''178'' width=''327'' height=''315'' rx=''10'' fill=''#f5fcff'' stroke=''#c8e1e9''/><text xml:space=''preserve'' x=''651'' y=''211'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''16'' fill=''#183f53''>Screen1</text><rect x=''651'' y=''243'' width=''235'' height=''52'' rx=''10'' fill=''#009fb7'' stroke=''none''/><text xml:space=''preserve'' x=''674'' y=''276'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''22'' fill=''white''>Show details</text><text xml:space=''preserve'' x=''651'' y=''334'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''16'' fill=''#7d3e9e''>OnSelect -> show = true</text><path d=''M869 272L883 308L890 292L907 289Z'' fill=''#1c3e52'' stroke=''white'' stroke-width=''2''/><rect x=''651'' y=''355'' width=''288'' height=''102'' rx=''10'' fill=''#daf7f4'' stroke=''none''/><text xml:space=''preserve'' x=''669'' y=''390'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''22'' fill=''#183f53''>Hello from code!</text><text xml:space=''preserve'' x=''669'' y=''424'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''16'' fill=''#183f53''>Details are now visible.</text><text xml:space=''preserve'' x=''612'' y=''600'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''21'' fill=''#00869b''>YAML -> UI -> ACTION</text><text xml:space=''preserve'' x=''20'' y=''644'' font-family=''Segoe UI,Arial,sans-serif'' font-size=''13'' fill=''#638294''>ILLUSTRATIVE BUILD SEQUENCE / NOT A LIVE TENANT SESSION</text></svg>")))'
X: =40
Y: =108
Width: =Parent.Width - 80
Height: =Parent.Height - 310
Visible: =rpSlide = 2 || rpSlide = 4
- rpBuildLargeCaption:
Control: Label@2.5.1
Properties:
Text: =If(rpSlide = 2, Switch(Coalesce(rpBuildManual, Min(4, 1 + RoundDown(rpBuildTimer.Value / 4000, 0))), 1, "① CLIでページ作成を指示", 2, "② ページにセクションを追加", 3, "③ コードから本文を配置", 4, "④ 下書きページが完成。ブラウザーで確認"), Switch(Coalesce(rpBuildManual, Min(4, 1 + RoundDown(rpBuildTimer.Value / 4000, 0))), 1, "① YAMLでボタンを定義", 2, "② Text・X・Yで見た目と位置を指定", 3, "③ OnSelectにPower Fxを書く", 4, "④ ボタンを押すと説明が表示される"))
X: =48
Y: =Parent.Height - 193
Width: =Parent.Width - 96
Height: =40
Size: =22
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
Visible: =rpSlide = 2 || rpSlide = 4
- rpBuildNotice:
Control: Label@2.5.1
Properties:
Text: ="構築の説明用アニメーションです。実際の接続・コマンド実行は行いません。コードは要点を抜粋。"
X: =48
Y: =Parent.Height - 65
Width: =Parent.Width - 96
Height: =40
Size: =13
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
Visible: =rpSlide = 2 || rpSlide = 4
- rpBuildStep1:
Control: Classic/Button@2.2.0
Properties:
Text: ="1 / 定義"
OnSelect: =Set(rpBuildManual, 1)
X: =48 + 0 * 220
Y: =Parent.Height - 136
Width: =208
Height: =48
Size: =11
Fill: =If(Coalesce(rpBuildManual, Min(4, 1 + RoundDown(rpBuildTimer.Value / 4000, 0))) = 1, RGBA(0, 119, 144, 1), RGBA(55, 91, 112, 1))
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
Visible: =rpSlide = 2 || rpSlide = 4
- rpBuildStep2:
Control: Classic/Button@2.2.0
Properties:
Text: ="2 / 配置"
OnSelect: =Set(rpBuildManual, 2)
X: =48 + 1 * 220
Y: =Parent.Height - 136
Width: =208
Height: =48
Size: =11
Fill: =If(Coalesce(rpBuildManual, Min(4, 1 + RoundDown(rpBuildTimer.Value / 4000, 0))) = 2, RGBA(0, 119, 144, 1), RGBA(55, 91, 112, 1))
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
Visible: =rpSlide = 2 || rpSlide = 4
- rpBuildStep3:
Control: Classic/Button@2.2.0
Properties:
Text: ="3 / 処理"
OnSelect: =Set(rpBuildManual, 3)
X: =48 + 2 * 220
Y: =Parent.Height - 136
Width: =208
Height: =48
Size: =11
Fill: =If(Coalesce(rpBuildManual, Min(4, 1 + RoundDown(rpBuildTimer.Value / 4000, 0))) = 3, RGBA(0, 119, 144, 1), RGBA(55, 91, 112, 1))
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
Visible: =rpSlide = 2 || rpSlide = 4
- rpBuildStep4:
Control: Classic/Button@2.2.0
Properties:
Text: ="4 / 結果"
OnSelect: =Set(rpBuildManual, 4)
X: =48 + 3 * 220
Y: =Parent.Height - 136
Width: =208
Height: =48
Size: =11
Fill: =If(Coalesce(rpBuildManual, Min(4, 1 + RoundDown(rpBuildTimer.Value / 4000, 0))) = 4, RGBA(0, 119, 144, 1), RGBA(55, 91, 112, 1))
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
Visible: =rpSlide = 2 || rpSlide = 4
- rpBuildStep5:
Control: Classic/Button@2.2.0
Properties:
Text: ="▶ 最初から自動再生"
OnSelect: =Set(rpBuildManual, Blank()); Reset(rpBuildTimer); Set(rpPaused, false)
X: =48 + 4 * 220
Y: =Parent.Height - 136
Width: =208
Height: =48
Size: =11
Fill: =RGBA(0, 137, 164, 1)
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
Visible: =rpSlide = 2 || rpSlide = 4
- rpNotesStage:
Control: GroupContainer@1.5.0
Variant: ManualLayout
Properties:
X: =0
Y: =0
Width: =Parent.Width
Height: =Parent.Height
Fill: =RGBA(245, 252, 255, 1)
Visible: =Coalesce(rpShowNotes, false)
Children:
- rpNotesTitle:
Control: Label@2.5.1
Properties:
Text: ="補足・出典"
X: =48
Y: =36
Width: =Parent.Width - 280
Height: =55
Size: =28
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
FontWeight: =FontWeight.Bold
PaddingLeft: =0
PaddingRight: =0
- rpNotesClose:
Control: Classic/Button@2.2.0
Properties:
Text: ="閉じる ×"
OnSelect: =Set(rpShowNotes, false)
X: =Parent.Width - 192
Y: =40
Width: =144
Height: =38
Size: =11
Fill: =RGBA(0, 137, 164, 1)
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
- rpNotesText:
Control: Label@2.5.1
Properties:
Text: |-
="本報告の「ハック」は、既存ツールをコードで使いこなすという意味です。
利用可能な権限と機能の範囲で検証しています。
今回のイラストは、説明のためのオリジナルSVGです。実画面のスクリーンショットではありません。
CG風表現は2.5Dで、実際の監視状況や通信量を表示していません。
この報告アプリは実機確認前です。既存の試作で確認できた成果と区別しています。
業務環境への展開、利用者への共有、ライセンスの確認、効果測定は今後の作業です。
参考資料（Microsoft公式）"
X: =48
Y: =134
Width: =Parent.Width - 96
Height: =360
Size: =17
Color: =RGBA(29, 59, 78, 1)
Wrap: =true
FontWeight: =FontWeight.Normal
PaddingLeft: =0
PaddingRight: =0
- rpSource0:
Control: Classic/Button@2.2.0
Properties:
Text: ="YAMLのコード貼り付け"
OnSelect: =Launch("https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/code-view")
X: =48
Y: =520
Width: =350
Height: =44
Size: =11
Fill: =RGBA(0, 137, 164, 1)
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
- rpSource1:
Control: Classic/Button@2.2.0
Properties:
Text: ="Timerとアニメーション"
OnSelect: =Launch("https://learn.microsoft.com/ja-jp/power-apps/maker/canvas-apps/controls/control-timer")
X: =48
Y: =580
Width: =350
Height: =44
Size: =11
Fill: =RGBA(0, 137, 164, 1)
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
- rpSource2:
Control: Classic/Button@2.2.0
Properties:
Text: ="SharePointへの埋め込み"
OnSelect: =Launch("https://learn.microsoft.com/ja-jp/power-apps/user/powerapps-web-part")
X: =48
Y: =640
Width: =350
Height: =44
Size: =11
Fill: =RGBA(0, 137, 164, 1)
Color: =RGBA(255, 255, 255, 1)
BorderThickness: =0
HoverFill: =RGBA(21, 179, 204, 1)
HoverColor: =RGBA(255, 255, 255, 1)
PressedFill: =RGBA(254, 213, 94, 1)
PressedColor: =RGBA(29, 59, 78, 1)
RadiusTopLeft: =19
RadiusTopRight: =19
RadiusBottomLeft: =19
RadiusBottomRight: =19
TabIndex: =0
- rpGuideRobot:
Control: Image@2.2.3
Properties:
X: '=With({p: If(Coalesce(rpPaused, false), 1, Min(1, rpGuideTimer.Value / 650))}, Coalesce(rpGuideFromX, Parent.Width - 104) + (Coalesce(rpGuideToX, Parent.Width - 104) - Coalesce(rpGuideFromX, Parent.Width - 104)) * (1 - Power(1 - p, 3)))'
Y: '=With({p: If(Coalesce(rpPaused, false), 1, Min(1, rpGuideTimer.Value / 650)), b: If(Coalesce(rpPaused, false), 1, Max(0, Min(1, (rpGuideTimer.Value - 650) / 450)))}, Coalesce(rpGuideFromY, 82) + (Coalesce(rpGuideToY, 82) - Coalesce(rpGuideFromY, 82)) * (1 - Power(1 - p, 3)) - 10 * Sin(Pi() * b))'
Width: =64
Height: =64
Image: ="data:image/svg+xml;utf8," & EncodeUrl(If(Coalesce(rpGuideRun, false) && rpGuideTimer.Value < 650, "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><ellipse cx='50' cy='91' rx='24' ry='4' fill='#b9e9f1'/><path d='M36 80L30 89M64 80L70 89M27 60L12 48M73 60L88 45' stroke='#24465a' stroke-width='7' stroke-linecap='round'/><circle cx='12' cy='46' r='7' fill='#ffe27c'/><circle cx='88' cy='43' r='7' fill='#ffe27c'/><rect x='31' y='57' width='38' height='27' rx='11' fill='white' stroke='#24465a' stroke-width='3'/><path d='M50 23V12' stroke='#24465a' stroke-width='3'/><circle cx='50' cy='9' r='5' fill='#ff80a0'/><rect x='17' y='22' width='66' height='43' rx='16' fill='white' stroke='#24465a' stroke-width='3'/><rect x='24' y='29' width='52' height='28' rx='10' fill='#d2f6ff'/><ellipse cx='30' cy='50' rx='5' ry='2' fill='#ffadc6'/><ellipse cx='70' cy='50' rx='5' ry='2' fill='#ffadc6'/><circle cx='38' cy='40' r='4' fill='#24465a'/><circle cx='62' cy='40' r='4' fill='#24465a'/><ellipse cx='50' cy='50' rx='4' ry='5' fill='#24465a'/><path d='M44 70L40 74L44 78M56 70L60 74L56 78' fill='none' stroke='#00a9c7' stroke-width='2'/></svg>", Switch(Mod(Coalesce(rpGuideMood, 0), 3), 0, "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><ellipse cx='50' cy='91' rx='24' ry='4' fill='#b9e9f1'/><path d='M36 80L30 89M64 80L70 89M27 60L12 48M73 60L88 45' stroke='#24465a' stroke-width='7' stroke-linecap='round'/><circle cx='12' cy='46' r='7' fill='#ffe27c'/><circle cx='88' cy='43' r='7' fill='#ffe27c'/><rect x='31' y='57' width='38' height='27' rx='11' fill='white' stroke='#24465a' stroke-width='3'/><path d='M50 23V12' stroke='#24465a' stroke-width='3'/><circle cx='50' cy='9' r='5' fill='#ff80a0'/><rect x='17' y='22' width='66' height='43' rx='16' fill='white' stroke='#24465a' stroke-width='3'/><rect x='24' y='29' width='52' height='28' rx='10' fill='#d2f6ff'/><ellipse cx='30' cy='50' rx='5' ry='2' fill='#ffadc6'/><ellipse cx='70' cy='50' rx='5' ry='2' fill='#ffadc6'/><path d='M34 42Q38 35 42 42M58 42Q62 35 66 42M43 48Q50 56 57 48' fill='none' stroke='#24465a' stroke-width='3' stroke-linecap='round'/><path d='M44 70L40 74L44 78M56 70L60 74L56 78' fill='none' stroke='#00a9c7' stroke-width='2'/></svg>", 1, "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><ellipse cx='50' cy='91' rx='24' ry='4' fill='#b9e9f1'/><path d='M36 80L30 89M64 80L70 89M27 60L12 48M73 60L88 45' stroke='#24465a' stroke-width='7' stroke-linecap='round'/><circle cx='12' cy='46' r='7' fill='#ffe27c'/><circle cx='88' cy='43' r='7' fill='#ffe27c'/><rect x='31' y='57' width='38' height='27' rx='11' fill='white' stroke='#24465a' stroke-width='3'/><path d='M50 23V12' stroke='#24465a' stroke-width='3'/><circle cx='50' cy='9' r='5' fill='#ff80a0'/><rect x='17' y='22' width='66' height='43' rx='16' fill='white' stroke='#24465a' stroke-width='3'/><rect x='24' y='29' width='52' height='28' rx='10' fill='#d2f6ff'/><ellipse cx='30' cy='50' rx='5' ry='2' fill='#ffadc6'/><ellipse cx='70' cy='50' rx='5' ry='2' fill='#ffadc6'/><circle cx='38' cy='40' r='3' fill='#24465a'/><path d='M58 40L66 40M43 48Q50 55 57 48' stroke='#24465a' stroke-width='3' fill='none' stroke-linecap='round'/><path d='M44 70L40 74L44 78M56 70L60 74L56 78' fill='none' stroke='#00a9c7' stroke-width='2'/></svg>", "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><ellipse cx='50' cy='91' rx='24' ry='4' fill='#b9e9f1'/><path d='M36 80L30 89M64 80L70 89M27 60L12 48M73 60L88 45' stroke='#24465a' stroke-width='7' stroke-linecap='round'/><circle cx='12' cy='46' r='7' fill='#ffe27c'/><circle cx='88' cy='43' r='7' fill='#ffe27c'/><rect x='31' y='57' width='38' height='27' rx='11' fill='white' stroke='#24465a' stroke-width='3'/><path d='M50 23V12' stroke='#24465a' stroke-width='3'/><circle cx='50' cy='9' r='5' fill='#ff80a0'/><rect x='17' y='22' width='66' height='43' rx='16' fill='white' stroke='#24465a' stroke-width='3'/><rect x='24' y='29' width='52' height='28' rx='10' fill='#d2f6ff'/><ellipse cx='30' cy='50' rx='5' ry='2' fill='#ffadc6'/><ellipse cx='70' cy='50' rx='5' ry='2' fill='#ffadc6'/><circle cx='38' cy='40' r='4' fill='#24465a'/><circle cx='62' cy='40' r='4' fill='#24465a'/><ellipse cx='50' cy='50' rx='4' ry='5' fill='#24465a'/><path d='M44 70L40 74L44 78M56 70L60 74L56 78' fill='none' stroke='#00a9c7' stroke-width='2'/></svg>")))
Visible: =!Coalesce(rpShowNotes, false)
OnSelect: =Set(rpGuideMood, Coalesce(rpGuideMood, 0) + 1)
Tooltip: ="項目を押すと近くへ移動します。ロボットを押すと表情が変わります。"
