How To Force Canvas Apps To Update An Edited Component

Frustrations With Updating a Component

Canvas Apps Components are an experimental feature that allow app creators to define a component that can be used in multiple places within an app, or in multiple apps, allowing for reuse and more DRY apps.  On a recent project I ran into an issue where, when attempting to update a component, it created a new component, and left the old version of my component in the app.  This means if I wanted the new changes from the component, I would have had to manually replace every instance of my component in the app.  Not fun!

What's Going On?

The Canvas App studio is attempting to be nice and keep from losing any changes that were made in a component inside your app.  It does this by "un-linking" the component from the source component whenever you update the component in the app that it is being used in, rather than the source app that it is being exported from.  So how does one "re-link" the app specific component to the source?

Canvas App Packager to the Rescue!!!

Using the Canvas App Packager, I was able to see what was going on in the app itself to link/unlink the component by unpacking the app and looking at the changes under the hood.  By default when a component is imported into an app, the Properties.json file contains the template for the component with the following header information:

But when an edit is made to the component in the app, the OriginalName property is removed, and the IsComponentLocked variable is set to false.  To allow the component to be refreshed when the component is reloaded, these will need to be added back.  The simplest approach to determining the OriginalName, is to re-add the component, making a duplicate, and then unpacking the app again to see what the OriginalName should be.  After adding back the OriginalName, flip the IsComponentLocked back to true, and pack and re-import the app.  Viola!  Now if the source component is imported again, it will actually update the component in the app rather than creating a duplicate!