Power AppsPower Platform

【Power Apps】コピペで簡単!おしゃれなサイドメニューのサンプル

今回の記事では、Power Appsでアプリのサイドメニュー(サイドバー)を実装していきます。
コピペで簡単に実装することができるため、ぜひご自身のアプリにご活用ください。

スポンサーリンク

実現したいこと

完成イメージは次の通りです。

左の各メニューをクリックすると、画面が切り替わります。
最下部の左右矢印をクリックすることで、サイドメニューの展開・折りたたみも可能になっています。

完成イメージ(サイドメニュー)

実装方法

今回は2024年8月に一般提供が開始された「コードビュー機能」を使っていきます。
プレビュー機能にはなりますが、他者が作ったコントロールを簡単に自環境に導入できます。

スクリーンの作成

実装前の準備として、まずは空のスクリーンを作成していきます。

「ツリービュー」 > 「新しい画面」 > 「空」 を選択し、空のスクリーンを追加します。
この操作を繰り返し、Screen1~Screen5(計5画面)を作成します。
(スクリーン名も下画像2枚目の通りになっていることを確認してください)

空のスクリーンを追加
Screen5まで作成

OnStartプロパティの設定

Screen5まで作成できたら、下の式をコピーして App > OnStartプロパティに入力してください。
(1行目右端のコピーボタンをご利用ください)

ClearCollect(
    colMenuList,
    {
        menu: "Activity",  // メニュー名を入力してください
        icon: Icon.Bell,  // アイコンを入力してください
        screen: Screen1  // メニューをクリックした際の遷移先を入力してください
    },
    {
        menu: "Chat",  // メニュー名を入力してください
        icon: Icon.Message,  // アイコンを入力してください
        screen: Screen2  // メニューをクリックした際の遷移先を入力してください
    },
    {
        menu: "Teams",  // メニュー名を入力してください
        icon: Icon.People,  // アイコンを入力してください
        screen: Screen3  // メニューをクリックした際の遷移先を入力してください
    },
    {
        menu: "Calendar",  // メニュー名を入力してください
        icon: Icon.CalendarBlank,  // アイコンを入力してください
        screen: Screen4  // メニューをクリックした際の遷移先を入力してください
    },
    {
        menu: "Others",  // メニュー名を入力してください
        icon: Icon.More,  // アイコンを入力してください
        screen: Screen5  // メニューをクリックした際の遷移先を入力してください
    }
);
Set(gblSidebarExpand, true)
// © 2025 Power 365 Medium, Hiromaru
OnStartプロパティに式を入力

OnStartプロパティの実行

OnStartプロパティの設定が完了したら、Appの3点リーダー(・・・)から「OnStartを実行します」ボタンを押してください。(画面に変化は起こりません)

OnStartの実行

コードの貼り付け

OnStartが実行できたら、下のコードをコピーします。
(1行目右端のコピーボタンをご利用ください)

