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

"data:image/svg+xml;utf8, " & EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
        <path d='M0 100 L100 100 L50 50 Z M10 75 L90 75 L50 35 Z M20 50 L80 50 L50 15 Z' fill='#008A00' />
        <g fill='#EA0000'>
            <circle cx='55' cy='40' r='5'/>
            <circle cx='40' cy='60' r='5'/>
            <circle cx='60' cy='80' r='5'/>
            <circle cx='30' cy='90' r='5'/>
        </g>
        <g fill='#FFFF00'>
            <path d='M50 0 L40 15 L60 15 Z'/>
            <path d='M40 5 L60 5 L50 20 Z' />
        </g>
    </svg>"
)

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

"data:image/svg+xml;utf8, " & EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
        <path d='M0 100 L100 100 L50 50 Z M10 75 L90 75 L50 35 Z M20 50 L80 50 L50 15 Z' fill='#008A00' />
        <g fill='" & Parent.BaubleColour & "'>
            <circle cx='55' cy='40' r='5'/>
            <circle cx='40' cy='60' r='5'/>
            <circle cx='60' cy='80' r='5'/>
            <circle cx='30' cy='90' r='5'/>
        </g>
        <g fill='#FFFF00'>
            <path d='M50 0 L40 15 L60 15 Z'/>
            <path d='M40 5 L60 5 L50 20 Z' />
        </g>
    </svg>"
)

Day 3 – Use Table Input

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

"data:image/svg+xml;utf8, " & EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
        <path d='M0 100 L100 100 L50 50 Z M10 75 L90 75 L50 35 Z M20 50 L80 50 L50 15 Z' fill='#008A00' />
        <g fill='" & Last(FirstN(Parent.BaubleColours,vvBaubleColourNumber)).BColour & "'>
            <circle cx='55' cy='40' r='5'/>
            <circle cx='40' cy='60' r='5'/>
            <circle cx='60' cy='80' r='5'/>
            <circle cx='30' cy='90' r='5'/>
        </g>
        <g fill='#FFFF00'>
            <path d='M50 0 L40 15 L60 15 Z'/>
            <path d='M40 5 L60 5 L50 20 Z' />
        </g>
    </svg>"
)

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

"data:image/svg+xml;utf8, " & EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
        <path d='M0 100 L100 100 L50 50 Z M10 75 L90 75 L50 35 Z M20 50 L80 50 L50 15 Z' fill='#008A00' />
        <g fill='" & Last(FirstN(Parent.BaubleColours,vvBaubleColourNumber)).BColour & "'>
            <circle cx='55' cy='40' r='5'/>
            <circle cx='40' cy='60' r='5'/>
            <circle cx='60' cy='80' r='5'/>
            <circle cx='30' cy='90' r='5'/>
        </g>
        <g fill='#D4AF37'>
            <path d='M50 0 L40 15 L60 15 Z'/>
            <path d='M40 5 L60 5 L50 20 Z' />
            <animateTransform attributeName='transform'
                attributeType='XML'
                type='rotate'
                from='0 50 10'
                to='360 50 10'
                dur='10s'
                repeatCount='indefinite'/>
        </g>
    </svg>"

)

Day 5 – Flexible Resizing of SVG

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

SVG Code

"data:image/svg+xml;utf8, " & EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg'>
        <rect x='0' y='0' width='100%' height='100%' fill='blue'/>
        <g fill='red'>
            <rect x='45%' y='0' width='10%' height='100%'/>
            <rect x='0' y='45%' width='100%' height='10%'/>
        </g>
    </svg>"
)

Day 6 – Patterned Presents

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

"data:image/svg+xml;utf8, " & EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg'>
        <defs>
            <pattern id='paper' viewBox='0,0,10,10' width='10%' height='10%'>
                " & LookUp(Parent.Patterns,PatternName=Parent.PatternName,Pattern) & "
            </pattern>
        </defs>
        <rect x='0' y='0' width='100%' height='100%' fill='url(#paper)'/>
        <g fill='red'>
            <rect x='45%' y='0' width='10%' height='100%'/>
            <rect x='0' y='45%' width='100%' height='10%'/>
        </g>
    </svg>"
)

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.

"data:image/svg+xml;utf8, " & EncodeUrl(
    "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
        <path d='M0 0 L33 0 L100 67 L67 100 L0 33 Z' fill='tan' />
        <text x='10' y='60' font-size='30' transform='rotate(45,50,50)'>" & Parent.TagName & "</text>
    </svg>"
)

Day 8 – Star Rating

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

With(
    {StarColour:If(
        ThisItem.Value<='Day08 Star Rating'.Score,
        "Gold",
        "LightGrey"
        )
    },
    "data:image/svg+xml;utf8, " & EncodeUrl(
        "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
        <path fill='" & StarColour & "' d='m50,2 12,34h36l-28,22 10,34-30-20-30,20 10-34-28-22h36z'/>
    </svg>"
    )
)

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

