Forem: Ana Andrade Gonsalves

Power Apps Design: Relógio Moderno Personalizado + Tela Completa

Ana Andrade Gonsalves — Tue, 17 Mar 2026 20:15:00 +0000

Esse código cria uma tela de agendamento no Power Apps.
Ela é dividida em 3 partes:

Cabeçalho: botão de voltar, título da tela e botão de home.
Conteúdo principal: mostra o serviço, permite escolher a data e depois o horário.
Rodapé: exibe o resumo da data/hora escolhida e o botão para confirmar.

Na parte de data, a galeria mostra os dias da semana e o usuário pode selecionar um dia.
Na parte de horário, há um relógio visual e controles para escolher hora, minuto e AM/PM.

- scr_BookAppointment:
    Control: GroupContainer@1.5.0
    Variant: AutoLayout
    Properties:
      DropShadow: =DropShadow.None
      Fill: =App.Theme.Colors.Lighter80
      Height: =Parent.Height
      LayoutAlignItems: =LayoutAlignItems.Stretch
      LayoutDirection: =LayoutDirection.Vertical
      RadiusBottomLeft: =0
      RadiusBottomRight: =0
      RadiusTopLeft: =0
      RadiusTopRight: =0
      Width: =Parent.Width
    Children:
      - ctn_Header:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =75
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Horizontal
            LayoutMinHeight: =16
            LayoutMinWidth: =16
            PaddingBottom: =8
            PaddingLeft: =8
            PaddingRight: =8
            PaddingTop: =8
            RadiusBottomLeft: =0
            RadiusBottomRight: =0
            RadiusTopLeft: =0
            RadiusTopRight: =0
          Children:
            - btn_Voltar:
                Control: Button@0.0.45
                Properties:
                  Appearance: ='ButtonCanvas.Appearance'.Secondary
                  BorderRadius: =100
                  Height: =40
                  Icon: ="ChevronLeft"
                  LayoutMinHeight: =16
                  LayoutMinWidth: =16
                  OnSelect: =Back()
                  Text: =
                  Width: =40
            - lbl_TituloPagina:
                Control: Label@2.5.1
                Properties:
                  Align: =Align.Center
                  BorderColor: =RGBA(0, 0, 0, 0)
                  BorderStyle: =BorderStyle.None
                  BorderThickness: =2
                  Color: =RGBA(50, 49, 48, 1)
                  DisabledBorderColor: =RGBA(0, 0, 0, 0)
                  DisabledColor: =RGBA(161, 159, 157, 1)
                  FillPortions: =1
                  FocusedBorderThickness: =4
                  Font: =Font.'Segoe UI'
                  FontWeight: =FontWeight.Bold
                  LayoutMinHeight: =16
                  LayoutMinWidth: =16
                  Text: ="Book Appointment"
            - btn_Home:
                Control: Button@0.0.45
                Properties:
                  Appearance: ='ButtonCanvas.Appearance'.Secondary
                  BorderRadius: =100
                  Height: =40
                  Icon: ="Home"
                  LayoutMinHeight: =16
                  LayoutMinWidth: =16
                  Text: =
                  Width: =40
      - ctn_Main:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            DropShadow: =DropShadow.None
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Vertical
            LayoutGap: =10
            LayoutMinHeight: =16
            LayoutMinWidth: =16
            LayoutOverflowY: =LayoutOverflow.Scroll
            PaddingBottom: =8
            PaddingLeft: =10
            PaddingRight: =10
            PaddingTop: =8
            RadiusBottomLeft: =0
            RadiusBottomRight: =0
            RadiusTopLeft: =0
            RadiusTopRight: =0
          Children:
            - lbl_TituloServico:
                Control: Label@2.5.1
                Properties:
                  AlignInContainer: =AlignInContainer.Stretch
                  BorderColor: =RGBA(0, 0, 0, 0)
                  BorderStyle: =BorderStyle.None
                  BorderThickness: =2
                  Color: =RGBA(50, 49, 48, 1)
                  DisabledBorderColor: =RGBA(0, 0, 0, 0)
                  DisabledColor: =RGBA(161, 159, 157, 1)
                  FocusedBorderThickness: =4
                  Font: =Font.'Segoe UI'
                  FontWeight: =FontWeight.Semibold
                  LayoutMinHeight: =16
                  LayoutMinWidth: =16
                  Text: ="Premium Dental Checkup"
            - ctn_SelecaoData:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Fill: =RGBA(255, 255, 255, 1)
                  FillPortions: =0
                  Height: =240
                  RadiusBottomLeft: =20
                  RadiusBottomRight: =20
                  RadiusTopLeft: =20
                  RadiusTopRight: =20
                  Width: =629
                  X: =8
                  Y: =375
                Children:
                  - gal_DiasSemana:
                      Control: Gallery@2.15.0
                      Variant: Vertical
                      Properties:
                        BorderColor: =RGBA(0, 18, 107, 1)
                        Default: =LookUp(WeekTable, Date = _dateSelected)
                        Height: =176
                        Items: =WeekTable
                        LoadingSpinner: =LoadingSpinner.None
                        ShowNavigation: =true
                        ShowScrollbar: =false
                        TemplatePadding: =0
                        TemplateSize: =176
                        Width: =Parent.Width
                        WrapCount: =5.2
                        Y: =64
                      Children:
                        - lbl_DiaSemana:
                            Control: Label@2.5.1
                            Properties:
                              Align: =Align.Center
                              BorderColor: =RGBA(0, 18, 107, 1)
                              Color: =IfError(ColorValue(LookUp(ColorThemes, Id=1).Cor), App.Theme.Colors.Darker10, ColorValue(LookUp(ColorThemes, Id=1).Cor))
                              Font: ="Century Gothic, CenturyGothic, AppleGothic, sans-serif"
                              FontWeight: =FontWeight.Semibold
                              Height: =31
                              OnSelect: =
                              Size: =If(Screen1.Width < 800, 12, 16)
                              Text: =ThisItem.Day
                              Width: =73
                              Y: =17
                        - html_DiaSelecionado:
                            Control: HtmlViewer@2.1.0
                            Properties:
                              Font: =Font.'Open Sans'
                              Height: =90
                              HtmlText: |-
                                ="<div style='
                                 width: 48px;
                                  height:48px;
                                  margin: 0px;
                                  background: linear-gradient(120deg,#ccc , #3333 ); padding: 5px; border-radius: 100px; text-align: center;'>
                                <a style='color: white;font-family:Calibri Black, sans-serif; font-size: 28px; text-decoration: none;' href='' '></a>
                                </div>"
                              OnSelect: =
                              Visible: =ThisItem.Date = SelectedDate.Date
                              Width: =79
                              X: =9
                              Y: =55
                        - txt_NumeroDia:
                            Control: ModernText@1.0.0
                            Properties:
                              Align: =Align.Center
                              Color: =If(ThisItem.Date = SelectedDate.Date, App.Theme.Colors.PrimaryForeground, If(ThisItem.Date = Today(), App.Theme.Colors.Primary, App.Theme.Colors.Lighter40))
                              Font: ="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif"
                              FontWeight: =FontWeight.Semibold
                              Height: =47
                              OnSelect: =Select(Parent)
                              PaddingBottom: =0
                              PaddingLeft: =0
                              PaddingRight: =0
                              PaddingTop: =0
                              RadiusBottomLeft: =0
                              RadiusBottomRight: =0
                              RadiusTopLeft: =0
                              RadiusTopRight: =0
                              Size: =If(Screen1.Width < 800, 12, 18)
                              Text: =Day(ThisItem.Date)
                              VerticalAlign: =VerticalAlign.Top
                              Width: =77
                              Y: =74
                        - btn_SelecionarDia:
                            Control: Classic/Button@2.2.0
                            Properties:
                              BorderColor: =
                              BorderStyle: =BorderStyle.None
                              BorderThickness: =0
                              Color: =RGBA(255, 255, 255, 1)
                              DisabledBorderColor: =RGBA(166, 166, 166, 1)
                              DisabledColor: =RGBA(0, 0, 0, 0)
                              DisabledFill: =RGBA(0, 0, 0, 0)
                              Fill: =RGBA(0, 0, 0, 0)
                              Font: =Font.'Open Sans'
                              Height: =176
                              HoverBorderColor: =RGBA(0, 0, 0, 0)
                              HoverColor: =RGBA(0, 0, 0, 0)
                              HoverFill: =RGBA(0, 0, 0, 0)
                              OnSelect: =Set(SelectedDate, ThisItem);
                              PressedBorderColor: =RGBA(0, 0, 0, 0)
                              PressedColor: =RGBA(0, 0, 0, 0)
                              PressedFill: =RGBA(0, 0, 0, 0)
                              Text: =
                              Width: =87
                  - lbl_DataHoje:
                      Control: Label@2.5.1
                      Properties:
                        BorderColor: =RGBA(0, 18, 107, 1)
                        Color: =ColorFade(ColorValue(LookUp(ColorThemes, Id=4).Cor), 60%)
                        Font: ="Calibri, Candara, Segoe, Segoe UI, Optima, Arial, sans-serif"
                        Size: =12
                        Text: ="Hoje, " & Text(Today(), DateTimeFormat.LongDate)
                        Width: =450
                        X: =52
                        Y: =188
                  - badge_EtapaData:
                      Control: Badge@0.0.24
                      Properties:
                        Content: ="1"
                        Height: =40
                        Width: =40
                        X: =20
                        Y: =26
                  - lbl_TituloSelecaoData:
                      Control: Label@2.5.1
                      Properties:
                        BorderColor: =RGBA(0, 0, 0, 0)
                        BorderStyle: =BorderStyle.None
                        BorderThickness: =2
                        Color: =RGBA(50, 49, 48, 1)
                        DisabledBorderColor: =RGBA(0, 0, 0, 0)
                        DisabledColor: =RGBA(161, 159, 157, 1)
                        FocusedBorderThickness: =4
                        Font: =Font.'Segoe UI'
                        FontWeight: =FontWeight.Semibold
                        Height: =28
                        Text: ="Select Date"
                        Width: =271
                        X: =68
                        Y: =32
                  - btn_CarregarCalendario:
                      Control: Button@0.0.45
                      Properties:
                        Appearance: ='ButtonCanvas.Appearance'.Secondary
                        BorderRadius: =100
                        FontColor: =App.Theme.Colors.Primary
                        Icon: ="Calendar"
                        OnSelect: |-
                          =Set(_dateSelected, Today());

                          Set(_firstDayOfMonth, DateAdd(Today(), 1 - Day(Today()), TimeUnit.Days));
                          Set(_firstDayInView, DateAdd(_firstDayOfMonth, -(Weekday(_firstDayOfMonth) - 2 + 1), TimeUnit.Days));
                          Set(_lastDayOfMonth, DateAdd(DateAdd(_firstDayOfMonth, 1, TimeUnit.Months), -1, TimeUnit.Days));
                          If(Weekday(Today(), StartOfWeek.Sunday) = 7, Today(), DateAdd(Today(), 7 - Weekday(Today(), StartOfWeek.Sunday), TimeUnit.Days));
                          Set(
                              _firstDayOfWeekend,
                              DateAdd(
                                  Today(),
                                  7 - Weekday(Today(), StartOfWeek.Sunday),
                                  TimeUnit.Days
                              )
                          );
                          ClearCollect(
                              WeekTable,
                              ForAll(
                                  Sequence(5, 0, 1),
                                  {
                                      Day: Switch(Value, 0, "Mon", 1, "Tue", 2, "Wed", 3, "Thu", 4, "Fri", 5),
                                      Date: DateAdd(Today(), -(Weekday(Today(), StartOfWeek.Sunday) - 1) + Value, TimeUnit.Days)
                                  }
                              )
                          );
                          ClearCollect(
                              ColorThemes,
                              { Id: 1, Cor: "#2F2F4A" },
                              { Id: 2, Cor: "#5B5FC7" },
                              { Id: 3, Cor: "#7F85F5" },
                              { Id: 4, Cor: "#181820" },
                              { Id: 5, Cor: "#E8EBFA" },
                              { Id: 6, Cor: "#EEEEEE" }
                          );
                          Set(SelectedDate, LookUp(WeekTable, Date = _dateSelected))
                        Text: =
                        Width: =32
                        X: =20
                        Y: =192
            - ctn_SelecaoHorario:
                Control: GroupContainer@1.5.0
                Variant: ManualLayout
                Properties:
                  DropShadow: =DropShadow.None
                  Fill: =App.Theme.Colors.PrimaryForeground
                  Height: =540
                  LayoutMinHeight: =500
                  RadiusBottomLeft: =10
                  RadiusBottomRight: =10
                  RadiusTopLeft: =10
                  RadiusTopRight: =10
                  Width: =380
                  X: =198
                  Y: =64
                Children:
                  - html_RelogioDinamico:
                      Control: HtmlViewer@2.1.0
                      Properties:
                        Font: =Font.'Open Sans'
                        Height: =315
                        HtmlText: |-
                          ="
                          <div style='width:100%; aspect-ratio:1/1; border-radius:50%; background:#f2f2f2; position:relative; margin:auto; max-width:300px;'>

                              <div style='width:0.2%; height:34%; background:#4e3b7a; position:absolute; top:15%; left:49.6%;
                              transform:rotate(" &
                                  If(
                                      varViewHour,
                                      varHour * 30,
                                      varMinute * 6
                                  )
                              & "deg);
                              transform-origin:bottom center;'>
                              </div>

                          </div>"
                        Width: =355
                        X: =(Parent.Width - Self.Width) / 2
                        Y: =149
                  - ctn_RelogioNumeros:
                      Control: GroupContainer@1.5.0
                      Variant: AutoLayout
                      Properties:
                        DropShadow: =DropShadow.None
                        Height: =Self.Width
                        LayoutAlignItems: =LayoutAlignItems.Center
                        LayoutDirection: =LayoutDirection.Vertical
                        RadiusBottomLeft: =300
                        RadiusBottomRight: =300
                        RadiusTopLeft: =Self.Width
                        RadiusTopRight: =300
                        Width: =300
                        X: =(Parent.Width - Self.Width) / 2
                        Y: =149
                      Children:
                        - ctn_LinhaRelogio_12:
                            Control: GroupContainer@1.5.0
                            Variant: AutoLayout
                            Properties:
                              DropShadow: =DropShadow.None
                              FillPortions: =0
                              Height: =Parent.Height / 7
                              LayoutAlignItems: =LayoutAlignItems.End
                              LayoutDirection: =LayoutDirection.Horizontal
                              LayoutJustifyContent: =LayoutJustifyContent.Center
                              LayoutMaxHeight: =
                              LayoutMaxWidth: =
                              LayoutMinWidth: =100
                              RadiusBottomLeft: =0
                              RadiusBottomRight: =0
                              RadiusTopLeft: =0
                              RadiusTopRight: =0
                              Width: =300
                              X: =60
                              Y: =424
                            Children:
                              - btn_Relogio_12_00:
                                  Control: Button@0.0.45
                                  Properties:
                                    Appearance: ='ButtonCanvas.Appearance'.Transparent
                                    BorderRadius: =100
                                    FontColor: =IfError(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, IfError(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, If(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, App.Theme.Colors.Primary)))
                                    LayoutMaxHeight: =
                                    LayoutMaxWidth: =
                                    OnSelect: =If(varViewHour, Set(varHour, Value(Self.Text)), Set(varMinute, Value(Self.Text)))
                                    Text: =If(varViewHour, "12", "00")
                                    Width: =32
                                    X: =(Parent.Width - Self.Width) / 2
                        - ctn_LinhaRelogio_11_01:
                            Control: GroupContainer@1.5.0
                            Variant: AutoLayout
                            Properties:
                              DropShadow: =DropShadow.None
                              FillPortions: =0
                              Height: =Parent.Height / 7
                              LayoutDirection: =LayoutDirection.Horizontal
                              LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween
                              LayoutMaxHeight: =
                              LayoutMaxWidth: =
                              LayoutMinWidth: =100
                              PaddingLeft: =Self.Width * 20%
                              PaddingRight: =Self.PaddingLeft
                              RadiusBottomLeft: =0
                              RadiusBottomRight: =0
                              RadiusTopLeft: =0
                              RadiusTopRight: =0
                              Width: =300
                              X: =60
                              Y: =424
                            Children:
                              - btn_Relogio_11_55:
                                  Control: Button@0.0.45
                                  Properties:
                                    Appearance: ='ButtonCanvas.Appearance'.Transparent
                                    BorderRadius: =100
                                    FontColor: =IfError(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, If(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, App.Theme.Colors.Primary))
                                    LayoutMaxHeight: =
                                    LayoutMaxWidth: =
                                    OnSelect: =If(varViewHour, Set(varHour, Value(Self.Text)), Set(varMinute, Value(Self.Text)))
                                    Text: =If(varViewHour, "11", "55")
                                    Width: =32
                                    X: =(Parent.Width - Self.Width) / 2
                              - btn_Relogio_01_05:
                                  Control: Button@0.0.45
                                  Properties:
                                    Appearance: ='ButtonCanvas.Appearance'.Transparent
                                    BorderRadius: =100
                                    FontColor: =IfError(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, If(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, App.Theme.Colors.Primary))
                                    LayoutMaxHeight: =
                                    LayoutMaxWidth: =
                                    OnSelect: =If(varViewHour, Set(varHour, Value(Self.Text)), Set(varMinute, Value(Self.Text)))
                                    Text: =If(varViewHour, "1", "05")
                                    Width: =32
                                    X: =(Parent.Width - Self.Width) / 2
                        - ctn_LinhaRelogio_10_02:
                            Control: GroupContainer@1.5.0
                            Variant: AutoLayout
                            Properties:
                              DropShadow: =DropShadow.None
                              FillPortions: =0
                              Height: =Parent.Height / 7
                              LayoutDirection: =LayoutDirection.Horizontal
                              LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween
                              LayoutMaxHeight: =
                              LayoutMaxWidth: =
                              LayoutMinWidth: =100
                              PaddingLeft: =Self.Width * 8%
                              PaddingRight: =Self.PaddingLeft
                              RadiusBottomLeft: =0
                              RadiusBottomRight: =0
                              RadiusTopLeft: =0
                              RadiusTopRight: =0
                              Width: =300
                              X: =60
                              Y: =424
                            Children:
                              - btn_Relogio_10_50:
                                  Control: Button@0.0.45
                                  Properties:
                                    Appearance: ='ButtonCanvas.Appearance'.Transparent
                                    BorderRadius: =100
                                    FontColor: =IfError(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, If(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, App.Theme.Colors.Primary))
                                    LayoutMaxHeight: =
                                    LayoutMaxWidth: =
                                    OnSelect: =If(varViewHour, Set(varHour, Value(Self.Text)), Set(varMinute, Value(Self.Text)))
                                    Text: =If(varViewHour, "10", "50")
                                    Width: =32
                                    X: =(Parent.Width - Self.Width) / 2
                              - btn_Relogio_02_10:
                                  Control: Button@0.0.45
                                  Properties:
                                    Appearance: ='ButtonCanvas.Appearance'.Transparent
                                    BorderRadius: =100
                                    FontColor: =IfError(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, If(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, App.Theme.Colors.Primary))
                                    LayoutMaxHeight: =
                                    LayoutMaxWidth: =
                                    OnSelect: =If(varViewHour, Set(varHour, Value(Self.Text)), Set(varMinute, Value(Self.Text)))
                                    Text: =If(varViewHour, "2", "10")
                                    Width: =32
                                    X: =(Parent.Width - Self.Width) / 2
                        - ctn_LinhaRelogio_09_03:
                            Control: GroupContainer@1.5.0
                            Variant: AutoLayout
                            Properties:
                              DropShadow: =DropShadow.None
                              FillPortions: =0
                              Height: =Parent.Height / 7 + 2
                              LayoutAlignItems: =LayoutAlignItems.Center
                              LayoutDirection: =LayoutDirection.Horizontal
                              LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween
                              LayoutMaxHeight: =
                              LayoutMaxWidth: =
                              LayoutMinWidth: =100
                              PaddingLeft: =10
                              PaddingRight: =Self.PaddingLeft
                              RadiusBottomLeft: =0
                              RadiusBottomRight: =0
                              RadiusTopLeft: =0
                              RadiusTopRight: =0
                              Width: =300
                              X: =60
                              Y: =424
                            Children:
                              - btn_Relogio_09_45:
                                  Control: Button@0.0.45
                                  Properties:
                                    Appearance: ='ButtonCanvas.Appearance'.Transparent
                                    BorderRadius: =100
                                    FontColor: =IfError(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, If(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, App.Theme.Colors.Primary))
                                    LayoutMaxHeight: =
                                    LayoutMaxWidth: =
                                    OnSelect: =If(varViewHour, Set(varHour, Value(Self.Text)), Set(varMinute, Value(Self.Text)))
                                    Text: =If(varViewHour, "9", "45")
                                    Width: =32
                                    X: =(Parent.Width - Self.Width) / 2
                              - btn_Relogio_03_15:
                                  Control: Button@0.0.45
                                  Properties:
                                    Appearance: ='ButtonCanvas.Appearance'.Transparent
                                    BorderRadius: =100
                                    FontColor: =IfError(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, If(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, App.Theme.Colors.Primary))
                                    LayoutMaxHeight: =
                                    LayoutMaxWidth: =
                                    OnSelect: =If(varViewHour, Set(varHour, Value(Self.Text)), Set(varMinute, Value(Self.Text)))
                                    Text: =If(varViewHour, "3", "15")
                                    Width: =32
                                    X: =(Parent.Width - Self.Width) / 2
                        - ctn_LinhaRelogio_08_04:
                            Control: GroupContainer@1.5.0
                            Variant: AutoLayout
                            Properties:
                              DropShadow: =DropShadow.None
                              FillPortions: =0
                              Height: =Parent.Height / 7
                              LayoutAlignItems: =LayoutAlignItems.End
                              LayoutDirection: =LayoutDirection.Horizontal
                              LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween
                              LayoutMaxHeight: =
                              LayoutMaxWidth: =
                              LayoutMinWidth: =100
                              PaddingLeft: =Self.Width * 8%
                              PaddingRight: =Self.PaddingLeft
                              RadiusBottomLeft: =0
                              RadiusBottomRight: =0
                              RadiusTopLeft: =0
                              RadiusTopRight: =0
                              Width: =300
                              X: =60
                              Y: =424
                            Children:
                              - btn_Relogio_08_40:
                                  Control: Button@0.0.45
                                  Properties:
                                    Appearance: ='ButtonCanvas.Appearance'.Transparent
                                    BorderRadius: =100
                                    FontColor: =IfError(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, If(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, App.Theme.Colors.Primary))
                                    LayoutMaxHeight: =
                                    LayoutMaxWidth: =
                                    OnSelect: =If(varViewHour, Set(varHour, Value(Self.Text)), Set(varMinute, Value(Self.Text)))
                                    Text: =If(varViewHour, "8", "40")
                                    Width: =32
                                    X: =(Parent.Width - Self.Width) / 2
                              - btn_Relogio_04_20:
                                  Control: Button@0.0.45
                                  Properties:
                                    Appearance: ='ButtonCanvas.Appearance'.Transparent
                                    BorderRadius: =100
                                    FontColor: =IfError(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, If(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, App.Theme.Colors.Primary))
                                    LayoutMaxHeight: =
                                    LayoutMaxWidth: =
                                    OnSelect: =If(varViewHour, Set(varHour, Value(Self.Text)), Set(varMinute, Value(Self.Text)))
                                    Text: =If(varViewHour, "4", "20")
                                    Width: =32
                                    X: =(Parent.Width - Self.Width) / 2
                        - ctn_LinhaRelogio_07_05:
                            Control: GroupContainer@1.5.0
                            Variant: AutoLayout
                            Properties:
                              DropShadow: =DropShadow.None
                              FillPortions: =0
                              Height: =Parent.Height / 7
                              LayoutAlignItems: =LayoutAlignItems.End
                              LayoutDirection: =LayoutDirection.Horizontal
                              LayoutJustifyContent: =LayoutJustifyContent.SpaceBetween
                              LayoutMaxHeight: =
                              LayoutMaxWidth: =
                              LayoutMinWidth: =100
                              PaddingLeft: =Self.Width * 20%
                              PaddingRight: =Self.PaddingLeft
                              RadiusBottomLeft: =0
                              RadiusBottomRight: =0
                              RadiusTopLeft: =0
                              RadiusTopRight: =0
                              Width: =300
                              X: =60
                              Y: =424
                            Children:
                              - btn_Relogio_07_35:
                                  Control: Button@0.0.45
                                  Properties:
                                    Appearance: ='ButtonCanvas.Appearance'.Transparent
                                    BorderRadius: =100
                                    FontColor: =IfError(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, If(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, App.Theme.Colors.Primary))
                                    LayoutMaxHeight: =
                                    LayoutMaxWidth: =
                                    OnSelect: =If(varViewHour, Set(varHour, Value(Self.Text)), Set(varMinute, Value(Self.Text)))
                                    Text: =If(varViewHour, "7", "35")
                                    Width: =32
                                    X: =(Parent.Width - Self.Width) / 2
                              - btn_Relogio_05_25:
                                  Control: Button@0.0.45
                                  Properties:
                                    Appearance: ='ButtonCanvas.Appearance'.Transparent
                                    BorderRadius: =100
                                    FontColor: =IfError(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, If(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, App.Theme.Colors.Primary))
                                    LayoutMaxHeight: =
                                    LayoutMaxWidth: =
                                    OnSelect: =If(varViewHour, Set(varHour, Value(Self.Text)), Set(varMinute, Value(Self.Text)))
                                    Text: =If(varViewHour, "5", "25")
                                    Width: =32
                                    X: =(Parent.Width - Self.Width) / 2
                        - ctn_LinhaRelogio_06:
                            Control: GroupContainer@1.5.0
                            Variant: AutoLayout
                            Properties:
                              DropShadow: =DropShadow.None
                              FillPortions: =0
                              Height: =Parent.Height / 7
                              LayoutDirection: =LayoutDirection.Horizontal
                              LayoutJustifyContent: =LayoutJustifyContent.Center
                              LayoutMaxHeight: =
                              LayoutMaxWidth: =
                              LayoutMinWidth: =100
                              PaddingRight: =Self.PaddingLeft
                              RadiusBottomLeft: =0
                              RadiusBottomRight: =0
                              RadiusTopLeft: =0
                              RadiusTopRight: =0
                              Width: =300
                              X: =60
                              Y: =424
                            Children:
                              - btn_Relogio_06_30:
                                  Control: Button@0.0.45
                                  Properties:
                                    Appearance: ='ButtonCanvas.Appearance'.Transparent
                                    BorderRadius: =100
                                    FontColor: =IfError(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, If(If(varViewHour, varHour = Value(Self.Text), varMinute = Value(Self.Text)), App.Theme.Colors.Darker10, App.Theme.Colors.Primary))
                                    LayoutMaxHeight: =
                                    LayoutMaxWidth: =
                                    OnSelect: =If(varViewHour, Set(varHour, Value(Self.Text)), Set(varMinute, Value(Self.Text)))
                                    Text: =If(varViewHour, "6", "30")
                                    Width: =32
                                    X: =(Parent.Width - Self.Width) / 2
                  - ctn_PainelHorario:
                      Control: GroupContainer@1.5.0
                      Variant: AutoLayout
                      Properties:
                        DropShadow: =DropShadow.None
                        Fill: =RGBA(255, 255, 255, 1)
                        Height: =72
                        LayoutAlignItems: =LayoutAlignItems.Center
                        LayoutDirection: =LayoutDirection.Horizontal
                        LayoutJustifyContent: =LayoutJustifyContent.Center
                        PaddingBottom: =8
                        PaddingLeft: =8
                        PaddingRight: =8
                        PaddingTop: =8
                        RadiusBottomLeft: =10
                        RadiusBottomRight: =10
                        RadiusTopLeft: =10
                        RadiusTopRight: =10
                        Width: =300
                        X: =(Parent.Width - Self.Width) / 2
                        Y: =66
                      Children:
                        - ctn_Hora:
                            Control: GroupContainer@1.5.0
                            Variant: AutoLayout
                            Properties:
                              BorderColor: =App.Theme.Colors.Lighter80
                              BorderThickness: =2
                              DropShadow: =DropShadow.None
                              Fill: =RGBA(255, 255, 255, 1)
                              LayoutAlignItems: =LayoutAlignItems.Center
                              LayoutDirection: =LayoutDirection.Horizontal
                              LayoutGap: =2
                              LayoutMaxHeight: =
                              LayoutMaxWidth: =
                              LayoutMinHeight: =50
                              LayoutMinWidth: =50
                              RadiusBottomLeft: =10
                              RadiusBottomRight: =10
                              RadiusTopLeft: =10
                              RadiusTopRight: =10
                              Width: =72
                              X: =1234
                              Y: =504
                            Children:
                              - btn_Hora:
                                  Control: Button@0.0.45
                                  Properties:
                                    AlignInContainer: =AlignInContainer.Stretch
                                    Appearance: ='ButtonCanvas.Appearance'.Transparent
                                    FillPortions: =1
                                    FontColor: =If(varViewHour, App.Theme.Colors.Primary, App.Theme.Colors.Lighter40)
                                    FontSize: =16
                                    LayoutMinHeight: =16
                                    LayoutMinWidth: =16
                                    OnSelect: =Set(varViewHour, true)
                                    Text: =Text(varHour, "00")
                              - txt_Hora:
                                  Control: TextInput@0.0.54
                                  Properties:
                                    AlignInContainer: =AlignInContainer.Stretch
                                    Appearance: ='TextInputCanvas.Appearance'.FilledLighter
                                    FontSize: =16
                                    LayoutMinHeight: =16
                                    LayoutMinWidth: =16
                                    OnChange: =If(Value(Self.Value) > 24, Set(_hour_value, 23), Set(_hour_value, Abs(Value(Self.Value))))
                                    TriggerOutput: ='TextInputCanvas.TriggerOutput'.Delayed
                                    Value: =Text(varHour, "00")
                                    Visible: =false
                                    Width: =52
                                    Y: =1
                              - ctn_SetasHora:
                                  Control: GroupContainer@1.5.0
                                  Variant: AutoLayout
                                  Properties:
                                    DropShadow: =DropShadow.None
                                    Height: =106
                                    LayoutAlignItems: =LayoutAlignItems.Center
                                    LayoutDirection: =LayoutDirection.Vertical
                                    LayoutGap: =5
                                    LayoutJustifyContent: =LayoutJustifyContent.Center
                                    LayoutMaxHeight: =
                                    LayoutMaxWidth: =
                                    LayoutMinHeight: =32
                                    LayoutMinWidth: =20
                                    RadiusBottomLeft: =0
                                    RadiusBottomRight: =0
                                    RadiusTopLeft: =0
                                    RadiusTopRight: =0
                                    Width: =32
                                    Y: =-1
                                  Children:
                                    - img_HoraMais:
                                        Control: Image@2.2.3
                                        Properties:
                                          AlignInContainer: =AlignInContainer.Stretch
                                          DisabledFill: =RGBA(0, 0, 0, 0)
                                          Height: =20
                                          Image: ="data:image/svg+xml;utf8, " & EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M4.22001 15.5303C4.36064 15.6708 4.55126 15.7497 4.75001 15.7497C4.94876 15.7497 5.13939 15.6708 5.28001 15.5303L12 8.81032L18.72 15.5303C18.7887 15.604 18.8715 15.6631 18.9635 15.7041C19.0555 15.7451 19.1548 15.7671 19.2555 15.7689C19.3562 15.7707 19.4562 15.7522 19.5496 15.7144C19.643 15.6767 19.7278 15.6206 19.799 15.5494C19.8703 15.4781 19.9264 15.3933 19.9641 15.2999C20.0019 15.2065 20.0204 15.1065 20.0186 15.0058C20.0168 14.9051 19.9948 14.8058 19.9538 14.7138C19.9128 14.6218 19.8537 14.539 19.78 14.4703L12.53 7.22032C12.3894 7.07987 12.1988 7.00098 12 7.00098C11.8013 7.00098 11.6106 7.07987 11.47 7.22032L4.22001 14.4703C4.07956 14.6109 4.00067 14.8016 4.00067 15.0003C4.00067 15.1991 4.07956 15.3897 4.22001 15.5303Z' fill='#C9C9C9'/> </svg>")
                                          LayoutMaxHeight: =
                                          LayoutMaxWidth: =
                                          LayoutMinWidth: =20
                                          OnSelect: =If(Value(varHour) = 24, Set(varHour, 0), Set(varHour, Value(btn_Hora.Text) + 1)); Select(btn_Hora)
                                          Width: =24
                                          X: =2
                                    - lbl_ValorHora:
                                        Control: Label@2.5.1
                                        Properties:
                                          Align: =Align.Center
                                          AlignInContainer: =AlignInContainer.Stretch
                                          Font: ="Microsoft Sans Serif"
                                          Height: =33
                                          LayoutMaxHeight: =
                                          LayoutMaxWidth: =
                                          LayoutMinWidth: =20
                                          Text: =Text(_hour_value, "00")
                                          Visible: =false
                                          Width: =42
                                          Y: =39
                                    - img_HoraMenos:
                                        Control: Image@2.2.3
                                        Properties:
                                          AlignInContainer: =AlignInContainer.Stretch
                                          DisabledFill: =RGBA(0, 0, 0, 0)
                                          DisplayMode: =If(_hour_value = 0, DisplayMode.Disabled, DisplayMode.Edit)
                                          Height: =20
                                          Image: ="data:image/svg+xml;utf8, " & EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M4.22001 8.47015C4.36064 8.3297 4.55126 8.25081 4.75001 8.25081C4.94876 8.25081 5.13939 8.3297 5.28001 8.47015L12 15.1902L18.72 8.47015C18.7887 8.39647 18.8715 8.33736 18.9635 8.29637C19.0555 8.25538 19.1548 8.23334 19.2555 8.23156C19.3562 8.22979 19.4562 8.24831 19.5496 8.28603C19.643 8.32375 19.7278 8.3799 19.799 8.45112C19.8703 8.52233 19.9264 8.60717 19.9641 8.70056C20.0019 8.79394 20.0204 8.89397 20.0186 8.99468C20.0168 9.09538 19.9948 9.19469 19.9538 9.28669C19.9128 9.37869 19.8537 9.46149 19.78 9.53015L12.53 16.7802C12.3894 16.9206 12.1988 16.9995 12 16.9995C11.8013 16.9995 11.6106 16.9206 11.47 16.7802L4.22001 9.53015C4.07956 9.38953 4.00067 9.1989 4.00067 9.00015C4.00067 8.8014 4.07956 8.61078 4.22001 8.47015Z' fill='#C9C9C9'/> </svg>")
                                          LayoutMaxHeight: =
                                          LayoutMaxWidth: =
                                          LayoutMinWidth: =20
                                          OnSelect: =Set(varHour, Value(btn_Hora.Text) - 1); Select(btn_Hora)
                                          Width: =24
                                          X: =2
                                          Y: =82
                        - ctn_SeparadorHoraMinuto:
                            Control: GroupContainer@1.5.0
                            Variant: AutoLayout
                            Properties:
                              DropShadow: =DropShadow.None
                              FillPortions: =0
                              Height: =104
                              LayoutAlignItems: =LayoutAlignItems.Center
                              LayoutDirection: =LayoutDirection.Vertical
                              LayoutGap: =10
                              LayoutJustifyContent: =LayoutJustifyContent.Center
                              LayoutMaxHeight: =
                              LayoutMaxWidth: =
                              LayoutMinHeight: =32
                              LayoutMinWidth: =32
                              PaddingBottom: =10
                              PaddingLeft: =10
                              PaddingRight: =10
                              PaddingTop: =10
                              RadiusBottomLeft: =0
                              RadiusBottomRight: =0
                              RadiusTopLeft: =0
                              RadiusTopRight: =0
                              Width: =20
                              X: =36
                              Y: =1
                            Children:
                              - lbl_SeparadorHoraMinuto:
                                  Control: Label@2.5.1
                                  Properties:
                                    Font: ="Microsoft Sans Serif"
                                    Height: =33
                                    LayoutMaxHeight: =
                                    LayoutMaxWidth: =
                                    Text: =":"
                                    Width: =11
                                    X: =10
                                    Y: =38
                        - ctn_Minuto:
                            Control: GroupContainer@1.5.0
                            Variant: AutoLayout
                            Properties:
                              BorderColor: =App.Theme.Colors.Lighter80
                              BorderThickness: =2
                              DropShadow: =DropShadow.None
                              Fill: =RGBA(255, 255, 255, 1)
                              LayoutAlignItems: =LayoutAlignItems.Center
                              LayoutDirection: =LayoutDirection.Horizontal
                              LayoutGap: =2
                              LayoutMaxHeight: =
                              LayoutMaxWidth: =
                              LayoutMinHeight: =50
                              LayoutMinWidth: =50
                              RadiusBottomLeft: =10
                              RadiusBottomRight: =10
                              RadiusTopLeft: =10
                              RadiusTopRight: =10
                              Width: =72
                              X: =40
                              Y: =40
                            Children:
                              - txt_Minuto:
                                  Control: TextInput@0.0.54
                                  Properties:
                                    AlignInContainer: =AlignInContainer.Stretch
                                    Appearance: ='TextInputCanvas.Appearance'.FilledLighter
                                    FontSize: =16
                                    LayoutMinHeight: =16
                                    LayoutMinWidth: =16
                                    OnChange: =If(Value(Self.Value) > 59, Set(_minute_value, 59), Set(_minute_value, Abs(Value(Self.Value))))
                                    TriggerOutput: ='TextInputCanvas.TriggerOutput'.Delayed
                                    Value: =Text(_minute_value, "00")
                                    Visible: =false
                                    Width: =50
                                    Y: =1
                              - btn_Minuto:
                                  Control: Button@0.0.45
                                  Properties:
                                    AlignInContainer: =AlignInContainer.Stretch
                                    Appearance: ='ButtonCanvas.Appearance'.Transparent
                                    FillPortions: =1
                                    FontColor: =If(!varViewHour, App.Theme.Colors.Primary, App.Theme.Colors.Lighter40)
                                    FontSize: =16
                                    LayoutMinHeight: =16
                                    LayoutMinWidth: =16
                                    OnSelect: =Set(varViewHour, false)
                                    Text: =Text(varMinute, "00")
                              - ctn_SetasMinuto:
                                  Control: GroupContainer@1.5.0
                                  Variant: AutoLayout
                                  Properties:
                                    DropShadow: =DropShadow.None
                                    FillPortions: =0
                                    Height: =106
                                    LayoutAlignItems: =LayoutAlignItems.Center
                                    LayoutDirection: =LayoutDirection.Vertical
                                    LayoutGap: =5
                                    LayoutJustifyContent: =LayoutJustifyContent.Center
                                    LayoutMaxHeight: =
                                    LayoutMaxWidth: =
                                    LayoutMinHeight: =32
                                    LayoutMinWidth: =32
                                    RadiusBottomLeft: =0
                                    RadiusBottomRight: =0
                                    RadiusTopLeft: =0
                                    RadiusTopRight: =0
                                    Width: =32
                                    X: =71
                                    Y: =-1
                                  Children:
                                    - img_MinutoMais:
                                        Control: Image@2.2.3
                                        Properties:
                                          AlignInContainer: =AlignInContainer.Stretch
                                          DisabledFill: =RGBA(0, 0, 0, 0)
                                          Height: =20
                                          Image: ="data:image/svg+xml;utf8, " & EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M4.22001 15.5303C4.36064 15.6708 4.55126 15.7497 4.75001 15.7497C4.94876 15.7497 5.13939 15.6708 5.28001 15.5303L12 8.81032L18.72 15.5303C18.7887 15.604 18.8715 15.6631 18.9635 15.7041C19.0555 15.7451 19.1548 15.7671 19.2555 15.7689C19.3562 15.7707 19.4562 15.7522 19.5496 15.7144C19.643 15.6767 19.7278 15.6206 19.799 15.5494C19.8703 15.4781 19.9264 15.3933 19.9641 15.2999C20.0019 15.2065 20.0204 15.1065 20.0186 15.0058C20.0168 14.9051 19.9948 14.8058 19.9538 14.7138C19.9128 14.6218 19.8537 14.539 19.78 14.4703L12.53 7.22032C12.3894 7.07987 12.1988 7.00098 12 7.00098C11.8013 7.00098 11.6106 7.07987 11.47 7.22032L4.22001 14.4703C4.07956 14.6109 4.00067 14.8016 4.00067 15.0003C4.00067 15.1991 4.07956 15.3897 4.22001 15.5303Z' fill='#C9C9C9'/> </svg>")
                                          LayoutMaxHeight: =
                                          LayoutMaxWidth: =
                                          LayoutMinWidth: =20
                                          OnSelect: =If(varMinute = 59, Set(varMinute, 0), Set(varMinute, Value(btn_Minuto.Text) + 1)); Select(btn_Minuto)
                                          Width: =24
                                          X: =2
                                    - lbl_ValorMinuto:
                                        Control: Label@2.5.1
                                        Properties:
                                          Align: =Align.Center
                                          AlignInContainer: =AlignInContainer.Stretch
                                          Font: ="Microsoft Sans Serif"
                                          Height: =33
                                          LayoutMaxHeight: =
                                          LayoutMaxWidth: =
                                          LayoutMinWidth: =20
                                          Text: =Text(_minute_value, "00")
                                          Visible: =false
                                          Width: =42
                                          Y: =39
                                    - img_MinutoMenos:
                                        Control: Image@2.2.3
                                        Properties:
                                          AlignInContainer: =AlignInContainer.Stretch
                                          DisabledBorderColor: =RGBA(222, 222, 222, 1)
                                          DisabledFill: =RGBA(0, 0, 0, 0)
                                          DisplayMode: =If(varMinute = 0, DisplayMode.Disabled, DisplayMode.Edit)
                                          Height: =20
                                          Image: ="data:image/svg+xml;utf8, " & EncodeUrl("<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'> <path d='M4.22001 8.47015C4.36064 8.3297 4.55126 8.25081 4.75001 8.25081C4.94876 8.25081 5.13939 8.3297 5.28001 8.47015L12 15.1902L18.72 8.47015C18.7887 8.39647 18.8715 8.33736 18.9635 8.29637C19.0555 8.25538 19.1548 8.23334 19.2555 8.23156C19.3562 8.22979 19.4562 8.24831 19.5496 8.28603C19.643 8.32375 19.7278 8.3799 19.799 8.45112C19.8703 8.52233 19.9264 8.60717 19.9641 8.70056C20.0019 8.79394 20.0204 8.89397 20.0186 8.99468C20.0168 9.09538 19.9948 9.19469 19.9538 9.28669C19.9128 9.37869 19.8537 9.46149 19.78 9.53015L12.53 16.7802C12.3894 16.9206 12.1988 16.9995 12 16.9995C11.8013 16.9995 11.6106 16.9206 11.47 16.7802L4.22001 9.53015C4.07956 9.38953 4.00067 9.1989 4.00067 9.00015C4.00067 8.8014 4.07956 8.61078 4.22001 8.47015Z' fill='#C9C9C9'/> </svg>")
                                          LayoutMaxHeight: =
                                          LayoutMaxWidth: =
                                          LayoutMinWidth: =20
                                          OnSelect: =Set(varMinute, Value(btn_Minuto.Text) - 1); Select(btn_Minuto)
                                          Width: =24
                                          X: =2
                                          Y: =82
                        - ctn_SeparadorMinutoAMPM:
                            Control: GroupContainer@1.5.0
                            Variant: AutoLayout
                            Properties:
                              DropShadow: =DropShadow.None
                              FillPortions: =0
                              Height: =104
                              LayoutAlignItems: =LayoutAlignItems.Center
                              LayoutDirection: =LayoutDirection.Vertical
                              LayoutGap: =10
                              LayoutJustifyContent: =LayoutJustifyContent.Center
                              LayoutMaxHeight: =
                              LayoutMaxWidth: =
                              LayoutMinHeight: =32
                              LayoutMinWidth: =32
                              PaddingBottom: =10
                              PaddingLeft: =10
                              PaddingRight: =10
                              PaddingTop: =10
                              RadiusBottomLeft: =0
                              RadiusBottomRight: =0
                              RadiusTopLeft: =0
                              RadiusTopRight: =0
                              Width: =20
                              X: =40
                              Y: =40
                            Children:
                              - lbl_SeparadorMinutoAMPM:
                                  Control: Label@2.5.1
                                  Properties:
                                    Font: ="Microsoft Sans Serif"
                                    Height: =33
                                    LayoutMaxHeight: =
                                    LayoutMaxWidth: =
                                    Text: =":"
                                    Width: =11
                                    X: =10
                                    Y: =38
                        - ctn_AMPM:
                            Control: GroupContainer@1.5.0
                            Variant: AutoLayout
                            Properties:
                              BorderColor: =App.Theme.Colors.Lighter80
                              BorderThickness: =2
                              DropShadow: =DropShadow.None
                              Fill: =App.Theme.Colors.Lighter80
                              FillPortions: =0
                              LayoutAlignItems: =LayoutAlignItems.Center
                              LayoutDirection: =LayoutDirection.Vertical
                              LayoutGap: =2
                              LayoutMinHeight: =16
                              LayoutMinWidth: =16
                              RadiusBottomLeft: =10
                              RadiusBottomRight: =10
                              RadiusTopLeft: =10
                              RadiusTopRight: =10
                              Width: =72
                            Children:
                              - btn_AM:
                                  Control: Button@0.0.45
                                  Properties:
                                    AlignInContainer: =AlignInContainer.Stretch
                                    Appearance: ='ButtonCanvas.Appearance'.Secondary
                                    BorderColor: =RGBA(255, 255, 255, 1)
                                    FontColor: =If(varAMPM = "AM", App.Theme.Colors.Primary, App.Theme.Colors.Lighter40)
                                    FontWeight: =FontWeight.Bold
                                    Height: =Parent.Height / 2 - 1
                                    LayoutMinHeight: =16
                                    LayoutMinWidth: =16
                                    OnSelect: =Set(varAMPM, "AM")
                                    Text: ="AM"
                              - btn_PM:
                                  Control: Button@0.0.45
                                  Properties:
                                    AlignInContainer: =AlignInContainer.Stretch
                                    Appearance: ='ButtonCanvas.Appearance'.Secondary
                                    BorderColor: =RGBA(255, 255, 255, 1)
                                    FontColor: =If(varAMPM <> "AM", App.Theme.Colors.Primary, App.Theme.Colors.Lighter40)
                                    FontWeight: =FontWeight.Bold
                                    Height: =Parent.Height / 2 - 1
                                    LayoutMinHeight: =16
                                    LayoutMinWidth: =16
                                    OnSelect: =Set(varAMPM, "PM")
                                    Text: ="PM"
                  - badge_EtapaHora:
                      Control: Badge@0.0.24
                      Properties:
                        Content: ="2"
                        Height: =40
                        Width: =40
                        X: =20
                        Y: =16
                  - lbl_TituloSelecaoHorario:
                      Control: Label@2.5.1
                      Properties:
                        BorderColor: =RGBA(0, 0, 0, 0)
                        BorderStyle: =BorderStyle.None
                        BorderThickness: =2
                        Color: =RGBA(50, 49, 48, 1)
                        DisabledBorderColor: =RGBA(0, 0, 0, 0)
                        DisabledColor: =RGBA(161, 159, 157, 1)
                        FocusedBorderThickness: =4
                        Font: =Font.'Segoe UI'
                        FontWeight: =FontWeight.Semibold
                        Height: =28
                        Text: ="Select Preferred Time"
                        Width: =271
                        X: =68
                        Y: =22
      - ctn_Footer:
          Control: GroupContainer@1.5.0
          Variant: AutoLayout
          Properties:
            DropShadow: =DropShadow.None
            FillPortions: =0
            Height: =100
            LayoutAlignItems: =LayoutAlignItems.Center
            LayoutDirection: =LayoutDirection.Vertical
            LayoutMinHeight: =16
            LayoutMinWidth: =16
            PaddingBottom: =8
            PaddingLeft: =8
            PaddingRight: =8
            PaddingTop: =8
            RadiusBottomLeft: =0
            RadiusBottomRight: =0
            RadiusTopLeft: =0
            RadiusTopRight: =0
          Children:
            - ctn_ResumoAgendamento:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  DropShadow: =DropShadow.None
                  LayoutAlignItems: =LayoutAlignItems.Center
                  LayoutDirection: =LayoutDirection.Horizontal
                  LayoutMinHeight: =16
                  LayoutMinWidth: =16
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                  X: =40
                  Y: =40
                Children:
                  - lbl_ResumoDataHora:
                      Control: Label@2.5.1
                      Properties:
                        Align: =Align.Center
                        Color: =App.Theme.Colors.Lighter40
                        Font: ="Roboto"
                        FontWeight: =FontWeight.Lighter
                        Height: =44
                        PaddingLeft: =8
                        Size: =If(Screen1.Width < 800, 12, 18)
                        Text: |-
                          ="Selected Time and Date " &
                          With(
                              {
                                  Hora24: Value(varHour),
                                  Minutos: Value(varMinute)
                              },
                              If(
                                  varAMPM = "AM",
                                  Text(Hora24, "[$-en-US]00") & ":" & Text(Minutos, "00") & " AM",
                                  Text(If(Hora24 = 12, 0, Hora24 + 12), "[$-en-US]00") & ":" & Text(Minutos, "00") & " PM"
                              )
                          ) & " " & Text(SelectedDate.Date, DateTimeFormat.LongDate)
                        Width: =Parent.Width
                        X: =(Parent.Width - Self.Width) / 2
                        Y: =58
            - ctn_AcaoConfirmar:
                Control: GroupContainer@1.5.0
                Variant: AutoLayout
                Properties:
                  DropShadow: =DropShadow.None
                  LayoutAlignItems: =LayoutAlignItems.Center
                  LayoutDirection: =LayoutDirection.Horizontal
                  LayoutMinHeight: =16
                  LayoutMinWidth: =16
                  RadiusBottomLeft: =0
                  RadiusBottomRight: =0
                  RadiusTopLeft: =0
                  RadiusTopRight: =0
                Children:
                  - btn_ConfirmarAgendamento:
                      Control: Button@0.0.45
                      Properties:
                        AlignInContainer: =AlignInContainer.Stretch
                        BorderRadius: =100
                        FillPortions: =1
                        FontWeight: =FontWeight.Bold
                        Icon: ="Checkmark"
                        LayoutMinHeight: =16
                        LayoutMinWidth: =16
                        Text: ="Confirm Appointment"

Weekly Line Chart (SVG no Power Apps)

Ana Andrade Gonsalves — Tue, 09 Sep 2025 14:55:04 +0000

"data:image/svg+xml;utf8," & EncodeUrl("<svg xmlns='http://www.w3.org/2000/svg' width='100%' height='100%' viewBox='0 0 140 70' shape-rendering='geometricPrecision' text-rendering='optimizeLegibility'>
  <title>Weekly line chart</title>
  <style>
    .grid { stroke: rgba(0,0,0,0); stroke-width: 0.4; }
    .axis-x { stroke: #d2d2d2; stroke-width: 0; }
    .line { stroke: #7551ff; stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
    .pt { fill: #ffffff; stroke: #7551ff; stroke-width: 1.2 }
    .label { font-family: Trebuchet MS, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-size: 4px; fill: #2D396B; }
    .value { font-family: Trebuchet MS, sans-serif; font-size: 4px; fill: #7551ff; }
  </style>

  <!-- grade -->
  <g class='grid'>
    <path d='M6 62.5 H134'/><path d='M6 41.5 H134'/><path d='M6 20.5 H134'/>
  </g>

  <!-- eixo X -->
  <line x1='6' y1='64' x2='134' y2='64' class='axis-x'/>

  <!-- linha suavizada -->
  <path class='line'
        d='M6,62.15
           C9.55,57.84 20.22,38.31 27.33,36.31
           C34.44,34.31 41.56,52.30 48.67,50.15
           C55.78,47.99 62.89,27.23 70.00,23.38
           C77.11,19.54 84.22,22.03 91.33,27.08
           C98.44,32.13 105.56,55.51 112.67,53.66
           C119.78,51.81 130.44,22.28 134.00,16.00'
        pathLength='100' stroke-dasharray='100' stroke-dashoffset='100'>
    <animate attributeName='stroke-dashoffset' dur='1.6s' begin='0s'
             values='100;0' keyTimes='0;1' calcMode='spline'
             keySplines='.25 .1 .25 1' fill='freeze'/>
  </path>

  <!-- pontos + valores (deslocados para caber bem) -->
  <g>
    <circle class='pt' cx='6' cy='62.15' r='1'/><text class='value' x='6' y='57' text-anchor='middle'>1</text>
    <circle class='pt' cx='27.33' cy='36.31' r='1'/><text class='value' x='27.33' y='31' text-anchor='middle'>15</text>
    <circle class='pt' cx='48.67' cy='50.15' r='1'/><text class='value' x='48.67' y='45' text-anchor='middle'>7.5</text>
    <circle class='pt' cx='70' cy='23.38' r='1'/><text class='value' x='70' y='18' text-anchor='middle'>22</text>
    <circle class='pt' cx='91.33' cy='27.08' r='1'/><text class='value' x='91.33' y='22' text-anchor='middle'>20</text>
    <circle class='pt' cx='112.67' cy='53.66' r='1'/><text class='value' x='112.67' y='48' text-anchor='middle'>5.6</text>
    <circle class='pt' cx='134' cy='16' r='1'/><text class='value' x='134' y='11' text-anchor='middle'>26</text>
  </g>

  <!-- rótulos do eixo X -->
  <g class='label' text-anchor='middle'>
    <text x='6' y='69' text-anchor='start'>Mon</text>
    <text x='27.33' y='69'>Tue</text>
    <text x='48.67' y='69'>Wed</text>
    <text x='70' y='69'>Thr</text>
    <text x='91.33' y='69'>Fri</text>
    <text x='112.67' y='69'>Sat</text>
    <text x='134' y='69' text-anchor='end'>Sun</text>
  </g>
</svg>")

Criei um gráfico de linha semanal 100% em SVG, com animação e rótulos. Ele renderiza direto em um controle Image – sem componentes externos.

Como usar

Adicione um Image à tela.
Na propriedade Image, cole o conteúdo do bloco de código abaixo (começa com data:image/svg+xml;utf8, + EncodeUrl(...)).
Ajuste o tamanho do Image (ex.: Largura 400 / Altura 200) para manter a proporção.
Valores: edite os números nos e (ex.: 1, 15, 7.5, 22, ...).

Gráfico no Power Apps 📊

Ana Andrade Gonsalves — Mon, 01 Sep 2025 00:14:42 +0000

Muitas vezes precisamos representar dados de forma visual dentro de um aplicativo no Power Apps, mas nativamente a plataforma não oferece gráficos muito avançados.

Uma solução prática é utilizar o serviço QuickChart, que gera imagens de gráficos a partir de URLs configuradas.

="https://quickchart.io/chart?c=" & EncodeUrl("{ type: 'doughnut', data: { datasets: [ { data: [" & Left(varChartData, Len(varChartData) - 1) & "], backgroundColor: [ '#215570', '#1B6B78', '#4C90A6', '#2D3847', '#F4F8FA', '#FFFFFF' ], borderColor: '#FFFFFF', borderWidth: 0, hoverBorderWidth: 0, borderRadius: 100 } ], labels: [" & Left(varChartLabels, Len(varChartLabels) - 1) & "] }, options: { responsive: true, title: { display: true, text: 'Status dos pedidos', position: 'top', fontSize: 16, fontFamily: 'Poppins,Poppins Light,Poppins-Bold,Poppins-ExtraBold,sans-serif', fontColor: '#2D3847', fontStyle: 'bold', padding: 10, lineHeight: 1.9 }, plugins: { legend: { display: false }, tooltip: { callbacks: { label: function (context) { let label = context.label || ''; let value = context.raw || 0; return${label}: ${value}; } } }, datalabels: { display: true, align: 'center', anchor: 'center', backgroundColor: '#F4F8FA', borderColor: '#2D3847', borderRadius: 5, borderWidth: 1, padding: 4, color: '#215570', font: { family: 'Poppins,Poppins Light,Poppins-Bold,Poppins-ExtraBold,sans-serif', size: 12, style: 'bold' } } }, cutout: '60%', rotation: 0.1, circumference: 6.283185307179586 } }")

Dados

Agrupando os pedidos por STATUS

ClearCollect( colStatusSummary, AddColumns( GroupBy( colPedidos, STATUS, GrupoStatus ), CountStatus, CountRows(GrupoStatus) ) );

GroupBy(colPedidos, STATUS, GrupoStatus) → agrupa todos os registros de colPedidos por status.

AddColumns(..., CountStatus, CountRows(GrupoStatus)) → adiciona uma coluna CountStatus com a contagem de registros de cada grupo.

Criando a string com os valores
Set( varChartData, Concat( colStatusSummary, CountStatus & "," ) );
Criando a string com os labels
Set( varChartLabels, Concat( colStatusSummary, "'" & STATUS & "'," ) );

Paleta de cores

Dica final

Você pode alterar o tipo de gráfico (bar, line, pie, doughnut, etc.) e brincar com os parâmetros do JSON.
Mais exemplos podem ser encontrados na documentação oficial do QuickChart
.