0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

Power Appsで色選択ツール

Posted at

完成形

image.png
ドロップダウンでカラーセットを選択してスライダーで透過率調整、クリックするとコンテキスト変数にR,G,B,Aの各値が格納される。
いろんなNPO法人があるんですね。

カラーセット

一つずつ頑張って抽出。ChatGPTさんの手も借りながら。

コードはこちら
ClearCollect(ColorCollection,
    {Crow: 1, Ccol: 1, R: 255, G: 255, B: 255, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 1, R: 242, G: 242, B: 242, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 1, R: 216, G: 216, B: 216, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 1, R: 191, G: 191, B: 191, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 1, R: 165, G: 165, B: 165, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 1, R: 127, G: 127, B: 127, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 2, R: 0, G: 0, B: 0, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 2, R: 127, G: 127, B: 127, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 2, R: 89, G: 89, B: 89, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 2, R: 63, G: 63, B: 63, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 2, R: 38, G: 38, B: 38, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 2, R: 13, G: 13, B: 13, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 3, R: 238, G: 236, B: 225, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 3, R: 221, G: 217, B: 195, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 3, R: 196, G: 189, B: 151, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 3, R: 147, G: 137, B: 83, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 3, R: 73, G: 68, B: 41, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 3, R: 29, G: 27, B: 16, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 4, R: 31, G: 73, B: 125, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 4, R: 198, G: 217, B: 240, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 4, R: 141, G: 179, B: 226, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 4, R: 84, G: 141, B: 212, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 4, R: 23, G: 54, B: 93, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 4, R: 15, G: 36, B: 62, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 5, R: 79, G: 129, B: 189, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 5, R: 219, G: 229, B: 241, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 5, R: 184, G: 204, B: 228, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 5, R: 149, G: 179, B: 215, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 5, R: 54, G: 96, B: 146, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 5, R: 36, G: 64, B: 97, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 6, R: 192, G: 80, B: 77, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 6, R: 242, G: 220, B: 219, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 6, R: 229, G: 185, B: 183, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 6, R: 217, G: 150, B: 148, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 6, R: 149, G: 55, B: 52, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 6, R: 99, G: 36, B: 35, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 7, R: 155, G: 187, B: 89, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 7, R: 235, G: 241, B: 221, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 7, R: 215, G: 227, B: 188, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 7, R: 195, G: 214, B: 155, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 7, R: 118, G: 146, B: 60, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 7, R: 79, G: 97, B: 40, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 8, R: 128, G: 100, B: 162, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 8, R: 229, G: 224, B: 236, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 8, R: 204, G: 193, B: 217, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 8, R: 178, G: 161, B: 199, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 8, R: 95, G: 73, B: 122, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 8, R: 63, G: 49, B: 81, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 9, R: 75, G: 172, B: 198, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 9, R: 219, G: 238, B: 243, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 9, R: 183, G: 221, B: 232, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 9, R: 146, G: 205, B: 220, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 9, R: 49, G: 133, B: 155, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 9, R: 32, G: 88, B: 103, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 10, R: 247, G: 150, B: 70, ColorSet: "Office2007-2010"},
    {Crow: 2, Ccol: 10, R: 253, G: 234, B: 218, ColorSet: "Office2007-2010"},
    {Crow: 3, Ccol: 10, R: 251, G: 213, B: 181, ColorSet: "Office2007-2010"},
    {Crow: 4, Ccol: 10, R: 250, G: 192, B: 143, ColorSet: "Office2007-2010"},
    {Crow: 5, Ccol: 10, R: 227, G: 108, B: 9, ColorSet: "Office2007-2010"},
    {Crow: 6, Ccol: 10, R: 151, G: 72, B: 6, ColorSet: "Office2007-2010"},
    {Crow: 1, Ccol: 1, R: 255, G: 75, B: 0, ColorSet: "CUDO"},
    {Crow: 1, Ccol: 2, R: 255, G: 241, B: 0, ColorSet: "CUDO"},
    {Crow: 1, Ccol: 3, R: 3, G: 175, B: 122, ColorSet: "CUDO"},
    {Crow: 1, Ccol: 4, R: 0, G: 90, B: 255, ColorSet: "CUDO"},
    {Crow: 1, Ccol: 5, R: 77, G: 196, B: 255, ColorSet: "CUDO"},
    {Crow: 1, Ccol: 6, R: 255, G: 128, B: 130, ColorSet: "CUDO"},
    {Crow: 1, Ccol: 7, R: 246, G: 170, B: 0, ColorSet: "CUDO"},
    {Crow: 1, Ccol: 8, R: 153, G: 0, B: 153, ColorSet: "CUDO"},
    {Crow: 1, Ccol: 9, R: 128, G: 64, B: 0, ColorSet: "CUDO"},
    {Crow: 2, Ccol: 1, R: 255, G: 202, B: 191, ColorSet: "CUDO"},
    {Crow: 2, Ccol: 2, R: 255, G: 255, B: 128, ColorSet: "CUDO"},
    {Crow: 2, Ccol: 3, R: 216, G: 242, B: 85, ColorSet: "CUDO"},
    {Crow: 2, Ccol: 4, R: 191, G: 228, B: 255, ColorSet: "CUDO"},
    {Crow: 2, Ccol: 5, R: 255, G: 202, B: 128, ColorSet: "CUDO"},
    {Crow: 2, Ccol: 6, R: 119, G: 217, B: 168, ColorSet: "CUDO"},
    {Crow: 2, Ccol: 7, R: 201, G: 172, B: 230, ColorSet: "CUDO"},
    {Crow: 3, Ccol: 1, R: 255, G: 255, B: 255, ColorSet: "CUDO"},
    {Crow: 3, Ccol: 2, R: 200, G: 200, B: 203, ColorSet: "CUDO"},
    {Crow: 3, Ccol: 3, R: 132, G: 145, B: 158, ColorSet: "CUDO"},
    {Crow: 3, Ccol: 4, R: 0, G: 0, B: 0, ColorSet: "CUDO"}
)

