Multiple Component Instances - Circular Reference Error

[james_hathaway]

I have been experimenting with Components in order to make some very useful reusable controls.

I have created a Component that is basically a Gallery of Buttons - it has input Parameters of "Items" (Single column Table of Text values) and "Default" (Text) - and an Output Parameter "Selected" (Text) to show the selected Gallery Item - This is a common pattern used to create Menu Components that can be re-used on multiple screens.

I am using 2 instances of this Component to make a Menu -> Sub-Menu arragement, with the Sub-Menu showing a filtered list of sub-menu Items that are applicable to the Selected Menu Item - (I have a Collection that describes the 1:N relationship)

Component_Instance_1.Items = ["New", "In Progress", "Complete"]

(So the Component_Instance_1.Selected will be something like "New")

RelationshipCollection = [

     {Stage: "New", SubStage: "Investigating"},

     {Stage: "New", SubStage: "Validating"},

     {Stage: "In Progress", SubStage: "Step 1"},

     {Stage: "In Progress", SubStage: "Step 2"},

    .... etc

]

ComponentInstance_2.Items =

   RenameColumns(

     ShowColumns(

         Filter(RelationshipCollection, Stage=Component_Instance_1.Selected),

     "SubStage"),

   "Result","Value")

You should be able to ignore the RenameColumns and ShowColumns aspect - this just turns the filtered list into a single columns of text values - plus, I have tried MANY different methods of creating this table for the SubStage component - the only issue is the Filter Formula - I am getting a Circular Reference Error, even though there is NOT any circular reference.

I believe it must be a limitation of the components functionality, as the only real reason I can think of that a circular reference is created is within the Root Component, as I am setting the "Items" input parameter to the "Selected" output parameter - even thought I am doing this accross 2 seperate instances of the component, PowerApps is throwing this circular reference error.

I have tried all sorts of workarounds, like using an intermediate textbox or label to hold the selected value of the first component instance, but when that new control is referenced in the 2nd component instance, the same circuilar reference error pops up)

Has anyone else had issues with this behaviour?

Does anyone know a viable workaround that I might not have tried yet?

Can someone from MS confirm if this is a Bug in the Components functionality?

And if So, can you let us know when it might be fixed?

Thanks in Advance.

James.

[ShantanuP]

@RandyHayes , The rename issue that you mentioned is fixed in 3.21103 version. You mentioned above usage of variables in components caused some problems for you. Do you have a specific example of it so that we can recreate this issue on our end to fix it? 

The property removal issue that you mentioned is definitely annoying. If you still see that issue then please share a session id for it. We can investigate on our end.

@BeamMeUpScottyT , The issue that you mentioned above, does it repro after renaming a component? Is it the same issue that @RandyHayes mentioned. How do I recreate this issue on my end?

[dave-jorgensen]

Hi. 

the steps I outlined causes an issue, adding multiples of the same component

1. add component (just give it an input parameter and display value in a label in the component)
2. set the property
3. Add 2nd instance of the same component
4. Set the property (you'll see both components get set to same value)
5. Save, close, re-open
6. Now both components will work fine.

ShantanuP, I've had a ticket open on a component bug and no one is responding to my emails on it. Would you mind looking into case number 2108270010001879 for me, it's a really bad component bug. Please have someone reach out to me on it - maybe re-assign it to someone else?

[ShantanuP]

@dave-jorgensen , I am not seeing the issue on my end. I am using version 3.21093.48. Are you missing any step above? 

Here is a snapshot

Definition is here

[dave-jorgensen]

No, only difference I wonder about - I have the components in a component library, maybe that makes a difference? Other than that, are you in a normal Production environment or is it a preview environment, since we as developers are almost always in a production environment where as support tends to always be in a preview environment and thus a couple versions ahead of us developers.

[ShantanuP]

No I am in production environment and using 3.21093.48. I tried it component library as well but don't see an issue. Can you share your component definition snapshot? Share msapp file here if you can. 

[RandyHayes]

@ShantanuP 

Good to hear on the new version!

A while back when a variable was used in a component, it became global to all components.  So, if your component changed a variable in it, all of the other components on the screen would update with that same variable value from the first component.

Now, I cannot say if this condition still exists as 1) rarely use variables anyway 2) avoid them at all costs and are not usually needed in components anyway.

So, it is possible that this condition was fixed since 5/16/21 when I put a post about it. Haven't had a need to reattempt using them.

Yes, the property removal thing was a mind-bender for me at first.  Had no idea why the app would not save.  Finally isolated it to making that one change to remove a property.  Then duplicate, delete, rename and all was well.  Not sure even how to duplicate that problem, but if I see it again, I will make mention of it.

[RandyHayes]

@dave-jorgensen 

I don't see that problem either.  I am confused on your steps.

In step 1, you said add component - does this mean that you are creating the component or adding it to your app?  I ask because you then said to give it an input parameter and display value in a label.  If you were adding the component to your app, you would not be doing those steps!?

It seems like there is something missing in your steps...like after step 1 is an insert the Component into your app, then step 2 and so on.

[dave-jorgensen]

Hi ShantanuP.

I figured out what causes the "multiple instances of same component in an app" to all have the same values. It's caused when you rename the instance of one of the components in the app.

1. Add component to app
2. Add another of the same component to the app
3. Set a property in each of the components, but to a different value
4. Edit the name of one of the components
5. Both components now show the same value

NOTE: saving, closing, and re-opening the app fixes this

1. Now both components 

[juanmarcadena]

Hello, 

I am facing the same issue as @james_hathaway. I have two instances of a component that has a Combobox. I want to make the selection (selected items) of the first component and plug it in the items of the second component. It says that there is a circular reference error because I cannot reference different properties in the same component. But there are different instances of the component! As mentioned by @RandyHayes, there is no sense in having components if there are no different instances of them.

I would appreciate any help,

Juan Martin

[Ragnar56]

Same issue of circular reference error between 2 instances of the same component with Power Apps v3.23013.12 !

I found 3 workarounds :

1. Allow App Scope from within the component and create a global var and to use this var between component instead of component regular output. But as you may be using several instances of the same component this can be confusing as it will also share other component var between multiple instances of the same component, as local variables are not permitted inside componants.
2. Ask the user to click outsed the component and set a var with the output value from the component, as it will break the circular refrence. But you may want that to be automatic without user action.
3. Set a timer that will get the component output and initialize a var in order to automate var initialization.