Power Apps – 12 Days of Components

Madly I decided I was going to do 12 videos on Power App components and they have had a heavy focus using SVG. This post is to provide the code and resources for each video.

Day 1 – Create a Component

Video walks through turning on components, adding an SVG image and then adding the component to a screen within the app.

SVG Code

1
2
3
4
"data:image/svg+xml;utf8, " & EncodeUrl(
    "
        "
)

Day 2 – Add an Input

This video adds an input, called BaubleColour which is a HEX string, to the Christmas tree component to allow the component user to select a colour for the baubles.

SVG Code

1
2
3
4
"data:image/svg+xml;utf8, " & EncodeUrl(
    "
        "
)

Day 3 – Use Table Input

$Day 3 Video\n$

This video uses a table of HEX strings called BaubleColours to provide a list of colours for the baubles. The colours are cycled through using a timer control.

SVG Code

1
2
3
4
"data:image/svg+xml;utf8, " & EncodeUrl(
    "
        "
)

Day 4 – Use SVG Transform

This video does a simple transform in SVG to make the star on the top of the tree rotate.

SVG Code

1
2
3
4
5
"data:image/svg+xml;utf8, " & EncodeUrl(
    "
        "

)

Day 5 – Flexible Resizing of SVG

Using percentage values within the SVG make the image flexible when the component is resized.

SVG Code

1
2
3
4
5
6
7
8
9
"data:image/svg+xml;utf8, " & EncodeUrl(
    "
        
        
            
            
        
    "
)

Day 6 – Patterned Presents

Using SVG patterns and a list of patterns we can add patterns to the present wrappings.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
"data:image/svg+xml;utf8, " & EncodeUrl(
    "
        
            " & LookUp(Parent.Patterns,PatternName=Parent.PatternName,Pattern) & "
            
        
        
        
            
            
        
    "
)

Excel File for SVG Patterns

Day 7 – Add a Tag using SVG Text and Rotate

Using SVG Text and rotate we can create another component to draw a tag that uses an input of the name to label each present.

1
2
3
4
5
"data:image/svg+xml;utf8, " & EncodeUrl(
    "
        " & Parent.TagName & "
    "
)

Day 8 – Star Rating

Rate your New Year Resolution progress with a star rating drawn with a little SVG and a gallery.

1
2
3
4
5
6
With(
    {StarColour:If(
        ThisItem.Value
        "
    )
)

Day 9 – Fill a shape using SVG Clip

Fill up a heart in colour to visualise a percentage value using a component containing SVG using a clip path.

SVG Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
With(
    {
        SVG: "",
        ClipWidth: 100 * Parent.Score
    },
    "data:image/svg+xml;utf8, " & EncodeUrl(
        "
            
                
            
            " & SVG & "
            " & SVG & "
            " & ClipWidth & "%
    "
    )
)

SVG Code to fill from the bottom up

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
With(
    {
        SVG: "",
        ClipHeight: 100 * Parent.Score,
        ClipY: 100 - 100 * Parent.Score
    },
    "data:image/svg+xml;utf8, " & EncodeUrl(
        "
            
                
            
            " & SVG & "
            " & SVG & "
            " & ClipHeight & "%
    "
    )
)

Day 10 – Fill Part stars using SVG Clip

Combining the star rating from Day 9 with the clip path from Day 10 we can improve the star rating to show part stars for a score of 2.5 etc.

SVG Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
With(
    {
        StarSVG: "",
        ClipWidth: 100 * ('Day10 Star Rating Improved'.Score - ThisItem.Value + 1)
    },
    "data:image/svg+xml;utf8, " & EncodeUrl(
        "
            
                
            
        " & StarSVG & "
        " & StarSVG & "
    "
    )
)

Day 11 – Draw a Gauge

Draw a simple gauge to show a percentage value using an arch and rotating a line with a simple transform.

SVG Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
With(
    {
        SVGArch: " ",
        SVGRotate: 180 * Parent.Score
    },
    "data:image/svg+xml;utf8, " & EncodeUrl(
        "
            " & SVGArch & "
            - "
    )
)

Day 12 – Add Colours to that Gauge

Lets add some colour to the gauge from day 11 of this series. We look at rotate again and how moving items partly outside the view box hides that part.

SVG Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
With(
    {
        SVGArch: " ",
        SVGRotate: 180 * Parent.Score,
        RedRotate: -180 * (1 - Parent.RedScore),
        AmberRotate: -180 * (1 - Parent.AmberScore)
    },
    "data:image/svg+xml;utf8, " & EncodeUrl(
        "
            " & SVGArch & "
            " & SVGArch & "
            " & SVGArch & "
            
    "
    )
)

Conclusion

I thoroughly enjoyed building the different components and working out the SVG code to use. I hope you have enjoyed watching. Below is the link to download a zip of the MSApp file for the components.

https://hatfullofdata.blog/wp-content/uploads/2020/01/12-Days-of-Components.zip