With(
    {
        SVG: "<path d='m50,25 c20,-58 100,0 0,75 c-100,-75 -20,-132 0,-75z' />",
        ClipWidth: 100 * Parent.Score
    },
    "data:image/svg+xml;utf8, " & EncodeUrl(
        "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
            <defs><clipPath id='HeartClip'>
                <rect x='0' y='0' height='100' width='" & ClipWidth & "' />
            </clipPath></defs>
            <g fill='LightGrey'>" & SVG & "</g>
            <g fill='Red' clip-path='url(#HeartClip)'>" & SVG & "</g>
            <text x='50' y='50' text-anchor='middle' fill='white' font-size='25'>" & ClipWidth & "%</text>
    </svg>"
    )
)

SVG Code to fill from the bottom up

With(
    {
        SVG: "<path d='m50,25 c20,-58 100,0 0,75 c-100,-75 -20,-132 0,-75z' />",
        ClipHeight: 100 * Parent.Score,
        ClipY: 100 - 100 * Parent.Score
    },
    "data:image/svg+xml;utf8, " & EncodeUrl(
        "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
            <defs><clipPath id='HeartClip'>
                <rect x='0' y='" & ClipY & "' height='100' width='100' />
            </clipPath></defs>
            <g fill='LightGrey'>" & SVG & "</g>
            <g fill='Red' clip-path='url(#HeartClip)'>" & SVG & "</g>
            <text x='50' y='50' text-anchor='middle' fill='white' font-size='25'>" & ClipHeight & "%</text>
    </svg>"
    )
)

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

With(
    {
        StarSVG: "<path d='m50,2 12,34h36l-28,22 10,34-30-20-30,20 10-34-28-22h36z'/>",
        ClipWidth: 100 * ('Day10 Star Rating Improved'.Score - ThisItem.Value + 1)
    },
    "data:image/svg+xml;utf8, " & EncodeUrl(
        "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'>
            <defs><clipPath id='StarClip'>
                <rect x='0' y='0' height='100' width='" & ClipWidth & "' />
            </clipPath></defs>
        <g fill='LightGrey'>" & StarSVG & "</g>
        <g fill='Gold' clip-path='url(#StarClip)'>" & StarSVG & "</g>
    </svg>"
    )
)

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

With(
    {
        SVGArch: "<path d='M 0 50 A 50 50 0 0 1 100 50 L80 50 A 30 30 0 0 0 20 50' /> ",
        SVGRotate: 180 * Parent.Score
    },
    "data:image/svg+xml;utf8, " & EncodeUrl(
        "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'>
            <g fill='LightBlue'>" & SVGArch & "</g>
            <line x1='0' y1='50' x2='20' y2='50' stroke-width='1' stroke='black' 
            transform='rotate(" & SVGRotate & " 50 50)' />
    </svg>"
    )
)

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

With(
    {
        SVGArch: "<path d='M 0 50 A 50 50 0 0 1 100 50 L80 50 A 30 30 0 0 0 20 50' /> ",
        SVGRotate: 180 * Parent.Score,
        RedRotate: -180 * (1 - Parent.RedScore),
        AmberRotate: -180 * (1 - Parent.AmberScore)
    },
    "data:image/svg+xml;utf8, " & EncodeUrl(
        "<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 50'>
            <g fill='Green'>" & SVGArch & "</g>
            <g fill='Gold' transform='rotate(" & AmberRotate & " 50 50)' >" & SVGArch & "</g>
            <g fill='Red' transform='rotate(" & RedRotate & " 50 50)'>" & SVGArch & "</g>
            <line x1='0' y1='50' x2='20' y2='50' stroke-width='1' stroke='black' 
            transform='rotate(" & SVGRotate & " 50 50)' />
    </svg>"
    )
)

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

Categories:ComponentsPowerAppsSVGUncategorized

Tags:Component Power Apps SVG

Laura GB

Over 20 year experience at being passionate about training, solving problems and loving a new challenge especially in the Microsoft's Power Platform suite.

Cathy says:

20th January 2020 at 4:34 am

I’ve only watched 4 so far and I have learned more about how to use components than any of the Microsoft tutorials. Thank you for sharing this.
- Laura GB says:
  
  20th January 2020 at 6:47 am
  
  Really glad you enjoyed the videos. Let me know what you create.

Day 1 – Create a Component

Day 2 – Add an Input

Day 3 – Use Table Input

Day 4 – Use SVG Transform

Day 5 – Flexible Resizing of SVG

Day 6 – Patterned Presents

Day 7 – Add a Tag using SVG Text and Rotate

Day 8 – Star Rating

Day 9 – Fill a shape using SVG Clip

Day 10 – Fill Part stars using SVG Clip

Day 11 – Draw a Gauge

Day 12 – Add Colours to that Gauge

Conclusion

Related Posts

SVG in Power BI – Part 4 – Adding Text

PowerApps – Function Component

SVG in Power BI Part 7 – Using a Theme to add SVG Icons

SVG in Power BI – Part 3 – Fill up with Colour

Power Apps – Animating SVG Fill Colour and Size

SVG in Power BI Part 2 – KPI Shapes

2 Responses