コピペ用コード

- ContainerColorPicker:
    Control: GroupContainer
    Variant: manualLayoutContainer
    Properties:
      DropShadow: =DropShadow.Bold
      Fill: =Color.Snow
      Height: =262
      Width: =308
      X: =55
      Y: =45
    Children:
    - GalleryColorPicker:
        Control: Gallery
        Variant: BrowseLayout_Vertical_OneTextVariant_ver5.0
        Properties:
          Items: =Sequence(6,1,1)
          BorderStyle: =BorderStyle.None
          DelayItemLoading: =true
          Height: =195
          Layout: =Layout.Vertical
          LoadingSpinner: =LoadingSpinner.Data
          TemplatePadding: =0
          TemplateSize: =Self.Height/Self.AllItemsCount
          Width: =290
          X: =10
          Y: =57
        Children:
        - LabelRow:
            Control: Label
            Properties:
              Text: =ThisItem.Value
              Height: =32.5
              Visible: =false
        - GalleryColorRecord:
            Control: Gallery
            Variant: BrowseLayout_Horizontal_TwoTextOneImageVariant_ver5.0
            Properties:
              Items: =Sequence(10,1,1)
              DelayItemLoading: =true
              Height: =Parent.TemplateHeight
              LoadingSpinner: =LoadingSpinner.Data
              TemplatePadding: =0
              TemplateSize: =Self.Width/Self.AllItemsCount
              Width: =Parent.TemplateWidth
            Children:
            - ButtonColor:
                Control: Classic/Button
                Properties:
                  OnSelect: |-
                    =With(
                        {rec:LookUp(ColorCollection,Crow=Value(LabelRow.Text)&&Ccol=ThisItem.Value&&ColorSet=DropdownColorSet.Selected.Value)},
                        UpdateContext({_pickR:rec.R,_pickG:rec.G,_pickB:rec.B,_pickAlpha:SliderAlpha.Value/100})
                    )
                  Text: =
                  BorderThickness: =1
                  Fill: |-
                    =With(
                        {rec:LookUp(ColorCollection,Crow=Value(LabelRow.Text)&&Ccol=ThisItem.Value&&ColorSet=DropdownColorSet.Selected.Value)},
                        RGBA(rec.R,rec.G,rec.B,SliderAlpha.Value/100)
                    )
                  Height: =Parent.TemplateHeight-6
                  HoverFill: =ColorFade(Self.Fill, 10%)
                  PressedFill: =ColorFade(Self.Fill,-10%)
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                  Visible: =!IsBlank(LookUp(ColorCollection,Crow=Value(LabelRow.Text)&&Ccol=ThisItem.Value&&ColorSet=DropdownColorSet.Selected.Value))
                  Width: =Parent.TemplateWidth-6
                  X: =3
                  Y: =3
    - SliderAlpha:
        Control: Classic/Slider
        Properties:
          Default: =100
          BorderStyle: =BorderStyle.None
          HandleSize: =18
          Height: =32
          Width: =104
          X: =193
          Y: =10
    - DropdownColorSet:
        Control: Classic/DropDown
        Properties:
          Items: =Distinct(ColorCollection,ColorSet)
          Height: =32
          Size: =12
          Width: =172
          X: =10
          Y: =10

0
0
0

Register as a new user and use Qiita more conveniently

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

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?