COMPONENTS: Foggy on Custom Property OUTPUTS

[seadude]

Hello,

I feel like I'm getting a decent grasp on:
- Using variables within a component

- Passing variables from app to a component

But I'm unable to feed variables from a component to the app.

Example:

- I have a simple screen component with a menu and subheader

- When a menu item is pressed, the subheader is updated with the menu item name

- I now need to show/hide app elements based on which menu item is pressed

  - Example: App elements with Visible properties set to If(component.cmpSubheading = "Introduction", true, false)

- I created a custom text output property called cmpSubheading

- But I can't figure out:

    1. How to set the subheading to cmpSubheading property within the component

    2. How to access component.cmpSubheading once the component has been added to the app.

        a. It is not present in the components property list

Hope this is clear

Thank you

[v-xida-msft · Accepted solution]

Hi @seadude ,

Could you please share a bit more about your scenario?

Do you want to reference the custom Output property of your Component from your app?

Further, could you please share a bit more about the subheader that you mentioned? Is it a Label control? Could you please share a screenshot about your Component?

I have made a test on my side, please take a try with the following workaround:

For your first question, when you defined a Output property within your Component, then you need to click "Advanced" option within your right panel, then you could see your custom Output property (cmpSubheading) display there:

Within the cmpSubheading (Output) box, you need to bind it to your subheader control. I assume that your subheader control is a Label control, then you need to type the following formula within the cmpSubheading (Output) box:

Subheader.Text

For your second question, if you have added above Component into your app already, you could use the following formula to reference the cmpSubheading property of the Component:

Component1_1.cmpSubheading

Please check the following GIF screenshot for more details:

Best regards,

[Mr-Dang-MSFT]

@seadude, can you let us know if you were able to set up the output with @v-xida-msft's instructions?

[seadude]

Hi @v-xida-msft and @Mr-Dang-MSFT !

I was able to use @v-xida-msft 's method of binding the Subheading.Text Property to the Custom Output Property / Advanced field. I'm going to go out on a limb and say, this is not intuitive from an experienced App Maker perspective.

I'd prefer to keep track of which Custom Properties are Input and Output then have ALL of the them available in the Component Property dropdown. I have never used the "Advanced" (nor really the right "Properties" pane at all) when building apps.
I always use the Properties Dropdown for a Control.

Thank you for the valuable insights. Now I can rock once again!

[seadude]

PS: Kris, the animated .gif really helped me understand the solution!

[seadude]

PPS: If its helpful for enhancement purposes, here is an example of where I was hung up...

- I'm used to all Properties of a Control being available in the top left dropdown...

- To have to define an Output property THEN intantiate it in the Advanced pane, THEN have to call it out by dot notation BUT, not have it visible in the Properties Dropdown where EVERY other property is visible... is the non-intuitive part...

"subHeading" is the Custom Output Property.

[seadude]

Hi @v-xida-msft ,

Quick question: How do I access the OnSelect of a Component (or Gallery within a component)?

Example:

* Menu Gallery within a Component

* When user clicks Menu item, I want to Navigate them to different screens

* I've created a Custom Output Property, but can't figure out how to access it when user clicks the Component from the app.

Any ideas?

**EDIT** Disregard. Here is an example of how to use a Gallery menu within a Component to Navigate:

https://powerusers.microsoft.com/t5/Components-Gallery/Header-amp-Menu-Component/td-p/328654

Thank you