- ctnScreen:
    Control: GroupContainer
    Variant: manualLayoutContainer
    Properties:
      Height: =768
      Width: =1366
    Children:
    - ctnBody:
        Control: GroupContainer
        Variant: manualLayoutContainer
        Properties:
          DropShadow: =DropShadow.None
          Fill: =Color.Transparent
          Height: =760
          RadiusBottomLeft: =10
          RadiusBottomRight: =10
          RadiusTopLeft: =10
          RadiusTopRight: =10
          Width: =App.Width - (ctnSidebar.Width + ctnSidebar.X * 3)
          X: =ctnSidebar.Width + ctnSidebar.X * 2
          Y: |-
            =// コードの貼り付け時に位置がずれないよう工夫
            4 + 0
        Children:
        - ctnTitle:
            Control: GroupContainer
            Variant: manualLayoutContainer
            Properties:
              Height: =96
              RadiusBottomLeft: =10
              RadiusBottomRight: =10
              RadiusTopLeft: =10
              RadiusTopRight: =10
              Width: =Parent.Width
            Children:
            - lblTitle:
                Control: Label
                Properties:
                  Text: =App.ActiveScreen.Name
                  Align: =Align.Center
                  Color: =RGBA(255, 255, 255, 1)
                  Fill: =RGBA(25, 118, 210, 1)
                  FontWeight: =FontWeight.Bold
                  Height: =Parent.Height
                  Size: =20
                  Width: =Parent.Width
        - icoBody:
            Control: Classic/Icon
            Variant: Alarm
            Properties:
              Color: =RGBA(25, 118, 210, 1)
              Height: =256
              Icon: |-
                =LookUp(
                    colMenuList,
                    screen = App.ActiveScreen
                ).icon
              Width: =244
              X: =(Parent.Width - Self.Width) / 2
              Y: =280
    - ctnSidebar:
        Control: GroupContainer
        Variant: manualLayoutContainer
        Properties:
          Height: =760
          RadiusBottomLeft: =10
          RadiusBottomRight: =10
          RadiusTopLeft: =10
          RadiusTopRight: =10
          Width: |-
            =If(
                gblSidebarExpand,
                280,
                70
            )
          X: |-
            =// コードの貼り付け時に位置がずれないよう工夫
            4 + 0
            // © 2025 Power 365 Medium, Hiromaru
          Y: |-
            =// コードの貼り付け時に位置がずれないよう工夫
            4 + 0
            // © 2025 Power 365 Medium, Hiromaru
        Children:
        - galSidebar:
            Control: Gallery
            Variant: galleryVertical
            Properties:
              OnSelect: |-
                =Navigate(
                    ThisItem.screen,
                    ScreenTransition.None
                )
              Items: =colMenuList
              Height: =656
              Layout: =Layout.Vertical
              TemplatePadding: =0
              TemplateSize: =64
              Width: =Parent.Width
              Y: =104
            Children:
            - btnCursorPointer:
                Control: Classic/Button
                Properties:
                  OnSelect: =Select(Parent)
                  Text: =""
                  BorderColor: =Color.Transparent
                  BorderThickness: =0
                  Color: =Color.Transparent
                  DisabledBorderColor: =Color.Transparent
                  DisabledColor: =Color.Transparent
                  DisabledFill: =Color.Transparent
                  Fill: |-
                    =If(
                        App.ActiveScreen = ThisItem.screen,
                        RGBA(25, 118, 210, 0.1),
                        Color.Transparent
                    )
                  FocusedBorderColor: =Color.Transparent
                  FocusedBorderThickness: =0
                  Height: =64
                  HoverBorderColor: =Color.Transparent
                  HoverColor: =Color.Transparent
                  HoverFill: =Self.Fill
                  PaddingBottom: =0
                  PaddingLeft: =0
                  PaddingRight: =0
                  PaddingTop: =0
                  PressedBorderColor: =Color.Transparent
                  PressedColor: =Color.Transparent
                  PressedFill: =Self.Fill
                  RadiusBottomLeft: =8
                  RadiusBottomRight: =8
                  RadiusTopLeft: =8
                  RadiusTopRight: =8
                  TabIndex: =1
                  Width: =Parent.Width - Self.X * 2
                  X: =3
            - icoMenu:
                Control: Classic/Icon
                Variant: Copy
                Properties:
                  OnSelect: =
                  Color: |-
                    =If(
                        App.ActiveScreen = ThisItem.screen,
                        RGBA(0, 0, 0, 1),
                        RGBA(80, 80, 80, 1)
                    )
                  Height: =32
                  Icon: =ThisItem.icon
                  Width: =32
                  X: =19
                  Y: =16
            - lblMenu:
                Control: Label
                Properties:
                  OnSelect: =
                  Text: =ThisItem.menu
                  Color: |-
                    =If(
                        App.ActiveScreen = ThisItem.screen,
                        RGBA(0, 0, 0, 1),
                        RGBA(80, 80, 80, 1)
                    )
                  FontWeight: |-
                    =If(
                        App.ActiveScreen = ThisItem.screen,
                        FontWeight.Semibold,
                        FontWeight.Normal
                    )
                  Height: =64
                  Width: =201
                  X: =76
        - icoCollapseSidebar:
            Control: Classic/Icon
            Variant: Copy
            Properties:
              OnSelect: |-
                =Set(
                    gblSidebarExpand,
                    false
                )
              Color: =RGBA(80,80,80,1)
              Height: =28
              Icon: =Icon.ChevronLeft
              Visible: =gblSidebarExpand
              Width: =28
              X: =232
              Y: =710
        - icoExpandSidebar:
            Control: Classic/Icon
            Variant: Copy
            Properties:
              OnSelect: |-
                =Set(
                    gblSidebarExpand,
                    true
                )
              Color: =RGBA(80,80,80,1)
              Height: =28
              Icon: =Icon.ChevronRight
              Visible: =!gblSidebarExpand
              Width: =28
              X: =22
              Y: =710
        - lblAppTitle:
            Control: Label
            Properties:
              Text: ="Power 365 Medium"
              FontWeight: =FontWeight.Semibold
              Height: =38
              Size: =14
              Width: =188
              X: =76
              Y: =33
        - imgAppLogo:
            Control: Image
            Properties:
              Image: |-
                ="data:image/svg+xml," & EncodeUrl(
                    "<svg xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='512px' height='512px' viewBox='0 0 512 512' version='1.1'>
                <g id='surface1'>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(94.901961%,94.901961%,94.901961%);fill-opacity:1;' d='M 470.078125 391.695312 L 494.636719 395.53125 C 502.949219 385.46875 508.679688 373.527344 511.328125 360.742188 C 493.375 375.441406 466.066406 367.632812 444.289062 375.65625 C 430.574219 380.832031 419.953125 391.964844 415.433594 405.914062 L 403.429688 418.824219 C 425.417969 427.53125 450.109375 426.167969 471.007812 415.101562 C 476.773438 411.980469 482.117188 408.140625 486.921875 403.679688 C 478.328125 398.269531 470.078125 391.695312 470.078125 391.695312 Z M 470.078125 391.695312 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(94.901961%,94.901961%,94.901961%);fill-opacity:1;' d='M 461.363281 352.417969 L 485.050781 344.902344 C 488.003906 332.1875 487.804688 318.941406 484.480469 306.320312 C 474.960938 327.484375 447.035156 332.671875 431.128906 349.566406 C 421.160156 360.316406 416.617188 375.015625 418.789062 389.515625 L 413.808594 406.425781 C 437.367188 404.410156 458.863281 392.179688 472.632812 372.957031 C 476.398438 367.589844 479.472656 361.769531 481.78125 355.636719 C 471.675781 354.625 461.363281 352.417969 461.363281 352.417969 Z M 461.363281 352.417969 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(80%,80%,80%);fill-opacity:1;' d='M 511.464844 426.648438 C 511.464844 427.179688 511.035156 427.609375 510.503906 427.609375 C 510.5 427.609375 510.5 427.609375 510.496094 427.609375 L -34.992188 427.609375 C -35.523438 427.609375 -35.957031 427.179688 -35.957031 426.648438 C -35.957031 426.113281 -35.523438 425.683594 -34.992188 425.683594 L 510.496094 425.683594 C 511.027344 425.683594 511.460938 426.109375 511.464844 426.640625 C 511.464844 426.644531 511.464844 426.644531 511.464844 426.648438 Z M 511.464844 426.648438 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(90.196078%,90.196078%,90.196078%);fill-opacity:1;' d='M 364.273438 211.351562 C 364.273438 307.554688 286.285156 385.542969 190.082031 385.542969 C 93.878906 385.542969 15.894531 307.554688 15.894531 211.351562 C 15.894531 115.148438 93.878906 37.160156 190.082031 37.160156 C 286.285156 37.160156 364.273438 115.148438 364.273438 211.351562 Z M 364.273438 211.351562 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;' d='M 339.96875 211.351562 C 340.003906 258.777344 317.5625 303.414062 279.46875 331.671875 C 278.214844 332.613281 276.9375 333.53125 275.644531 334.417969 C 224.207031 370.175781 155.960938 370.175781 104.519531 334.417969 C 103.230469 333.53125 101.949219 332.613281 100.695312 331.671875 C 34.242188 282.296875 20.402344 188.398438 69.777344 121.949219 C 78.519531 110.1875 88.933594 99.769531 100.695312 91.03125 C 101.949219 90.089844 103.230469 89.175781 104.519531 88.285156 C 155.960938 52.527344 224.207031 52.527344 275.644531 88.285156 C 276.9375 89.175781 278.214844 90.089844 279.46875 91.03125 C 317.5625 119.289062 340.003906 163.925781 339.96875 211.351562 Z M 339.96875 211.351562 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(9.803922%,46.27451%,82.352941%);fill-opacity:1;' d='M 327.003906 211.351562 C 327.003906 286.972656 265.703125 348.273438 190.082031 348.273438 C 114.464844 348.273438 53.160156 286.972656 53.160156 211.351562 C 53.160156 135.730469 114.464844 74.429688 190.082031 74.429688 C 265.703125 74.429688 327.003906 135.730469 327.003906 211.351562 Z M 327.003906 211.351562 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(0%,0%,0%);fill-opacity:0.2;' d='M 190.441406 74.8125 C 188.367188 74.8125 186.300781 74.867188 184.25 74.957031 C 259.574219 81.578125 315.273438 148.007812 308.65625 223.335938 C 302.652344 291.679688 246.988281 345.03125 178.453125 348.128906 C 182.402344 348.472656 186.398438 348.65625 190.441406 348.65625 C 266.058594 348.65625 327.363281 287.355469 327.363281 211.734375 C 327.363281 136.113281 266.058594 74.8125 190.441406 74.8125 Z M 190.441406 74.8125 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;' d='M 190.488281 64.707031 C 188.03125 64.710938 186.035156 66.703125 186.03125 69.164062 L 186.03125 88.609375 C 186.03125 91.070312 188.027344 93.0625 190.488281 93.0625 C 192.949219 93.0625 194.945312 91.070312 194.945312 88.609375 L 194.945312 69.164062 C 194.941406 66.703125 192.945312 64.710938 190.488281 64.707031 Z M 190.488281 64.707031 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;' d='M 279.46875 91.03125 C 278.214844 90.089844 276.9375 89.175781 275.644531 88.285156 C 274.074219 88.179688 272.5625 88.917969 271.675781 90.21875 L 260.730469 106.285156 C 259.347656 108.320312 259.871094 111.089844 261.90625 112.476562 C 263.9375 113.859375 266.710938 113.332031 268.097656 111.300781 L 279.042969 95.234375 C 279.886719 93.996094 280.050781 92.414062 279.46875 91.03125 Z M 279.46875 91.03125 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;' d='M 329.203125 164.289062 C 328.277344 162.011719 325.679688 160.914062 323.402344 161.839844 C 323.402344 161.839844 323.398438 161.839844 323.398438 161.839844 L 305.382812 169.15625 C 303.101562 170.085938 302.007812 172.683594 302.933594 174.964844 C 303.863281 177.242188 306.457031 178.335938 308.734375 177.410156 L 326.753906 170.097656 C 329.03125 169.164062 330.121094 166.566406 329.203125 164.289062 Z M 329.203125 164.289062 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;' d='M 119.433594 106.285156 L 108.488281 90.21875 C 107.601562 88.917969 106.09375 88.179688 104.519531 88.285156 C 103.230469 89.175781 101.949219 90.089844 100.695312 91.03125 C 100.117188 92.414062 100.277344 93.996094 101.125 95.234375 L 112.070312 111.300781 C 113.453125 113.332031 116.226562 113.859375 118.257812 112.476562 C 120.292969 111.089844 120.820312 108.320312 119.4375 106.285156 Z M 119.433594 106.285156 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;' d='M 74.785156 169.15625 L 56.765625 161.839844 C 54.488281 160.914062 51.886719 162.011719 50.960938 164.292969 C 50.035156 166.570312 51.132812 169.167969 53.414062 170.097656 L 71.429688 177.410156 C 73.710938 178.335938 76.3125 177.238281 77.234375 174.957031 C 78.15625 172.679688 77.0625 170.085938 74.785156 169.15625 Z M 74.785156 169.15625 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;' d='M 190.488281 329.640625 C 188.03125 329.644531 186.035156 331.636719 186.03125 334.097656 L 186.03125 353.542969 C 186.03125 356 188.027344 357.996094 190.488281 357.996094 C 192.949219 357.996094 194.945312 356 194.945312 353.542969 L 194.945312 334.097656 C 194.941406 331.636719 192.945312 329.644531 190.488281 329.640625 Z M 190.488281 329.640625 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;' d='M 279.042969 327.46875 L 268.097656 311.402344 C 266.710938 309.371094 263.9375 308.84375 261.90625 310.226562 C 259.871094 311.613281 259.347656 314.386719 260.730469 316.417969 L 271.675781 332.484375 C 272.5625 333.785156 274.074219 334.523438 275.644531 334.417969 C 276.9375 333.53125 278.214844 332.613281 279.46875 331.671875 C 280.050781 330.289062 279.886719 328.707031 279.042969 327.46875 Z M 279.042969 327.46875 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;' d='M 326.753906 252.609375 L 308.734375 245.292969 C 306.457031 244.367188 303.855469 245.460938 302.929688 247.742188 C 302.003906 250.023438 303.101562 252.621094 305.382812 253.546875 L 323.398438 260.863281 C 325.679688 261.785156 328.277344 260.6875 329.203125 258.40625 C 330.125 256.128906 329.03125 253.535156 326.753906 252.609375 Z M 326.753906 252.609375 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;' d='M 118.257812 310.226562 C 116.226562 308.84375 113.453125 309.371094 112.070312 311.402344 L 101.125 327.46875 C 100.277344 328.707031 100.117188 330.289062 100.695312 331.671875 C 101.949219 332.613281 103.230469 333.53125 104.519531 334.417969 C 106.09375 334.523438 107.601562 333.785156 108.488281 332.484375 L 119.4375 316.417969 C 120.820312 314.386719 120.296875 311.613281 118.261719 310.226562 C 118.261719 310.226562 118.257812 310.226562 118.257812 310.226562 Z M 118.257812 310.226562 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(100%,100%,100%);fill-opacity:1;' d='M 77.234375 247.738281 C 76.308594 245.460938 73.710938 244.367188 71.433594 245.289062 C 71.433594 245.292969 71.429688 245.292969 71.429688 245.292969 L 53.414062 252.609375 C 51.132812 253.535156 50.039062 256.136719 50.96875 258.414062 C 51.894531 260.691406 54.488281 261.785156 56.765625 260.863281 L 74.785156 253.546875 C 77.0625 252.613281 78.15625 250.019531 77.234375 247.738281 Z M 77.234375 247.738281 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(24.705882%,23.921569%,33.72549%);fill-opacity:1;' d='M 196.269531 209.140625 C 197.125 214.210938 193.714844 219.019531 188.648438 219.890625 L 109.574219 233.339844 C 104.503906 234.203125 99.691406 230.789062 98.828125 225.714844 C 97.964844 220.644531 101.375 215.832031 106.449219 214.96875 L 185.523438 201.519531 C 190.59375 200.660156 195.402344 204.070312 196.269531 209.140625 Z M 196.269531 209.140625 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(24.705882%,23.921569%,33.72549%);fill-opacity:1;' d='M 279.492188 296.75 C 277.128906 299.128906 273.28125 299.140625 270.898438 296.78125 L 185.777344 212.328125 C 183.398438 209.964844 183.386719 206.117188 185.75 203.734375 C 188.113281 201.355469 191.957031 201.34375 194.339844 203.703125 L 279.457031 288.15625 C 281.835938 290.519531 281.851562 294.363281 279.492188 296.75 Z M 279.492188 296.75 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(80%,80%,80%);fill-opacity:1;' d='M 200.617188 211.351562 C 200.617188 217.167969 195.898438 221.882812 190.082031 221.882812 C 184.265625 221.882812 179.550781 217.167969 179.550781 211.351562 C 179.550781 205.535156 184.265625 200.820312 190.082031 200.820312 C 195.898438 200.820312 200.617188 205.535156 200.617188 211.351562 Z M 200.617188 211.351562 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(90.196078%,90.196078%,90.196078%);fill-opacity:1;' d='M 117.535156 28.71875 C 101.371094 54.132812 76.703125 71.003906 46.28125 82.085938 C 43.753906 83.976562 40.167969 83.464844 38.273438 80.9375 C 21.75 58.871094 25.480469 27.339844 47.289062 10.480469 C 69.277344 -6.488281 100.855469 -2.417969 117.824219 19.570312 C 117.957031 19.746094 118.09375 19.921875 118.226562 20.101562 L 118.6875 20.710938 C 120.578125 23.238281 120.066406 26.824219 117.535156 28.71875 Z M 117.535156 28.71875 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(90.196078%,90.196078%,90.196078%);fill-opacity:1;' d='M 261.9375 20.101562 C 278.613281 -2.109375 310.132812 -6.597656 332.34375 10.074219 C 332.523438 10.207031 332.699219 10.34375 332.878906 10.480469 C 354.6875 27.339844 358.417969 58.871094 341.894531 80.933594 C 340 83.464844 336.414062 83.976562 333.886719 82.085938 C 305.644531 71.273438 282.484375 52.5625 262.632812 28.71875 C 260.101562 26.824219 259.589844 23.238281 261.480469 20.710938 Z M 261.9375 20.101562 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(90.196078%,90.196078%,90.196078%);fill-opacity:1;' d='M 254.851562 362.265625 C 252.707031 363.46875 251.941406 366.183594 253.140625 368.332031 L 278.855469 414.285156 C 280.058594 416.433594 282.773438 417.199219 284.921875 415.996094 C 287.070312 414.796875 287.832031 412.082031 286.632812 409.933594 L 260.917969 363.976562 C 259.710938 361.835938 257 361.070312 254.851562 362.265625 Z M 254.851562 362.265625 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(90.196078%,90.196078%,90.196078%);fill-opacity:1;' d='M 119.25 363.976562 L 93.53125 409.933594 C 92.332031 412.082031 93.097656 414.796875 95.246094 415.996094 C 97.394531 417.199219 100.109375 416.433594 101.308594 414.285156 L 127.027344 368.332031 C 128.230469 366.183594 127.464844 363.46875 125.316406 362.265625 C 123.167969 361.0625 120.453125 361.828125 119.25 363.976562 Z M 119.25 363.976562 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(90.196078%,90.196078%,90.196078%);fill-opacity:1;' d='M 297.835938 412.28125 C 297.835938 419.886719 291.671875 426.054688 284.066406 426.054688 C 276.460938 426.054688 270.292969 419.886719 270.292969 412.28125 C 270.292969 404.675781 276.460938 398.507812 284.066406 398.507812 C 291.671875 398.507812 297.835938 404.675781 297.835938 412.28125 Z M 297.835938 412.28125 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(90.196078%,90.196078%,90.196078%);fill-opacity:1;' d='M 307.558594 59.847656 C 307.558594 67.453125 301.394531 73.617188 293.789062 73.617188 C 286.179688 73.617188 280.015625 67.453125 280.015625 59.847656 C 280.015625 52.238281 286.179688 46.074219 293.789062 46.074219 C 301.394531 46.074219 307.558594 52.238281 307.558594 59.847656 Z M 307.558594 59.847656 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(90.196078%,90.196078%,90.196078%);fill-opacity:1;' d='M 203.046875 27.4375 C 203.046875 35.042969 196.878906 41.210938 189.273438 41.210938 C 181.664062 41.210938 175.5 35.042969 175.5 27.4375 C 175.5 19.832031 181.664062 13.664062 189.273438 13.664062 C 196.878906 13.664062 203.046875 19.832031 203.046875 27.4375 Z M 203.046875 27.4375 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(90.196078%,90.196078%,90.196078%);fill-opacity:1;' d='M 103.394531 58.226562 C 103.394531 65.832031 97.226562 72 89.621094 72 C 82.011719 72 75.847656 65.832031 75.847656 58.226562 C 75.847656 50.617188 82.011719 44.453125 89.621094 44.453125 C 97.226562 44.453125 103.394531 50.617188 103.394531 58.226562 Z M 103.394531 58.226562 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(90.196078%,90.196078%,90.196078%);fill-opacity:1;' d='M 112.304688 412.28125 C 112.304688 419.886719 106.140625 426.054688 98.53125 426.054688 C 90.925781 426.054688 84.757812 419.886719 84.757812 412.28125 C 84.757812 404.675781 90.925781 398.507812 98.53125 398.507812 C 106.140625 398.507812 112.304688 404.675781 112.304688 412.28125 Z M 112.304688 412.28125 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(100%,71.764706%,71.764706%);fill-opacity:1;' d='M 273.261719 289 C 275.3125 292.214844 279.578125 293.15625 282.789062 291.101562 C 283.132812 290.886719 283.457031 290.636719 283.753906 290.359375 L 305.363281 301.941406 L 304.207031 289.253906 L 283.859375 280.199219 C 281.082031 277.5625 276.691406 277.675781 274.054688 280.453125 C 271.847656 282.777344 271.519531 286.3125 273.261719 289 Z M 273.261719 289 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(24.705882%,23.921569%,33.72549%);fill-opacity:1;' d='M 289.007812 293.429688 L 297.476562 281.738281 L 338.28125 301.027344 L 389.050781 291.5 C 398.492188 289.730469 407.582031 295.949219 409.355469 305.390625 C 409.550781 306.4375 409.652344 307.5 409.65625 308.566406 C 409.660156 318.167969 401.894531 325.964844 392.289062 325.992188 L 334.105469 326.101562 Z M 289.007812 293.429688 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(100%,71.764706%,71.764706%);fill-opacity:1;' d='M 275.964844 495.351562 L 267.394531 491.253906 L 279.164062 455.4375 L 291.8125 461.484375 Z M 275.964844 495.351562 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(100%,71.764706%,71.764706%);fill-opacity:1;' d='M 333.414062 489.578125 C 332.789062 489.96875 332.164062 490.351562 331.535156 490.734375 C 330.285156 491.503906 329.015625 492.257812 327.753906 493 C 327.117188 493.375 326.472656 493.746094 325.839844 494.109375 L 325.839844 494.128906 L 325.800781 494.132812 L 325.789062 494.140625 L 324.820312 494.378906 L 323.429688 490.703125 L 322.789062 489.011719 L 321.878906 486.613281 L 320.21875 482.226562 L 311.46875 459.128906 L 325.070312 455.769531 L 325.582031 457.855469 L 325.589844 457.855469 L 325.839844 458.886719 L 330.589844 478.160156 L 331.5625 482.101562 L 331.59375 482.21875 L 332.175781 484.574219 L 332.679688 486.613281 L 333.242188 488.894531 Z M 333.414062 489.578125 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(18.431373%,18.039216%,25.490196%);fill-opacity:1;' d='M 414.550781 408.457031 C 413.6875 409.839844 412.804688 411.21875 411.917969 412.585938 C 410.269531 415.128906 408.574219 417.632812 406.839844 420.101562 C 406.839844 420.109375 406.832031 420.109375 406.828125 420.113281 C 405.8125 421.054688 404.695312 421.871094 403.492188 422.550781 C 403.441406 422.585938 403.386719 422.613281 403.335938 422.644531 C 402.449219 423.132812 401.507812 423.511719 400.527344 423.773438 C 400.175781 423.859375 399.816406 423.949219 399.460938 424.035156 C 398.191406 424.339844 396.933594 424.59375 395.679688 424.824219 C 393.453125 425.21875 391.25 425.503906 389.058594 425.679688 C 388.882812 425.695312 388.707031 425.710938 388.53125 425.722656 C 379.523438 426.382812 370.753906 425.320312 361.605469 423.574219 C 357.085938 422.722656 352.472656 421.695312 347.695312 420.632812 C 346.132812 420.277344 344.566406 419.929688 342.980469 419.585938 C 342.859375 419.5625 342.734375 419.53125 342.605469 419.503906 C 340.34375 419.007812 338.039062 418.515625 335.675781 418.03125 C 332.707031 417.421875 329.640625 416.828125 326.457031 416.265625 L 326.683594 420.757812 C 326.875 424.207031 327.589844 427.609375 328.8125 430.847656 C 330.171875 434.824219 331.246094 437.96875 328.976562 444.523438 L 327.878906 447.695312 C 329.03125 450.890625 328.617188 454.4375 326.765625 457.28125 L 326.546875 457.613281 L 335.675781 480.722656 L 336.269531 482.21875 L 331.59375 482.21875 L 325.839844 482.222656 L 316.09375 482.222656 L 302.023438 454 L 301.351562 452.65625 L 301.351562 452.585938 L 302.804688 398.347656 C 302.824219 397.871094 302.863281 397.386719 302.925781 396.90625 C 303.441406 392.515625 305.703125 388.515625 309.199219 385.804688 C 312.550781 383.1875 316.808594 382.023438 321.027344 382.570312 L 325.839844 383.191406 L 335.675781 384.464844 L 342.605469 385.363281 L 342.746094 385.382812 L 363.183594 388.027344 L 364.652344 382.046875 L 364.921875 381.945312 L 373.527344 378.792969 L 403.285156 367.882812 L 403.359375 367.859375 L 405.316406 367.140625 L 405.550781 367.519531 C 405.617188 367.632812 405.6875 367.746094 405.75 367.859375 C 407.6875 371.328125 409.261719 374.984375 410.453125 378.773438 C 412.457031 384.960938 414.105469 391.261719 415.394531 397.636719 C 415.449219 397.914062 415.5 398.164062 415.546875 398.394531 L 415.5625 398.460938 C 415.582031 398.570312 415.59375 398.636719 415.601562 398.65625 C 416.289062 401.515625 415.808594 405 414.550781 408.457031 Z M 414.550781 408.457031 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(18.431373%,18.039216%,25.490196%);fill-opacity:1;' d='M 415.808594 388.46875 C 415.710938 388.066406 415.589844 387.65625 415.464844 387.261719 C 414.46875 384.257812 413.304688 381.3125 411.980469 378.4375 C 410.496094 375.164062 408.710938 371.660156 406.589844 367.863281 C 405.566406 366.023438 404.460938 364.113281 403.28125 362.128906 C 402.6875 361.132812 402.074219 360.121094 401.4375 359.089844 C 401.414062 359.039062 401.386719 358.992188 401.355469 358.949219 L 401.171875 358.648438 L 371.730469 362.589844 L 360.761719 364.054688 L 360.109375 369.519531 L 359.953125 370.871094 C 359.945312 370.871094 359.945312 370.871094 359.953125 370.875 L 359.511719 374.566406 L 359.511719 374.570312 L 358.925781 379.441406 L 358.875 379.4375 L 342.605469 377.328125 L 325.839844 375.15625 L 316.832031 373.992188 C 312.613281 373.441406 308.355469 374.609375 305.003906 377.226562 C 301.507812 379.9375 299.25 383.9375 298.730469 388.332031 C 298.671875 388.773438 298.632812 389.226562 298.613281 389.671875 L 290.117188 409.804688 C 285.035156 421.847656 281.796875 434.589844 280.511719 447.597656 L 274.285156 467.519531 L 275.167969 467.601562 L 288.375 468.828125 L 291.863281 469.15625 L 299.539062 457.945312 C 300.417969 456.667969 301.246094 455.351562 302.023438 454.003906 C 303.296875 451.804688 304.429688 449.523438 305.414062 447.183594 L 322.023438 407.652344 C 323.308594 407.875 324.578125 408.082031 325.839844 408.285156 C 331.660156 409.226562 337.25 410 342.605469 410.59375 C 360.023438 412.539062 375.101562 412.691406 388.527344 411.039062 C 392.296875 410.582031 395.941406 409.976562 399.460938 409.226562 C 400.75 408.957031 402.023438 408.664062 403.28125 408.351562 C 403.578125 408.285156 403.867188 408.214844 404.15625 408.136719 C 409.441406 406.777344 413.671875 402.820312 415.390625 397.640625 C 416.398438 394.6875 416.542969 391.503906 415.808594 388.46875 Z M 415.808594 388.46875 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(18.431373%,18.039216%,25.490196%);fill-opacity:1;' d='M 278.703125 489.503906 L 269.429688 485.058594 L 267.976562 484.363281 L 265.652344 490.0625 L 249.441406 493.632812 C 247.363281 494.089844 246.050781 496.136719 246.507812 498.214844 C 246.777344 499.449219 247.640625 500.472656 248.8125 500.953125 L 264.652344 507.417969 L 269.683594 502.890625 L 268.449219 508.964844 L 274.414062 511.402344 L 280.953125 490.585938 Z M 278.703125 489.503906 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(18.431373%,18.039216%,25.490196%);fill-opacity:1;' d='M 335.675781 480.71875 L 336.269531 482.21875 L 335.675781 482.21875 Z M 335.675781 480.71875 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(18.431373%,18.039216%,25.490196%);fill-opacity:1;' d='M 332.449219 482.539062 L 322.734375 485.90625 L 321.210938 486.429688 L 323.570312 492.117188 L 314.5625 506.0625 C 313.40625 507.84375 313.917969 510.226562 315.703125 511.382812 C 316.761719 512.070312 318.097656 512.191406 319.265625 511.707031 L 335.070312 505.152344 L 335.460938 498.398438 L 338.859375 503.582031 L 344.8125 501.113281 L 334.8125 481.722656 Z M 332.449219 482.539062 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(24.705882%,23.921569%,33.72549%);fill-opacity:1;' d='M 413.382812 397.589844 C 412.804688 397.585938 412.238281 397.445312 411.726562 397.175781 L 360.464844 370.390625 L 359.871094 367.964844 L 358.753906 360.292969 L 358.773438 360.222656 L 363.644531 337.742188 C 363.558594 337.550781 363.371094 337.234375 363.160156 336.875 C 360.984375 333.1875 354.359375 321.960938 367 306.507812 L 389.195312 280.632812 L 408.246094 279.8125 L 408.464844 280.085938 C 418.808594 293.070312 421.972656 310.371094 416.898438 326.175781 L 414.914062 362 L 417.042969 369.234375 C 418.285156 373.488281 418.078125 378.03125 416.457031 382.152344 L 416.945312 393.867188 C 417.023438 395.84375 415.484375 397.507812 413.511719 397.585938 C 413.46875 397.585938 413.425781 397.589844 413.382812 397.589844 Z M 413.382812 397.589844 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(100%,71.764706%,71.764706%);fill-opacity:1;' d='M 368.914062 427.132812 C 372.195312 425.195312 373.285156 420.964844 371.347656 417.683594 C 371.140625 417.332031 370.902344 417.003906 370.636719 416.695312 L 382.964844 395.496094 L 370.242188 396.214844 L 360.488281 416.234375 C 357.753906 418.917969 357.714844 423.308594 360.398438 426.042969 C 362.644531 428.328125 366.164062 428.78125 368.914062 427.132812 Z M 368.914062 427.132812 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(24.705882%,23.921569%,33.72549%);fill-opacity:1;' d='M 373.890625 411.546875 L 362.5 402.675781 L 383.195312 362.570312 L 375.441406 311.5 C 374 302 380.527344 293.132812 390.027344 291.6875 C 391.082031 291.53125 392.144531 291.46875 393.210938 291.5 C 402.808594 291.828125 410.332031 299.863281 410.023438 309.460938 L 408.109375 367.613281 Z M 373.890625 411.546875 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(18.431373%,18.039216%,25.490196%);fill-opacity:1;' d='M 376.976562 269.878906 L 376.976562 251.027344 C 376.96875 237.078125 388.269531 225.761719 402.222656 225.753906 C 416.171875 225.742188 427.488281 237.042969 427.496094 250.996094 L 427.496094 251.027344 C 431.949219 260.304688 429.164062 264.714844 427.496094 269.878906 C 427.492188 271.75 425.976562 273.269531 424.101562 273.269531 L 380.371094 273.269531 C 378.496094 273.269531 376.980469 271.753906 376.976562 269.878906 Z M 376.976562 269.878906 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(100%,71.764706%,71.764706%);fill-opacity:1;' d='M 412.863281 253.136719 C 412.863281 263.582031 404.394531 272.046875 393.953125 272.046875 C 383.511719 272.046875 375.046875 263.582031 375.046875 253.136719 C 375.046875 242.695312 383.511719 234.230469 393.953125 234.230469 C 404.394531 234.230469 412.863281 242.695312 412.863281 253.136719 Z M 412.863281 253.136719 '/>
                <path style=' stroke:none;fill-rule:nonzero;fill:rgb(18.431373%,18.039216%,25.490196%);fill-opacity:1;' d='M 413.742188 258.09375 C 413.570312 258.070312 413.398438 258.03125 413.226562 258.003906 C 410.277344 257.480469 407.328125 256.96875 404.386719 256.4375 L 404.117188 249.769531 L 400.554688 255.742188 C 392.429688 258.4375 384.824219 256.914062 377.675781 253.546875 C 375.316406 252.429688 373.027344 251.167969 370.820312 249.769531 C 372.035156 242.304688 376.558594 235.785156 383.128906 232.039062 C 383.398438 231.886719 383.664062 231.75 383.933594 231.613281 C 383.9375 231.613281 383.941406 231.609375 383.941406 231.605469 C 384.402344 231.386719 384.871094 231.179688 385.339844 230.992188 C 392.835938 228.0625 401.34375 229.714844 407.203125 235.230469 C 412.976562 240.742188 415.574219 249.84375 413.742188 258.09375 Z M 413.742188 258.09375 '/>
                </g>
                </svg>"
                )
              Height: =48
              Width: =48
              X: =14
              Y: =28

