Today I will have a look at relative positioning of elements in PowerApps. As you add elements like labels, icons,input boxes or anything else on the screen you will find that you often change your mind about the exact location of these elements.
When you then move one element on the screen other elements should move as well. Getting this right can be done in multiple ways. In this post I will look at the options an I will look at the pros and cons for each of the options.
I’m going to use two icons as an example. In my examples I’ve got an orange triangle and a blue rectangle. As I place these two icons on the screen and I decide to move the icons I will need to move both icons. This is probably not too much of a problem when it is just about two icons, but what if I have many elements on the page and I had to move each one of them.
The better way could be to connect the elements in such a way that they are connected. See below, as the blue rectangle is moved the orange triangle is moved with the blue rectangle.
In this case this is done by calculating the position of the triangle relatively to the position of the rectangle.
The above way becomes complicated very quickly. Also If I decided to move the triangle the X and Y settings would be set to a number and I would lose the relative location. A better way to sort this out is grouping. By selecting all items it is possible to group the selected items with a right mouse click.
When you group elements it is important however that you move group of elements in one go. As shown below, the icons at the left are grouped and even thoguh I can move each shape independently when I want to move all the elements I will have to select the group of elements first.
There is another option. Components is still in preview however it can also help you organise multiple elements. Once enabled in your app you can take advantage of this option.
Again I created a component with the same shapes. When working with components there are a few things to consider. PowerApps gives you an empty component canvas of a preset size. Once you put all your elements in your component you might want to resize the component to the minimum size.
Also rather than using the Components default name ( e.g. Component1, you might want to rename them to something sensible!). I renamed mine to MyShapes and when I try to add the Component to the app I can now easily recognise my Component.
Once I’ve added my components to my screen,I can now move the rectangle and triangle without the option to accidentally separate them.
You might however still need to re-position the elements in the component. this can be done by updating the component. When you update the component the instance of the component will change directly within the app itself.
Of all the options described above there are pros and cons. The components ideas great however it is still in preview. I’m quite hopeful that components will come out of preview one day, but while it is in preview it should come with a warning.
I also like the idea of being able to push settings into a component that can influence the elements inside my component, but that is something to look at in one of my next posts.