cancel
Showing results for 
Search instead for 
Did you mean: 
Reply
Highlighted
Super User
Super User

COMPONENTS: Emit Custom Property OnSelect?

Hello,

I have a screen component with a menu inside. Menu items are "Cancel", "Help", "Submit".

How do I get the Component to provide output when a menu item is selected? I'm almost certain its with a Custom Output Property, but these still don't make sense to me.

Example

  • User clicks "Cancel" on the component menu, this sets varSpinner to true which allows for an "Are you sure?" popup 

Example2:

  • User clicks "Submit", specific OnSelect logic that is not part of the component is executed

Here is an example of a similar component in action; thanks to @yashag2255 !. 

6 REPLIES 6
Super User
Super User

Re: COMPONENTS: Emit Custom Property OnSelect?

Hi @ericonline 

 

Create a custom property of type output and define its type 

 

Next in your component on select of your Menu Items (buttons or labels) set variable (Set Variable function) to value to output based on each tab selection (this variable is within scope of the component instance only)

In the compoment properties, set default value for the output property as the variable 

 

Next on the screen where the component is setup to read value use componentname.outputpropertyname

 

Regards,

Reza Dorrani

 

If this post helps, then please consider Accept it as the solution to help the other members find it more quickly

 

 

 

Super User
Super User

Re: COMPONENTS: Emit Custom Property OnSelect?

Hm... 

  • Created custom output property called cmpCancel (Text type)
  • Set the component menu label OnSelect to Set(varSelectedItem, ThisItem.displayName)
    • "displayName" is the name that appears on the menu button
  • Set cmpRespSecondaryScreen.cmpCancel to varSelectedItem
  • Even made sure under Advanced Properties that .cmpCancel was set to varSelectedItem
  • On Screen with component, insert a Label (popup) with Visible set to Switch(customOutputProperty, "Cancel", true)
  • Click "Cancel"... nothing. 
  • Highlight cmpRespSecondaryScreen_1.cmpCancel in the formula bar and the result is blank

image.png

image.png

image.png

Super User
Super User

Re: COMPONENTS: Emit Custom Property OnSelect?

It appears that varSelectedItem is only getting set when I click the menu in the master component, not in the screen component. 

Community Support Team
Community Support Team

Re: COMPONENTS: Emit Custom Property OnSelect?

Hi @ericonline ,

The reason why you met this problem is that global variable is not supported in component.

Components are meant to be portable.  You should be able to create a component in one place and use it in many.  If it relies on global variables or other aspects of your App - it will not be portable.

So I suggest you remove all your formulas about global variables inside component.

Here are similar issues for your reference:

https://powerusers.microsoft.com/t5/General-Discussion/Components-Global-variable/td-p/242546

https://powerusers.microsoft.com/t5/Creating-Apps/Components-and-Global-Variables/td-p/241650

 

 

Best regards,

Community Support Team _ Phoebe Liu
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Super User
Super User

Re: COMPONENTS: Emit Custom Property OnSelect?

Hm. What do you say here, @RezaDorrani ? Is it possible to emit the selected menu item from a Component or does it require @RandyHayes "toggle hack"?

Super User
Super User

Re: COMPONENTS: Emit Custom Property OnSelect?

@ericonline 

Actions on components are a little tricky because there is no action that can be raised on them (Yet...see idea on this.)

 

In the meantime, what I do is a combination of things. 

First - the setup - my menus are usually variable depending on the screen they are on, so the menu items are in a collection (established usually OnStart).  The Collection is a table of items that include the menu name to be displayed, the type of menu item it is (I account for checkboxes, buttons, labels, etc to be types in the menu).  The collection item also has the screen name that it will appear on.  And, most important, it has an ID (this is used later). 

Next - the component - The menu component is fairly simple. It has a custom Items property defined that takes a table.  In the component is a Gallery (galMenu) that displays the menu items from the Items property.  It uses a checkbox control in it to display the proper information.  And, based on the item type, it will "fake" the checkbox to look like a label, a button, or just a checkbox.  I also use icons passed to it in the collection/table to make it a little more friendly, and I also accommodate direct navigation to screens (but, i will not complicate this response with that right now). The one important property that the component has is a MenuChoices custom property (which is a table type output property).  The formula on that property is ForAll(galMenu.AllItems, {ID : ID, val: chkMenuItem.Value})  This is very important as this is what will "signal" to your app what has happened in the control.

 