コピーできたら、Screen1上で 右クリック > 貼り付け > コードを貼り付ける(プレビュー)を選択します。

コードの貼り付け

Screen2~Screen5についても同様にコードを貼り付けます。

Screen2~Screen5にもコードを貼り付け

この状態で編集画面右上のアプリのプレビューボタンを押すと、

アプリのプレビューボタンを押す

サイドメニューが正常に動作していることが確認できます。

完成イメージ(サイドメニュー)

メニュー名・アイコン・遷移先画面を変更したい場合は、App > OnStartプロパティのコレクションを変更してください。

サイドメニューのカスタマイズ

仕組み

アイコン・メニュー名の表示について

サイドメニューには垂直ギャラリーコントロールを利用しており、App > OnStartプロパティで作成したコレクションと連携しています。
アイコンとメニュー名は下記のように対応しています。

コレクションとアイコン・メニュー名の対応表

各メニュー選択時の画面遷移について

各メニューを選択した際、screenで指定した画面に遷移するよう設定しています。

クリック時の遷移先設定

サイドメニューの展開/折りたたみについて

折りたたみ/展開アイコンが押されると、
変数の値がtrue/falseに切り替わる→それによってサイドメニューの幅(width)が決定される
という仕組みです。

展開時の幅設定

まとめ

今回の記事では、サイドメニュー(サイドバー)をコピペで実装する方法について紹介しました。

今回のサイドメニュー以外にも、コピペで簡単に実装できるアプリ・フローを以下にまとめています。
ぜひあわせてご活用ください。

スポンサーリンク
Hiromaru

普段からPower Platform・SharePointの技術を広めています!
デザインに力を入れて、見やすい・分かりやすい記事を投稿していきます

Hiromaruをフォローする
シェアする
Hiromaruをフォローする
タイトルとURLをコピーしました