Skip to main content

Notifications

Announcements

Announcing our 2025 Season 1 Super Users!
Welcome to the Power Platform Communities
Join us for the Powerful Devs Hack Together
Announcing Forum Attachment Improvements!
News and Announcements icon
Power Platform Community / Blogs / Power Apps - Community Blog / Components from Components ...

Components from Components - Dynamic Tags

wyattdave Profile Picture wyattdave 406



In this example we are going to build our own dynamics tags, an example is Power DevBox Shortcut, a Edge/Chrome Extension which creates custom tags to filter your environments by


Why Not A Gallery

A Gallery seems like the easy way, but it doesn't allow the tags per row to be dynamic (see how first 2 have 2, then 3, all due to the length of each tag).

Setup

Before we start we need a few components on the screen

  • A container (named tags) - this is out box holding the tags, its width sets how may tags per row
  • 10 buttons named bu1,bu2,bu3,etc inside the container - these are out tags.
  • Gallery - this is used to set the tags text
  • onStart collection (named colTags) - this collection contains our tags and key parameters
ClearCollect(colTags,[
    {
        index:1,
        button:bu1,
        visible:true,
        text:"Favourites",
        x:10,
        y:10
    },
    {
        index:2,
        button:bu2,
        visible:true,
        text:"",
        x:0,
        y:0
    },
    {
        index:3,
        button:bu3,
        visible:true,
        text:"",
        x:0,
        y:0
    },
...replace with 4-9
,
    {
        index:10,
        button:bu10,
        visible:true,
        text:"",
        x:0,
        y:0
    }
    ]
)

The Tags (Buttons)

We set the buttons parameters to the collection:
  • Width:  
20+(CountRows(MatchAll(Self.Text,"[ijlrtIJLRT]"))*5)+
(CountRows(MatchAll(Self.Text,"[wmWM ]"))*12)+
(CountRows(MatchAll(Self.Text,"[^ijlrtIJLRTwmWM ]"))*8)
- this makes the buttons width dynamic to the length of text
  • Text: LookUp(colTags,button=Self).text
  • Visible: LookUp(colTags,button=Self).visible
  • X: LookUp(colTags,button=Self).x
  • Y: LookUp(colTags,button=Self).y

Calculate the Tags Position

To calculate the Tags position we use a user defined function and a couple of user defined values.

The user defined values are:

viPadding=10;

flexXY:=Type(
    {
        X: Number,
        Y: Number
    }
);

flexIn:=Type(
    {
        Y: Number,
        X: Number,
        Width: Number,
        ThisWidth: Number,
        ThisHeight: Number,
        Padding: Number,
        Tags: Number
    }
);
flexXY is what the UDF returns and flexIn is the inputs. We use the previous tags X,Y,Width and the tag we want to positions Width(ThisWidth), Height(ThisHeight), the padding we want between the buttons, and finally the width of our container (Tags).

So if we were positioning bu4, padding was 10 and the container was 400 wide then it would look like this:


  Y: bu3.X
  X: bu3.Y
  Width: bu3.Width
  ThisWidth: bu4.Width
  ThisHeight: bu4.Height
  Padding: 10
  Tags: 400

The UDF looks like this:
flexPosition(inputs:flexIn):flexXY=(
    If(inputs.Tags>(inputs.X+inputs.Width+(inputs.Padding*2)+inputs.ThisWidth),
        { 
            X:(inputs.X+inputs.Width+inputs.Padding),
            Y:inputs.Y
        }   
    ,
        { 
            X:inputs.Padding,
            Y:(inputs.Y+inputs.ThisHeight+inputs.Padding)
        }   
    )
);
It checks to see if the end of the tag (the previous tags X + previous tags width + padding + tags width+ padding) is greater then the width of the container. If it is it moves it to the next line.

Update the Tags

To update/add tags we use the gallery with the colTags as its data source. Each gallery item has a text input which on change patches the text of the collection, updating the tags.

But because the X,Y parameters are not volatile (they don't get updated unless an interaction) we have to loop over every tag in the collection and recalculate the X,Y, so that they move as well.

Patch(colTags,ThisItem,
    {
        text:Self.Value,
        visible:Len(Self.Value)>0
    }
);


ForAll(colTags,
    With(
        {ThisTag:ThisRecord},
        If(ThisTag.index>1,
            With(
                {
                    input:flexPosition(
                        {
                            X:Index(colTags,ThisTag.index-1).button.X,
                            Y:Index(colTags,ThisTag.index-1).button.Y,
                            Width:Index(colTags,ThisTag.index-1).button.Width,
                            ThisWidth:ThisTag.button.Width,
                            ThisHeight:ThisTag.button.Height,
                            Padding:If(Index(colTags,ThisTag.index-1).visible,viPadding,0),
                            Tags:Tags.Width
                        }
                    )
                },

                Patch(colTags,ThisTag,
                    {
                        x:input.X,
                        y:input.Y
                    }
                )
            )
        ,
            Patch(colTags,ThisTag,
                {
                    x:viPadding,
                    y:viPadding
                }
            )
        )
    )
)

Conclusion

And that's it, now when ever a new tag is added it appears in the container, if its to long it wraps to the next line. Best of all its all responsive, so if the container changes or the button changes, everything reacts (more of a challenge then you realise).


A working export named Tags has fully working demo can be downloaded here GitHub/WyattDave/Power-Platform

This is a series of short blogs designed to help create new components from existing components, keep your eyes out for more
Stacked Notification Toasts 
Components from Components - Extendable Text Input

l also do long form and broader Power Platform blogs here https://dev.to/wyattdave
code snippet widget

Comments