You must enable user-defined functions and user-defined types in the preview and experimental features.
Copy the code and paste it into the App.Formulas object of your application.
Here is a YAML snippet that shows an example of how to use these functions:
- GalleryContrastCheck:
Control: Gallery@2.15.0
Variant: Vertical
Properties:
Height: =509
Items: |-
=[
{Color1:Color.Black,Color2:Color.White},
{Color1:Color.MintCream,Color2:Color.DarkMagenta},
{Color1:Color.LightPink,Color2:Color.DarkRed},
{Color1:Color.AliceBlue,Color2:Color.SteelBlue},
{Color1:Color.BlanchedAlmond,Color2:Color.HotPink}
]
TemplateSize: =90
Width: =1574
X: =208
Y: =332
Children:
- Container2:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
Height: =Parent.TemplateHeight
LayoutDirection: =LayoutDirection.Horizontal
LayoutGap: =10
PaddingBottom: =10
PaddingLeft: =10
PaddingRight: =10
PaddingTop: =10
Width: =Parent.TemplateWidth
Children:
- TextCanvas2:
Control: Text@0.0.51
Properties:
Align: ='TextCanvas.Align'.End
AlignInContainer: =AlignInContainer.Stretch
PaddingLeft: =10
PaddingRight: =10
Size: =18
Text: |-
=$"Color 1
{Mid(JSON(ThisItem.Color1),2,7)}"
VerticalAlign: =VerticalAlign.Middle
Width: =120
- Rectangle3:
Control: Rectangle@2.3.0
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderStyle: =BorderStyle.Dashed
BorderThickness: =3
Fill: =ThisItem.Color1
LayoutMinHeight: =20
Width: =90
- TextCanvas2_7:
Control: Text@0.0.51
Properties:
Align: ='TextCanvas.Align'.End
AlignInContainer: =AlignInContainer.Stretch
PaddingLeft: =10
PaddingRight: =10
Size: =18
Text: |-
=$"Color 2
{Mid(JSON(ThisItem.Color2),2,7)}"
VerticalAlign: =VerticalAlign.Middle
Width: =120
- Rectangle3_1:
Control: Rectangle@2.3.0
Properties:
AlignInContainer: =AlignInContainer.Stretch
BorderStyle: =BorderStyle.Dashed
BorderThickness: =3
Fill: =ThisItem.Color2
LayoutMinHeight: =20
Width: =90
- Container3:
Control: GroupContainer@1.3.0
Variant: AutoLayout
Properties:
Fill: =ThisItem.Color1
FillPortions: =0
LayoutDirection: =LayoutDirection.Horizontal
LayoutMinHeight: =50
Width: =300
X: =40
Y: =40
Children:
- Label3:
Control: Label@2.5.1
Properties:
Align: =Align.Center
AlignInContainer: =AlignInContainer.Stretch
Color: =ThisItem.Color2
FillPortions: =1
Size: =17
Text: ="Text sample"
- Icon4:
Control: Classic/Icon@2.5.0
Properties:
Color: =ThisItem.Color2
Icon: =Icon.Diamond
PaddingBottom: =10
PaddingLeft: =10
PaddingRight: =10
PaddingTop: =10
- Label3_1:
Control: Label@2.5.1
Properties:
Align: =Align.Center
AlignInContainer: =AlignInContainer.Stretch
Color: =udfContrastRatioRGBA(ThisItem.Color1,ThisItem.Color2).Color
Fill: =ColorFade(udfContrastRatioRGBA(ThisItem.Color1,ThisItem.Color2).Color,90%)
FillPortions: =1
FontWeight: =FontWeight.Bold
Size: =17
Text: |-
=$"WCAG22 Compliance : {udfContrastRatioRGBA(ThisItem.Color1,ThisItem.Color2).Compliance} ({udfContrastRatioRGBA(ThisItem.Color1,ThisItem.Color2).Value}:1)"
Width: =350