Next - now that the component is defined, back to the app - The custom control is placed on the screen (compMyMenu) and then the Items property is given a formula like this : Filter(colMenuItems, scrn=App.ActiveScreen.Name)  (I also have some menu items that are defined in the collection that appear on all screens and don't have to be re-defined screen-by-screen - but again, I will not complicate things here).

 

That is it for the menu.  It is a functioning menu now, BUT - how to get it to respond to actions?  Enter the Toggle control.  

Using as an example a menu choice to delete something.  What I want to happen is to have a pop-up message for confirmation.  In my menu collection (that is assigned and filtered by screen to the menu component), I have a menu choice called "Delete", it has an ID of (let's say) 5.

SO, first, I add a toggle to the screen and set the default property to Coalesce(Lookup(compMyMenu.MenuChoices, ID=5, val), false)  This will cause the toggle to go true whenever the menu item is chosen in the component.  

Important thing to do here next - the OnChange action of the toggle should have this formula in it: UpdateIf(colMenuItems, scrn=App.ActiveScreen.Name && ID=5, {val: Lookup(compMyMenu.MenuChoices, ID=5, val)}) This will ensure that our main application collection gets updated with the proper value as it should now exist based on the menu choice...which is important because the component menu will now also update based on that change.  Kind of a circular thing, but this way all the values are in sync.

Finally - the pop up I want has its Visible property set to Lookup(colMenuItems, scrn=App.ActiveScreen.Name && ID=5, val) when the toggle above changes the val in the collection, this pop up appears.  IN that pop up there is ultimately (in both accept or cancel options in my case) a formula that sets the menu option back to false UpdateIf(colMenuItems, scrn=App.ActiveScreen.Name && ID=5, {val:false})  and when that happens, the menu choice goes back to false and the pop up goes away.

 

So, ultimately, yes the toggle is the trick, but the real trick is to do this in a way that the component is not customized for the app (kind of defeats the purpose of a portable component).  IN this case, the menu is not customized to its hosted app and is flexible enough to use everywhere.  Drawback is that it needs a supporting toggle on the screen, but it's fairly minor at this point.  AND, once they get actions on components, I believe life will be better.

 

One other little gotcha I have found (I believe just a bug in the components at this time), if you go back and alter the custom items property of the menu component, it will reset all the defined components' items property...so you have to go back through and put your filter formula back in.  This is actually why I simplified and put all menu items in one collection and had a simple filter function on the property.  Otherwise I was going crazy having to put all the tables back in over and over.

 

Anyway.  I hope this is helpful for you.  I apologize that I have been SO quiet on the forum lately.  I've been swamped on a bit PowerApps propject and have not had much bandwidth.  But, I will be back here again in full force soon and plan to do some videos on these type of solutions...if people think it would be helpful.  In the meantime, just @ me in the message when you need me and I will try and respond.

_____________________________________________________________________________________
Digging it? - Click on the Thumbs Up. Solved your problem? - Click on Accept as Solution. Others seeking the same answers will be happy you did.

Helpful resources

Announcements
firstImage

Microsoft Business Applications Virtual Launch Event

Join us for an in-depth look at the new innovations across Dynamics 365 and the Microsoft Power Platform.

firstImage

Watch Sessions On Demand!

Continue your learning in our online communities.

Power Platform 2019 release wave 2 plan

Power Platform 2019 release wave 2 plan

Features releasing from October 2019 through March 2020

FirstImage

Power Platform World Tour

Coming to a city near you

thirdimage

PowerApps Community User Group Member Badge

Fill out a quick form to claim your user group badge now!

FourthImage

Join PowerApps User Group!!

Connect, share, and learn with your peers year-round

Top Kudoed Authors
Users Online
Currently online: 54 members 3,385 guests
Please welcome our newest community members: