How to add content to the Panel component

[PowerThomas]

I have started a new Canvas app using the App Template. I have included a Panel component, but I struggle to get my content into this component. I cannot really find specific instructions in the docs to do this. I'm expecting some kind of placeholder where I can drop my controls in. Or am I just thinking too hard and instead should I follow a different approach by just adding a separate container on top of the dialog and show/hide it with the same 'showHidePanel' variable?

[slaouist]

Hello @tcvdw1605, the panel has few output properties that helps you overlay your content. ContentX, ContentY, ContentWidth & ContentHeight. In your case, you should set your form properties as follow: Form.X = Panel.ContentX, Form.Y = Panel.ContentY, Form.Width = Panel.ContentWidth and Form.Height = Panel.ContentHeight. Let me know if you have any question. We will update our documentation and reference app to include this example. Thank you for the feedback

[jean-goyat]

Might there be different values required for content Y,Height,Width? Using the values you specify places my content closer to the top right corner.

Here is what I ended up with to make it relatively more centered but is probably not ideal without a Content Padding property:

X=Panel.ContentX
Y=Panel.ContentY-Panel.ContentWidth+Panel.DialogWidth
Width=Panel.ContentWidth*2-Panel.DialogWidth
Height=Panel.ContentHeight+Panel.ContentWidth-Panel.DialogWidth

[sperry1625]

The values for the Output properties for the Panel control are wrong. I have noticed the following:

1. Some of the formulas do not allow the panel to be smaller than 340px wide. For example, the shadow. The inconsistency messes with alignments when that constraint is universal. I updated my version to never allow the panel to be smaller than 340. I'm not sure why that restriction is in place, but I chose to continue the restriction than try and see what happens if I remove it. Another time perhaps.
2. ContentX is PanelContentContainer.X + CenterPanelContainer.X + CenterPanelContainer.PaddingLeft which makes sense but is wrong. To get any content aligned properly you need to drop the CenterPanelContainer.PaddingLeft
3. ContentY is PanelHeaderContainer.Height + CenterPanelContainer.Y (I believe that was original value) but it should be CenterPanelContainer.Y + (PanelHeaderContainer.Height + PanelHeaderContainer.Y) + Label_PanelContent.Height Taking Title label and Sub title label position and size into account, not just the Title height.

After these adjustments to the component, using the output properties perfectly aligned my form.

I hope folks find this helpful.

Thanks.

Steven Perry

[denise-msft]

This has been fixed and is described in the documentation: https://learn.microsoft.com/en-us/power-platform/guidance/creator-kit/panel#format-panel-content