COMPONENTS: Emit Custom Property OnSelect?

[ericonline]

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 !. 

[RezaDorrani]

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

[ericonline]

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

[ericonline]

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

[v-yutliu-msft]

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,

[ericonline]

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"?

[RandyHayes]

@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.

[haniel]

Another option is to build on @RezaDorrani's recommendation.  What I've done was set up a timer that checks the output variable every 100ms and sets a variable.  Simple way to deal with the navigation.

-Haniel